前端性能优化

打工人兼干饭人
365 阅读2分钟

行文结构

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

Chrome浏览器架构

Chrome浏览器架构

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

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

Chrome浏览器运行

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


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

页面生成过程

renderTree

性能优化思考方向：

  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.cn/post/684490…
4.juejin.cn/post/684490…
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.cn/post/684490…
11.juejin.cn/post/684490…
）

avatar
文章
阅读
粉丝