跳到主要内容

前端性能优化

首屏白屏进行优化​

1. 资源加载优化​

  • 资源压缩：压缩 HTML、CSS 和 JavaScript 文件，减少文件大小。
  • 图片优化：使用合适的图片格式（如 WebP），压缩图片大小，使用响应式图片。
  • 代码拆分：使用代码分割（Code Splitting）技术，按需加载 JavaScript 代码。将项目代码拆分成多个小块，按需加载。这样可以减少首次加载时需要下载的文件大小，加快页面渲染速度。Webpack、Parcel 等打包工具都提供了代码拆分的功能，可以根据路由、组件等动态加载模块。
  • 延迟加载：对于非首屏内容的资源（如图片、视频等）使用懒加载（Lazy Loading）技术。Vue 的路由懒加载和 React 的动态 import 都是实现懒加载的常见方式。
  • 预加载（Preloading）： 使用 <link rel="preload"> 标签在 HTML 中预加载关键资源，如脚本、样式、字体、图片等。它允许浏览器在渲染页面之前加载这些资源，以加快页面加载速度。
<link
  rel="preload"
  href="style.css"
  as="style"
/>
<link
  rel="preload"
  href="script.js"
  as="script"
/>

2. 提高渲染速度​

  • 服务端渲染（SSR）：使用 Next.js 或 Nuxt.js 等框架进行服务端渲染，将部分渲染工作放在服务器端完成，减少客户端的渲染压力。
  • 预渲染：使用静态站点生成器（如 Gatsby、Next.js）预渲染页面内容，减少首屏渲染时间。
  • 骨架屏：在资源加载完成前显示骨架屏，提升用户体验。

3. 网络优化​

  • 使用 CDN：将静态资源托管到 CDN 上，减少资源加载时间。
  • HTTP/2：利用 HTTP/2 多路复用特性，提高资源加载速度。
  • DNS 预解析：提前解析外部资源的 DNS，减少 DNS 解析时间。
  • 缓存策略： 设置合适的缓存策略，利用浏览器缓存机制来提高页面加载速度。可以使用 HTTP 头中的 Cache-Control、Expires 等字段来控制缓存。

4. 代码优化​

  • 减少重排和重绘：优化 CSS 和 JavaScript 代码，减少浏览器重排（Reflow）和重绘（Repaint）。
  • 异步加载 JavaScript：将非关键 JavaScript 脚本异步加载（如使用 async 和 defer 属性）。
  • CSS 优化：尽量将关键 CSS 内联到 HTML 中，减少页面首次渲染时间。

5. 性能监控和分析​

  • 使用 Lighthouse：使用 Google Lighthouse 工具进行性能分析，获取优化建议。
  • 使用 Web Vitals：监控和分析核心 Web 指标（如 LCP、FID、CLS），找出性能瓶颈。

通过以上方法，可以有效减少首屏白屏时间，提升用户体验。

CDN​

CDN（Content Delivery Network，内容分发网络）是一种分布式的网络架构，通过将内容缓存到地理位置分散的服务器上，以加速网站和应用程序的内容传输，降低延迟，改善用户体验。

CDN 的工作原理​

1. 内容分发​

CDN 将内容分发到全球各地的多个边缘服务器（Edge Servers）。这些服务器位于接近用户的地理位置，以减少数据传输的距离和时间。

2. 用户请求​

当用户请求内容（如网页、图像、视频等）时，该请求会被路由到离用户最近的 CDN 边缘服务器，而不是直接访问原始服务器（也称为源服务器）。

3. 缓存机制​

  • 缓存命中（Cache Hit）: 如果边缘服务器已经缓存了用户请求的内容，它会直接将内容返回给用户，从而大大减少响应时间。
  • 缓存未命中（Cache Miss）: 如果边缘服务器没有缓存请求的内容，它会向源服务器请求该内容，然后缓存一份副本供后续用户请求使用。

4. 内容更新​

CDN 会根据预先设定的缓存策略（如 TTL，Time To Live）来管理缓存内容的更新频率。过期的内容会被自动替换或从源服务器重新获取。

CDN 的关键组件​

  1. 边缘服务器（Edge Servers）: 分布在全球各地的服务器，用于缓存和提供内容给用户。
  2. 源服务器（Origin Server）: 存储原始内容的服务器。边缘服务器在缓存未命中时会向源服务器请求内容。
  3. DNS 路由: CDN 使用智能 DNS 路由技术，将用户的请求指向离其最近的边缘服务器。
  4. 负载均衡: 分配用户请求到不同的边缘服务器，确保均衡的负载分布和高可用性。

CDN 的优势​

  1. 加速内容传输: 缩短用户与服务器之间的距离，提高内容传输速度，减少加载时间。
  2. 降低延迟: 边缘服务器靠近用户，减少数据传输的延迟。
  3. 减轻源服务器负载: 将内容缓存到边缘服务器，减少源服务器的请求压力，提高其稳定性和性能。
  4. 提升可用性和可靠性: 多个边缘服务器的分布式架构，确保在部分服务器故障时，内容仍然可以通过其他服务器获取。
  5. 应对流量峰值: 分布式的边缘服务器能够更好地处理突发的高流量，防止网站因流量过大而崩溃。

CDN 的应用场景​

  1. 网站加速: 提高静态资源（如 HTML、CSS、JavaScript 文件、图像等）的加载速度。
  2. 视频流媒体: 提供高质量的视频流媒体传输，减少缓冲时间，提高用户体验。
  3. 软件分发: 提供快速的软件更新和下载，减少下载时间。
  4. 实时应用: 提高在线游戏、实时通信等应用的响应速度和稳定性。

如何避免​

CSS

  • 将动画效果应用到 position 属性为 absolute 或 fixed 的元素上。
  • 避免使用 CSS 表达式（例如：calc()）。

Javascript

  • 避免频繁操作样式，最好一次性重写 style 属性，或者将样式列表定义为 class 并一次性更改 class 属性。
  • 避免频繁操作 DOM，创建一个 documentFragment，在它上面应用所有 DOM 操作，最后再把它添加到文档中。
  • 也可以先为元素设置 display: none，操作结束后再把它显示出来。因为在 display 属性为 none 的元素上进行的 DOM 操作不会引发回流和重绘。
  • 避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。
  • 对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后续元素频繁回流。

事件委托​

  1. 大量减少内存占用，减少事件注册。
  2. 新增元素实现动态绑定事件

Vue 性能优化建议​

  • Vue 应用运行时性能优化措施

  • 引入生产环境的 Vue 文件

    • 使用单文件组件预编译模板
    • 提取组件的 CSS 到单独到文件
    • 利用 Object.freeze()提升性能
    • 扁平化 Store 数据结构
    • 合理使用持久化 Store 数据
    • 组件懒加载

  • Vue 应用加载性能优化措施

    • 服务端渲染 / 预渲染
    • 组件懒加载

其他方面优化补充

  • webpack 模块打包和 JavaScript 压缩（如 gzip 压缩）
  • 利用 CDN
  • 按需加载资源
  • 在使用 DOM 操作库时用上 array-ids
  • 缓存优化
  • 避免重定向
  • 启用 HTTP/2
  • 应用性能分析
  • 使用负载均衡方案
  • 为了更快的启动时间考虑一下同构
  • 使用索引加速数据库查询
  • 使用更快的转译方案
  • 避免或最小化 JavaScript 和 CSS 的使用而阻塞渲染
  • 用于未来的一个建议：使用 service workers + 流
  • 图片编码优化，尽量使用 svg 和字体图标