前端性能优化

前端性能优化：减少请求数量、减小资源大小、优化网络连接、优化资源加载、减少重绘回流、使用更好性能的api和构建优化。

参考链接: 前端性能优化的七大手段

减少请求数量

合并

如果不合并影响

  • 文件之间插入的上行请求，增加了 n - 1 个网络延迟

  • 受丢包问题影响更严重

  • 经过代理服务器时可能会被断开

合并带来的问题

  • 首屏渲染

  • 缓存失效

建议

  • 公共库合并

  • 不同页面单独合并

图片处理

 1. 雪碧图
     减少了请求数量，但如果图片过大一次加载过慢。现在因字体图片和 svg 图片流行渐渐使用少了
 2. base64
     base64 格式嵌入到 html 中，减少了请求数量，但是编码用8位字符表示信息中的6个位，编码后大小比原始值扩大了 33%
 3. 使用字体图标来替代图片

减少重定向

如果使用重定向，要使用 301 永久重定向

使用缓存

Cache-Control 和 Expires

不使用 @import

避免使用空 src 和 href

减小资源大小

压缩

  • html 压缩

  • css 压缩

  • js 压缩与混淆

  • 图片压缩（tinypng）

gzip

优化网络连接

cdn(Content Delivery Network)

dns 预解析

<link rel="dns-prefecth" href="https://xxx.com" />

并行连接

域名发散，使用多个域名增加并发数

持久连接

keep-alive

管道化连接

http2协议，单条连接多路复用

优化资源下载

资源加载位置

css 头部，js 尾部，布局 js 放在 head 中

资源加载时机

  1. 异步 script 标签

         defer: html 加载完后执行
     async: 下载完成立即执行
 2. 模块按需加载
     webpack 1. import() 2.require.ensure
 3. 懒加载

减少重绘回流

样式

  1. 避免使用层级较深的选择器

  2. 避免使用 css 表达式

  3. 避免使用 table 布局

  4. 能用 css 尽量不要用 js

渲染层

  1. 将需要多次重绘的元素独立，如设置 absolute，可以减少重绘范围

  2. 动画使用硬件渲染

dom 优化

  1. 缓存 dom

  2. 减少 dom 深度和数量

  3. 批量操作 dom

    • 事件代理

    • 防抖节流

  6. 及时清理环境

使用更好的api

用对 css 选择器

使用 requestAnimationFrame 替代计时器

使用 IntersectionObserver 实现图片可视区域懒加载

使用 webworker

构建优化

webpack

打包公共代码

动态导入 按需加载

剔除无用代码

tree shaking

js - uglifyjs

css - purify css

长缓存优化

  1. hash 替换为 chunkhash

  2. 使用 name 而不是 id

公用代码内联

Previousjsonp 原理Next算法

Last updated