前端性能优化（超详细）

资源的合并与压缩

• 减少 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 时，浏览器直接去服务器下载最新数据。