HTML性能优化

HTML 性能关键问题

就性能而言，HTML 非常简单，它主要是文本，文本大小较小，因此下载和渲染速度通常很快。影响网页性能的关键问题包括：

图像和视频文件的大小：需要考虑如何处理替换元素（例如 <img> 和 <video>）。图像和视频文件较大，可能会显著增加页面的大小。因此，需要尽量减少下载到用户设备的字节数（例如，为移动设备提供较小的图像）。还需要考虑仅在需要时加载页面上的图像和视频，以改善感知性能。
嵌入内容的交付：通常是嵌入在 <iframe> 元素中的内容。将内容加载到 <iframe> 中可能会显著影响性能，因此应该仔细考虑。
资源加载顺序：为了最大化感知性能和实际性能，HTML 应该首先按照在页面上出现的顺序加载。然后，你可以利用各种特性来影响资源加载顺序以获得更好的性能。例如，你可以提前预加载关键的 CSS 和字体，但将非关键的 JavaScript 推迟到稍后加载。

响应式处理替代元素

响应式设计彻底改变了在不同设备上处理网页内容布局的方式。它的一个关键优势是可以动态切换根据不同的屏幕尺寸优化后的布局，例如宽屏布局与窄屏（移动设备）布局之间的切换。它还可以根据其他设备属性，如分辨率或亮色或暗色配色方案的偏好，来处理内容的动态切换。

通过 srcset 提供不同的图像分辨率

<img  srcset="480w.jpg 480w, 800w.jpg 800w"  sizes="max-width: 600px 480px,         800px"  src="800w.jpg"  alt="家庭照" />

为图像和视频提供不同来源

<picture>  <source media="max-width: 799px" srcset="narrow-banner-480w.jpg" />  <source media="min-width: 800px" srcset="wide-banner-800w.jpg" />  <img src="large-banner-800w.jpg" alt="茂密森林景观" /></picture>

使用 rel="preload" 预加载内容

<link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4" />