【前端进阶】前端性能优化

网络优化

网络优化是前端性能优化的重点，因为大部分消耗都发生在网络层，尤其是第一次加载页面，减少等待时间很重要

缓存优化

1. 对静态资源文件实行强缓存或协商缓存（服务端处理）
   • 强缓存：Expirse + Cache-Control
   • 协商缓存：Last-Modified + Etag
   • 使用时间戳或hash值命名静态资源文件，以解决静态资源文件的强缓存
2. 对不经常更新的接口数据进行数据缓存（cookie/localStorage/sessionStorage/vuex/redux）

DNS优化

1. 大型项目分服务器部署，增加http并发（会导致DNS解析变慢）
2. 小项目单服务器部署（会导致DNS解析变快）
3. DNS prefetch(DNS 预解析)

<meta http-equiv="x-dns-prefetch-control" content="on"></meta>
<link rel="dns-prefetch" href="//www.baidu.com">

TCP优化

1. 建立长连接：Connection:keep-alive

数据传输优化

1. 减少数据传输大小
   • 内容或者数据压缩（webpack等）
   • 服务端开启GZIP压缩
   • 大批量数据分批次请求（下拉刷新或分页，减少首次请求数据）
2. 减少http请求次数
   • 资源文件合并处理
   • 字体图标
   • 雪碧图
   • 图片base64

其他优化

1. CDN服务器“地域式分部”
2. 采用HTTP2.0

代码优化

编写规范且高质量的代码也是提升性能与降低维护成本的主要方式

html优化

1. 尽量减少html标签嵌套层级
2. 尽量使用html5语义化标签，避免使用自定义标签

css优化

1. 性能优先时，使用内嵌样式（减少http请求）
2. 可维护性优先时，使用外联样式（增加可维护性）
3. CSS样式统一放head标签当中
4. 尽量减少选择器查找深度

js优化

1. 性能优先时，使用script标签包裹JS（减少http请求）
2. 可维护性优先时，使用script标签链接JS文件（增加可维护性）
3. JS统一放body标签当中，位于最底部
4. 适当使用async与defer
5. 使用原生js操作dom时，使用文档碎片（减少回流与重绘）
6. 尽可能降低代码执行的空间复杂度与时间复杂度（例如：能不用循环就不用循环，循环能少套一层就少套一层）

用户体验优化

1. 增加loading与反馈
2. 使用骨架屏
3. 图片懒加载