前端全链路性能优化

[exposir]

性能优化

图片优化

JPEG（Joint Photographic Experts Group）

• 联合图像专家小组是一种针对彩色照片而广泛使用的有损压缩图片格式。
• 不适合：线条图形和文字、图标图形，因为它的压缩算法不太支持这些类型的图形；并且不支持透明度。
• 非常适合：颜色丰富的照片、彩色图大焦点图、通栏 banner 图；结构不规则的图形。

PNG（Portable Network Graphics）

• 便携式网络图形是一种无损压缩的位图图形格式，支持索引、灰度、RGB 三种颜色方案以及 Alpha 通道等特性。
• 不适合：由于是无损储存，彩色图像体积太大，所以不太适合。
• 非常适合：纯色、透明、线条彩绘，图标；边缘清晰，有大块相同颜色区域；颜色较少但要半透明。

GIF（Graphics Interchange Format）

• 图像互换格式是一种位图图形文件格式，以 8 位色（即 256 种颜色）重现真彩色的图像，采用 LZW 压缩算法进行编码。仅支持完全透明和完全不透明；如果需要比较通用的动画，GIF 是唯一选择。
• 不适合：每个像素只有 8 比特，不适合储存彩色图片。
• 非常适合：动画、图标。

Webp

• Webp 是一种现代图像格式，可为图像提供无损压缩和有损压缩，这使得它非常灵活。优秀算法能同时保证一定程序上的图像质量和比较小的体积；可以插入多帧，实现动画效果；可以设置透明度；采用 8 位压缩算法。无损的 Webp 比 PNG 小 26%，有损的 Webp 比 JPEG 小 25%-34%，比 GIF 有更好的动画。
• 不适合：最多处理 256 色，不适合于彩色图片。
• 非常适合：适用于图形和半透明图像。

用工具进行图片压缩

• 压缩 png：node-pngquant-native

• 跨平台，压缩比高，压缩 png24 非常好。

• 压缩 jpg：jpegtran

• 压缩 gif： GIFsicle

图片尺寸随网络环境变化

• 不同网络环境下，加载不同尺寸和像素的图片，通过在图片 URL 后缀加不同参数改变。

响应式图片

• javaScript 绑定事件监测窗口大小
• CSS 媒体查询
• img 标签属性 src set
• `<img srcset “img-32w.jpg,img-640w.jpg 2x,img-960w.jpg 3x” src=“img-960w.jpg” > (x 描述符：表示图像的设备像素比）

逐步加载图像

• 使用统一占位符

• 使用 LQIP（低质量图像占位符）

• lqip

• 使用 SQIP

• 基于 SVG 的图像占位符

• sqip

真的需要图片吗？

• Web Font 代替图片
• 采用 Data URI 代替图片
• 采用 Image spriting （雪碧图）

优化 HTML

精简 HTML 代码

• 减少 HTML 嵌套
• 减少 DOM 节点数
• 减少无语义代码（清除浮动）
• 删除 http 或者 https（前提协议头与页面一致）
• 删除多余的空格、换行符、缩进和不必要的注释
• 省略冗余标签和属性
• 使用相对路径的 URL

文件放在合适的位置

• CSS 文件链接尽量放在页面头部
• JS 引用放在 HTML 底部

增强用户体验

• 设置 favicon.ico
• 增加首屏必要的 css 和 js，比如页面框架北京图片或者 loading 图标。

CSS 优化

提升 CSS 渲染性能

• 谨慎使用 expensive 属性（如 nth-child 伪类;position:fixed 定位）
• 尽量减少样式层级数 （如 div ul li span i {colir:blue;}
• 尽量避免使用真用过多 cpu 和内存的属性（如 text-indent:-9999px）
• 尽量避免使用耗电量大的属性（如 CSS3 3D transforms、CSS3 transitions、Opacity）

合适使用 CSS 选择器

• 避免使用 CSS 表达式
• 尽量避免使用通配符选择器
• 尽量避免类正则的属性选择器

提升 CSS 文件加载性能

• 使用外链的 CSS
• 尽量避免使用 @import

精简 CSS 代码

• 使用缩写语句
• 删除不必要的零
• 删除不必要的单位，如 px
• 删除过多分号
• 删除空格和注释
• 尽量减少样式表的大小

合理使用 Web Fonts

• 将字体部署在 CDN 上
• 将字体以 base64 形式保存在 CSS 中并通过 localStorage 进行缓存
• Google 字体库应使用国内托管服务

CSS 动画优化

• 尽量避免同时过多动画
• 延迟动画初始化以便让其他 CSS 正常渲染
• 结合 SVG

javascript 优化

JS 优化总体原则

• 当需要时才优化
• 考虑可维护性

提升 JS 文件加载性能

• 加载元素的顺序 CSS 文件放在里，JS 文件放在里

jS 变量和函数优化

• 尽量使用 Id 选择器
• 尽量避免使用 eval
• JS 函数尽可能保持简洁
• 使用事件节流函数
• 使用事件委托

jS 动画优化

• 避免添加大量 JS 动画
• 尽量使用 CSS3 动画
• 尽量使用 Canvas 动画
• 合理使用 requestAnimationFrame 动画代替 setTimeout、setInterval

合理使用缓存

• 合理缓存 DOM 对象（将 DOM 保存到一个对象里）
• 缓存列表长度
• 使用可缓存的 AJAX

JavaScript 缓存优化

Cookie

• 通常由浏览器储存，然后将 Cookie 与每个后续请求一起发送到同一服务器。收到 HTTP 请求时，服务器可以发送带有 Cookie 的 header 头。可以给 Cookie 设置有效时间。

应用于：

• 会话管理：登录名、购物车商品、游戏得分等
• 个性化：用户首先选、主题或其他设置
• 跟踪：记录和分析用户行为，比如埋点

SessionStorage

• 创建一个本地存储的健/值对（页面关闭即销毁）

应用于：

• 页面应用页面之间传值

LocalStorage

• 本地存储（需要主动删除）

应用于：

• 缓存静态文件内容 JS/CSS（比如百度 M 站首页）
• 缓存不经常变更的 API 接口数据
• 储存地理位置信息
• 浏览在页面的具体位置

IndexedDB

• 索引数据库

应用于：

• 客户端存储大量结构化数据
• 没用网络连接的情况下使用（Google Doc、石墨文档）
• 冗余、很少修改、但经常访问的数据，以避免随时从服务器获取数据

减少浏览器回流、重绘

CSS

• 避免过多样式嵌套
• 避免使用 CSS 表达式
• 使用绝对定位，可以让动画元素脱离文档流
• 避免使用 table 布局（会引起浏览器多次重绘）
• 尽量不使用 float 布局
• 图片最好设置好 width 和 height
• 尽量简化浏览器不必要的任务，减少页面重新布局
• 使用 Viewport 设置屏幕缩放级别
• 避免频繁设置样式，最好把新 style 属性设置完成后，进行一次性更改
• 避免使用引起回流/重绘的属性，最好把相应变量缓存起来

JS

最小化回流和重排

• 为了减少回流发生次数，避免频繁操作 DOM，可以合并多次对 DOM 修改，然后一次性批量处理

控制绘制过程和绘制区域

• 绘制过程开销比较大属性设置应该尽量避免较少使用
• 较少绘制区域范围

静态文件打包方案

• 公共组件拆分
• 压缩：JS/CSS/图片
• 合并：JS/CSS 文件合并（减少网络请求数），CSS Sprite
• Combo：服务端合并请求 jS

webpack 打包优化

• 定位体积大的模块
• 删除没有使用的依赖
• 生产模式进行公共依赖包抽离
• 开发模式进行 DLL & DllReference 方式优化

速度与激情

据读取速度

事实上数据访问速度有快慢之分，下面列出几个影响数据访问速度的因素：

• 字面量与局部变量的访问速度最快，数组元素和对象成员相对较慢
• 变量从局部作用域到全局作用域的搜索过程越长速度越慢
• 对象嵌套的越深，读取速度就越慢
• 对象在原型链中存在的位置越深，找到它的速度就越慢

  推荐的做法是缓存对象成员值。将对象成员值缓存到局部变量中会加快访问速度

DOM

• 在 JS 中对 DOM 进行访问的代价非常高。请尽可能减少访问 DOM 的次数（建议缓存 DOM 属性和元素、把 DOM 集合的长度缓存到变量中并在迭代中使用。读变量比读 DOM 的速度要快很多。）
• 重排与重绘的代价非常昂贵。如果操作需要进行多次重排与重绘，建议先让元素脱离文档流，处理完毕后再让元素回归文档流，这样浏览器只会进行两次重排与重绘（脱离时和回归时）。
• 善于使用事件委托

流程控制

• 避免使用 for...in（它能枚举到原型，所以很慢）
• 在 JS 中倒序循环会略微提升性能
• 减少迭代的次数
• 基于循环的迭代比基于函数的迭代快 8 倍
• 用 Map 表代替大量的 if-else 和 switch 会提升性能

preload

Preload 提供了预获取资源的能力，可以将获取资源的行为从资源执行中分离出来。因此，Preload 可以构建自定义的资源加载与执行。

例如，应用可以使用 Preload 进行 CSS 资源的预加载、并且同时具备：高优先级、不阻塞渲染等特性。然后应用程序在合适的时间使用 CSS 资源：

<link rel="preload" href="/styles/other.css" as="style" />

构建优化

• Tree-shaking：是一种在构建过程中清除无用代码的技术。使用 Tree-shaking 可以减少构建后文件的体积。
• Scope Hoisting：目前 Webpack 与 Rollup 都支持 Scope Hoisting。它们可以检查 import 链，并尽可能的将散乱的模块放到一个函数中，前提是不能造成代码冗余。所以只有被引用了一次的模块才会被合并。使用 Scope Hoisting 可以让代码体积更小并且可以降低代码在运行时的内存开销，同时它的运行速度更快。
• code-splitting 是 Webpack 中最引人注目的特性之一。此特性能够把代码分离到不同的 bundle 中，然后可以按需加载或并行加载这些文件。code-splitting 可以用于获取更小的 bundle，以及控制资源加载优先级，如果使用合理，会极大影响加载时间。
• 使用 import 函数动态导入模块：使用静态 import 导入初始依赖模块。其他情况下使用动态 import 按需加载依赖
• 使用 HTTP 缓存头：expires，cache-control 等

其他

• HTTP2
• 使用最高级的 CDN（付费的比免费的强的多）
• 优化字体
• 其他垂直领域的性能优化