页面加载优化：JS 加载与执行详解

2023-10-29 05:55:07

引言

页面加载速度是影响用户体验的关键因素之一。JavaScript（JS）的加载和执行常常成为页面加载性能的瓶颈。本文将详细分析传统串行加载JS的方式所带来的问题，并提供一系列优化策略，帮助开发者显著提升页面加载速度。

传统 JS 加载的瓶颈

阻塞页面渲染

传统的串行加载方式，即按顺序依次加载和执行JS文件，会导致JS文件的加载和执行阻塞页面的渲染。这意味着，当浏览器正在解析HTML页面时，如果遇到了JS文件，它必须等待JS文件下载并执行完毕后才继续解析HTML。这可能导致页面内容无法及时显示给用户，从而降低用户体验。

并发请求受限

浏览器为了提高效率，对同一域名下的并发连接数进行了限制。当页面加载时，如果大量JS文件需要按顺序加载，这将限制浏览器同时发起的请求数量，从而导致页面加载时间延长。

优化策略

1. 异步加载非关键 JS

对于非关键的JS代码，可以使用<script async>标签进行异步加载。这样，浏览器会在页面内容加载完成后再下载和执行这些代码，不会阻塞页面渲染。

<script async src="non-critical.js"></script>

2. 并行加载 JS

可以使用多个<script>标签并行加载多个JS文件。例如：

<script src="script1.js"></script>
<script src="script2.js"></script>

3. 合并和压缩 JS 文件

合并多个JS文件可以减少HTTP请求的数量，而压缩代码可以减小文件大小，从而加快下载速度。可以使用工具如Webpack或Gulp来实现这一过程。

4. 代码分割和按需加载

将代码分成较小的模块，并使用按需加载技术，可以仅在需要时才加载和执行JS代码。例如，使用React的React.lazy()和Suspense可以实现按需加载组件。

import React, { lazy, Suspense } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}