前端总结——性能优化与重绘重排

前端性能优化

• 减少http请求
  当请求的网页文件中有很多img 、CSS 、JS 等文件时，将会频繁的与服务器建立连接与释放连接，这必定会造成资源的浪费，且每个HTTP 都会对服务器和浏览器产生性能负担。

• 使用浏览器缓存

  HTTP 请求发起的时候，我们可以利用浏览器缓存，看采用强缓存还是协商缓存，这样我们对于有缓存的页面可以快速加载。或者增加Expires Header。

• CDN 的使用及其预解析

  静态资源的请求可以采用 CDN，减少服务器压力、防止不必要携带 Cookie 的场景等。预解析时浏览器访问一个域名的时候，需要解析一次DNS,获得对应域名的ip地址，在解析过程中，按照浏览器缓存、系统缓存、路由器换算、DNS缓存、域名服务器的顺序，逐步读取缓存，直到拿到ip地址。

• 负载均衡

  利用负载均衡的特点，开启 Node.js 方面的 PM2 或者 Nginx 的反向代理，轮询服务器，平均各个服务器的压力。

• Webpack 优化

  在发布项目到服务器之前，我们可以利用一些可视化插件进行分析，使用 Happypack 等提高打包效率，项目内容上可以做按需加载、tree shaking 等。

• 图片优化

  我们需要熟悉了解 JPG/JPEG、PNG-8/PNG-24、GIF、Base64、SVG 这些图片的特性，然后通过 Webpack 的 url-loader 将一些小图标转换成 Base64，一些 Icon 使用 SVG，一些轮播图、Banner 图用 JPG/JPGE、雪碧图的使用等。

• 服务端渲染（SSR）

  服务端渲染是指浏览器请求的时候，服务端将已经渲染好的 HTML 页面直接返回给浏览器，浏览器直接加载它的 HTML 渲染即可，减少了前后端交互，对 SEO 更友好。

• 不使用css@import
  使用css@import会造成额外的请求

• CSS 选择器解析问题。避免CSS表达式

• CSS 加载问题。尽可能在 head 位置加载 CSS

• JS 加载问题。JS 的加载会阻塞 HTML 和 CSS 的加载，所以 script 标签通常放 body 后面，同时可以利用 script 标签的 async 和 defer 属性，同步加载 JS 或者等 HTML 和 CSS 加载渲染完后再加载 JS。

• DOM 渲染问题。DOM 渲染的时候可能会触发回流和重绘，应该尽量避免触发。

  1. 【CSS】使用 visibility 替换 display
  2. 【CSS】避免 table 布局。对于 Render Tree 的计算通常只需要遍历一次就可以完成，但是 table 布局需要计算多次，通常要花 3 倍于等同元素的时间，因此要避免。
  3. 【JS】避免频繁做 width、height 等会触发回流的操作。
  4. 【JS】操作 DOM 的时候，如果是添加 DOM 节点，可以将所有节点都在 JS 中操作完毕，再进行渲染（一次性）

重绘和重排

• 重绘：由于节点的几何属性发生改变或者由于样式发生改变而不会影响布局的，称为重绘。
• 重排：是布局或者几何属性需要改变。
• 重排必定会发生重绘，重绘不一定会引发重排。

避免重绘重排

js

• 现代浏览器通过队列机制来批量更新布局，浏览器会把修改操作放在队列中，至少一个帧（即16.6ms）才会清空队列，但当你获取布局信息的时候，队列中可能有会影响这些属性或方法返回值的操作，即使没有，浏览器也会强制清空队列，触发重排与重绘来确保返回正确的值。
• 尽量避免频繁使用：offsetTop、offsetLeft、offsetWidth、offsetHeight、width、height、getComputedStyle()。

css

• 使用 transform 替代 top
• 使用 visibility 替换 display: none，因为前者只会引起重绘，后者会引发重排
• 避免使用CSS表达式，可能会引发回流。