前端性能优化

行文结构

1. Chrome浏览器架构
2. Chrome浏览器运行
3. 网页如何渲染生成
4. 性能优化思考方向
5. 性能优化ToDoList
   
   

Chrome浏览器架构

渲染引擎Rendering Engine使用的是WebKit
XML Parser： libXML解析XML，libXSLT处理XSLT
JS解释器使用C++实现的V8引擎

常见的几个概念区分： V8是js解释器，webkit是渲染引擎，choromium开源浏览器框架，chrome是浏览器。

Chrome浏览器运行

  重点说下其中的 Renderer Process
  若是咱们的代码优质，那么其中的HTML解析器、CSS解析器、V8引擎的解析工做会更高效，性能就会更好。
  若是不理解Process（进程）的概念，能够参见 这篇文章

网页如何渲染生成
1.HTML代码转化成DOM
2.CSS代码转化成CSSOM（CSS Object Model）
3.结合DOM和CSSOM，生成一棵渲染树（包含每一个节点的视觉信息）
4.生成布局（layout），即将全部渲染树的全部节点进行平面合成
5.将布局绘制（paint）在屏幕上

性能优化思考方向：

1. 资源及代码压缩
2. 合理的减小请求
3. 异步加载阻塞资源
4. 减小回流和重绘

To Do List：

1. 精简DOM结构，减小布局计算量
2. 少操做dom，尽可能使用documentFragment再appendChild或者cloneNode再replace
3. js读写dom属性时，采用读写分离，避免强制回流
4. 减小对象的遍历深度和遍历次数
5. 用IIFE包裹全部js，强化内部的垃圾回收
6. 提升css选择器的精准度
7. GPU加速 transform:translate3d(0, 0, 0)
8. 动画脱离标准文档流，少用定时器、延时器，多用requestAnimationFrame
9. 坚持使用 transform 和 opacity 属性更改来实现动画，只触发合成器，不触发回流和重绘

（每一点均可以展开不少，具体参考如下连接
1.www.ruanyifeng.com/blog/2015/0…
2.sylvanassun.github.io/2017/10/03/…
3.juejin.im/post/59da45…
4.juejin.im/post/5a9923…
5.blog.csdn.net/qq_36368586…
6.developers.google.com/web/fundame…
7.segmentfault.com/a/119000001…
8.blog.csdn.net/steward2011…
9.mp.weixin.qq.com/s/vIKDUrbux…
10.juejin.im/entry/5a9e9…
11.juejin.im/post/5b61d8…
）