前端H5性能优化（超详细）

资源的合并与压缩

• 减少 http 请求数量
• 减少请求资源的大小

html 压缩
• 压缩在文本文件中有意义但是在HTML中不显示的字符，包括空格、制表符、换行符、注释等
• 使用在线网站压缩、nodejs提供了html-minifier 工具、后端模板引擎渲染压缩

css 压缩
• 无效代码删除、css语义合并
• 使用在线网站压缩、使用 html-minifier 对html 中的 css 进行压缩、使用clean-css 对 css 进行压缩

js 压缩与混乱
• 无效字符的删除、剔除注释、代码语义的缩减与优化、代码保护
• 使用在线网站压缩、使用 html-minifier 对html 中的 js 进行压缩、使用uglifyjs2 对 js 进行压缩
文件合并
• 如果不合并 === > 文件与文件之间有插入的上行请求，增加了N - 1 个网络延迟；受丢包问题影响更严重；经过代理服务器时可能会被断开
• 如果合并 === > 首屏渲染时间变长； 文件缓存大面积失效
• 公共库合并、不同页面的合并
• 使用在线网站进行文件合并、使用 nodejs 实现文件合并
• 开启 gzip

图片优化

png
• png8 ---- 256 色 支持透明
• png24 ---- 2^24 色 不支持透明
• png32 ---- 2^24 色 支持透明

图片格式
• jpg 有损压缩，压缩率高，不支持透明
• png 支持透明，浏览器兼容好
• webp压缩程度最好，在 iOS webview 有兼容性问题
• svg 矢量图， 代码内嵌，相对较小，图片样式相对简单的场景
• 格式转换与图片压缩 https://zhitu.isux.us/

图片压缩
• 针对真实图片情况，舍弃一些相对无关紧要的色彩信息
• 图片压缩 https://tinypng.com/

css 雪碧图
• 把网站上用到的一些图片整合到一张单独的图片中
• 减少网站的 http 请求数量
• 缺点是当图片比较大时，一次家在比较慢

使用矢量图
• 使用 svg 进行矢量图的绘制
• 使用 iconfont 解决 icon 问题

image inline
• 内嵌图片 base64
• 减少网站的 http 请求数量

HTML 渲染

顺序执行、并发加载
• 词法分析
• 并发加载
• 并发上限

是否阻塞
• css head 中阻塞页面的渲染
• css 阻塞 js 的执行
• css 不阻塞外部脚本的加载

• 直接引入的 js 阻塞页面的渲染
• js 不阻塞资源的加载
• js 顺序执行，阻塞后续 js 逻辑的执行

懒加载 / 预加载

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

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

重绘 / 回流

避免使用触发重绘、回流的 CSS 属性
将重绘、回流的影响范围限制在单独的图层之内

回流（或者叫做重排）
• 当 RenderTree 中的一部分（或者全部）因为元素的规模尺寸、布局、隐藏等改变而需要重新构建，这就称为回流（reflow）
• 当页面布局和几何属性改变时就需要回流

重绘
• 当 RenderTree 中的一些元素需要更新属性，而这些属性只是影响元素的外观、风格，而不会影响布局，比如background-color，这就叫做重绘（repaint）

关系
• 影响了布局-》回流（重排）
• 没有影响布局-》重绘
• 重排必将引起重绘，而重绘不一定会引起重排

触发页面重布局的属性

盒子模型相关属性
width
height
padding
margin
display
border-width
border
min-height

定位属性以及浮动
top
bottom
left
right
position
float
clear

改变节点内部文字结构
text-align
overflow-y
overflow
font-weight
font-family
font-size
line-height
vertical-align
white-space

只触发重绘的属性
color
border-style
border-radius
visibility
text-decoration
background
background-image
background-position
background-repeat
background-size
outline
outline-color
outline-style
outline-width
box-shadow

新建DOM的过程
• 获取DOM后分割为多个图层
• 对每个图层的节点计算样式结果（recalculate style – 样式重计算）
• 为每个节点生成图形和位置（layout – 回流和重布局）
• 将每个节点绘制填充到图层位图中（paint setup 和 paint – 重绘）
• 图层作为纹理上传至GPU
• 复合多个图层到页面上生成最终屏幕图像（composite layers – 图层重组）

将频繁重绘回流的DOM元素单独作为一个独立图层，那么这个DOM元素的重绘和回流的影响只会在这个图层中。

新建独立图层会减少重回回流带来的影响，但是在图层重组的时候会消耗大量的性能，所以要权衡利弊，有所选择。

Chrome创建图层的条件
• 3D 或透视变换 CSS 属性（perspective transform）
• 使用加速视频解码的 节点
• 拥有 3D（WebGL）上下文或加速的 2D 上下文的 节点
• 混合插件（如flash）
• 对自己的 opacity 做 CSS 动画或使用一个动画webkit变换的元素
• 拥有加速 CSS 过滤器的元素
• 元素有一个包含复合层的后代节点（一个元素拥有一个子元素，该子元素在自己的层里）
• 元素有一个 z-index 较低且包含一个复合层的兄弟元素（也就是该元素在复合层上面渲染）

重绘回流问题 优化方案
• 用 translate 替代 top
• 用 opacity 替代 visibility
• 不要一条一条的修改 DOM 的样式，预先定义好 class，然后修改 DOM 的 className
• 把 DOM 离线后修改，比如：先把 DOM 给 display: none（有一次 reflow），然后修改100次，然后再显示出来
• 不要把 DOM 节点的属性值放在一个循环里当成循环里的变量
• 不要使用 table 布局，可能很小的一个改动就会造成整个 table 的重新布局
• 动画实现的速度的选择
• 对于动画新建图层
• 启用 GPU 硬件加速

浏览器存储

cookie
• 因为 http 请求无状态，所以需要 cookie 去维持客户端状态
• cookie 生成方式：http response header 中的 set-cookie； js 中可以通过document.cookie读写cookie
• 使用：用于浏览器端和服务器端的交互；客户端自身数据的存储
• 过期时间：expire
• 存储限制：作为浏览器存储，大小4kb左右；需要设置过期时间

expire
• cookie 存储能力被 localstorage 代替
• httponly 不允许 js 读写
• cookie 中在相关域名下面 — cdn的流量损耗 。 解决：cdn 的域名和主站的域名要分开

localStorage
• HTML5 设计出来专门用于浏览器存储的
• 大小为 5M 左右
• 仅在客户端使用，不和服务端进行通信
• 接口封装较好
• 浏览器本地缓存方案

sessionStorage
• 会话级别的浏览器存储
• 大小为 5M 左右
• 仅在客户端使用，不和服务端进行通信
• 接口封装较好
• 对于标表单信息的维护

indexedDB
• 用于客户端存储大量结构化数据
• 为应用创建离线版本

PWA
• 可靠：在没有网络的环境中也能提供基本的页面访问
• 快速：针对网页渲染及网络数据访问有较好的优化
• 融入：应用可以被增加到手机桌面，并且和普通应用一样有全屏、推送等特性

缓存

Cache-Control
• max-age
• s-maxage
• private
• public
• no-cache
• no-store

Expires
• 缓存过期时间，用来指定资源到期的时间，是服务器端的具体时间点
• 告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据，而无需再次请求

Last-Modified / If-Modified-Since
• 基于客户端和服务端协商的缓存机制
• Last-Modified ------- response header
• If-Modified-Since ------- request header
• 需要与 cache-control 共同使用
• 缺点：某些服务端不能获取精确的修改时间；文件修改时间改了，但文件内容却没有变

Etag / If-None-Match
• 文件内容的 hash 值
• etag ------- response header
• if-none-match ------- request header
• 需要与 cache-control 共同使用

分级缓存策略
• 200（from cache）: 由expires / cache-control 控制。expires（http1.0有效）是绝对时间；cache-control（http1.1有效）是相对时间。两者都存在时，cache-control 覆盖 expires，只要没有失效，浏览器只访问自己的缓存。
• 304 : 由 last-modified / etag 控制。当上一层失效时或用户点击refresh，F5时，浏览器就会发送请求给服务器，如果服务器端没有变化，则返回304给浏览器。
• 200 ：当浏览器本身没有缓存或者上一层失效时，或者用户点击了CTL + F5 时，浏览器直接去服务器下载最新数据。