0571-88730320

优化CSS和加快网站速度的方法!

优化CSS和加快网站速度的方法!

发布时间:2019-12-07 11:10:00

CSS必须经过一个相对复杂的管道,就像HTML和JavaScript一样,浏览器必须从服务器下载文件,解析它们,并将它们应用到dom中。由于高度的优化...

如果您有类似需求请致电

17742004931 , 0571-88730320

CSS必须经过一个相对复杂的管道,就像HTML和JavaScript一样,浏览器必须从服务器下载文件,解析它们,并将它们应用到dom中。由于高度的优化,这个过程通常非常快速-对于不是基于框架的小型web项目,CSS通常只占总资源消耗的一小部分。

这个框架打破了平衡。包括一个JavaScript GUI堆栈,比如jQuery UI,以观察CSS、JS和HTML的大小增长。通常,开发商最终会感到压力。当他们在一个功能强大的8核工作站后面使用t3internet时,没有人关心速度,这会随着延迟或CPU受限设备的出现而改变。

优化CSS需要一种多维方法。虽然手工编写的代码可以使用各种技术简化,但是手工检查框架代码是低效的。在这些情况下,自动化简化可以产生更好的结果。

下面的步骤将带我们进入CSS优化的世界。不是每个人都能直接应用到你的项目中,但一定要记住它们。

使用缩写语句,例如下面显示的边距声明,可以从根本上减小CSS文件的大小。在Google上搜索CSS速记可以找到许多其他速记表单。

删除不必要的CSS,J显然会加快网页的加载速度。谷歌的Chrome浏览器具有这种开箱即用的功能。只需转到“查看开发人员开发工具”,在版本中打开“源”选项卡,然后打开“命令”菜单。然后,选择ShowCoverage并在coverage analysis窗口中突出显示当前页面上未使用的代码,以打开您的眼睛。

打开Google浏览器开发工具,选择converge旁边的more coverage,可以看到未使用的CSS,点击相应的项目,高亮显示当前页面上未使用的代码,让你睁开眼睛:

在逐行分析中,导航并不一定方便。使用Google的审计可以帮助我们快速分析、使用方法、打开开发人员工具、单击audits字段,然后单击runaudits开始分析结果。

请记住,CSS的自动分析总是会导致错误。在用压缩的CSS文件替换未压缩的CSS文件之后,彻底测试整个站点——没有人知道优化器会导致什么错误。

由于延迟,加载外部样式表需要时间,因此可以将最关键的代码位放入头部。但是,请确保不要做得过火,并记住执行维护任务的人员也必须阅读代码。

几年前,一组半透明PNG在网站上创建半透明效果是很常见的。现在,CSS过滤器为节省资源提供了另一种选择。例如,下面的代码片段确保所讨论的图片显示为其自身的灰度版本。

常识告诉我们,六位数的颜色描述符是最有效的颜色表达方式。事实并非如此——在某些情况下,速记描述或颜色名称可能会更短。

CSS支持多种单位和数字格式。它们是一个值得庆幸的优化目标-可以删除尾随和尾随的零,如下面的代码片段所示。另外,请记住,零总是零,添加维度不会为包含的信息增加值。

此优化需要小心,因为它会影响代码更改。CSS规范允许您省略属性组中的最后一个分号。由于这种优化方法节省的成本很小,我们主要关注那些正在开发自动优化的程序员。

代码部署后可能存在的错误不能实时知道。为了在以后解决这些错误,我们花了很多时间进行日志调试。这样,我们推荐一个好的bug监控工具fundebug。

由于协议开销,加载多个小图片效率低下。CSS向导将一系列小图片组合成一个大的PNG文件,然后通过CSS规则对其进行分解。像texturepacker这样的程序大大简化了创建过程。

提高性能的一个简单方法是使用CSS标准的特性。值为0的默认单位是PX——删除PX会为每个数字保存两个字节。

分析表明,一些标签比其他标签更贵。以下解决方案会影响性能-如果没有必要,请尽量不要使用它们。

空格—考虑制表符、回车符和空格—使代码更易于阅读,但从解析器的角度来看,它并不有用。在发布之前删除它们,更好的方法是将此任务委托给shell脚本或类似的工具。

注释对编译器也没有影响。创建自定义解析器以在发布之前删除它们。这不仅节省了带宽,而且使攻击者和克隆人更难理解手头代码背后的思想。

雅虎的用户体验团队已经创建了一个处理许多压缩任务的应用程序。它以jar文件的形式发布,可以在这里使用,并且可以使用选定的JVM运行。

虽然CSS选择器的性能没有几年前那么重要(请参阅参考资料),但是sass之类的框架有时会生成非常复杂的生成,不时地查看输出文件,并考虑优化结果的方法。

有句老话说,最快的文件永远不会通过网络发送。让浏览器缓存请求有效地执行此操作。很遗憾,必须在服务器上设置缓存头。利用上面提到的两个chrome工具,它们提供了一种快速分析更改结果的方法。

设计者通常不喜欢缓存,因为他们担心浏览器会缓存同一个样式表。解决这个问题的一个简单方法是包含带有文件名的标记。不幸的是,由于某些代理拒绝缓存具有“动态”路径的文件,因此此步骤附带的代码中概述的方案在任何地方都不适用。

联系我们,谈您的需求

立即咨询