在本文中，我将列出五个CSS性能工具，这些工具将帮助您将网站置于CSS架构上，以实现快速加载体验。
为什么页面速度如此重要？
快速加载的网站对于网站的成功至关重要。有研究发现支持以下观点：如果用户不得不等待甚至几秒钟才能显示Web内容，他们就会很快变得不耐烦。
当这种情况在您的网站上发生时，他们的体验会明显下降，结果是您的网站访问量和转换次数减少，最终损害了您的业务。
有许多因素会影响Web性能，例如HTTP请求的数量，code肿的代码，大量的媒体文件等。如何编写CSS以及如何将样式表加载到浏览器中会对其中的一些因素产生重大影响宝贵的毫秒数，这使访问者停留在您的网站上与点击进入竞争的方式有所不同。
让我们看看下面的工具如何帮助您修复CSS以获得一流的Web性能。
新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。
TestMyCSS
TestMyCSS是具有大量功能的免费在线优化工具。它检查冗余，验证错误，未使用的CSS和最佳实践。
您可以立即开始使用它，只需键入网站CSS文件的url，TestMyCSS就会吐出所有需要改进的项目。不仅如此，您还可以在以下方面找到有用的提示
如何简化复杂的选择器
您需要摆脱的重复CSS属性和选择器
!important代码中存在的声明数
不必要的班级特异性
不必要的IE修复
不需要供应商前缀的前缀CSS属性
具有标签名称的类别或ID规则，例如 a.primary-link
通用选择器使用不当。
Stylelint
Stylelint是一个雄心勃勃的CSS小工具，可与PostCSS一起使用，PostCSS是一种编写最新CSS的开源工具。linter是一个程序，它遍历您的代码并捕获任何潜在的错误。
Stylelint可以
标记错误，例如错别字，无效的十六进制颜色，重复的选择器等。
实施最佳做法
在每个CSS规则中强制执行编码样式约定，例如一致的间距等。
提供对新的尖端CSS语法的支持
使用stylefmt（一种用于格式化CSS规则的工具）自动修复一些次要警告……
… 和更多。
Stylelint非常通用，可以与
Stylelint CLI（命令行界面）
用于您选择的构建工具的插件，例如，webpack，gulp等。
可供您选择的文本编辑器的插件，例如Atom，Sublime Text等。
Stylelint节点API
Stylelint PostCSS插件。
您可以在《 Stylelint 用户指南》和《开发人员指南》中找到有关如何入门的更多详细信息。
CSS触发器
CSS触发器是一个在线资源，可通知您哪些CSS属性会导致在哪些浏览器中进行布局，绘制和复合操作。这些是浏览器在渲染网页时执行的过程。
尤其是：
布局：浏览器生成每个元素的几何形状和位置
画图：浏览器将每个元素的像素分解为图层
复合：浏览器在屏幕上绘制图层。
如果您对网络上的元素进行动画处理，则此信息特别宝贵。对于浏览器而言，复合操作最便宜。如果您的CSS代码对反复触发布局和绘画操作的属性进行动画处理，则很难保持60fps（每秒帧数）的速度，这对于平滑Web动画来说是至关重要的数字。
csnano
当您认为CSS 在页面呈现过程的关键路径上时，使用精简且结构良好的样式表文档就变得很重要。换句话说，默认情况下，浏览器会延迟网页的呈现，直到加载，解析和执行样式表为止。因此，如果您的CSS文档又大又杂乱，那么访问者更有可能需要稍等片刻才能使用您网站上的内容。
新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。
cssnano是一个CSS优化和微小插件PostCSS。尤其是，
cssnano会采用格式良好的CSS并通过许多有针对性的优化来运行它，以确保最终结果对于生产环境而言尽可能小。
该工具具有大量功能，以查找它可以为您做的所有事情，请访问cssnano网站。
危急
关键是我在上一节中提到的使用CSS解决关键路径问题的另一种工具。
在PageSpeed Insights的规则和建议中，您会发现以下提示：
为了获得最佳性能，您可能需要考虑将关键CSS直接内联到HTML文档中。这消除了关键路径中的其他往返行程。
Google开发者博客 上的Ilya Grigorik 。
这个想法是寻找关键的CSS规则，并将这些规则放在<head>HTML文档的部分中。关于可以考虑的关键CSS，通常的共识是，用于设置基本布局和字体样式以及网站首屏内容的任何规则都是不错的选择。
关键为您生成并内嵌关键路径CSS，您可以将其与Grunt和Gulp一起使用。有关使用此工具内联关键CSS的详细教程，请不要错过Asha Laxmi的“ 如何以及为什么应该内联关键CSS”。
结论
在本文中，我强调了快速加载网站的重要性，以及style肿的样式表如何使您的访问者可能面临不受欢迎的等待内容出现在屏幕上的等待。我在此处列出的五种工具将使您的样式表更精简，更不易出现错误，从而使浏览器更易于加载和解析。
您使用什么来控制CSS膨胀？在下面的评论中让我知道。
|
|
收藏
淘帖
踩
