前端性能-优化手段

Posted 2021-06-17 natsu-cc

前言：

---

移动互联网时代，用户对于网页的打开速度要求越来越高，其重要性不言而喻。优化用户体验更是我们前端开发非常需要关注的东西之一。

从用户的角度而言，当打开一个网页，往往关心的是从输入完网页地址后到最后展现完整页面这个过程需要的时间，这个时间越短，用户体验越好。所以作为网页的开发者，就从输入url到页面渲染呈现这个过程中去提升网页的性能。

加载优化：

---

加载过程是最为耗时的过程，可能会占到总耗时的80%时间，因此是优化的重点！

减少HTTP请求：

Chrome目前支持在一个域名domain下，同时发起6个并行的HTTP请求，而网页中的的图片、form、flash等等元素都会发出HTTP请求，尽可能的有效的减少HTTP请求数量。

• 合并CSS、javascript；
• 图片：雪碧图，图标字体文件，data:url；
• 少用location.reload；
  
  

缓存：

如果图片或者脚本，样式文件内容比较固定，不经常被修改，可以使用缓存可以减少向服务器的请求数，节省加载时间，所以所有静态资源都要在服务器端设置缓存，并且尽量使用长Cache（长Cache资源的更新可使用时间戳）。

• 缓存一切可缓存的资源；
• 使用长Cache（使用时间戳更新Cache）；
• 使用外联式引用CSS、JavaScript；

命中浏览器缓存分为两类：强缓存，协商缓存：

强缓存：不会发起HTTP请求，直接从浏览器缓存中读取文件。

• HTTP 1.0中，采用Expires头指定资源过期时间；
• HTTP 1.1中，采用Cache-Control: max-age指定资源被缓存多久；

协商缓存：向服务器发起HTTP请求，如果资源文件并未更新，response响应码即为304，随后从浏览器缓存中下载该文件，并不会从服务器下载。

• HTTP 1.0中，采用Last-Modified(response header)和If-Modified-Since(request header)来指定资源过期时间；
• HTTP 1.1中，采用E-Tag(response/request header)和If-None-Match来决定该资源是否过期；
  
  

压缩html、CSS、JavaScript：

减少资源大小可以加快网页显示速度，所以要对HTML、CSS、JavaScript等进行代码压缩，并在服务器端设置GZip

• 压缩（多余的空格、换行符和缩进）；
• 启用GZip；
  
  

无阻塞：

写在HTML头部的JavaScript（同步方式加载），和写在HTML标签中的Style会阻塞页面的渲染，因此CSS放在页面头部并使用Link方式引入，避免在HTML标签中写Style，JavaScript放在页面尾部或使用异步方式加载。

首屏加载：

首屏的快速显示，可以大大提升用户对页面速度的感知，因此应尽量针对首屏的快速显示做优化。

按需加载：

将不影响首屏的资源和当前屏幕资源不用的资源放到用户需要时才加载，可以大大提升重要资源的显示速度和降低总体流量。

• LazyLoad；
• 滚屏加载；
• 通过Media Query加载；
  
  

预加载：

大型重资源的页面（如游戏）可使用增加Loading的方法，资源加载完成后再显示页面。但是要控制Loading的时间，时间过长会造成用户流失。可以对用户行为分析，可以在当前页加载下一页资源，提升速度。

• 可感知Loading；
• 不可感知的Loading（如提前加载下一页）；
  
  

压缩图片：

图片是最占流量的资源，因此尽量避免使用它，使用时选择最合适的格式（实现需求的前提下，以大小判断），合适的大小，同时在代码中用srcset来按需显示。

• 使用其它方式代替图片(1. 使用CSS3 2. 使用SVG 3. 使用IconFont 4.base64)；
• 使用srcset；
• 选择合适的图片(1. webp优于jpg 2. png优于gif)；
• 选择合适的大小（1. 首次加载不大于1014KB 2. 不宽于640（基于手机屏幕一般宽度））；
  
  

减少Cookie：

Cookie会影响加载速度，所以静态资源域名不使用Cookie，因此静态资源域名与网页域名分离，跨域的话资源请求才不会携带Cookie。

避免重定向：

重定向会影响加载速度，所以在服务器正确设置避免重定向。

异步加载第三方资源：

第三方资源不可控会影响页面的加载和显示，因此要异步加载第三方资源。

脚本执行优化：

---

脚本处理不当会阻塞页面加载、渲染，因此在使用时需当注意 CSS写在头部，JavaScript写在尾部或异步。

避免图片和iframe等的空src：

空src会重新加载当前页面，影响速度和效率。

尽量避免重设图片大小：

重设图片大小是指在页面、CSS、JavaScript等中多次重置图片大小，多次重设图片大小会引发图片的多次重绘，影响性能。

图片适当使用DataURL，但DataURL会占用一定的内存，而且没有缓存，并且要解码后再渲染，加载慢耗时长。

CSS优化：

---

尽量避免写在HTML标签中写style属性。

避免CSS表达式：

CSS表达式的执行需跳出CSS树的渲染，因此避免频繁使用CSS表达式。

移除空的CSS规则：

空的CSS规则增加了CSS文件的大小，且影响CSS树的执行，所以需移除空的CSS规则。

正确使用display的属性：

display属性会影响页面的渲染，合理使用将提高页面性能：

• display:inline后不应该再使用width、height、margin、padding以及float；
• display:inline-block后不应该再使用float；
• display:block后不应该再使用vertical-align；
• display:table-*后不应该再使用margin或者float；
  
  

不滥用float：

float在渲染时计算量比较大，尽量减少使用。

不滥用web字体：

web字体需要下载，解析，重绘当前页面，尽量减少使用，并且font-size可以继承，避免过度使用。

值为0时不需要任何单位：

为了浏览器的兼容性和性能，值为0时不要带单位。

标准化各种浏览器前缀：

• 无前缀应放在最后；
• CSS动画只用 （-webkit- 无前缀）两种即可；
• 其它前缀为 -webkit- -moz- -ms- 无前缀 四种，（-o-Opera浏览器改用blink内核，所以淘汰）；

注意：不过现在很多主流浏览器兼容性已经比较好，无需再添加前缀。

JavaScript执行优化：

---

减少重绘和回流：

• 避免不必要的Dom操作；
• 尽量改变class而不是style，使用classList代替className；
• 避免使用document.write；
• 减少drawImage；
  
  

缓存Dom选择与计算：

• 缓存dom选择；
• 缓存列表.length；
• 尽量使用事件代理，避免批量绑定事件；
• 尽量使用ID选择器；
  
  

减少Dom节点：

Dom节点太多影响页面的渲染，应尽量减少Dom节点。

动画优化：

• 尽量使用CSS3动画；
• 合理使用requestAnimationFrame动画代替setTimeout，setInterval；
• 适当使用Canvas动画 5个元素以内使用css动画，5个以上使用Canvas动画（webGL）
  
  

高频事件优化：

Touchmove、Scroll 事件可导致多次渲染。

可以使用节流，增加响应变化的时间间隔，减少重绘次数。

GPU加速：

通过CSS中以下属性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）来触发GPU渲染，合理使用！