1 目的
让页面展示的更快
2 相关概念
- 白屏时间 : 浏览器从响应用户输入网址地址，到浏览器开始显示内容的时间
- 首屏时间 : 浏览器从响应用户输入网址地址，到首屏内容渲染完成的时间，此时整个网页不一定要全部渲染完成，但在当前视窗的内容需要渲染完成
- 白屏时间是首屏时间的一个子集
3 优化方案
构建阶段
- 并发：使用多进程打包
- 缓存：打包时利用缓存
- 打包量要小：缩小文件搜索范围，减小不必要的编译工作
资源加载阶段
核心思路是：传输量要小、距离要近、并行传输、资源复用、预先加载
服务端
- DNS服务优化 : 买更快的服务(一般没人做)
- DNS配置host : 跳过DNS查询
- 服务端启用keep-alive：让tcp保持链接，减少tcp链接的时间
- 服务端数据库查询优化(SQL优化)，下图waiting是等待服务端处理的时间
- 提高服务器的带宽，加快下载速度(财务的事情)
- 提高用户的带宽(扯犊子)
- 服务端开启gzip压缩算法，减少前端的下载量，浏览器下载后自动解压缩
- 使用缓存:DNS缓存(浏览器自动处理),http缓存
- 使用多个域名同时请求(cdn域名加速)，请求html/css/js/图片的域名分开，减少单个域名多次请求的时间(单个域名每次请求数量浏览器有限制，一般为10个)，同时可以实现cookie-free
- 升级到 HTTP2.0，实现了多路复用/二进制分帧/服务端推送/数据流优先级/头部压缩
- 静态资源部署到CDN，缩短请求距离
- 使用ssr渲染
前端
- 构建时HTML压缩
- 构建时CSS压缩合并
- 构建时JavaScript压缩合并
- 构建时图片的压缩
- 构建时使用TreeShaking，减少不必要的代码引入
- 使用SVG sprite 或者字体图标代替图片ICON
渲染阶段
- 先加载css再加载js
- 加载CSS推荐用 link 少用 @import
- 不重要的外置引入的JS使用defer或者async属性异步加载
- 路由懒加载
- 组件懒加载
- 图片懒加载
- 预加载
- 页面使用骨架屏或者loading,在首屏加载完成之前，通过渲染一些简单元素进行占位,提升用户体验
<link rel="prefetch" href="url">
操作阶段
动画流畅
- 尽量使用 transition 和 animation来实现CSS动画, 而不是JS实现动画（运行在主线程对动画的流畅度有影响）
- 动画尽量多用transfrom 和 opacity （无需重绘和回流，性能最好）
- translateZ/translate3d 开启硬件加速
- JS动画使用requestAnimationFrame少用setInterval
滚动/移动/操作流畅
- DOM增删操作要少(虚拟长列表、DOM Diff)，高频操作使用防抖和节流
密集型计算
计算密集型操作可以交给WebWorker并发处理
