网站制作需要通过优化CSS来提升性能

即使在 2021 年，网站制作性能仍然是一个问题。根据 HTTP Archive，平均页面需要2 MB 下载，发出超过 60 个 HTTP 请求，在移动设备上完全加载可能需要18 秒。样式表占 60 kB，分为七个请求，因此在尝试解决性能问题时，它很少是首要任务。然而，CSS 确实有效果，无论它看起来多么微弱。一旦你解决了你的JavaScript，学习如何正确优化 CSS 应该是下一个优先事项。 CSS 看起来很简单，但可能需要一些繁重的处理。当您的浏览器遇到标签时，它会在获取和解析 CSS 文件的同时停止其他浏览器的下载和处理。JavaScript 也可以阻止浏览器呈现，但异步处理是可能的： 1、async并行下载脚本的属性，脚本准备就绪后立即运行。 2、defer要并行下载的属性，然后在 DOM 准备就绪时按顺序运行。 3、type="module"加载 ES 模块的属性（其行为类似于defer）。 图像等资产通常需要更多带宽，但可以使用高效格式，并且可以延迟加载（loading="lazy"属性）而不会阻止浏览器渲染。这一切都无法通过 CSS 实现。该文件被缓存，因此后续页面加载应该更快，但渲染阻止过程仍然存在。 样式表越大，下载并处理成 CSS 对象模型 (CSSOM) 所需的时间就越长，浏览器和 JavaScript API 可以使用它来显示页面。尽管 CSS 样式表比大多数其他网站文件小，但它们也不能幸免于“越小越好”的经验法则。识别不再使用的样式可能很困难，删除错误的样式可能会对网站造成严重破坏。开发人员通常会选择最安全的“保留一切”方法。不再使用的页面样式、组件和小部件继续存在于 CSS 中。结果？文件大小、复杂性和维护工作呈指数级增长，使得开发人员越来越不可能删除冗余代码。

转载请保留出处及原文地址:https://www.daojiayun.cn/article/732.html