前端技术文档

优化方案

有更好想法和建议的可以多留言，分享给大家，大家会为你鼓掌。
即便现在网络速度很快，但弱网状态也很普遍，产品也必须要支持弱网状态下稳定访问和更好的用户体验。

前端性能优化概括为以下主要几方面：

  • 网络优化
  • 编译打包优化
  • 减少请求次数
  • 使用缓存
  • 异步懒加载
  • 渲染优化

网络优化

  1. 升级http1.1至http2.0，也会涉及到浏览器兼容问题，建议大家还是要慎重。
    但升级是否有很多坑，大家可以先了解一下：把所有 HTTPS 项目无脑升级成 HTTP/2 会有什么坑吗？open in new window

  2. 避免重定向
    会增加多余的中间访问

  3. 将资源放到不同域下
    浏览器从同一个域并行下载资源的数目有限，多个域可以增加并行下载数量。 这个也是根据情况使用，因为多个域也会增加DNS解析时间，所以根据情况具体而定。

  4. 尽量不使用iframe或少使用

  5. 避免404

编译打包优化

  1. 压缩文件 通过编译打包工具如webpac、rollup编译打包 优化目标：
  • 文件压缩减少数据包大小

  1. 开启Gzip 需要Nginx配置Gzip开启

  2. 公共库单独打包，压缩，发布到CDN

  3. 拆分大文件
    拆分大文件的主要目的是防止文件过大，请求时间过长导致文件加载失败、白屏等问题

减少请求次数

  1. 多个请求合并一次请求
    需要开发前置服务（即BFF - Backend For Frontend），对前端请求的数据通过BFF来对多个数据进行组装，聚合等一次性返回。 比如，我需要用于的个人基本信息、企业信息、身份信息，正常是每个模块单元或业务是分开的，需要调用不同接口获取，而一次想获取全部数据，就需要前置从个接口聚合而来。

  2. 图片icon使用雪碧图
    建议使用svg，因为svg是矢量图形易于在不同分辨率各端的展现，同时会编译到页面中，不会作为单独的文件请求。

  3. 合并文件
    编译打包优化步骤中的也可以达到减少请求次数的目的

使用缓存

预请求prefetch、预加载preload

  1. http缓存
  • Cache-Control:private/public/no-cache/no-store;
  • max-age:86400 //一天。单位秒

  1. CDN
    图片，js库等

  2. 组件缓存

  3. 浏览器缓存
    暂且把数据存储也换入到数据存储。 客户端存储方式：localStorage、SessionStorage、IndexDB、Application Cache、Service Workers

  4. ajax缓存
    url不添加时间戳会进行缓存。根据实际情况决定是否添加时间戳

异步懒加载

  1. 资源的异步加载 用到时在加载，script的defer、async、

  2. 路由的异步懒加载

  3. 组件的异步懒加载

  • 非必须组件延迟加载
  • 公共组件等可以预加载，参考prefetch、preload

渲染优化

  1. 减少dom层级和数量
    不要div一层层嵌套下去。

  2. 避免img标签src属性空置
    会导致多一次请求

  3. css防止头部

  4. 避免闭包或未移除的事件监听造成内存泄露和溢出

首先先大概了解浏览器的JS运行和GUI渲染过程。

运行机制

浏览器一共有JS引擎线程、GUI渲染线程、HTTP线程、定时器线程、事件回调线程。

GUI渲染过程主要包含重绘和回流

渲染指标

  • FP（全称“First Paint”，翻译为“首次绘制”）
  • FCP（全称“First Contentful Paint”，翻译为“首次内容绘制”）
  • FMP（全称“First Meaningful Paint”，翻译为“首次有效绘制”）
  • LCP（全称“Largest Contentful Paint”） 表示可视区“内容”最大的可见元素开始出现在屏幕上的时间点。
  • TTI（全称“Time to Interactive”，翻译为“可交互时间”） 表示网页第一次 完全达到可交互状态

参考或引用

参考：我的前端性能优化知识体系open in new window