优化CSS并加速网站的21种方法（如何优化css）
haoteby 2024-11-15 19:29 7 浏览
优化CSS需要一个多维的方法。虽然手工编写的代码可以使用各种技术进行简化，但是手工检查框架代码是低效的。在这些情况下，使用自动化的简化会产生更好的结果。
下面的步骤将带我们进入 CSS 优化的世界。并不是每一个都可以直接应用到你的项目中，但是一定要记住它们。
01. 使用简写
使用缩写语句，如下面所示的 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，j显然会加快网页的加载速度。谷歌的Chrome浏览器有这种开箱即用的功能。只需转到查看>开发人员>开发人员工具，并在最近的版本中打开Sources选项卡，然后打开命令菜单。然后，选择Show Coverage，在Coverage analysis窗口中高亮显示当前页面上未使用的代码，让您大开眼界。
03. 以更便捷的方式做到这一点
在逐行分析中导航并不一定便捷，使用谷歌浏览器的 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 可以嵌套，因此无法并行解析它们。更并行的方法是使用一系列 <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 （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('yuicompressor');
compressor.compress('/path/to/
file or String of JS', {
//Compressor Options:
charset: 'utf8',
type: 'js',
18. 保持 Sass 的检查
虽然 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
相关推荐
- Python爬虫进阶教程(二):线程、协程
-
简介线程线程也叫轻量级进程，它是一个基本的CPU执行单元，也是程序执行过程中的最小单元，由线程ID、程序计数器、寄存器集合和堆栈共同组成。线程的引入减小了程序并发执行时的开销，提高了操作系统的并发性能...
- A320-V2500发动机系统FADEC介绍(2)
-
目的全权数字发动机控制（FADEC）系统在所有飞行和运行阶段提供全范围发动机控制。...
- 三国志战棋版:玩家“二叔”用这套群DOT在比武中拿下31胜5负
-
声明：本文首发于今日头条，而后发布于“鼎叔闯三棋”的微信公众号、抖音、哔哩哔哩和小红书平台，如果在其他平台就是抄袭。...
- 真正的独一无二:Dot One 推出 DNA 定制系列 139英镑起
-
相信很多人在挑选衣物时有着这样的困扰，综合了性价比、面料等因素后好不容易找到了心仪的款式，还要担心是否会撞衫，不管是擦肩而过的陌生人还是身边的熟人，都令人尴尬。小部分人为此热衷于购买少量的古着或者限量...
- 崩铁:周年庆福利再升级，老角色加强时间确定，3.xdot体系反转
-
#埃安UT大一圈高级很多#...
- Dotgo推出RBMHub，扩大了CPaaS提供商的覆盖范围和功能
-
据telecompaper网7月15日报道，用于商业消息传递的RichCommunicationServices（RCS）解决方案的领先提供商Dotgo宣布推出RBMHub。RBMHub的推出扩大了C...
- 深度解析:快照取消Dot职业的将何去何从
-
写在前面曾几何时，术士的出现便被冠以dot大师的名头，从远古时期的献祭腐蚀虹吸不如暗牧一个痛，到TBC上满dot=荣誉击杀+1，到wlk接近全暴击的冰晶腐蚀，再到CTM就算了吧MOP的各种变态吸x放...
- 星穹铁道:抽卡芙卡之前，你必须了解什么是dot!
-
卡妈终于上线了，可还是有很多人不明白什么是dot伤害，抽了卡妈直接玩起了直伤流，把一个持续伤害的引爆器玩成了打手，卡妈打dot伤害是远高于直伤的，有了卡妈的玩家一直了解dot，不然这卡妈就真被玩成四不...
- 游戏界的闪耀星辰陨落:悼念知名游戏博主″dotα牛娃″
-
无尽哀思！在数字时代浪潮中，游戏不仅是消遣娱乐的代名词，更是连接心灵的桥梁，构筑了无数人的青春回忆。在这片浩瀚无垠的游戏宇宙中，有这样一位博主，他以独特的风采、深邃的洞察力和无尽的热情，成为了玩家心中...
- 直击2017新加坡同性恋聚会Pink Dot，自由爱!
-
今年的“粉红点”又来啦~这个支持LGBT群体（男女同志、双性恋、跨性别等）群体的活动，从2009年起，已经在新加坡举办8年了！”这个非营利的同性恋权益活动，主要是希望大家了解到，不管一个人的性倾向或...
- python-dotenv,一款超级实用处理环境变量python库
-
python-dotenv,一款超级实用处理环境变量python库python-dotenv概述：...
- 亚马逊语音助手毫无征兆发笑 诡异至极吓坏用户
-
来源:新华网美国电商亚马逊7日承诺，将更改名下“亚历克萨”语音系统设置，令它不会莫名发笑，免得吓坏用户。“亚历克萨”是亚马逊开发的语音助手软件，可服从用户语音指令完成对话、播放音乐等任务。依照原来设计...
- 2022最火英文网名男女生
-
精选好听英文昵称带翻译1．moveon（离开）2．Monster（怪物）3．Solo吉他手4．Finish.（散场）...
- 智能家具 RecycleDot 的出现给传统家具厂商带来新的挑战
-
从可穿戴手环、手表到智能衣服，智能硬件逐步渗透到每一个领域。最近有一对父子MikeSandru和JohnSandru在自家的车库中设计了一款智能家具RecycleDot，给日渐萧条的家具行...
- 欧洲通信卫星公司 OneWeb 敦促印度DoT尽早批准提供卫星宽带服务
-
据telecomtalk2月17日报道，欧洲通信卫星公司EutelsatOneWeb近日敦促印度电信部（DoT）尽快批准其在印度部署双地球站网关的计划，以便连接其近地轨道（LEO）全球卫星星座，并...