前端性能优化

Chrome浏览器运行进程

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


Chrome浏览器架构

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

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

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

思考优化方向：

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

代码书写优化：

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.youkuaiyun.com/qq_36368586…
6.developers.google.com/web/fundame…
7.segmentfault.com/a/119000001…
8.blog.youkuaiyun.com/steward2011… ）

转载于:https://juejin.im/post/5cedda16f265da1b9570385a