数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学如何编写快速加载的HTML页面？
我们可以通过多种方式优化我们的web应用程序，使我们的网页加载速度更快，效率更高，这不仅可以减少web服务器的负载，还可以提高网站的SEO排名。
让我们讨论一下优化网页的不同方法，并通过示例来理解它们。
方法一：尽可能最小化文件大小
文件大小应尽可能最小化。这可以通过去除文件中的不必要空格、删除不必要的注释和/或用外部样式表文件和脚本替换所有内联样式和脚本实现。有很多在线工具可以帮助你实现这种最小化，例如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>
方法二：减少使用的外部文件数量
在我们的web应用程序中使用外部文件意味着创建许多外部HTTP连接，因此需要等待其各自的请求-响应周期完成才能看到结果。
减少此类连接将有助于我们减少页面加载的等待时间，并将减少HTTP请求的整体瀑布时间。我们可以实现这一点的一种方法是只使用单个外部图像，而不是使用多个图像，然后将该图像用于我们所有不同的图像需求。我们可以调整单个图像并相应地定位它，以便只有图像的所需部分可见，其余部分隐藏。
方法三：延迟加载图像资源
默认情况下，图像在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://tutorialspoint.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://tutorialspoint.com/static/images/logo-color.png" loading="lazy" /> </body> </html>
方法四：延迟或异步加载外部脚本
默认情况下，外部脚本以阻塞方式加载，这意味着它们会阻塞代码的进一步执行，直到外部脚本加载并获取。我们可以通过异步加载它们来避免这种情况，即并行加载它们，并且不阻塞代码的进一步执行，或者以延迟的方式加载它们，即只有在网页加载完成后才加载它们。我们可以使用“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>
方法五：显式设置图像和表格的大小
显式设置图像和表格的大小可以帮助浏览器快速加载它们，而无需重新调整内容。我们可以通过在图像中使用“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://tutorialspoint.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://tutorialspoint.com/static/images/logo-color.png" /> </body> </html>
方法六：如果可能，使用CDN
CDN代表内容分发网络，是一种以高效方式提供资源的有用工具。它们遍布全球各地，可以帮助减少服务器和客户端之间的物理距离。距离的减少意味着资源加载更快，页面加载时间减少。
结论
在本文中，我们了解到可以使用不同的方法编写快速加载的HTML页面。在第一种方法中，我们了解到我们应该通过删除不必要的空格来最小化文件大小；在第二种方法中，我们了解到我们应该减少对web应用程序中外部文件资源的依赖；在第三种方法中，我们了解到我们应该延迟加载图像资源，以便除非在视口中，否则不会加载它们；在第四种方法中，我们学习了异步或延迟加载外部脚本；在第五种方法中，我们学习了设置图像和表格的大小；最后，我们学习了尽可能使用CDN来加载外部脚本。
173 次浏览
