前端性能优化概述

Bellatrix99
217 阅读4分钟

前端性能优化

1. 减少请求数量（合并）

  • 不进行合并会导致：
    • 文件与文件之间有插入的上行请求，增加了 N-1 个网络延迟
    • 受丢包问题影响更严重
    • 经过代理服务器可能会被断开
  • 合并本身也有问题：
    • 首屏渲染问题
    • 缓存失效问题
  • 关于文件合并，有以下建议：
    • 公共库合并
    • 不同页面单独合并

2. 图片处理

  • 雪碧图
    • 可以减少 HTTP 请求数量，但当整合图片比较大时，一次加载比较慢
  • Base64
    • 将图片的内容以 Base64 格式内嵌到 HTML 中，可以减少 HTTP 请求数量
    • 但是由于 Base64 编码用 8 位表示信息中的 6 位，所以编码后大小扩大了33%
  • 使用字体图标、SVG图片等来代替普通图片

3. 减少重定向

  • 当页面发生了重定向，就会延迟整个 HTML 文档的传输
  • 在 HTML 文档到达之前，页面不会呈现任何东西
  • 如果一定要使用重定向，如 http 重定向到 https，要使用 301 永久重定向。
    • 如果使用302，则每一次访问http，都会被重定向到https的页面
    • 而永久重定向，在第一次从http重定向到https之后 ，每次访问http，会直接返回https的页面

4. 使用缓存

  • cache-control / expires 强缓存
  • last-modified / eTag 协商缓存

5. 不使用 CSS @import

  • CSS 的 @import 会造成额外的请求

6. 避免使用空的 src 和 href

  • a 标签设置空的 href,会重定向到当前的页面地址
  • form 设置空的 method, 会提交表单到当前的页面地址

7. 减少资源大小(压缩)

  1. HTML 压缩
  2. CSS 压缩
  3. JS 压缩与混乱
  4. 图片压缩
    1. 安卓下可以使用 webp 格式图片
    2. 开启 gzip 压缩

8. 优化网络连接(使用 CDN)

  1. 使用内容分发网络, 它能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。
  2. 其目的是使用户可就近取得所需内容，解决 Internet 网络用户的状况，提高用户访问网站的响应速度。

9. 使用 DNS 预解析

  • 浏览器缓存 ↓
  • 系统缓存↓
  • 路由器缓存↓
  • ISP（运营商）DNS缓存↓
  • 根域名服务器↓
  • 顶级域名服务器↓
  • 主域名服务器↓

10. 并行连接

11. 持久连接

12. 管道化连接

13. 优化资源加载（资源加载位置）

1. CSS 文件放在 head 中，先外链，后本页
2. JS 文件放在 body 底部，先外联，后本页
3. 处理页面、处理页面布局的 JS 文件放在 head 中
4. body 中间尽量不写 style 和 script 标签

14. 资源加载时机

1. 异步 script 标签
2. 模块按需加载
3. 使用资源预加载 preload 和资源预读取 prefetch
   1. preload让浏览器提前加载指定资源，需要执行时再执行，可以加速本页面的加载速度
   2. prefetch告诉浏览器加载下一页面可能会用到的资源，可以加速下一个页面的加载速度
4. 资源懒加载和资源预加载
   - 资源懒加载和资源预加载都是一种错峰操作，在浏览器忙碌的时候不做操作，浏览器空间时，再加载资源，优化了网络性能

15. 减少重绘回流（样式设置）

1. 避免使用层级过深的选择器，或其他一些复杂的选择器，以提高 CSS 渲染效率
2. 避免使用 CSS 表达式
3. 元素适当定义高度或最小高度，否则可能会造成回流
4. 给图片设置尺寸。首次载入时，占据空间会从 0 到完全出现，可能会位移 发生回流
5. 不要使用 table 布局，因为一个小改动可能会造成整个 table 重新布局。
6. 能够使用 CSS 实现的效果尽量不使用 JS

16. DOM 优化

1. 缓存 DOM
2. 减少 DOM 深度及 DOM 数量
3. 批量操作 DOM
4. 批量操作 CSS 样式
5. 在内存中操作 DOM
6. DOM 元素离线更新
7. DOM 读写分离
8. 事件代理
9. 防抖和节流
10. 及时清理环境

17. 性能更好的 API

1. 用对选择器
2. 使用web worker

18. Webpack 优化

1. 动态导入和按需加载
   1. impact()
   2. require.ensure
2. 剔除无用代码
3. 长缓存优化
   1. 将 hash 替换成 chunkhash，这样当 chunk 不变时，缓存依然有效
   2. 使用 Name 而不是 id
4. 公用代码内联
avatar
文章
阅读
粉丝