性能优化进阶指南（一）：加载时间优化-JavaScript中文网-JavaScript教程资源分享门户

前言

作为前端开发人员，优化网页加载速度是一个很大的挑战。尽管我们可以依靠新技术和软件来解决一些问题，但在我看来，大多数工具和技术都只是工具，最终的解决方案来自于经验和知识。本篇文章将为你详细介绍如何通过优化加载时间来提高网站性能。

了解网页加载过程

在进行加载时间优化之前，我们需要了解网页是如何被加载的。下面是一些与网页加载有关的关键词：

DNS 解析：浏览器需要解析 URL 中的域名，并查找对应的 IP 地址。
HTTP 请求：浏览器会向服务器发送多个 HTTP 请求，以下载页面中的所有资源，如 HTML、CSS、Javascript、图片等。
服务器响应：服务器返回 HTTP 响应，以及包含请求的资源的数据。
DOM 构建：浏览器解析 HTML 并构建文档对象模型(DOM)。
CSSOM 构建：浏览器解析 CSS，并构建 CSS 对象模型（CSSOM）。这基本上是浏览器要渲染页面所需的样式表。
渲染：浏览器将 DOM 和 CSSOM 进行组合，并将它们转换成渲染树。
页面完成加载：页面被完全加载并呈现给用户。

优化网页加载速度

你可以使用以下技术和方式来优化网页加载速度。

1. 减少 HTTP 请求

每个 HTTP 请求都会对页面加载时间产生负面影响。如果一个页面有大量的资源需要加载，那么这会使网页加载速度更慢。因此，通过以下方式减少 HTTP 请求可以加速页面加载时间：

使用 CSS 雪碧图

CSS 雪碧图是一种将多张图片合并成一张的方式，通过背景图片定位或者图片的定位、宽高属性来显示图像的某一部分。这可以向用户提供一个单一的 HTTP 请求以代替多个请求，减少 HTTP 请求的数量从而加快网页加载速度。

CSS 雪碧图实现:

/* 雪碧图 */
.icon {
    display: inline-block;
    background-image: url(sprite.png);
}
/* 定义该图标子元素 */
.icon-pencil {
    background-position: 0 0;
    width: 16px;
    height: 16px;
}
/* 定义该图标子元素 */
.icon-star {
    background-position: -16px 0;
    width: 16px;
    height: 16px;
}

将 CSS 和 JavaScript 文件进行压缩和合并

压缩代码非常有用，因为大小较小的一个文件可以更快地下载，减少了用户需要等待的时间。如果您有多个 CSS 和 JavaScript 文件，那么将它们合并为单个文件也是非常有效的方式。

2. 优化图像

图片是网页中典型的大型资源之一。图像可以非常大，从而导致网页加载速度缓慢。为了优化图像，并缩短网页的加载时间，可以：

压缩图片

压缩可以减小图片的大小，从而减少下载时间，加速页面加载速度。您可以使用可用的免费工具，如 tinypng.com，以及其他图像压缩工具对您的图像进行压缩。

指定图像尺寸

将图片缩放为适合页面的大小可以减少下载时间。

使用 JPEG 格式

不同的格式适合不同类型的图片。例如，JPEG 格式适用于照片，因为这种格式不会在减少“美学”方面出现质量损失。

3. 减少重定向

重定向会延长页面加载时间，因为它需要最多两个 HTTP 请求-一次重定向和一次初始请求。为了优化并减少重定向，可以：

删除重定向链接

如果您要求通过重定向链接到另一个网站的链接，那么用户会经历“跳转”页面，这对用户体验来说不是很好。

直接连接到首选的网站

如果有多个可用的网站地址，请确保直接连接到首选的网站。

4. 使用浏览器缓存

浏览器缓存是一种可以减少页面加载时间的方式。这是因为第一次浏览页面时，文件会被下载，保存在客户端浏览器的缓存中。通过缓存，浏览器在下次加载页面时不需要重复下载相同的文件。

5. 使用 CDN

内容分发网络（CDN）是一种可以加速网页加载的工具。使用 CDN 可以将网站的静态资源分布在多个地理位置，并利用离用户所在地最近的资源提供服务，这可以加快网页的速度。

6. 延迟加载

延迟加载可以将资源下载、解析和呈现延迟到浏览器需要它们的那个时间点。这意味着网页可以在较短的时间内加载，即使它们包含许多资源，例如图像和视频等。

以下是 JavaScript 实现的延迟加载代码：

// 等待加载完页面
window.onload = function() {
  var lazyloadImages = document.querySelectorAll("img.lazy");
  var lazyloadThrottleTimeout;

  function lazyload() {
    if(lazyloadThrottleTimeout) {
      clearTimeout(lazyloadThrottleTimeout);
    }    

    lazyloadThrottleTimeout = setTimeout(function() {
      var scrollTop = window.pageYOffset;
      lazyloadImages.forEach(function(img) {
          if(img.offsetTop < (window.innerHeight + scrollTop)) {
            img.src = img.dataset.src;
            img.classList.remove('lazy');
          }
      });
      if(lazyloadImages.length == 0) { 
        document.removeEventListener("scroll", lazyload);
        window.removeEventListener("resize", lazyload);
        window.removeEventListener("orientationChange", lazyload);
      }
    }, 20);
  }

  document.addEventListener("scroll", lazyload);
  window.addEventListener("resize", lazyload);
  window.addEventListener("orientationChange", lazyload);
}

7. 减小文件大小

文件大小很大也会减缓网页加载速度。尽量使用小文件、压缩文件、删除不必要的东西等以减小文件大小。虽然这可以是一项耗时的工作，但减小文件大小对网页的速度产生的影响很大。

总结

本篇文章介绍了加速网页加载的多种方式。虽然总有一些不同的情况，但大多数优化有其依据科学的方法和技术。通过减少 HTTP 请求、优化图像、减少重定向、使用浏览器缓存、使用 CDN、延迟加载和减小文件大小等方式，可以加速页面加载速度。

我希望你已经学到了一些很有用的东西，能够在你的下一个项目中为你的页面加载速度做出贡献。

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

性能优化进阶指南（一）：加载时间优化

前言