如何编写快速加载的 HTML 页面?
我们可以通过多种方式优化我们的 Web 应用程序，使网页加载速度更快、更高效，这不仅可以减少 Web 服务器的负载，还可以提高网站的 SEO 排名。
让我们讨论一下优化网页的不同方法，并借助示例进行理解。
方法 1:尽可能减小文件大小
应尽可能减小文件大小。这可以通过修剪文件中不必要的空格、删除不必要的注释以及/或者用外部样式表文件和脚本替换所有内联样式和脚本来实现。有很多在线工具可以帮助你实现这种最小化，例如 HTML Tidy 等。
下面我们通过一个例子来讨论一下这种方法 -
不良做法
示例
<!DOCTYPE html>
<html lang="en">
<head>
<title>How to author fast-loading HTML pages?</title>
</head>
<body>
<!-- comment here -->
<h3>
How to author fast-loading HTML pages?
</h3>
</body>
</html>
良好做法
示例
<!DOCTYPE html> <html lang="en"> <head> <title>How to author fast-loading HTML pages?</title> </head> <body> <h3>How to author fast-loading HTML pages?</h3> </body> </html>
方法 2:减少使用的外部文件数量
在我们的 Web 应用程序中使用外部文件意味着创建尽可能多的外部 HTTP 连接，并等待它们各自的请求-响应周期完成才能查看结果。
减少此类连接将有助于我们减少页面加载的等待时间，同时也将减少 HTTP 请求的总体瀑布时间。实现此目标的方法之一是只使用单个外部图像，而不是使用多个图像，然后根据不同的图像需求使用该图像。我们可以调整该单个图像并相应地定位，以便只有图像的所需部分可见，而其余部分则隐藏。
方法 3:延迟加载图像资源
默认情况下，Web 浏览器中的图像是同步加载的。这会导致图像优先加载，即使它在屏幕上不可见。我们可以通过延迟加载图片来避免这种情况，也就是说，只有当图片在视口中可见时才加载。我们可以通过使用"img"HTML 标签的"loading"属性并将其赋值为"lazy"来实现这一点。
不良做法
示例
<!DOCTYPE html> <html lang="en"> <head> <title>How to author fast-loading HTML pages?</title> </head> <body> <h3>How to author fast-loading HTML pages?</h3> <img src="https://www.cainiaomax.com/static/images/logo-color.png" /> </body> </html>
良好做法
示例
<!DOCTYPE html> <html lang="en"> <head> <title>How to author fast-loading HTML pages?</title> </head> <body> <h3>How to author fast-loading HTML pages?</h3> <img src="https://www.cainiaomax.com/static/images/logo-color.png" loading="lazy" /> </body> </html>
方法 4:延迟或异步加载外部脚本
默认情况下，外部脚本以阻塞方式加载，这意味着它们会阻止代码的进一步执行，直到外部脚本加载并获取完毕。我们可以通过异步加载(即并行加载，不阻塞代码的进一步执行)或延迟加载(即仅在网页加载完成后加载)来避免这种情况。我们可以使用"async"和"defer"属性来实现相同的效果。
不良做法
示例
<!DOCTYPE html> <html lang="en"> <head> <title>How to author fast-loading HTML pages?</title> <script src="test.js"></script> </head> <body> <h3>How to author fast-loading HTML pages?</h3> </body> </html>
良好做法
示例
<!DOCTYPE html> <html lang="en"> <head> <title>How to author fast-loading HTML pages?</title> <script src="test.js" defer></script> </head> <body> <h3>How to author fast-loading HTML pages?</h3> </body> </html>
方法 5:明确设置图片和表格的大小
明确设置图片和表格的大小有助于浏览器快速加载，而无需任何内容重排。我们可以通过在图片中使用"height"和"width"属性，以及在表格中使用"table-layout"属性来实现这一点。
不良做法
示例
<!DOCTYPE html> <html lang="en"> <head> <title>How to author fast-loading HTML pages?</title> </head> <body> <h3>How to author fast-loading HTML pages?</h3> <img src="https://www.cainiaomax.com/static/images/logo-color.png" /> </body> </html>
良好做法
示例
<!DOCTYPE html> <html lang="en"> <head> <title>How to author fast-loading HTML pages?</title> </head> <body> <h3>How to author fast-loading HTML pages?</h3> <img src="https://www.cainiaomax.com/static/images/logo-color.png" /> </body> </html>
方法 6:尽可能使用 CDN
CDN 代表内容分发网络 (CDN)，是一种高效提供资源的有用资产。它们遍布全球各地，有助于缩短服务器和客户端之间的物理距离。距离的缩短意味着资源加载速度更快，页面加载时间也更短。
结论
在本文中，我们学习了如何使用不同的方法编写快速加载的 HTML 页面。在第一种方法中，我们学习了应该通过删除不必要的空格来最小化文件大小;在第二种方法中，我们学习了应该减少 Web 应用程序中对外部文件资源的依赖;在第三种方法中，我们学习了应该延迟加载图片资源，这样除非在视口中，否则它们不会加载;在第四种方法中，我们学习了异步或延迟加载外部脚本;在第五种方法中，我们学习了设置图片和表格的大小;最后我们学会了尽可能使用 CDN 来加载外部脚本。
相关文章
有用资源
css 参考教程 - 该教程包含有关 css 的更多信息:https://www.cainiaomax.com/css/
