如何提高网页加载速度？

如何以闪电般的速度加载网站？

看看这 8 个提升前端性能的技巧：

1.压缩

在传输之前压缩文件可以减少其大小，减少需要传输的数据量，从而加快加载时间。

实现方法：

• Gzip/Brotli 压缩: 配置你的 web 服务器（例如 Apache、Nginx）使用 Gzip 或 Brotli 压缩文本资源如 HTML、CSS 和 JavaScript。

• 图片压缩: 使用 TinyPNG 或 ImageOptim 等工具压缩图片。

• 压缩库: 对于动态生成的内容，在发送到客户端之前使用后端框架中的库进行压缩。

2.选择性渲染/窗口化

仅渲染用户可见的元素以减少浏览器的工作负载并提高渲染性能。例如，在动态列表中，只显示可见项。

实现方法：

• 虚拟滚动: 对于长列表，实现虚拟滚动，只渲染可见部分的列表（例如使用 React Virtualized 或 Angular CDK 库）。

• 延迟加载: 仅在图片和其他资源即将进入视图时加载它们。

3.代码分割模块化架构

将较大的应用程序包拆分成多个更小、更易管理的块，可以独立加载，减少初始加载时间。

实现方法：

• Webpack 代码分割: 使用 Webpack 的代码分割功能，将代码拆分成可按需加载的更小的包。

• 动态导入: 使用动态 import() 语句按需加载模块，而不是一次性加载所有内容。

4.基于优先级的加载

优先加载重要资源和出现在视口（或首屏）的内容，确保更好的用户体验。

实现方法：

• 关键 CSS: 内联渲染首屏内容所需的关键 CSS，并推迟加载非关键 CSS。

• 资源提示: 使用下面代码优先加载重要资源。

<link rel="preload">

5.预加载

在请求资源之前提前获取资源，以提高加载速度。

实现方法：

• 预加载关键资源: 使用下面代码预加载重要资源，如字体、脚本或图片，这些资源在页面初始加载后立即需要。

<link rel="preload">

• 预连接: 使用下面代码提前建立到所需源的连接。

<link rel="preconnect">

6.Tree Shaking 或删除死代码

从最终的 JavaScript 包中删除未使用的代码，减少整体包的大小，从而加快下载和执行时间。

实现方法：

• Webpack Tree Shaking: 确保 Webpack 配置了 Tree Shaking，通过使用 ES6 模块并将 mode 设置为 production。

• 死代码消除: 使用 Terser 等工具在缩小过程中消除死代码。

7.预先抓取

主动获取或缓存可能很快需要的资源，确保在请求这些资源时它们已经可用，减少等待时间。

实现方法：

• 链接预取: 使用下面代码预取可能在不久的将来需要的资源（例如用户可能导航到的下一页）。

<link rel="prefetch">

• Service Workers: 实现 service workers 缓存资源以供离线使用，并在后台预取内容。

8.动态导入

根据用户操作动态加载代码模块，通过推迟加载非必要代码来优化初始加载时间。

实现方法：

• JavaScript 中的动态导入: 使用 import() 函数在需要时动态加载模块。例如：

import('./module').then(...)）

• 延迟加载路由: 在 React 等框架中，使用 React.lazy 和 Suspense 根据用户交互延迟加载组件。