《性能先锋——白屏》

鱼叔子

已于 2025-02-17 17:18:33 修改

阅读量155

点赞数 1

分类专栏：性能先锋文章标签：性能优化前端

于 2021-12-03 09:27:47 首次发布

本文链接：https://blog.youkuaiyun.com/QianZuoLuoChen/article/details/121691455

版权

性能先锋专栏收录该内容

5 篇文章

订阅专栏

前言

在前端开发中，白屏时间是一个非常重要的性能指标。优化白屏时间不仅可以提升用户体验，还能减少用户的跳出率，提高页面的留存率。本篇文档将从白屏时间的概念、重要性以及优化策略等方面进行详细阐述。

一、白屏时间的概念

白屏时间是指用户点击一个链接或打开浏览器输入 URL 地址后，从屏幕空白到显示第一个画面的时间。这个时间的长短直接影响用户对网站的第一印象。

例如，假设用户打开一个电商网站，白屏时间过长，用户可能会认为网站加载缓慢，从而失去耐心并离开页面。

二、白屏时间的重要性

白屏时间对用户体验有着至关重要的影响。页面渲染的时间越短，用户等待的时间就越短，用户感知到页面的速度就越快。这可以极大提升用户的体验，减少用户的跳出，提升页面的留存率。

打个比方，打开一个页面就像你的女朋友召唤你一样，如果你出现得越迅速，女朋友肯定会更加欣喜！反之，如果你千呼万唤始出来，那么你的女朋友很可能又要生气了。

三、白屏过程揭秘

1. `DNS Lookup`

DNS Lookup 是浏览器从 DNS 服务器中进行域名查询的过程，是页面加载的第一步。浏览器会先对页面进行域名解析，获取到服务器的 IP 地址后，进而和服务器进行通信。

在整个加载页面的过程中，浏览器会多次进行 DNS Lookup，包括页面本身的域名查询以及在解析 HTML 页面时加载的 JS、CSS、Image、Video 等资源产生的域名查询。

2. 建立 TCP 请求连接

浏览器和服务端 TCP 请求建立的过程基于 TCP/IP 协议。IP 是每一台互联网设备在互联网中的唯一地址，TCP 提供可靠的数据传输服务，通过三次握手建立连接。

3. 服务端请求处理响应

在 TCP 连接建立后，Web 服务器接受请求，开始进行处理，同时浏览器端开始等待服务器的处理响应。Web 服务器根据请求类型的不同，进行相应的处理。静态资源如图片、CSS 文件、静态 HTML 直接进行响应；其他注册的请求会转发给相应的应用服务器，进行数据处理、缓存中取数据等操作，将数据按照约定好的格式响应给浏览器。

在大型应用中，通常为分布式服务架构，应用服务器的处理可能会经过很多个系统的中间件，如消息队列中间件、缓存中间件等，最终才能获取到需要的数据。

4. 客户端下载、解析、渲染显示页面

在服务器返回数据后，客户端浏览器接收数据，进行 HTML 下载、解析、渲染显示。如果是 Gzip 包，则先解压为 HTML，然后进行解析和渲染。浏览器解析 HTML 的头部代码，下载头部代码中的样式资源文件或脚本资源文件。解析 HTML 代码和样式文件代码，构建 HTML 的 DOM 树以及与 CSS相关的 CSSOM 树。通过遍历 DOM 树和 CSSOM 树，浏览器依次计算每个节点的大小、坐标、颜色等样式，构造渲染树。最后，根据渲染树完成绘制过程，将页面内容展示在用户屏幕上。

四、白屏性能优化策略

1. `DNS` 解析优化

针对 DNS Lookup 环节，可以采取以下措施进行优化：

DNS缓存优化：利用浏览器的 DNS 缓存功能，减少重复的 DNS 查询，提高解析效率。通过设置合理的 DNS 缓存时间（TTL），可以让浏览器在一定时间内直接使用缓存的 DNS 记录，而无需再次查询 DNS 服务器。

// 示例：设置 DNS 缓存时间
dnsCacheTime = 3600; // 单位：秒

DNS 预加载策略：通过预测用户可能访问的页面，提前进行 DNS 查询，缩短页面加载时间。可以使用 HTML 的<link>标签的 rel="dns-prefetch" 属性来实现。

<link rel="dns-prefetch" href="https://example.com">

使用 CDN：将网站内容分发到多个地理位置的服务器上，用户访问时，就近获取资源，减少 DNS 解析时间和网络延迟。
稳定可靠的 DNS 服务器：选择响应速度快、稳定性好的 DNS 服务器，如 Google 的公共 DNS（8.8.8.8 和 8.8.4.4）或阿里云的公共 DNS（223.5.5.5 和 223.6.6.6），确保 DNS 查询的快速完成。

2. `TCP` 网络链路优化

减少网络延迟：优化服务器的位置，使其更接近用户，减少数据传输的距离和时间。可以使用内容分发网络（CDN）将静态资源缓存在离用户更近的节点上。
提升带宽：增加网络带宽，提高数据传输的速率，减少数据传输的时间。对于服务器提供商，可以选择更高带宽的网络套餐。
使用 HTTP/2：HTTP/2 协议可以实现多路复用，减少 TCP 连接的建立次数，提高网络传输效率。以下是 HTTP/2 的一些主要特性：
- 多路复用：允许通过一个 TCP 连接并发传输多个 HTTP 请求和响应，避免了多个 TCP 连接的协商时间。
- 头部压缩：使用 HPACK 压缩算法对 HTTP 请求和响应的头部进行压缩，减少头部数据的传输量，提高传输效率。
- 服务器推送：允许服务器提前将资源推送给客户端，客户端可以在需要时直接使用这些资源，而无需等待客户端发起请求。
开启 TCP 快速打开：允许在 TCP 握手的同时发送数据，减少数据传输的延迟。这需要客户端和服务器都支持 TCP 快速打开功能。

# 开启 TCP 快速打开（Linux 系统）
echo 3 > /proc/sys/net/ipv4/tcp_fastopen

3. 服务端处理优化

使用缓存：
- 浏览器缓存：通过设置 HTTP 响应头（如 Cache-Control、Expires 等），让浏览器缓存静态资源（如图片、CSS 文件、JS 文件等）。下次用户访问时，如果资源没有发生变化，浏览器可以直接使用缓存版本，减少对服务器的请求次数。

Cache-Control: max-age=86400, public

- 服务器缓存：使用缓存服务器（如 Redis、Memcached）缓存频繁访问的数据（如用户信息、文章列表等）。当用户请求这些数据时，可以直接从缓存中获取，减少数据库的访问压力。
- CDN 缓存：将静态资源缓存到 CDN 节点上，用户访问时可以直接从 CDN 获取资源，提高资源的加载速度。
数据库优化：
- 索引优化：为数据库表的常用查询字段创建索引，提高查询效率。但要注意索引的创建和维护成本，避免过度使用索引。
- 查询优化：优化数据库查询语句，减少查询次数和查询时间。可以使用 EXPLAIN 关键字来分析查询语句的执行计划，找出性能瓶颈。

EXPLAIN SELECT * FROM users WHERE age > 18;

- 连接池优化：使用数据库连接池管理数据库连接，减少连接的创建和销毁时间，并提高数据库连接的利用率。
应用服务器优化：
- 代码优化：对应用服务器的代码进行优化，减少不必要的计算和逻辑，提高代码的执行效率。可以使用代码质量检测工具（如 ESLint、Prettier）来发现和修复代码中的问题。
- 线程池优化：使用线程池管理应用服务器的线程，提高系统资源的利用率，减少线程的创建和销毁时间。
- 异步处理：将一些耗时的操作（如文件上传、邮件发送等）异步处理，避免阻塞主线程，提高应用服务器的响应速度。
使用中间件：
- 消息队列中间件：使用消息队列（如 RabbitMQ、Kafka、RocketMQ 等）将系统中的异步任务和解耦操作进行分离，提高系统的处理能力。例如，用户注册后发送欢迎邮件的操作可以异步处理。

// 示例：使用 RabbitMQ 发送邮件
const amqp = require('amqplib/callback_api');

amqp.connect('amqp://localhost', (err, conn) => {
  conn.createChannel((err, ch) => {
    const queue = 'email_queue';
    const msg = JSON.stringify({ email: 'user@example.com', subject: 'Welcome', content: 'Hello!' });

    ch.assertQueue(queue, { durable: true });
    ch.sendToQueue(queue, Buffer.from(msg), { persistent: true });
    console.log(" [x] Sent '%s'", msg);
  });
});

- 缓存中间件：使用缓存中间件（如 Redis、Memcached）缓存经常访问的数据，提高数据的读取速度。
Gzip 压缩：对服务器返回的数据进行压缩，减少数据传输的体积，提高传输速度。可以通过配置 Web 服务器（如 Nginx、Apache）或应用服务器（如 Node.js）来启用 Gzip 压缩。

# 示例：Nginx 配置 Gzip 压缩
gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_http_version 1.1;
gzip_comp_level 6;
gzip_types text/plain application/javascript text/css application/xml;
gzip_vary on;

4. 浏览器下载、解析、渲染页面优化

精简 HTML 代码和结构：减少 HTML 代码的冗余，优化 HTML 的结构，提高浏览器的解析速度。例如，将多个内联样式合并为一个外部样式表，移除无用的注释和空格等。
优化 CSS 文件和结构：
- 压缩 CSS 文件：使用工具（如 UglifyCSS、CleanCSS）将 CSS 文件进行压缩，去除注释、空格和不必要的符号，减少文件的大小。

# 使用 CleanCSS 压缩 CSS 文件
cleancss -o style.min.css style.css

- 内联关键 CSS：将首屏渲染所需的关键 CSS 内联到 HTML 文件中，减少浏览器的阻塞时间，加快页面的渲染速度。

<head>
  <style>
    /* 关键 CSS */
    body { margin: 0; padding: 0; font-family: Arial, sans-serif; }
    .header { background-color: #333; color: #fff; padding: 20px; }
  </style>
</head>

- 使用 CSS 预处理器：使用 CSS 预处理器（如 Sass、Less）可以提高开发效率，同时生成更优化的 CSS 文件。
合理放置 JS 代码：
- 避免使用内联 JS：将 JS 代码放在外部文件中，并尽量将其放置在 HTML 文件的底部，减少对页面渲染的阻塞。

<body>
  <!-- 页面内容 -->
  <script src="app.js"></script>
</body>

- 异步加载 JS 文件：使用 async 或 defer 属性异步加载 JS 文件，使 JS 文件的加载和解析不会阻塞页面的渲染。

<script src="app.js" async></script>
<script src="app.js" defer></script>

图片优化：
- 压缩图片：使用工具（如 TinyPNG、ImageOptim）对图片进行压缩，减少图片的大小，提高图片的加载速度。

# 使用 ImageMagick 压缩图片
convert input.jpg -quality 85 output.jpg

- 选择合适的图片格式：使用适合的图片格式（如 WebP、JPEG、PNG），根据图片的特点和应用场景选择最优的格式。

图片格式	特点	适用场景
WebP	压缩率高，支持有损和无损压缩	现代浏览器和移动设备
JPEG	压缩率高，支持有损压缩	照片和复杂图像
PNG	无损压缩，支持透明度	图标和简单图形

- 使用图片懒加载：对页面中的图片进行懒加载，只有在用户需要时才加载图片，减少页面的初始加载时间。

// 示例：使用 Intersection Observer 实现图片懒加载
const lazyImages = document.querySelectorAll('img.lazy');
const observer = new IntersectionObserver(
  entries => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        observer.unobserve(img);
      }
    });
  }, {
    root: null,
    threshold: 0
  }
);
lazyImages.forEach(img => observer.observe(img));

代码分离：
- 按需加载：将代码进行分离，按需加载页面所需的模块，减少页面的初始加载时间。可以使用 Webpack 等模块打包工具实现代码分离。

// 示例：使用 Webpack 的动态导入
import(/* webpackChunkName: "vendor" */ './vendor.js').then(module => {
  module.default();
});

- 异步加载代码：将非关键代码异步加载，使页面的核心内容能够快速加载和渲染。
开启 Cache-Control：通过设置 Cache-Control 头，控制浏览器缓存，减少对服务器的请求次数，提高页面的加载速度。

Cache-Control: max-age=86400, public

使用现代浏览器特性：
- Web Workers：将一些耗时的计算任务交给 Web Workers 处理，避免阻塞主线程，提高页面的响应速度。

// 示例：使用 Web Workers
const worker = new Worker('worker.js');
worker.postMessage({ data: 123 });
worker.onmessage = event => {
  console.log('Worker response:', event.data);
};

- Service Workers：通过 Service Workers 可以实现离线缓存、推送通知等功能，提升页面的性能和用户体验。

// 示例：注册 Service Worker
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js').then(registration => {
    console.log('Service worker registered:', registration);
  });
}

五、白屏优化实例

1.使用 `CDN` 加速

如果你的网站有大量静态资源（如图片、CSS、JS 文件等），可以将这些资源部署到 CDN 上。CDN 会将资源缓存到离用户最近的节点上，从而减少资源的加载时间。

<!-- 示例：加载 CDN 上的 jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

2. 启用浏览器缓存

在 Nginx 或 Apache 中配置 HTTP 响应头，启用浏览器缓存。

# Nginx 配置
location ~* \.(css|js|jpg|jpeg|png|gif|ico)$ {
  expires max;
  add_header Cache-Control "public";
}

3. 使用 `Gzip` 压缩

在 Nginx 或 Apache 中开启 Gzip 压缩。

# Nginx 配置
gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_http_version 1.1;
gzip_comp_level 6;
gzip_types text/plain application/javascript text/css application/xml;
gzip_vary on;

4. 代码优化

通过工具（如 Webpack、Babel）对代码进行优化，去除无用的代码和冗余的逻辑。

# 使用 Webpack 打包代码
npx webpack --mode=production

5. 图片懒加载

使用图片懒加载技术，减少页面的初始加载时间。

<img class="lazy" data-src="image.jpg" alt="Lazy Load Image">

六、总结

优化白屏时间是一个系统工程，需要从多个方面进行综合考虑和优化。通过 DNS 解析优化、TCP 网络链路优化、服务端处理优化以及浏览器下载、解析、渲染页面优化等策略，可以有效减少白屏时间，提升用户体验。同时，在优化过程中，要不断测试和调整，确保优化方案的有效性和稳定性。
希望本篇文档对你有所帮助！如果你有任何问题或建议，欢迎随时与我交流。