性能指标
- 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