【译】Google出品 – 利用 资源加载策略做 web 性能优化

网站性能是用户体验的重要组成部分。在当今移动时代，快速加载的页面尤为重要。Google提供了一些优秀的工具和技术帮助开发者优化网站性能。

本文将介绍一种利用资源加载策略来优化网站性能的方法。这些策略可以最大程度地减少页面加载时间，并可应用于各种类型的网站。

什么是资源加载策略？

资源加载策略是指如何将您的页面中的资源(例如图像、样式表、脚本等)从服务器传输到用户的浏览器中。通过采用正确的资源加载策略，您可以最大限度地提高网站的性能。

以下是一些常见的资源加载策略：

延迟加载

延迟加载是指只在用户需要时才加载某些资源。这对于加速页面加载速度非常有用，特别是对于那些包含大量图片或视频的网站。通过延迟加载，您可以使页面更快地加载，同时减少不必要的网络请求。

以下是一个示例代码，展示如何使用 jQuery 实现延迟加载：

------------ -
  -------------------------
---

浏览器缓存

浏览器缓存是指在用户第一次访问您的网站时将资源(如图像、脚本和样式表)保存到本地浏览器中。在用户再次访问网站时，这些资源不需要从服务器下载，而是直接从本地缓存读取。

下面是一个示例代码，展示如何使用 HTTP 头信息来设置浏览器缓存：

----------- ------------------------------
  ------------- --
  -------------- ------- ---- - ------
-------------

压缩

压缩是指在传输过程中减少资源大小的方法，以减少网络带宽和页面加载时间。压缩可应用于任何文本格式的资源(如 HTML、CSS 和 JavaScript)，并且可以通过使用 Gzip 等压缩算法来实现。

下面是一个示例代码，展示如何使用 Gzip 来压缩 JavaScript 文件：

-- -- ---- -- ---------- --
--- ---- - ----------------
--- -- - --------------

--- ---- - ------------------
--- ----- - --------------------------------
--- ------ - ------------------------------------

------------------------------

如何选择正确的资源加载策略？

以下是一些帮助您选择正确的资源加载策略的提示：

• 对于大型图片或视频等重量级资源，应使用延迟加载。
• 对于可缓存的静态资源(如样式表、脚本等)，应配置浏览器缓存。
• 对于任何文本格式的资源(如 HTML、CSS 和 JavaScript)，都应该使用压缩。

此外，您还可以考虑使用以下技术来进一步优化页面性能：

• 去除不必要的资源和代码。
• 优化图像大小和格式。
• 使用 CDN 加速静态资源。

通过采用正确的资源加载策略和其他优化技术，您可以显著提高网站的性能，并提供更好的用户体验。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/7845