白筱汐

想都是问题,做都是答案

0%

前端性能优化

性能指标

  1. LCP:最大的内容绘制完成时间。用以衡量用户能够看到有效信息的时长。
  2. FID:首次输入延迟。用以衡量用户输入的反馈体验。
  3. CLS:积累布局偏移。用以衡量呈现给用户的视觉稳定性。
  4. FCP:首次内容绘制完成时间。用以衡量用户首个可见元素的出现时长。

打开 chrome 按下 f12,点击 lighthouse 分析网页加载情况。

浏览器渲染原理

  1. DNS查询,找到对应服务器IP地址。
  2. 通过 HTTPS 协议建议 TCP 连接。
  3. 浏览器首先需要下载并解析HTML 生成 DOM 树。
  4. CSS 解析和构建 CSSOM 树,生成 CSSOM 树。
  5. 根据 DOM 树和 CSSOM 树生成渲染树(Render Tree)。渲染树中不包括不可见的元素,例如 display: none 的元素。
  6. 布局:根据渲染树确定每个节点在屏幕上的确切位置和大小。
  7. 绘制:浏览器使用计算得到的布局信息绘制每个元素的内容。
  8. JavaScript 会被解析、编译和解释。脚本被解析为抽象语法树(和浏览器渲染同时进行)。

优化思路

缓存:

  1. 设置 HTTP 的资源缓存策略 (减少 http 请求,防止多次进行 tcp 的三次握手SYN、SYN-ACK、ACK)
  2. 静态资源使用 CDN
  3. 动态资源和静态资源分离
  4. 接口缓存
  5. PWA(Progressive Web App,渐进式网页应用)

域名:

  1. 域名收拢(加载的资源在同一个域名,节省dns解析时间)

资源加载:

  • 预加载:
    <link rel="prefetch">
    用于告诉浏览器在空闲时提前加载指定资源,但不会阻塞页面的加载
    1
    <link rel="prefetch" href="your-resource">
    <link rel="preload">
    用于指定当前页面必须立即加载的关键资源,它会在页面加载过程中立即开始下载并预加载资源,确保这些资源在页面渲染过程中可用。
  • 懒加载:
    按需加载,提高首屏加载速度,动态import()
  • 选择性渲染:
    避免整个组件重新渲染,只重新渲染部分内部组件,缓存组件或者函数。例如使用 React 内部的 memo、useMemo 和 useCallBack、useRef

重绘和重排

  1. 重绘(Repaint):
    重绘指的是在不改变页面布局的情况下,重新绘制元素的样式。也就是说,元素的几何属性没有改变,但是视觉效果(例如颜色、背景等)发生了变化。重绘是相对较轻量的操作,因为它不需要重新计算元素的布局。
  • 修改元素的颜色、背景等只影响元素外观但不改变布局的样式属性。
  • 显示/隐藏元素。
  • 添加或删除类。
  1. 重排(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