网页性能优化

1. 网络加载

⑴ DNS预加载

通过dns-prefetch属性可以让浏览器提前解析资源或接口对应的服务器IP地址，避免在请求中发起DNS解析请求，节省请求时间。


⑵ CDN加速

解决因分布、带宽、服务器性能带来的访问延迟问题，适用于站点加速、点播、直播等场景。使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度和成功率。


CDN的优点：
 本地Cache加速，加快访问速度
 镜像服务，消除运营商之间互联的瓶颈影响，保证不同网络的用户都能得到良好的访问质量
 远程加速，自动选择cache服务器
 带宽优化，分担网络流量，减轻压力，
 集群抗攻击
 节约成本

⑶ 资源预加载

利用preload，prefetch，preconnect属性我们可以在内部声明式的书写资源获取请求，提前加载非首屏但又较重要的资源，避免在满足首屏优先加载的情况下，反而忽略了其他次重要资源的加载；

⑷ http缓存头的设定

HTTP缓存包括强缓存（Cache-Control，Expire）和协商缓存（Last-modified, Etag）两种。其中，协议缓存资源每次都会像服务端发送请求来判断资源是否过期，未过期则返回304，在网络极其卡顿的情况下，这个304请求有可能堵塞整个页面的资源加载；

⑸ 对JS资源按照模块和首屏需求进行优先加载，不需要的模块按需加载

移动端的网络资源有限，为了尽快让用户看到有意义的首屏，我们需要尽可能的保持首屏需要加载的资源越小越好；

⑹ 内联首屏关键CSS

将首屏关键样式内联至页面中，保证最快速度看到带有基本样式的首屏，避免用户端出现较长时间的白屏时间；

⑺ 内联关键JS代码

内联关键代码也是为了让用户第一时间感受到页面已经加载成功，但是内联代码不能将所有代码都内联至HTML中，因为这些代码每次都会伴随HTML下载下来，加大HTML文件的体积，也无法让代码在不同的网页间提供复用的功能。

⑻ 检查服务端下发的资源是否使用GZIP压缩

GZIP对于文本资源（JS，CSS文件）有较高的压缩效率，通常可以减少70%的体积。但是不是每个浏览器都支持gzip的，如果知道客户端是否支持gzip呢，请求头中有个Accept-Encoding来标识对压缩的支持。客户端http请求头声明浏览器支持的压缩方式，服务端配置启用压缩，压缩的文件类型，压缩方式。当客户端请求到服务端的时候，服务器解析请求头，如果客户端支持gzip压缩，响应时对请求的资源进行压缩并返回给客户端，浏览器按照自己的方式解析，在http响应头，我们可以看到content-encoding:gzip，这是指服务端使用了gzip的压缩方式。

⑼ 避免资源的重定向

增大加载时间，用户体验较差。

⑽ 异步延迟加载第三方非关键代码

移动端网络资源有限，为了让这些不重要的代码不影响首屏渲染，可以延迟一小段时间再加载；

⑾ 合理的使用本地缓存（sessionstorage和localstorage），避免把不必要的数据全部放到cookie当中

因为客户端添加了很多cookie，在每次请求的时候都会将所有cookie，都提交到服务器，太多时 会造成400错误；

⑿ 使用service worker，增加页面的离线体验和页面的加载体验
页面发送请求时，会先经过SW的脚本，这样可以让我们通过编程的方式来制定我们需要缓存的文件，同时，缓存在service worker中的文件，可以让用户离线访问；
参考：https://segmentfault.com/a/1190000012353473?utm_source=tag-newest

⒀ 在条件允许的情况下，可以使用HTTP2.0协议

HTTP2.0协议可以提升网络链路的复用性，提升资源加载效率；见http 2.0和1.1的对比。

2. HTML

⑴ 注重标签的语义化，保持用最简洁的标签完成所需的功能

标签的语义化（见HTML5中新增的语义化标签）提高代码的可维护性，在页面加载CSS失败时也不至于很难看。同时，需要保持标签最小化，无意义的标签可以利用伪类表示；

⑵ CSS放到head中，JS放到body尾部，JS和CSS都需要放在head中时，JS即放在前面：

JS 和 CSS 在页面中的位置，会影响其他资源（指 img 等非 js 和 css 资源）的加载顺序，究其原因，有三个值得注意的点：

• js 有可能会修改 DOM， 典型的，可能会有 document.write， 这意味着，在当前 js 加载和执行完成前，后续所有资源的下载有可能是没必要的。这是 js 阻塞后续资源下载的根本原因。

• js 的执行有可能依赖最新样式。比如，可能会有 var width = $('#id').width(). 这意味着，js 代码在执行前，浏览器必须保证在此 JS 之前的所有 css（无论外链还是内嵌）都已下载和解析完成。这是 css 阻塞后续 js 执行的根本原因。

• 现代浏览器很聪明，会进行 prefetch 优化。性能是如此重要，现代浏览器在 竞争中，在 UI update 线程之外，还会开启另一个线程，对后续 JS 和 CSS 提前下载（注意，仅提前下载，并不执行）。有了 prefetch 优化，这意味着，在不存在任何阻塞的情况下，理论上 js 和 css 的下载时机都非常优先，和位置无关。
  参考：https://www.erdangjiade.com/topic/133487.html
  https://www.jianshu.com/p/0291ad9ac8fb

⑶ HTML代码压缩，去除注释、空白符

减少网络传输的文件大小。

⑷ 尽量避免使用iframe

iframe 内资源的下载进程会阻塞父页面静态资源的下载与 CSS 及 HTML DOM 的解析，window 的 onload 事件需要在所有 iframe 加载完毕后(包含里面的元素)才会触发。

3. CSS

⑴ 压缩CSS代码，排除重复的CSS样式

减少网络传输的文件大小。

⑵ 根据组件打包CSS文件

按需加载，减少网络传输的文件大小。

⑶ 避免使用CSS的@import语法

可能阻塞页面的加载，@import引用的CSS会等到页面全部被下载完再被加载，所以网速如果受限制 那就会加载出只有框架无样式的网页，而且@import有个数限制。

⑷ 使用Sass、Stylus、Less等预编译语言时，编码CSS嵌套不超过3层
提高解析css的效率；

⑸ 使用autoprefixer给CSS代码自动增加前缀

自动帮助我们添加浏览器头，避免意想不到的浏览器兼容性问题。

⑹ 尽量少使用css通配符（*），特别是多层嵌套的末尾使用通配符

CSS的解析过程是从右往左逆向匹配，使用CSS通配符会增加解析的计算量。

⑺ 不要滥用高消耗的样式

box-shadow、border-radius这些属性绘制前都需要浏览器进行大量的计算。

4. 动画

⑴ 简单动画尽量只使用transform、opacity、transition等属性完成

width、height、top、left、right、bottom、margin等属性的变更都会触发页面的重排，在移动端环境中频繁的重排会导致动画卡顿。

⑵ 较复杂动画可以使用css帧动画

在移动端兼容性好、性能好、更具有可操控性。

⑶ js动画不要使用setTimeout、setInterval，使用requestAnimationFrame

setTimeout和setInterval在动画执行存在性能问题，且无法准确的控制帧数。

5. JavaScript

⑴ JS代码压缩，代码分模块加载

减少代码大小，根据页面需求按需加载资源，最下化用户需要加载的资源大小加快页面展示的速度；

⑵ 处理长列表或者大量DOM元素时，不要绑定太多的事件监听函数

节省内存和减少监听事件的注册，比如使用事件代理等；

• 添加到页面上的事件数量会影响页面的运行性能，如果添加的事件过多，会导致网页的性能下降。采用事件代理的方式，可以大大减少注册事件的个数。
• 事件代理的当时，某个子孙元素是动态增加的，不需要再次对其进行事件绑定。
• 不用担心某个注册了事件的DOM元素被移除后，可能无法回收其事件处理程序，我们只要把事件处理程序委托给更高层级的元素，就可以避免此问题。

⑶ 利用throttle和debounce函数去处理频发触发，但是不需要频发执行的函数，例如scroll,touchmove

避免频繁的无效的操作，避免页面的卡顿，详情见防抖和节流一文：https://blog.youkuaiyun.com/zl13015214442/article/details/90600153；

⑷ 利用setTimeout代替setInterval

setInterval可能存在指令堆积的问题，导致页面卡顿；

⑸ 尽量避免大批量的重排重绘（回流）

页面的重排重绘很耗性能，尤其是重排（回流）。

6. 图片

⑴ 使用工具压缩图片

移动端网络条件有限，图片越大加载时间越长，合理使用工具压缩图片，可以兼顾图片质量和图片大小。

⑵ 用较高压缩比格式的文件webp

使用具有较高压缩比格式的图片，如webp等。在同等图片画质的情况下，高压缩比格式的图片体积更小，能够更快完成文件传输，节省网络流量。减少文件传输的大小，避免出现图片尺寸使用不当的问题，小icon用大图。

⑶ 使用雪碧图

CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中，从而减少你的网站的HTTP请求数量。该图片使用CSS background和background-position属性渲染，这也就意味着你的标签变得更加复杂了，图片是在CSS中定义，而非<img>标签。减少http请求数，不过当我们的http协议升级至1.1，2.0之后，雪碧图减少http请求数的效果并不明显；

⑷ 图片懒加载

避免用户提前加载过多无用的资源，浪费用户流量，详情见博文懒加载实现一文：https://blog.youkuaiyun.com/zl13015214442/article/details/88600300；

⑸ 根据不同的屏幕像素比加载不同尺寸的图片

在较大像素比的屏幕下加载小尺寸的图片，图片会模糊；在较小像素比的屏幕下加载大尺寸的图片，会浪费用户流量和cdn流量；

⑹ 小于2KB的图片可以尝试使用base64格式去替换

在页面使用的背景图片不多且较小的情况下，可以将图片转化成base64编码嵌入到HTML页面或CSS文件中，这样可以减少页面的HTTP请求数。需要注意的是，要保证图片较小，一般图片大小超过2KB就不推荐使用base64嵌入显示了。将图片转换成base64格式可以减少http请求数量，但是，不能对较大尺寸的图片使用base64格式，因为base64算法会提升三分之一的文件大小；

7. 字体

⑴ 压缩字库大小，避免加载过多无用的资源，推荐工具字蛛

我们只需要页面需要的字体文件即可，不需要浪费流量加载用户不需要的资源；

⑵ 优化字体的展示策略

使用font-display属性可以避免在字体加载过程中，不显示文字的问题；

⑶ 当特殊文字量较少且内容固定时，可以尝试使用图片代替

快速完美的还原界面。