前言
作为前端开发人员，优化网页加载速度是一个很大的挑战。尽管我们可以依靠新技术和软件来解决一些问题，但在我看来，大多数工具和技术都只是工具，最终的解决方案来自于经验和知识。本篇文章将为你详细介绍如何通过优化加载时间来提高网站性能。
了解网页加载过程
在进行加载时间优化之前，我们需要了解网页是如何被加载的。下面是一些与网页加载有关的关键词：
- 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 雪碧图实现:
-- -------------------- ---- -------
-- --- --
----- -
-------- -------------
----------------- ----------------
-
-- -------- --
------------ -
-------------------- - --
------ -----
------- -----
-
-- -------- --
---------- -
-------------------- ----- --
------ -----
------- -----
-将 CSS 和 JavaScript 文件进行压缩和合并
压缩代码非常有用，因为大小较小的一个文件可以更快地下载，减少了用户需要等待的时间。如果您有多个 CSS 和 JavaScript 文件，那么将它们合并为单个文件也是非常有效的方式。
2. 优化图像
图片是网页中典型的大型资源之一。图像可以非常大，从而导致网页加载速度缓慢。为了优化图像，并缩短网页的加载时间，可以：
压缩图片
压缩可以减小图片的大小，从而减少下载时间，加速页面加载速度。您可以使用可用的免费工具，如 tinypng.com，以及其他图像压缩工具对您的图像进行压缩。
指定图像尺寸
将图片缩放为适合页面的大小可以减少下载时间。
使用 JPEG 格式
不同的格式适合不同类型的图片。例如，JPEG 格式适用于照片，因为这种格式不会在减少“美学”方面出现质量损失。
3. 减少重定向
重定向会延长页面加载时间，因为它需要最多两个 HTTP 请求-一次重定向和一次初始请求。为了优化并减少重定向，可以：
删除重定向链接
如果您要求通过重定向链接到另一个网站的链接，那么用户会经历“跳转”页面，这对用户体验来说不是很好。
直接连接到首选的网站
如果有多个可用的网站地址，请确保直接连接到首选的网站。
4. 使用浏览器缓存
浏览器缓存是一种可以减少页面加载时间的方式。这是因为第一次浏览页面时，文件会被下载，保存在客户端浏览器的缓存中。通过缓存，浏览器在下次加载页面时不需要重复下载相同的文件。
5. 使用 CDN
内容分发网络（CDN）是一种可以加速网页加载的工具。使用 CDN 可以将网站的静态资源分布在多个地理位置，并利用离用户所在地最近的资源提供服务，这可以加快网页的速度。
6. 延迟加载
延迟加载可以将资源下载、解析和呈现延迟到浏览器需要它们的那个时间点。这意味着网页可以在较短的时间内加载，即使它们包含许多资源，例如图像和视频等。
以下是 JavaScript 实现的延迟加载代码：
-- -------------------- ---- -------
-- -------
------------- - ---------- -
--- -------------- - --------------------------------------
--- ------------------------
-------- ---------- -
--------------------------- -
--------------------------------------
-
----------------------- - --------------------- -
--- --------- - -------------------
------------------------------------ -
---------------- - ------------------- - ----------- -
------- - ----------------
-----------------------------
-
---
------------------------ -- -- -
-------------------------------------- ----------
------------------------------------ ----------
----------------------------------------------- ----------
-
-- ----
-
----------------------------------- ----------
--------------------------------- ----------
-------------------------------------------- ----------
-7. 减小文件大小
文件大小很大也会减缓网页加载速度。尽量使用小文件、压缩文件、删除不必要的东西等以减小文件大小。虽然这可以是一项耗时的工作，但减小文件大小对网页的速度产生的影响很大。
总结
本篇文章介绍了加速网页加载的多种方式。虽然总有一些不同的情况，但大多数优化有其依据科学的方法和技术。通过减少 HTTP 请求、优化图像、减少重定向、使用浏览器缓存、使用 CDN、延迟加载和减小文件大小等方式，可以加速页面加载速度。
我希望你已经学到了一些很有用的东西，能够在你的下一个项目中为你的页面加载速度做出贡献。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a9bbd8add4f0e0ff31f900