前言

上一篇我们已经围绕“网络层面”探索页面性能优化的方案，接下来本篇围绕“浏览器渲染层面”继续开展探索。正文开始前，我们思考如下问题：

  1. 浏览器渲染页面会经过哪几个关键环节？“渲染层面”的优化从哪几方面着手？
  2. “渲染层面”的性能优化方案会有哪些？

渲染关键环节

优化原则

我们了解“页面渲染关键环节”后，便可知晓影响页面渲染性能的因素主要是静态资源：HTML、CSS、JS、图片等。因此“渲染层面”的性能优化方案主要就是围绕静态资源展开探索，其方案制定可围绕下面2个原则展开：

  • 尽可能减少资源个数
  • 尽可能减少资源体积大小

优化方案

HTML 优化

1.减少文件大小（压缩、精简）

  • 压缩处理 HTML，减小HTML体积
  • 精简 HTML：
    • 尽量减少 HMTL 嵌套、iframe/table 使用（table标签比其他html标签占用更多字节，导致下载时间长，占用服务器更多的流量资源）
    • 删除多余的空格、换行符、缩进和不必要注释
    • 删除冗余标签和属性
    • …

2.DOM 优化

  • 控制DOM大小：
    • 合理的业务逻辑拆分
    • 先加载可视区，其他延迟加载（懒加载）
  • 减少DOM操作：尽可能对DOM操作统一逻辑处理，或是使用虚拟DOM（借鉴vue/react），再插入到真实DOM（减少重排重绘）

CSS 优化

1. 减少资源请求个数

  • 合并多个 CSS 样式文件
  • 按需加载样式

2. 减少文件大小（压缩）

  • 压缩处理 CSS 文件
  • 在线压缩，例如CSS Minify
  • webpack压缩插件

3. 减少文件大小（编码优化）

  • 位置放在里，尽早地进行样式解析，构建CSSOM 树
  • 简化 CSS 选择器（选择器优先级：!important > 内联 > id > class|属性|伪类 > 标签 | 伪元素）
    • 尽可能减少样式层级数（选择器嵌套）
    • 少用标签选择器，尽量选择高优先级的id/class/属性/伪类选择器代替
    • 少用通配符*，只对需要修改样式的元素进行选择
    • 关注可继承属性，避免重复定义和匹配

可继承属性：

  • 所有元素可继承：visibility 和 cursor。
  • 内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction。
  • 块元素可继承：text-indent和text-align。
  • 列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
  • 表格元素可继承：border-collapse。

总结：CSS继承特性主要是指文本方面的继承，而关于与盒模型相关的属性不支持继承。

  • 优化CSS编码风格，尽可能减少重排重绘
    • 元素显隐操作频繁，可设置 visibility: hidden，让元素占位不变，不会触发重排，仅触发重绘
    • 已知图片的宽高，样式可先设置width、height，避免图片下载后整个页面发生重排
    • 避免使用CSS表达式
    • 避免频繁设置同一div样式，可进行一次性更改
    • 动画使用绝对定位（脱离文档流）定位，避免触发重排
    • …
  • 精简 CSS，从而减少 CSS 文件大小
    • 使用缩写语句，如margin-top/bottom，直接用margin
    • 删除不必要的单位，如0px，直接写0
    • 删除过多分号
    • 删除空格和注释
    • …

JS 优化

1. 减少文件请求个数

  • 合并多个 JS 脚本文件
  • 首屏渲染暂不需要且体积大的脚本可进行按需加载（通过script动态创建加载）
  • 合理使用缓存
    • 业务中：
      • 非敏感固定的数据可使用本地存储 localStorage/sessionStorage/IndexedDB等
      • 合理缓存 DOM 对象等
    • 构建打包（比如webpack）：
      • 第三方模块缓存：hard-source-webpack-plugin、DLL 动态链接库
      • loader 开启 cache 缓存
      • …

2. 减少文件大小

  • 压缩处理：在线压缩/Webpack插件（uglify/gzip）
  • 构建打包减小bundle体积
    • 开启 TreeShaking，剔除 Dead Code
    • 剥离第三方依赖，webpack配置externals
    • 提取公共模块：webpack4.x+ 配置 optimization.splitChunks（相当于webpack旧版本的CommonsChunkPlugin）

3. 编码优化

加载时
  • 位置放底部，让JS不阻塞HTML和CSS的解析
  • 合理选择加载模式（减少重排重绘）
// 1. 正常模式
// 2. async 模式（异步执行）
// 3. defer 模式（延迟执行）

一般当我们的脚本与 DOM 元素和其它脚本之间的依赖关系不强时，我们会选用 async；当脚本依赖于 DOM 元素时，我们会选用 defer。(合理选择 script 加载模式，可以有效地提升性能)

运行时
  • DOM 操作优化
    • 合并多次 DOM 操作，批量执行，减少重排重绘
    • 大数据量渲染优化：分页加载/虚拟列表 virtualList
  • 函数优化
    • 获取 DOM 元素，尽量使用id选择器
    • 尽量避免使用 eval
    • 使用事件节流/防抖函数
    • 使用事件委托
  • JS动画优化
    • 避免添加大量的 JS 动画
    • 简单动画尽量使用 CSS3 动画
    • 复杂动画尽量使用 Canvas 动画
    • 合理使用 requestAnimationFrame 动画代替 setTimeout、setInterval

    requestAnimationFrame 按照浏览器的刷新率（60Hz左右）来调动动画帧，从而实现更加流畅和高性能的动画效果。

  • 执行优化
    • 合理拆分执行任务
    • 大数据计算，可使用 ​​​​​​​Web Worker开启独立于主线程的并行计算
  • …

图片优化

1.减少图片网络请求

  • 雪碧图CSS sprite

  • 小图标使用web font字体代替
  • 小体积图片使用base64编码

  • 阴影、简单动画图效可用CSS3代替
  • 图片懒加载/预加载

2.减小图片大小

  • 图片压缩，可选择如下方式：
    • 在线压缩：​​​​​​​tinypng、tinyjpg
    • 插件压缩：
      • 压缩png：node-pngquant-native（可压缩50-80%左右）
      • 压缩jpg：jpegtran（可压缩10%左右）
      • 压缩gif：gifsicle

3.合理使用图片格式

简介和特性是否支持透明支持颜色种数压缩方式浏览器兼容性适用场景
jpg– 最常见、应用最广泛的图片格式
– 体积一般，通常小于 png, gif 等格式		不支持透明约1600万种颜色有损压缩几乎所有浏览器都支持呈现色彩丰富的图片，比如大背景图、轮播图或Banner图等
png8– 一种无损压缩的高保真的图片格式
– 8位的png，体积较大		支持透明256种（2^8）无损压缩几乎所有浏览器都支持呈现小图片，比如小Logo、颜色简单对比强烈小图标
png24– 一种无损压缩的高保真的图片格式
– 24位的png，体积较大		不支持透明约1600万种颜色无损压缩几乎所有浏览器都支持呈现颜色较多的图片，比如背景图
png32– 一种无损压缩的高保真的图片格式
– 32位的png，体积大		支持半透明（8位透明通道）2^32种无损压缩几乎所有浏览器都支持呈现色彩丰富高清图片，比如海报
svg– 矢量图，任意缩放不影响清晰度
– 体积视内容而定		支持设置透明度RGB/RGBA/十六进制设置颜色支持有损和无损压缩Chrome 4 （2010年1月发布）以上版本支持
caniuse.com/svg		适用任意缩放不失真的场景
gif– 支持动态图片
– 压缩率较高
– 体积较小		支持透明256种（2^8）无损压缩Chrome 58（2017年6月发布）以上版本支持
caniuse.com/gif		适用于色彩较少的动图
webp– 支持动态图片
– 压缩率较高
– 体积较小		支持透明约1600万种颜色有损和无损压缩Chrome 32（2014年1月发布）以上版本支持，兼容性不太好
caniuse.com/webp		兼容性要求不高的多种图片格式场景

4.图片加载优化

  • 懒加载

图片列表一般采用懒加载进行按需加载，滚屏时当图片已将出现在可视区域的时候进行加载。（有效地减轻服务器批量加载图片的压力）

let imgList = [...document.querySelectorAll('img')];let len = imgList.length;const lazyLoad = (function(){let count = 0;return function() {let deleteIndexList = [];imgList.forEach((img,index)=> {let rec = img.getBoundingClientRect();if(rec.top  !deleteIndexList.includes(index))}})()// 节流函数const throttle = function(fn, timing = 500) {let prev = 0return function() {let now = +new Date();if(now - prev > timing) {prev = now;fn.apply(this, arguments)}}}// 滚动监听加上节流控制const _throttle = throttle(lazyLoad)document.addEventListener('scroll', _throttle)
  • 预加载

预加载preload，在大图片加载完成前先加载小的loading，用于提升用户体验。（该优化思想不仅可以用于图片加载，也能用于异步请求、html标签预加载）

// 创建 img 图片元素const myImage = (function(){let imgNode = document.createElement('img')document.body.appendChild( imgNode )return {setSrc: function(src) {imgNode.src = src}}})()/** * 预加载 */const preLoad = (function(){let img = new Image();img.onload = function() {myImage.setSrc( this.src )// this指向img}return {setImg: function(src) {myImage.setSrc('./img/loading.gif')img.src = src}}})()preLoad.setImg('./img/bg_gaoqing.jpeg')
  • 渐进式加载

5.响应式图片，随窗口大小变化

  • CSS媒体查询 @media 设置响应式
.bg {/* 正常（未缩小屏幕）加载大尺寸图片 */background-image:url('img_flowers.jpg');}/* 当屏幕宽度小于400 */@media screen and (max-width: 400px){.bg {background-image:url('img_smallflower.jpg');}}
  • srcset属性设置响应式