Web前端性能优化详解之CSS与JS加载

浏览器加载页面和渲染过程

加载过程

  • 浏览器根据DNS 服务器得到域名的IP地坛
  • 向这个 IP 的机器发送 HTTP请求
  • 服务器收到,处理并返回 HTTP请求
  • 浏览器得到返回内容

渲染过程

  • 根据 HTML 结构生成 DOM 树
  • 根据 CSS 生成 CSSOM
  • 根据 RenaderTree 开始渲染和展示
  • 遇到 <strcipt >会执行并阻塞渲染

懒加载

  • 图片进入可视区域之后请求图片资源
  • 对于电商等图片很多,页面很长的业务场景适用
  • 减少无效资源的加载
  • 并发加载的资源过多会阻塞js的加载,景程网站正常使用

预加载

  • 图片等静态资源在使用之前的提前请求
  • 资源使用到时能从缓存中加载,提升用户体验
  • 页面展示的依赖关系维护

页面回流

  • 当render tree 中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等 改变而需要重新构建。这就称为回流(reflow)
  • 当页面布局和几何属性改变时就需要回流

重绘

  • 当 renader tree 中的一些元素需要更新属性,而这些属性只是影响元素的外观,风格,而不会影响布局的,比如 background-color。

回流必将引起重绘而重绘不一定引起回流

触发页面布局的属性

  • 盒子模型相关属性会触发重布局
  • 定位属性及浮动也会触发重布局
  • 改变节点内部文字结构也会触发重布局

Web前端性能优化详解之CSS与JS加载

只触发重绘的属性

Web前端性能优化详解之CSS与JS加载

新建DOM的过程

 1. 获取DOM后分割为多个图层
 2. 对每个图层的节点计算样式结果(Recalculate style--样式重计算)
 3. 为每个节点生成图形和位置(Layout--回流和重布局)
 4. 将每个节点绘制填充到图层位图中(Paint Setup和Paint--重 绘) 
 5. 图层作为纹理上传至GPU
 6. 符合多个图层到页面上生成最终屏幕图像(Composite Layers--图层重组)

Chrome创建图层的条件

  1. 3D或透视变换(perspective transform)CSS属性
  2. 使用加速视频解码的<video>节点
  3. 拥有3D(WebGL)上下文或加速的2D上下文的<canvas>节点
  4. 混合插件(如Flash)
  5. 对自己的opacity做CSS动画或使用一个动画webkit变换的元素
  6. 拥有加速CSS过滤器的元素
  7. 元素有一个包含复合层的后代节点(一个元素拥有一个子元素,该子元素在自己的层里)
  8. 元素有一个z-index较低且包含一个复合层的兄弟元素(换句话说就是该元素在复合层上面渲染)

实战优化点

  1. 用translate替代top改变
  2. 用opacity替代visibility
  3. 不要一条一条地修改 DOM 的样式,预先定义好 class,然后修改 DOM 的 className
  4. 把 DOM 离线后修改,比如:先把 DOM 给 display:none (有一次 Reflow),然后你修改100次,然后再把它显示出来
  5. 不要把 DOM 结点的属性值放在一个循环里当成循环里的变量
  6. 不要使用 table 布局,可能很小的一个小改动会造成整个 table 的重新布局
  7. 动画实现的速度的选择
  8. 对于动画新建图层
  9. 启用 GPU 硬件加速

愿你成为终身学习者

上一篇:javascript基础 javascript数据类型


下一篇:JS列表的下拉菜单组件(仿美化控件select)