前端性能优化

前端项目性能优化:

DNS 预解析

• DNS Prefetch 是一种 DNS 预解析技术, 浏览器会在加载网页时对网页中的域名进行解析缓存, 这样在单机网页中的链接时就无需进行 DNS 的解析, 减少用户等待时间, 提升用户体验
• 用 meta 信息来告知浏览器, 当前页面要做 DNS 预解析: <meta http-equiv="x-dns-prefetch-control" content="on" />
• 在页面 header 中使用 link 标签来强制对 DNS 预解析: <link rel="dns-prefetch" href="http://bdimg.share.baidu.com" />

HTTP 请求方向

• 浏览器缓存策略

CSS 方向

• 雪碧图：将多个小图标整个到一张背景透明的大图上，减少 HTTP 请求次数，通过 background-position 来展现不同位置的图标
• 重绘与回流， 渲染树中包含了大量的渲染元素，每一个渲染元素会被分到一个图层中，每个图层又会被加载到 GPU 形成渲染纹理，而图层在 GPU 中 transform 是不会触发 repaint 的，这一点非常类似 3D 绘图功能，最终这些使用 transform 的图层都会由独立的合成器进程进行处理

文件加载方向

• 预加载 prefetch
  • <link href=/js/chunk-dca4e6ea.e4986a0a.js rel=prefetch> 当浏览器解析到 prefetch 时，不会立即请求资源，会等待浏览器空闲以后再进行资源的请求， 适用于后续页面需要用到的资源
  • webpack 通过 import 也可以实现预加载 import(/* webpackPrefetch: true */ "LoginModal")
• 图片懒加载
• 资源懒加载：代码分割，缩小体积

webpack 方向

• webpack 打包优化