为什么Web页面的加载速度如此重要？在这个信息时代，如果一个网站的加载时间太长，大多数用户会非常不耐烦地选择关闭！这让努力熬夜敲代码的程序员感到尴尬。无论网站的功能有多强大，用户都没有时间看它。因此，网站访问量越来越少，粉丝转换率越来越低。最后，程序员可能会被解雇。
了解前端开发的程序员都知道影响网站性能的因素很多，比如，HTTP请求数量、臃肿代码、繁重媒体文件等。如何编写CSS以及如何在浏览器中加载样式表将对加载时间产生重大影响。接下来，推荐五款CSS帮助前端开发程序员创建一流网站的性能提升工具。
TestMyCSS
TestMyCSS它是一种具有多种功能的免费在线优化工具。可用于检查代码冗余，验证错误，未使用CSS寻找最好的方法。程序员只需将网站输入网站CSS文件，可立即开始使用，TestMyCSS所有需要改进的项目都可以找到。不仅如此，程序员还可以看到一些有用的提示：
如何简化复杂的选择器
需要删除的重复CSS属性及选择器
代码中重要声明的数量
不必要的类特异性
不必要的IE修复
不需要供应商前缀CSS属性
有标签名的类别或ID规则，例如a.primary-link
一般选择器使用不当
Stylelint
StyleLint是相当强大的CSS linter，它与PostCSS(一种开发工具)共同编写最先进的CSS，linter可以通过代码捕获潜在错误的程序。
StyleLint可以用来：
检查拼写错误，如打字错误，十六进制颜色无效，重复选择器等。
实现最佳做法
统一编码风格，如每个CSS规则中的一致间距等。
支持新的顶级CSS语法
使用stylefmt一些警告自动修复，格式化CSS规则的工具
......
StyleLint非常强大，程序员可以使用它：
StyleLint CLI(命令界面)
构造工具的插件，如webpack，gulp等。
例如，文本编辑器的插件，Atom，Sublime Text等。
StyleLint Node API
StyleLint PostCSS插件
CSS Triggers
CSS Triggers提供在线页面分析参考，程序员可以通过此参考了解什么CSS属性触发重绘和合成，但不会引发布局，这是浏览器渲染网页时的执行过程。
Layout：浏览器生成几何形状和位置
Paint：浏览器将每个元素的像素分析为图层
Composite：在屏幕上绘制图层的浏览器。
合成操作是浏览器执行的最便宜的操作，如果你的CSS动画的代码反复触发合成和重绘操作的属性，则很难将60fps(每秒帧数)作为平滑网页动画的关键数字。
cssnano
当使用CSS在呈现页面的关键路径时，使用简洁、结构良好的样式表文档变得非常重要。换句话说，默认浏览器网页渲染过程直到样式表加载、分析和执行。因此，如果CSS文档又大又乱，网站的加载时间会很长。
cssnano是PostCSS的CSS优化和分解插件。cssnano格式很好CSS，并通过多次优化，确保最终生产环境尽可能小。
Critical
Critical是处理上一节提到的CSS另一个关键路径问题的工具。程序员可能需要考虑关键，以获得最佳性能CSS直接插入到HTML因为这消除了关键路径的额外往返行程......
这个想法的具体实践是找关键CSS规则，并将这些规则放在HTML文档的<head>部分。Critical生成并内联关键路径CSS，可同时使用程序员Grunt和Gulp。关键关键关键关键关键关键关键关键关键关键CSS可访问()的详细教程
以上五种工具可以帮助前端开发程序员建立一个快速加载的网站，简化风格表，减少错误，便于浏览器的加载和分析。事实上，有很多相关的性能优化工具，但它们都有自己的优缺点。你会选择哪一个？
原创文章，作者：墨羽SEO，如若转载，请注明出处：https://www.moyuseo.com/tutorials/wzyh/29241.html
