Web 机能优化:21种优化CSS和加速网站速率的要领

《Web 机能优化:21种优化CSS和加速网站速率的要领》

想浏览更多优良文章请猛戳GitHub博客,一年百来篇优良文章等着你!

这是 Web 机能优化的第 4 篇,上一篇在下面看点击检察:

  1. Web 机能优化:运用 Webpack 星散数据的准确要领
  2. Web 机能优化:图片优化让网站大小削减 62%
  3. Web 机能优化:缓存 React 事宜来进步机能

CSS 必需经由历程一个相对庞杂的管道,就像 HTML 和 JavaScript一样,浏览器必需从服务器下载文件,然后举行剖析并将其运用于DOM。由于优化水平极高,这个历程一般非常快——关于不基于框架的小型 web 项目,CSS一般只占总资本斲丧的一小部份。

框架突破了这类均衡。包括一个 JavaScript GUI 客栈,如 jQuery UI,能够视察 CSS, JS 和 HTML大小逐步的变大。一般,开辟职员末了才会以为压力,当他们用一个壮大的 8 核工作站背面,运用 T3 internet 时,没有人体贴速率,这跟着耽误或 cpu 受限装备的涌现而转变。

优化CSS须要一个多维的要领。虽然手工编写的代码能够运用种种手艺举行简化,然则手工搜检框架代码是低效的。在这些状况下,运用自动化的简化会发生更好的结果。

下面的步骤将带我们进入 CSS 优化的天下。并非每一个都能够直接运用到你的项目中,然则一定要记着它们。

01. 运用简写

《Web 机能优化:21种优化CSS和加速网站速率的要领》

运用缩写语句,以下面所示的 margin 声明,能够从根本上减小 CSS 文件的大小。在 google 上搜刮 CSS Shorthand 能够找到许多其他的速记情势。

p { margin-top: 1px;
    margin-right: 2px;
    margin-bottom:  3px;
    margin-left: 4px; }

p { margin: 1px 2px 3px 4px; }

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

《Web 机能优化:21种优化CSS和加速网站速率的要领》

删除不必要的部份 CSS,j显然会加速网页的加载速率。谷歌的Chrome浏览器有这类开箱即用的功用。只需转到检察>开辟职员>开辟职员东西,并在近来的版本中翻开Sources选项卡,然后翻开敕令菜单。然后,挑选Show Coverage,在Coverage analysis窗口中高亮显现当前页面上未运用的代码,让您大开眼界。

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

《Web 机能优化:21种优化CSS和加速网站速率的要领》

03. 以更便利的体式格局做到这一点

《Web 机能优化:21种优化CSS和加速网站速率的要领》

在逐行剖析中导航并不一定便利,运用谷歌浏览器的 Audits 就能够疾速帮我们剖析,运用体式格局,翻开开辟者东西,点击 Audits 栏位,点击 Run audits 后就最先剖析结果。

04. 注重这些题目

请记着,对 CSS 的自动剖析总是会致使毛病。用紧缩后的 CSS 文件替换 未紧缩CSS文件以后,对全部网站举行完全的测试——没有人晓得优化器会致使什么毛病。

05.内联症结 CSS

加载外部款式表须要消费时候,这是由于耽误形成的——因而,能够把最症结的代码位放在 head 中。然则,请确保不要做得过分,记着,实行保护使命的职员也必需读取代码。

<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>

06.许可反并行剖析

@import 将 CSS 款式轻易增加代码中。遗憾的是,这些优点并非没有代价的:由于 @import 能够嵌套,因而没法并行剖析它们。更并行的要领是运用一系列 <link> 标记,浏览器能够马上猎取这些标记。

@import url("a.css");
@import url("b.css");
@import url("c.css");

<link rel="stylesheet" href="a.css">
<link rel="stylesheet" href="b.css">
<link rel="stylesheet" href="c.css">

07. 用 CSS 替换图片

几年前,一套半透明的 png 在网站上建立半透明结果是屡见不鲜的。如今,CSS过 滤器供应了一种节约资本的替换要领。比方,以下这个代码片断能够确保所议论的图片显现为其本身的灰度版本。

img {
    -webkit-filter: grayscale(100%); 
    /* old safari */
    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的范例许可省略属性组中的末了一个分号。由于这类优化要领所节约的本钱很小,所以我们主要针对那些正在开辟自动优化的顺序员申明这一点。

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-radius
box-shadow
transform
filter
:nth-child
position: fixed;

14. 删除空格

空格——斟酌制表符、回车符和空格——使代码更轻易浏览,但从剖析器的角度看,它没有什么用途。在宣布前删除它们,更好的要领是将此使命托付给 shell 剧本或相似的东西。

15. 删除解释

解释对编译器也没有任何作用。建立一个自定义剖析器,以便在宣布之前删除它们。这不仅节约了带宽,而且还确保攻击者和克隆者更难明白手头代码背地的头脑。

16. 运用自动紧缩

Yahoo 的用户体验团队建立了一个处置惩罚许多紧缩使命的运用顺序。它以 JAR 文件的情势宣布,在这里可用,而且能够运用所选的JVM运转。

java -jar yuicompressor-x.y.z.jar
Usage: java -jar yuicompressor-x.y.z.jar
 [options] [input file]
Global Options
    -h, --help                Displays this
 information
    --type <js|css>           Specifies the
 type of the input file

17. 在 NPM 运转它

假如你愿望将产物集成到 Node.JS 中,请接见 npmjs.com/package/yuicompressor。保护不良的存储库包括一组包装器文件和JavaScript API。

var compressor = require('yuicompressor');
 compressor.compress('/path/to/
file or String of JS', {
    //Compressor Options:
    charset: 'utf8',
    type: 'js',

18. 坚持 Sass 的搜检

虽然 CSS 挑选器的机能不像几年前那末主要(请参阅参考资料),然则像 Sass 如许的框架有时会发生非常庞杂的代,不时检察输出文件,并斟酌优化结果的要领。

19. 设置缓存

有句老话说,最快的文件永久不会经由历程收集发送。让浏览器缓存要求有用地完成这一点。遗憾的是,缓存头的设置必需在服务器上举行。充足上面讲的的两个 Chrome 东西,它们供应了一种疾速剖析变动结果的要领。

20. 突破缓存

设想职员一般不喜欢缓存,由于他们忧郁浏览器会缓存上次的款式表。处理这个题目的一个简朴要领是包括带有文件名的标记。遗憾的是,由于一些代办谢绝缓存具有“动态”途径的文件,此步骤所附带的代码中概述的计划并不适用于一切处所。

<Link rel="stylesheet" href="style.css?v=1.2.3">

21. 不要遗忘基础知识

优化CSS只是游戏的一部份。假如你的服务器不运用 HTTP/2 和 gzip 紧缩,那末在数据传输时期会丧失许多时候。荣幸的是,处理这两个题目一般很简朴。我们的示例显现了对常常使用Apache 服务器的一些调解。假如您发明本身在一个差别的体系上,只需参考服务器文档即可。

pico /etc/httpd/conf/httpd.conf
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/css

代码布置后能够存在的BUG没法及时晓得,预先为了处理这些BUG,花了大批的时候举行log 调试,这边顺便给人人引荐一个好用的BUG监控东西 Fundebug

你的点赞是我延续分享好东西的动力,迎接点赞!

交换

干货系列文章汇总以下,以为不错点个Star,迎接 加群 互相进修。

https://github.com/qq44924588…

我是小智,民众号「大迁天下」作者,对前端手艺坚持进修爱好者。我会常常分享本身所学所看的干货,在进阶的路上,共勉!

关注民众号,背景复兴福利,即可看到福利,你懂的。

《Web 机能优化:21种优化CSS和加速网站速率的要领》

    原文作者:前端小智
    原文地址: https://segmentfault.com/a/1190000018533393
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞