黑马程序员技术交流社区

标题: 五个CSS性能工具可加速您的网站 [打印本页]

作者: 逆风TO 时间: 2020-2-25 15:54
标题: 五个CSS性能工具可加速您的网站
在本文中，我将列出五个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膨胀？在下面的评论中让我知道。

作者: 孙丽 时间: 2020-3-3 11:42
6666666666666666

作者: 孙丽 时间: 2020-3-3 11:44
6666666666666666

作者: 逆风TO 时间: 2020-3-3 11:44
感谢分享加油哦

作者: zhanghua342 时间: 2020-3-3 11:48
棒极了

作者: sdjadyhm 时间: 2020-3-3 12:07
棒棒哒！

作者: zhaosongzhi 时间: 2020-3-3 12:07
改变是痛苦的，但成长的过程更是喜悦的，一定要加油！

作者: duanshaobo 时间: 2020-3-3 12:08
*<(¦Q[▓▓ 呼呼呼。。。。

作者: zhaosongzhi 时间: 2020-3-3 12:14
改变是痛苦的，但成长的过程更是喜悦的，一定要加油！

作者: zhaosongzhi 时间: 2020-3-3 12:21
改变是痛苦的，但成长的过程更是喜悦的，一定要加油！

作者: 你不爱我 时间: 2020-3-3 12:28

分享的很到位。。。加油

作者: zhaosongzhi 时间: 2020-3-3 12:28
改变是痛苦的，但成长的过程更是喜悦的，一定要加油！

作者: Emmmmm~ 时间: 2020-3-3 14:19
棒棒哒，感谢分享

作者: 章鱼顶呱呱 时间: 2020-3-3 14:33
666666666666666666

作者: 举个栗子 时间: 2020-3-3 15:13

作者: 大安 时间: 2020-3-3 16:40
改变是痛苦的，但成长的过程更是喜悦的，一定要加油！

作者: 殷凯老师 时间: 2020-3-3 17:30
棒棒哒，感谢分享

作者: 耙丫丫 时间: 2020-3-3 21:24
6666666666666666666666

作者: fujiangbo 时间: 2020-3-4 08:42
谢谢楼主,辛苦了！

作者: 王锦 时间: 2020-3-4 09:18
66666666666666666

作者: 霍尔 时间: 2020-3-4 09:56
棒棒的

作者: json0314 时间: 2020-3-4 10:04
6666666666666666666666

作者: dendi 时间: 2020-3-4 10:33
感谢分享，加油加油。。。。。。

作者: 123木头人555 时间: 2020-3-4 10:39
666666666666666666

作者: 123木头人555 时间: 2020-3-4 10:39
66666666666666666666666666666

作者: 哦嗨呦 时间: 2020-3-4 10:46
好人一生平安

作者: 王微 时间: 2020-3-4 10:58
棒棒哒，感谢分享

作者: yujq 时间: 2020-3-4 13:43
6666666666666666666666

作者: longyu3 时间: 2020-3-4 13:56
加油，努力，向上.........

作者: mydorling11 时间: 2020-3-4 16:12
1 532 154 255

作者: 古城十六少 时间: 2020-3-4 16:58
CSS我的弱项，多谢分享，学到了

作者: 宗进1 时间: 2020-3-4 18:08
开心加油

作者: 八戒猪 时间: 2020-3-4 18:16
66666666666666

作者: 雨落轻舟 时间: 2020-3-4 20:12
厉害了，收货很多哦

作者: lvxinvip 时间: 2020-3-4 20:24

作者: 爱笑的姑娘 时间: 2020-3-4 21:07
66666666666666666666666666

作者: 黑马程序员啊 时间: 2020-3-4 21:26
666666666666

作者: 零度☆黎明 时间: 2020-3-4 22:05
666666666666666666666666

作者: zplxwl 时间: 2020-3-4 22:15
6666666666666

作者: kdhdjdj 时间: 2020-3-5 14:15

棒棒哒，感谢分享

作者: hello！！！ 时间: 2020-3-5 14:50

作者: 小公举 时间: 2020-3-5 16:41

作者: 我是小圆圆 时间: 2020-3-5 16:48
很棒很棒

作者: 半个程序员 时间: 2020-3-5 17:10
6666666666666666

作者: lzq123 时间: 2020-3-5 18:53
6666666666666666666666666666666666666

作者: hongping 时间: 2020-3-6 10:08
感谢分享加油哦~

作者: daoqin 时间: 2020-3-6 10:20

改变是痛苦的，但成长的过程更是喜悦的，一定要加油！

作者: 我爱我1022 时间: 2020-3-6 10:45
棒棒的，加油

作者: 逆风TO 时间: 2020-3-10 09:50

孙丽发表于 2020-3-3 11:42
6666666666666666

加油，努力，向上...........

作者: 逆风TO 时间: 2020-3-10 09:50

王锦发表于 2020-3-4 09:18
66666666666666666

加油，努力，向上...........

作者: 逆风TO 时间: 2020-3-10 09:50

王锦发表于 2020-3-4 09:18
66666666666666666

加油，努力，向上...........

作者: 逆风TO 时间: 2020-3-10 09:50

fujiangbo 发表于 2020-3-4 08:42
谢谢楼主,辛苦了！

加油，努力，向上...........

作者: 逆风TO 时间: 2020-3-10 09:50

殷凯老师发表于 2020-3-3 17:30
棒棒哒，感谢分享

加油，努力，向上...........

作者: 逆风TO 时间: 2020-3-10 09:50

耙丫丫发表于 2020-3-3 21:24
6666666666666666666666

加油，努力，向上...........

作者: 逆风TO 时间: 2020-3-10 09:50

举个栗子发表于 2020-3-3 15:13

加油，努力，向上...........

作者: 逆风TO 时间: 2020-3-10 09:50

孙丽发表于 2020-3-3 11:42
6666666666666666

加油，努力，向上...........

作者: 逆风TO 时间: 2020-3-10 09:50

王锦发表于 2020-3-4 09:18
66666666666666666

加油，努力，向上...........

作者: 逆风TO 时间: 2020-3-10 09:50

fujiangbo 发表于 2020-3-4 08:42
谢谢楼主,辛苦了！

加油，努力，向上...........

作者: 逆风TO 时间: 2020-3-10 09:51

耙丫丫发表于 2020-3-3 21:24
6666666666666666666666

加油，努力，向上...........

作者: 逆风TO 时间: 2020-3-10 09:51

大安发表于 2020-3-3 16:40
改变是痛苦的，但成长的过程更是喜悦的，一定要加油！

加油，努力，向上...........

作者: 逆风TO 时间: 2020-3-10 09:51

fujiangbo 发表于 2020-3-4 08:42
谢谢楼主,辛苦了！

加油，努力，向上...........

作者: 逆风TO 时间: 2020-3-10 09:51

耙丫丫发表于 2020-3-3 21:24
6666666666666666666666

加油，努力，向上...........

作者: 逆风TO 时间: 2020-3-10 09:51

大安发表于 2020-3-3 16:40
改变是痛苦的，但成长的过程更是喜悦的，一定要加油！

加油，努力，向上...........

作者: 逆风TO 时间: 2020-3-10 09:51

大安发表于 2020-3-3 16:40
改变是痛苦的，但成长的过程更是喜悦的，一定要加油！

加油，努力，向上...........

作者: 逆风TO 时间: 2020-3-10 09:51

大安发表于 2020-3-3 16:40
改变是痛苦的，但成长的过程更是喜悦的，一定要加油！

加油，努力，向上...........

作者: 逆风TO 时间: 2020-3-10 09:51

耙丫丫发表于 2020-3-3 21:24
6666666666666666666666

加油，努力，向上...........

作者: 逆风TO 时间: 2020-3-10 09:51

大安发表于 2020-3-3 16:40
改变是痛苦的，但成长的过程更是喜悦的，一定要加油！

加油，努力，向上...........

作者: 逆风TO 时间: 2020-3-10 09:51

殷凯老师发表于 2020-3-3 17:30
棒棒哒，感谢分享

加油，努力，向上...........

作者: 逆风TO 时间: 2020-3-10 09:51

殷凯老师发表于 2020-3-3 17:30
棒棒哒，感谢分享

加油，努力，向上...........

作者: 逆风TO 时间: 2020-3-10 09:52

耙丫丫发表于 2020-3-3 21:24
6666666666666666666666

加油，努力，向上...........

作者: 逆风TO 时间: 2020-3-10 09:52

zhaosongzhi 发表于 2020-3-3 12:14
改变是痛苦的，但成长的过程更是喜悦的，一定要加油！

加油，努力，向上...........

作者: 逆风TO 时间: 2020-3-10 09:52

你不爱我发表于 2020-3-3 12:28
分享的很到位。。。加油

加油，努力，向上...........

作者: 逆风TO 时间: 2020-3-10 09:52

章鱼顶呱呱发表于 2020-3-3 14:33
666666666666666666

加油，努力，向上...........

作者: 逆风TO 时间: 2020-3-10 09:52

殷凯老师发表于 2020-3-3 17:30
棒棒哒，感谢分享

加油，努力，向上...........

作者: 逆风TO 时间: 2020-3-10 09:52

殷凯老师发表于 2020-3-3 17:30
棒棒哒，感谢分享

加油，努力，向上...........

作者: 逆风TO 时间: 2020-3-10 09:52

举个栗子发表于 2020-3-3 15:13

加油，努力，向上...........

作者: 逆风TO 时间: 2020-3-10 09:52

大安发表于 2020-3-3 16:40
改变是痛苦的，但成长的过程更是喜悦的，一定要加油！

加油，努力，向上...........

作者: 逆风TO 时间: 2020-3-10 09:52

zhaosongzhi 发表于 2020-3-3 12:28
改变是痛苦的，但成长的过程更是喜悦的，一定要加油！

加油，努力，向上...........