優化CSS並加速網站的21種方法-頭條-PHP中文網

首頁

頭條

優化CSS並加速網站的21種方法

angryTom

Oct 21, 2019 am 09:55 AM

css最佳化網站

CSS 必須通過一個相對複雜的管道，就像 HTML 和 JavaScript一樣，瀏覽器必須從伺服器下載文件，然後進行解析並將其應用於DOM。由於優化程度極高，這個過程通常非常快——對於不基於框架的小型 web 項目，CSS通常只佔總資源消耗的一小部分。

優化CSS並加速網站的21種方法

框架打破了這個平衡。包括一個 JavaScript GUI 堆疊，如 jQuery UI，可以觀察 CSS, JS 和 HTML大小逐漸的變大。通常，開發人員最後才會感到壓力，當他們用強大的 8 核心工作站後面，使用 T3 internet 時，沒有人關心速度，這隨著延遲或 cpu 受限設備的出現而改變。

php中文網新課公告：
《php開發超大型CMS網站管理系統線上直播課程》正在報名！（10.28號開班）
詳見：https://www.php.cn/k.html

優化CSS需要多維度的方法。雖然手工編寫的程式碼可以使用各種技術進行簡化，但是手動檢查框架程式碼是低效的。在這些情況下，使用自動化的簡化會產生更好的結果。

下面的步驟將帶我們進入 CSS 優化的世界。並不是每一個都可以直接應用到你的專案中，但是一定要記住它們。

01. 使用簡寫

優化CSS並加速網站的21種方法

使用縮寫語句，如下面所示的 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

優化CSS並加速網站的21種方法

#刪除不必要的部分 CSS，j顯然會加快網頁的載入速度。谷歌的Chrome瀏覽器有這種開箱即用的功能。只需前往查看>開發人員>開發人員工具，並在最近的版本中開啟Sources選項卡，然後開啟命令選單。然後，選擇Show Coverage，在Coverage analysis視窗中高亮顯示目前頁面上未使用的程式碼，讓您大開眼界。

開啟Google瀏覽器開發都工具，在 Conlse 旁邊更多選擇 Coverage，就可以看到未使用的CSS, 點選對應的項，高亮顯示目前頁面上未使用的程式碼，讓你大開眼界：

優化CSS並加速網站的21種方法

03. 以更方便的方式做到這一點

優化CSS並加速網站的21種方法

在逐行分析中導航並不一定便捷，使用Google瀏覽器的Audits 就可以快速幫我們分析，使用方式，打開開發者工具，點擊 Audits 欄位，點擊Run audits 後就開始分析結果。

04. 注意这些问题

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

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

06.允许反并行解析

@import 将 CSS 样式方便添加代码中。遗憾的是，这些好处并不是没有代价的:由于 @import 可以嵌套，因此无法并行解析它们。更并行的方法是使用一系列标记，浏览器可以立即获取这些标记。

@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 （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 -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(&#39;yuicompressor&#39;);
 compressor.compress(&#39;/path/to/
file or String of JS&#39;, {
    //Compressor Options:
    charset: &#39;utf8&#39;,
    type: &#39;js&#39;,

18. 保持 Sass 的检查

優化CSS並加速網站的21種方法

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

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

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

英文原文地址：https://www.creativebloq.com/how-to/21-ways-to-optimise-your-css-and-speed-up-your-site

为了保证的可读性，本文采用意译而非直译。

相关推荐：
Web 性能优化：图片优化让网站大小减少 62%

陳述

本文轉載於：www.html.cn。如有侵權，請聯絡admin@php.cn刪除

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

優化CSS並加速網站的21種方法

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

EditPlus 中文破解版

PhpStorm Mac 版本

SecLists

Safe Exam Browser

禪工作室 13.0.1

熱門話題