html,css维护优化,优化CSS并加速网站的21种方法

CSS有必要通过一个相对复杂的管道，就像HTML和JavaScript相同，浏览器有必要从服务器下载文件，然后进行解析并将其应用于DOM。由于优化程度极高，这个进程一般非常快——对于不根据框架的小型web项目，CSS一般只占总资源耗费的一小部分。

框架打破了这种平衡。包括一个JavaScriptGUI堆栈，如jQueryUI，能够观察CSS,JS和HTML大小逐步的变大。一般，开发人员最终才会感到压力，当他们用一个强大的8核工作站后面，运用T3internet时，没有人关心速度，这跟着推迟或cpu受限设备的呈现而改动。

优化CSS需求一个多维的办法。尽管手艺编写的代码能够运用各种技能进行简化，可是手艺查看框架代码是低效的。在这些情况下，运用主动化的简化会产生更好的成果。

下面的过程将带我们进入CSS优化的国际。并不是每一个都能够直接应用到你的项目中，可是一定要记住它们。

01.运用简写

运用缩写语句，如下面所示的margin声明，能够从根本上减小CSS文件的大小。在google上查找CSSShorthand能够找到许多其他的速记方式。

p{margin-top:1px;

margin-right:2px;

margin-bottom:3px;

margin-left:4px;}

p{margin:1px2px3px4px;}

02.查找并删去未运用的CSS

删去不必要的部分CSS，j显然会加快网页的加载速度。谷歌的Chrome浏览器有这种开箱即用的功用。只需转到查看>开发人员>开发人员东西，并在最近的版本中翻开Sources选项卡，然后翻开命令菜单。然后，选择ShowCoverage，在Coverageanalysis窗口中高亮显现当前页面上未运用的代码，让您大开眼界。

翻开谷歌浏览器开发都东西，在Conlse周围更多选择Coverage，就能够看到未运用的CSS,点击对应的项，高亮显现当前页面上未运用的代码，让你大开眼界：

03.以更快捷的方式做到这一点

1571448835387382.png

在逐行剖析中导航并不一定快捷，运用谷歌浏览器的Audits就能够快速帮我们剖析，运用方式，翻开开发者东西，点击Audits栏位，点击Runaudits后就开端剖析成果。

04.留意这些问题

加载外部款式表需求花费时刻，这是由于推迟造成的——因而，能够把最要害的代码位放在head中。可是，请保证不要做得过火，记住，履行维护任务的人员也有必要读取代码。

Hello,world!

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.运用色彩快捷方式

知识告知我们，六位数的色彩描绘符是表达色彩最有效的方式。事实并非如此——在某些情况下，速记描绘或色彩称号能够更短。

target{background-color:#ffffff;}

target{background:#fff;}

09.删去不必要的零和单位

CSS支撑多种单位和数字格式。它们是一个值得感谢的优化方针——能够删去尾随和跟从的零，如下面的代码片段所示。此外，请记住，零始终是零，增加维度不会为包括的信息顺便价值。

padding:0.2em;

margin:20.0em;

avalue:0px;

padding:.2em;

margin:20em;

avalue:0;

10.消除过多分号

这种优化需求慎重，由于它会影响代码的更改。CSS的规范答应省掉特点组中的最终一个分号。由于这种优化办法所节约的成本很小，所以我们首要针对那些正在开发主动优化的程序员阐明这一点。

1

p{…font-size:1.33em}

11.运用纹理图集

由于协议开销的原因，加载多个小图片的功率很低。CSS精灵将一系列小图片组合成一个大的PNG文件，然后通过CSS规则将其分化。TexturePacker(https://www.codeandweb.com/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-radius

box-shadow

transform

filter

:nth-child

position:fixed;

14.删去空格

空格——考虑制表符、回车符和空格——使代码更简单阅览，但从解析器的角度看，它没有什么用途。在发布前删去它们，更好的办法是将此任务托付给shell脚本或类似的东西。

15.删去注释

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

16.运用主动紧缩

Yahoo的用户体验团队创立了一个处理许多紧缩任务的应用程序。它以JAR文件的方式发布，可在此处取得(http://yui.github.io/yuicompressor/)，并且能够运用所选的JVM运转。

java-jaryuicompressor-x.y.z.jar

Usage:java-jaryuicompressor-x.y.z.jar

[options][inputfile]

GlobalOptions

-h,–helpDisplaysthis

information

–typeSpecifiesthe

typeoftheinputfile

17.在NPM运转它

如果你期望将产品集成到Node.JS中，请拜访npmjs.com/package/yuicompressor。维护不良的存储库包括一组包装器文件和JavaScriptAPI。

varcompressor=require(‘yuicompressor’);

compressor.compress(‘/path/to/

fileorStringofJS’,{

//CompressorOptions:

charset:’utf8′,

type:’js’,

18.保持Sass的查看

1571448920487836.jpg

尽管CSS选择器的功能不像几年前那么重要(请参阅参考资料)，可是像Sass这样的框架有时会产生非常复杂的代，不时查看输出文件，并考虑优化成果的办法。

什么是Sass？(https://www.creativebloq.com/web-design/what-is-sass-111517618)

19.设置缓存

有句老话说，最快的文件永久不会通过网络发送。让浏览器缓存恳求有效地完成这一点。惋惜的是，缓存头的设置有必要在服务器上进行。充分上面讲的的两个Chrome东西，它们供给了一种快速剖析更改成果的办法。

20.打破缓存

设计人员一般不喜欢缓存，由于他们忧虑浏览器会缓存前次的款式表。处理这个问题的一个简单办法是包括带有文件名的符号。惋惜的是，由于一些署理拒绝缓存具有“动态”路径的文件，此过程所顺便的代码中概述的方案并不适用于一切当地。

21.不要忘掉基础知识

优化CSS只是游戏的一部分。如果你的服务器不运用HTTP/2和gzip紧缩，那么在数据传输期间会损失许多时刻。幸运的是，处理这两个问题一般很简单。我们的示例显现了对常用Apache服务器的一些调整。如果您发现自己在一个不同的体系上，只需参考服务器文档即可。