在本文中，我们将介绍 20 种优化 CSS 的方法，使其加载速度更快、更易于使用且更高效。 Backward Skip 10s Play Video Forward Skip 10s 根据最新的HTTP Archive 报告，网络仍然臃肿混乱，神话般的中位网站需要 1,700Kb 的数据，分为 80 个 HTTP 请求，并且需要 17 秒才能在移动设备上完全加载。 减少页面重量的完整指南提供了一系列建议。在本文中，我们将重点关注 CSS。诚然，CSS 很少是最严重的罪魁祸首，典型的网站使用 40KB 分布在五个样式表中。也就是说，您仍然可以进行优化，以及改变我们使用 CSS 的方式来提高网站性能。
学习使用分析工具 除非您知道故障出在哪里，否则您无法解决性能问题。浏览器开发工具是最好的起点：从菜单启动，或者在 macOS 上点击F。 所有浏览器都提供类 WhatsApp 号码数据 似的功能，并且这些工具在性能不佳的页面上打开速度会很慢！然而，最有用的选项卡包括以下…… Learn to Code with JavaScript “网络”选项卡显示资产下载时的瀑布图。为了获得最佳结果，请禁用缓存并考虑限制到较低的网络速度。查找下载速度慢或阻止其他文件的文件。当 CSS 和 JavaScript 文件下载和解析时，浏览器通常会阻止浏览器渲染。 “性能”选项卡分析浏览器进程。开始记录，运行页面重新加载等活动，然后停止记录以查看结果。
寻找： 过多的布局/重排操作，浏览器被迫重新计算页面元素的位置和大小。 更改像素的昂贵绘画操作。 合成操作，将页面的绘制部分组合在一起以在屏幕上显示。这通常是处理器密集程度最低的操作。 基于 Chrome 的浏览器提供了一个运行Google Lighthouse 工具的审核选项卡。它经常被渐进式 Web 应用程序开发人员使用，但也提供 CSS 性能建议。 在线选项 或者，使用不受设备和网络的速度和功能影响的在线分析工具。大 先取得大胜利 CSS 不太可能是性能问题的直接原因。但是，它可能会加载可以在几分钟内优化的重要资产。