Brush

Nash

• 15 min read

单页面应用（SPA）的首屏加载慢通常是因为前端需要加载大量资源（如 JavaScript 文件、CSS 文件、图片等）以及初始数据获取耗时造成的。以下是一些常见的解决方案，可以结合具体场景进行优化：

1. 减少资源加载量

  • 代码拆分（Code Splitting）： 使用工具如 Webpack 或 Vite 将应用分成多个模块，按需加载。仅加载首屏所需的代码，其他代码等到用户交互时再加载。
  • Tree Shaking： 去除未使用的代码（如未用到的库函数或模块）。
  • 按需加载组件和依赖： 对于较大的库或组件，使用动态导入 (import())。

2. 压缩资源

  • 代码压缩： 使用工具如 Terser 压缩 JavaScript 文件，使用 CSS Nano 压缩 CSS 文件。
  • 图片优化： 使用更高效的图片格式（如 WebP），并根据屏幕大小生成不同分辨率的图片（响应式图片）。
  • 移除不必要的依赖： 清理未使用的第三方库。

3. 服务端优化

  • SSR（服务端渲染）： 在服务器上渲染页面 HTML，这样客户端只需加载渲染后的内容，提升首屏显示速度。
  • 静态生成（Static Generation）： 使用框架如 Next.js 或 Nuxt.js，生成静态 HTML 文件。
  • 服务端缓存： 对数据或页面进行缓存，减少动态请求的响应时间。

4. 网络优化

  • CDN 加速： 将静态资源部署到 CDN（内容分发网络）节点，缩短资源传输的时间。
  • HTTP/2 和 HTTP/3： 提高网络请求的并发性和传输效率。
  • Lazy Loading（懒加载）： 对图片、视频等非关键资源使用懒加载技术。
  • DNS 预解析（DNS Prefetching）： 提前解析域名，缩短 DNS 查询时间。

5. 初始加载策略优化

  • 骨架屏： 在页面加载时显示简化的骨架 UI，提高用户感知速度。
  • 预加载关键资源： 使用 <link rel="preload"> 提前加载关键资源，如字体和首屏所需的图片。
  • Critical CSS： 提取关键 CSS，直接嵌入 HTML 中，以避免渲染阻塞。

6. 数据请求优化

  • 减少接口调用： 合并接口请求，减少 HTTP 请求数量。
  • 接口缓存： 对不常变化的数据使用客户端缓存（如 LocalStorage、IndexedDB 或 Service Worker 缓存）。
  • 使用更高效的数据格式： 如将 JSON 转为更紧凑的 Protobuf。

7. 性能监控和调试

  • 使用工具如：
  • Lighthouse：检查性能瓶颈。
  • Chrome DevTools：分析资源加载情况。
  • Webpack Bundle Analyzer：查看打包后的文件大小和依赖关系。

虚拟 DOM 不一定总是更快，但它在某些场景下能够提高性能和开发效率。理解虚拟 DOM 的特点及其适用场景，有助于判断是否能为你的项目带来实际性能提升。

虚拟 DOM 的优点

高效的更新机制：虚拟 DOM 通过 diff 算法 比较新旧虚拟 DOM 树，只更新实际 DOM 中需要变更的部分，从而减少对 DOM 的直接操作。

跨平台能力：虚拟 DOM 抽象了 DOM 操作，使得框架可以运行在浏览器之外（如 React Native 用于移动端开发）。

开发友好：虚拟 DOM 提供了简单的一致性模型，开发者可以专注于描述 UI 状态的变化，而不用关心具体的 DOM 操作。

虚拟 DOM 不一定更快的原因

额外的计算开销：

  • 在使用虚拟 DOM 时，框架需要构建虚拟 DOM 树、比较新旧树、生成更新的补丁（patch）并应用到实际 DOM。这些步骤引入了额外的计算开销。
  • 对于简单的页面，直接操作真实 DOM 的性能可能更高。

过度更新：

  • 如果组件状态频繁变更，虚拟 DOM 的 diff 和渲染过程可能会带来性能瓶颈。

优化手段有限：

  • 真实 DOM 的操作如果经过手工优化（如批量插入或减少重排重绘），通常能优于虚拟 DOM 的通用优化策略。

什么时候虚拟 DOM 表现更好？

复杂 UI 或频繁更新场景：

  • 虚拟 DOM 能有效减少大规模 DOM 操作的性能开销。例如，React 的 Fiber 架构支持将渲染任务分片，避免因操作真实 DOM 而阻塞主线程。

跨平台开发：

  • 虚拟 DOM 可以作为底层渲染抽象，支持多个平台（如浏览器、移动设备）。

开发效率优先的场景：

  • 虚拟 DOM 的高层抽象让开发者无需手动优化 DOM 操作。

真实 DOM 优化仍然有效

在某些场景中，手动优化真实 DOM 操作依然能够更高效：

简单页面或静态内容：

  • 不需要频繁更新的静态页面，使用服务端渲染或直接操作 DOM 的性能通常优于虚拟 DOM。

高性能动画：

  • 使用 CSS 动画或 WebGL 绘制的内容可以避免频繁操作虚拟 DOM。

对更新过程有精细控制：

  • 如果开发者能够精准管理 DOM 操作，手动优化通常比框架的通用虚拟 DOM 更高效。

小结

  • 虚拟 DOM 不是性能优化的万能解决方案，但在复杂、动态的 UI 场景中，其优势明显。
  • 在简单或极端性能要求的项目中，直接操作真实 DOM 并结合手动优化可能是更好的选择。
  • 使用虚拟 DOM 的框架（如 React、Vue）时，可以通过减少渲染次数、避免不必要的 diff 和 提升组件复用来进一步优化性能。

如果某个页面有几百个函数需要执行，可以怎么优化页面的性能

如果页面有几百个函数需要执行，性能优化的核心在于减少不必要的执行、优化执行顺序、避免阻塞主线程。以下是一些针对这种情况的优化策略：

1. 函数执行相关优化

合并函数逻辑

  • 合并相似功能的函数： 如果函数之间存在重复或相似逻辑，可以合并为更高效的单一函数。
  • 批量处理： 将多次操作合并为一次批量操作。例如，对数组的多次遍历可以合并为一次 forEach 或 reduce。

延迟执行（Lazy Execution）

  • 按需执行： 只在用户交互或页面需要时执行相关函数，而不是在页面加载时全部执行。
  • 防抖和节流： 使用防抖（Debounce）和节流（Throttle）技术减少频繁调用的函数执行次数。
  • 防抖：如搜索输入框，用户停止输入后再执行搜索。
  • 节流：如滚动事件中每隔固定时间执行一次。

异步执行

  • 异步任务分发： 使用 setTimeout、requestIdleCallback 或 Promise 将非关键任务放入事件队列，避免阻塞主线程。
  • Web Worker： 对计算密集型任务（如数据处理）使用 Web Worker，避免阻塞主线程渲染。

2. 代码加载与执行优化

延迟加载（Lazy Loading）

  • 动态引入模块： 对非首屏功能的代码或函数进行按需加载，例如使用 import() 实现。
  • 分包加载： 使用工具（如 Webpack、Rollup）将代码拆分为多个小包，只加载当前页面需要的部分。

代码缓存

  • 确保使用 CDN 或浏览器缓存机制减少重复加载，提高重复访问的性能。

3. 减少函数执行的频率

虚拟化技术

  • 如果函数的执行与 DOM 渲染有关，可以使用虚拟列表技术（如 React 的 react-window 或 react-virtualized）只渲染可视区域的内容。

避免重复计算

  • 缓存结果（Memoization）： 对计算结果进行缓存，避免多次计算。
  • 使用库如 lodash.memoize 或 React 的 useMemo。
  • 依赖跟踪： 只有在相关依赖发生变化时才重新执行函数。

4. 监控和调试

性能分析工具

  • 使用浏览器开发者工具中的 Performance 面板分析哪些函数耗时较多，重点优化性能瓶颈。
  • 使用 console.time 和 console.timeEnd 测量函数执行时间。

分析调用链

  • 使用工具如 why-did-you-render 或类似工具，找出不必要的函数调用来源。

5. 渲染与计算分离

最小化 DOM 操作

  • 将需要大量计算的函数与 DOM 操作分离，减少不必要的 DOM 查询和修改。
  • 批量更新 DOM，避免多次触发重排（Reflow）和重绘（Repaint）。

动画优化

  • 使用 requestAnimationFrame 替代直接的定时器函数以优化动画相关计算。

6. 资源与依赖优化

减少外部依赖

  • 检查是否引入了不必要的第三方库，替换为轻量级的实现。

脚本压缩

  • 使用工具（如 Terser、UglifyJS）对代码进行压缩。

7. 使用任务优先级

  • 根据功能的重要性划分任务优先级：
  1. 高优先级任务： 与用户交互相关的函数优先执行。
  2. 中优先级任务： 数据预处理或后台加载。
  3. 低优先级任务： 非关键的统计、分析等可以延迟执行。

8. 示例：优化几百个函数执行的伪代码

// 批量合并 & 防抖
function executeFunctions(functions, delay = 100) {
  let batch = [];
  for (let i = 0; i < functions.length; i++) {
    batch.push(() => {
      setTimeout(() => {
        functions[i]();
      }, i * delay);
    });
  }
  batch.forEach(fn => fn());
}

// 分布式任务执行（利用 requestIdleCallback）
function executeWithIdle(functions) {
  let index = 0;

  function executeIdle(deadline) {
    while (index < functions.length && deadline.timeRemaining() > 0) {
      functions[index++]();
    }
    if (index < functions.length) {
      requestIdleCallback(executeIdle);
    }
  }

  requestIdleCallback(executeIdle);
}

浏览器为什么要请求并发数限制？

浏览器对请求的并发数进行限制的主要原因是为了优化网络资源的利用，避免过多连接对服务器或网络造成压力，同时提升用户体验。以下是这一机制背后的核心原因和实现逻辑：

1. 避免服务器负载过高

  • 过多并发请求可能会使服务器过载： 如果没有并发限制，每个客户端可能会向服务器发起大量请求，导致服务器的处理能力被迅速耗尽，影响其服务质量。
  • 防止拒绝服务攻击（DoS）： 并发限制可以帮助减轻过度请求对服务器造成的影响。

2. 避免网络拥堵

  • 带宽限制： 每个用户的网络带宽有限，过多的并发请求会导致资源争用，降低总体下载速度。
  • 减少队头阻塞（Head-of-Line Blocking）： 过多并发可能会导致部分资源加载极慢，因为某些资源需要占用特定的网络连接。

3. 提升浏览器性能和用户体验

  • 资源优先级分配：
  • 浏览器会优先加载关键资源（如 HTML、CSS 和关键 JavaScript 文件），从而确保页面能尽快呈现给用户。
  • 如果没有限制，并发过多的小资源可能会抢占关键资源的带宽。
  • 避免过多线程开销：
  • 每个网络请求都会消耗计算资源（如连接建立、数据传输、TCP/IP 协议处理等）。限制并发请求可以降低 CPU 和内存的消耗。

4. 遵循 HTTP 协议规范

  • HTTP/1.1： 默认情况下，每个域名的并发连接数被限制在 6~8 个左右（不同浏览器稍有差异）。
  • HTTP/2：
  • HTTP/2 的多路复用技术允许在一个 TCP 连接上并发多个请求，无需过多并发连接。
  • 但浏览器仍然会对并发请求数进行限制，以避免服务器过载。

5. 浏览器并发限制的具体实现

  • 按域名限制： 浏览器对同一域名的并发请求数通常有限制（如 Chrome 和 Firefox 默认是 6 个）。
  • 全局限制： 浏览器可能对所有域名的总并发请求数设有更高的上限。
  • 影响因素： 浏览器的具体实现、使用的协议版本（HTTP/1.1、HTTP/2）、CDN 和代理设置都会影响限制。

6. 如何优化并发限制的影响

域名分片（Domain Sharding）

  • 通过将资源分布在多个域名下，绕过单个域名的并发限制。
  • 注意：HTTP/2 的多路复用已经减少了域名分片的必要性。

合并请求

  • 合并 CSS 和 JavaScript 文件，减少请求数量。
  • 对图片使用 CSS 精灵图或图像拼接技术。

使用 HTTP/2

  • HTTP/2 支持多路复用，可以显著减少并发限制对性能的影响。

延迟加载（Lazy Loading）

  • 延迟加载非关键资源（如图片或脚本）以减少初始请求压力。

7. 示例：不同浏览器的并发限制

浏览器 每域名的并发限制（HTTP/1.1） 每域名的并发限制（HTTP/2）
Chrome 6 无限制（实际有其他优化机制）
Firefox 6 无限制（实际有其他优化机制）
Safari 6 无限制（实际有其他优化机制）
Internet Explorer 11 6 不支持 HTTP/2

（实际数值可能因版本更新有细微变化）

浏览器对并发数限制是一种平衡网络资源分配、提升用户体验和防止服务器过载的重要策略。在现代网络环境中，结合 HTTP/2 和优化加载策略可以有效缓解并发限制带来的影响。

css 加载会造成阻塞吗？

是的，CSS 加载会造成阻塞，但具体情况需要结合上下文来分析。CSS 阻塞行为主要体现在以下几个方面：

1. CSS 会阻塞 HTML 的渲染

  • 浏览器在解析 HTML 时，如果遇到 <link> 标签加载外部 CSS 文件，必须先完成 CSS 的加载和解析，才能继续渲染页面内容。
  • 这是因为浏览器在渲染页面时，需要知道所有的样式规则，以正确地布局和绘制页面内容。

阻塞渲染的原因：

  • CSS 决定了元素的大小、位置、颜色等属性。如果未加载完成，浏览器无法确定如何正确渲染元素，可能会导致“闪烁”或布局错乱。
  • 为了避免用户看到未样式化的内容（Flash of Unstyled Content, FOUC），浏览器选择在 CSS 加载完成后再渲染页面。

2. CSS 不会阻塞 DOM 的解析

  • 浏览器在遇到 CSS 文件时，会同时继续解析 HTML DOM 和下载 CSS 文件。
  • 也就是说，CSS 的加载不会阻止 DOM 树的构建，但会阻塞渲染树的生成。

3. CSS 会阻塞 JavaScript 的执行

  • 如果 JavaScript 脚本放在 CSS 之后加载，并且是同步脚本（没有 async 或 defer），浏览器会等待 CSS 加载完成再执行 JavaScript。
  • 这是因为 JavaScript 可能会查询和操作 CSSOM（CSS 对象模型），未完成的 CSSOM 会导致潜在的不一致性。

示例：CSS 阻塞 JavaScript

<head>
  <link rel="stylesheet" href="styles.css">
  <script>
    console.log("This script will wait until styles.css is loaded.");
  </script>
</head>

4. 优化 CSS 加载的策略

为了减轻 CSS 加载阻塞渲染的影响，可以采取以下优化措施：

关键 CSS（Critical CSS）

  • 提取首屏渲染所需的关键 CSS，直接嵌入 HTML 中，避免外部 CSS 阻塞渲染。
<style>
  /* Critical CSS for above-the-fold content */
  body { margin: 0; padding: 0; }
  .header { background-color: #333; color: white; }
</style>

非阻塞加载

  • 对非关键 CSS 使用 media 属性（如 media="print"），使其不会阻塞渲染。
  • 也可以通过 JavaScript 动态加载 CSS 来实现非阻塞加载。
<link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">

压缩 CSS 文件

  • 使用工具（如 CSSNano）压缩 CSS 文件，减少文件大小，加快加载速度。

合并请求

  • 将多个 CSS 文件合并为一个文件，减少 HTTP 请求数量，尤其是在 HTTP/1.1 中。

使用 HTTP/2

  • HTTP/2 支持多路复用，可以并发加载多个 CSS 文件而不受单域名连接限制。

延迟加载（Lazy Loading）

  • 非首屏或次要样式文件可以延迟加载。
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'styles.css';
document.head.appendChild(link);

5. 浏览器优化机制

现代浏览器对 CSS 的加载进行了许多优化：

  • 预加载（Preload）： 浏览器可能会预先加载资源（如 CSS 文件），即使它们在 HTML 中的位置较晚。
  • 并行下载： 浏览器会并行下载多个 CSS 文件，减少单个文件的加载时间。

总结

  • CSS 加载会阻塞页面的渲染，但不会阻塞 DOM 的解析。
  • CSS 加载还会阻塞同步 JavaScript 的执行，影响页面的交互性能。
  • 通过优化关键 CSS、压缩和分离非关键样式、合理使用异步加载等策略，可以显著缓解 CSS 阻塞带来的性能问题。

苏ICP备2025153828号