06.允许反并行解析@import可以很容易地在代码中添加CSS样式。不幸的是，这些好处不是没有代价的：由于@import可以嵌套，它们不能被并行解析。一种更并行的方法是使用一系列浏览器可以立即获取的标记。@importurl("a.css");@importurl("b.css");@importurl("c.css");07。用CSS替换图像几年前，一组半透明的png在网站上创建半透明效果是司空见惯的。CSS过滤器现在提供了一种资源高效的替代方案。例如，以下代码片段可确保所讨论的图像显示为自身的灰度版本。img{-webkit-filter:grayscale(100%);/*oldsafari*/filter:grayscale(100%);}08.使用颜色快捷方式常识告诉我们，六位颜色描述符是最有效的颜色表达方式.情况并非如此——在某些情况下，速记描述或颜色名称可能会更短。目标{背景颜色：#ffffff；}目标{背景：#fff；}09。删除不必要的零和单位CSS支持多种单位和数字格式。它们是一个值得感谢的优化目标-可以删除尾随零，如下面的代码片段所示。另外，请记住，零始终是零，添加维度不会为包含的信息增加价值。填充：0.2em；边距：20.0em；值：0px；填充：.2em；边距：20em；值：0；10。消除过多的分号这种优化需要谨慎，因为它会影响代码更改。CSS规范允许省略属性组中的尾随分号。由于这种优化方法节省的成本很小，我们主要为开发自动优化的程序员说明这一点。p{...font-size:1.33em}11.由于协议开销，使用纹理图集，加载多个小图像的效率很低。CSS精灵将一系列小图像组合成一个大的PNG文件，然后按CSS规则对其进行分解。TexturePacker等程序大大简化了创建过程。.download{width:80px;height:31px;background-position:-160px-160px}.download:hover{width:80px;height:32px;background-position:-80px-160px}12.省略px改善性能简单的方法是使用CSS标准的一个特性。0的值默认为px-删除px可为每个数字节省两个字节。h2{padding:0px;margin:0px;}h2{padding:0;margin:0}13.避免需要性能要求的属性分析表明，一些标签比其他标签更昂贵。以下解析可能会影响性能-如果不需要，请尽量不要使用它们。border-radiusbox-shadowtransformfilter:nth-childposition:fixed;14.删除空格空格——考虑到制表符、回车和空格——使代码更易于阅读，但从解析器的角度来看，它的用处不大。在发布之前删除它们，最好将此任务委托给shell脚本或类似脚本。15.删除注释注释对编译器也没有影响。创建自定义解析器以在发布前删除它们。这不仅可以节省带宽，还可以确保威胁行为者和克隆者更难理解手头代码背后的思想。16.使用自动压缩Yahoo 的UX团队创建了一个应用程序来处理许多压缩任务。它作为 JAR 文件分发，可在此处获取，并且可以与所选的JVM一起运行。java-jaryuicompressor-x.y.z.jarUsage:java-jaryuicompressor-x.y.z.jar[options][inputfile]GlobalOptions-h,--helpDisplaysthisinformation--type指定输入文件的类型17。如果您想将该产品集成到Node.JS中，请在NPM上运行它，请访问npmjs.com/package/yuicompressor。维护不善的存储库包含一组包装器文件和一个JavaScriptAPI。varcompressor=require('yuicompressor');compressor.compress('/path/to/fileorStringofJS',{//CompressorOptions:charset:'utf8',type:'js',18.尽管CSS选择器的性能不是，但保持Sass检查和几年前一样重要（请参阅参考资料），但是像Sass这样的框架有时会产生非常复杂的代码，时不时地查看输出文件，并考虑优化结果的方法。19.设置缓存有一句老话，最快的文件永远不会通过网络发送。让浏览器缓存请求来有效地做到这一点。不幸的是，缓存标头的设置必须在服务器上完成。上面提到的两个Chrome工具，它们提供a快速分析变化结果的方法20.打破缓存设计师一般不喜欢缓存，因为他们担心浏览器会缓存最后的样式表。解决这个问题的一个简单方法是在文件名中包含一个标签.对不起是的，因为一些代理拒绝缓存带有“dynam”的文件ic"路径，此步骤所附代码中概述的方案并不适用于所有地方。21。不要忘记基础知识优化CSS只是游戏的一部分。如果您的服务器不使用HTTP/2和gzip压缩，您将在数据传输过程中浪费大量时间。幸运的是，解决这两个问题通常很简单。我们的示例展示了对流行的Apache服务器的一些调整。如果您发现自己在不同的系统上，只需参阅服务器文档即可。pico/etc/httpd/conf/httpd.confAddOutputFilterByTypeDEFLATE文本/htmlAddOutputFilterByTypeDEFLATE文本/css
