认识达内从这里开始

网页加载缓慢是引起用户流失非常常见的一个网站性能问题，而本文我们就通过案例分析来了解和学习一下，提高网页加载速度的优化方法都有哪些。

1、以更便捷的方式做到这一点

在逐行分析中导航并不一定便捷，使用浏览器的Audits就可以快速帮我们分析，使用方式，打开开发者工具，点击Audits栏位，点击Runaudits后就开始分析结果。

2、注意这些问题

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

3、内联关键CSS

加载外部样式表需要花费时间，这是由于延迟造成的——因此，可以把关键的代码位放在head中。但是，请确保不要做得过火，记住，执行维护任务的人员也必须读取代码。

4、允许反并行解析

import将CSS样式方便添加代码中。遗憾的是，这些好处并不是没有代价的:由于import可以嵌套，因此无法并行解析它们。

5、用CSS替换图片

几年前，一套半透明的png在网站上创建半透明效果是司空见惯的。现在，CSS过滤器提供了一种节省资源的替代方法。

6、使用颜色快捷方式

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

7、删除不必要的零和单位

CSS支持多种单位和数字格式。它们是一个值得感谢的优化目标——可以删除尾随和跟随的零，此外，请记住，零始终是零，添加维度不会为包含的信息附带价值。

8、消除过多分号

这种优化需要谨慎，因为它会影响代码的更改。CSS的规范允许省略属性组中的后一个分号。由于这种优化方法所节省的成本很小，所以我们主要针对那些正在开发自动优化的程序员说明这一点。

9、使用纹理图集

由于协议开销的原因，加载多个小图片的效率很低。CSS精灵将一系列小图片组合成一个大的PNG文件，然后通过CSS规则将其分解。TexturePacker等程序大大简化了创建过程。

10、省略px

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

11、删除空格

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

12、删除注释

注释对编译器也没有任何作用。创建一个自定义解析器，以便在发布之前删除它们。这不仅节省了带宽，而且还确保攻击者和克隆者更难理解手头代码背后的思想。

13、设置缓存

有句老话说，快的文件永远不会通过网络发送。让浏览器缓存请求有效地实现这一点。遗憾的是，缓存头的设置必须在服务器上进行。

14、打破缓存

设计人员通常不喜欢缓存，因为他们担心浏览器会缓存上次的样式表。解决这个问题的一个简单方法是包含带有文件名的标记。遗憾的是，由于一些代理拒绝缓存具有“动态”路径的文件，此步骤所附带的代码中概述的方案并不适用于所有地方。

【免责声明】本文系本网编辑部分转载，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请在30日内与管理员联系，我们会予以更改或删除相关文章，以保证您的权益!更多内容请加danei0707学习了解。欢迎关注“达内在线”参与分销，赚更多好礼。