极客教程CSS 如何编写快速加载的HTML页面
我们可以通过各种方式来优化我们的网络应用，使我们的网页加载速度更快，以更有效的方式，这不仅会减少网络服务器的负载，也会增加网站的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：减少使用的外部文件的数量
在我们的网络应用中使用外部文件意味着要创建尽可能多的外部HTTP连接，从而等待它们各自的请求-响应周期完成，以看到其结果。
减少这样的连接将帮助我们减少页面加载的等待时间，也将减少HTTP请求的整体瀑布时间。我们实现这一目标的方法之一是只使用一张外部图片，而不是使用多张图片，然后为我们所有不同的图片需求消耗该图片。我们可以调整那张单一的图片，并对其进行相应的定位，以便只有所需的图片部分是可见的，而其余部分则被隐藏。
方法3：懒惰地加载你的图像资产
图片在网络浏览器中默认是同步加载的。这导致图像首先被获取，即使它在屏幕上不可见。我们可以通过懒惰地加载我们的图像来避免这种情况，也就是说，只有在视口中可见时才加载我们的图像。我们可以通过使用 “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="test.jpg" />
</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="test.jpg" 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：明确设置图片和表格的大小
明确设置图片和表格的尺寸有助于浏览器快速加载它们，而不需要对内容进行任何回流。我们可以通过在图片中使用 “高度 “和 “宽度 “属性以及在表格中使用 “表格布局 “属性来实现这一目的。
不良做法
例子
<!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="test.jpg" />
</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="test.jpg" height="20px" width="20px" />
</body>
</html>
方法6:如果可能的话，使用CDN
CDN是内容交付网络的缩写，是以有效方式提供资源的有用资产。它们存在于世界各地的不同地理位置，可以帮助减少服务器和客户端之间的物理距离。距离的减少意味着资源的快速加载和页面加载时间的减少。
总结
在这篇文章中，我们了解到，我们可以使用不同的方法编写快速加载的HTML页面。在第一种方法中，我们了解到我们应该通过删除不必要的空白来最小化文件大小；在第二种方法中，我们了解到我们应该减少对网络应用中的外部文件资源的依赖；在第三种方法中，我们了解到我们应该懒惰地加载我们的图像资产，因此它们不会被加载，除非在视口中；在第四种方法中，我们了解到异步或推迟加载外部脚本；在第五种方法中，我们了解到设置图像和表格的大小；最后我们了解到尽可能使用CDN来加载外部脚本。