性能指标
- LCP:最大的内容绘制完成时间。用以衡量用户能够看到有效信息的时长。
- FID:首次输入延迟。用以衡量用户输入的反馈体验。
- CLS:积累布局偏移。用以衡量呈现给用户的视觉稳定性。
- FCP:首次内容绘制完成时间。用以衡量用户首个可见元素的出现时长。
打开 chrome 按下 f12,点击 lighthouse 分析网页加载情况。
浏览器渲染原理
- DNS查询,找到对应服务器IP地址。
- 通过 HTTPS 协议建议 TCP 连接。
- 浏览器首先需要下载并解析HTML 生成 DOM 树。
- CSS 解析和构建 CSSOM 树,生成 CSSOM 树。
- 根据 DOM 树和 CSSOM 树生成渲染树(Render Tree)。渲染树中不包括不可见的元素,例如 display: none 的元素。
- 布局:根据渲染树确定每个节点在屏幕上的确切位置和大小。
- 绘制:浏览器使用计算得到的布局信息绘制每个元素的内容。
- JavaScript 会被解析、编译和解释。脚本被解析为抽象语法树(和浏览器渲染同时进行)。
优化思路
缓存:
- 设置 HTTP 的资源缓存策略 (减少 http 请求,防止多次进行 tcp 的三次握手SYN、SYN-ACK、ACK)
- 静态资源使用 CDN
- 动态资源和静态资源分离
- 接口缓存
- PWA(Progressive Web App,渐进式网页应用)
域名:
- 域名收拢(加载的资源在同一个域名,节省dns解析时间)
资源加载:
- 预加载:
<link rel="prefetch">
用于告诉浏览器在空闲时提前加载指定资源,但不会阻塞页面的加载1
<link rel="prefetch" href="your-resource">
<link rel="preload">
用于指定当前页面必须立即加载的关键资源,它会在页面加载过程中立即开始下载并预加载资源,确保这些资源在页面渲染过程中可用。 - 懒加载:
按需加载,提高首屏加载速度,动态import() - 选择性渲染:
避免整个组件重新渲染,只重新渲染部分内部组件,缓存组件或者函数。例如使用 React 内部的 memo、useMemo 和 useCallBack、useRef
重绘和重排
- 重绘(Repaint):
重绘指的是在不改变页面布局的情况下,重新绘制元素的样式。也就是说,元素的几何属性没有改变,但是视觉效果(例如颜色、背景等)发生了变化。重绘是相对较轻量的操作,因为它不需要重新计算元素的布局。
- 修改元素的颜色、背景等只影响元素外观但不改变布局的样式属性。
- 显示/隐藏元素。
- 添加或删除类。
- 重排(Reflow):
重排是指浏览器需要重新计算并更新元素的几何属性,因此会影响整个页面布局。重排是一种相对较昂贵的操作,因为它会触发重新计算并更新元素及其所有子元素的布局信息。
- 添加、删除、修改 DOM 元素。
- 修改元素的尺寸、位置、边距、填充等会影响布局的样式属性。
- 浏览器窗口大小发生变化。
重排一定会引起重绘,因为页面布局的变化会导致元素的样式发生变化。
FID 以及 CLS 优化
FID:
- 减少 js 的执行时长
- 分割 js 中繁重的计算任务
CLS:
- 无尺寸的图像
- 无尺寸的广告、嵌入和iframe
- 动态注入的内容
- 导致不可见文本闪烁(FOIT)/无样式文本闪烁(FOUT)的网络字体
- 在更新 DOM 之前等待网络响应的操作
Performance
使用 chrome 的 performance 性能检测:
- 重定向耗时 = redirectEnd - redirectStart;
- DNS查询耗时 = doinainLookupEnd - domain.LookupStart;
- TCP链接耗时 =connectEnd - connectStart;
- HTTP请求耗时 =responseEnd - responseStart;
- 解析dom树耗时 =domComplete - dominteractive;
- 白屏时间 = responseStart - navigationStart;
- DOMready时间 = domContentLoadedEventEnd - navigationStart;
- onioad时间 = lcadEventEnd - navigationStart;
打包工具配置
例如 vite、webpack 打包工具的 chunkSplit、 tree-shaking。
SSR (服务端渲染)
Nuxtjs(文章已上线) 或者 Nextjs