插件的使用
minifier
- 下载包:
npm install -g minifier
- 使用:
// 先打开CSS目录: // 将styles.css缩小为styles.min.css minify -o styles.min.css styles.css
CSS的优化
使用简写CSS:
-
需要使用的简写属性是
margin
、padding
、border
、background
和border-radius
、font
-
background 属性:
background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: top right;可以简写成一行声明:
background: #000 url(images/bg.gif) no-repeat top right; -
font 属性
font-style: italic;
font-weight: bold;
font-size: .8em;
line-height: 1.2;
font-family: Arial, sans-serif;可以简写成下面的:
font: italic bold .8em/1.2 Arial, sans-serif; -
border 属性
border-width: 1px;
border-style: solid;
border-color: #000;可以简写成:
border: 1px solid #000;
使用CSS浅选择器:
- 过于具体的选择器层次很深,而较浅的选择器则只指定匹配元素所需的内容。
使用LESS和SASS预编译器:
- 原始
LESS/SASS
代码中的嵌套使CSS选择器过于具体,会延长渲染时间,要尽可能少用这个功能。
减少重复:
- 多个选择器指定相同的背景色或字体样式。可以通过最小化属性声明的次数,减少代码膨胀,并使CSS更易于维护
实现DRY:
- 在可行的情况下减少CSS中的冗余
- 鼓励开发者选择描述内容性质而不是其表现形式的选择器名称
- 使用
csscss
查找冗余
安装Ruby
使用gem安装csscss:gem install csscss
在客户网站的style.css文件上运行:csscss styles.css -v --no-match-shorthand
-v
参数告诉程序要详细打印出匹配的规则。
--no match-shorthand
参数使程序不会将任何简写规则(如border-bottom)扩展为更明确的规则(如border-bottom-style样式)
分割CSS
- 分割指的是根据特定页面模板拆分CSS样式
- 使用
Google Analytics
可以分析访客流程图
响应式布局
- 调整浏览器窗口的大小,直到布局中断时,就添加另一个临界点,并修复新临界点内的布局问题
设置视口标签
- 设备应该以与设备屏幕相同的宽度渲染页面,并且页面的初始比例应该是100%
- 验证网站的移动友好型
如果你的网站不适合移动端,下一步将是向网站添加<meta> viewport
标签,并使网站能够响应所有设备
对CSS进行新能调整:
@import和<link>
比较
- 避免使用
@import
声明:因为@import
指令与<link>
标签不同,在下载整个样式表之前,不会处理样式表中的@import
指令。这种行为会导致网页的总加载时间延迟@import 'custom.css';
@import
串行请求:尽可能多地并行化HTTP请求,串行请求则相反,一个接一个地发生。在外部CSS文件中使用时,@import
串行请求@import
所加载的文件里还有@import
,会导致一个接一个地串行请求<link>
并行请求:HTML 标签是加载CSS的最佳原生方法<link>
标签在下载HTML文件后就能发现引用,这与CSS文件中@import
指令的行为不同,后者只有在下载样式表后才能发现对外部文件的引用。- 从技术上讲,你可以在HTML
<style>
标签中使用@import
而不会影响性能,但是将此方法与<link>
标签混合使用,或者在CSS
文件中使用@import
,将导致串行请求。在实践中,最好坚持使用标签,因为它的行为是可预测的,并且将把CSS导入HTML的任务降级。
在<head>
中放置CSS
- 你应该尽早在文档中放置对CSS的引用,最早可以加载CSS的位置是
<head>
标签。 - 这样做可以缓解两个问题:无样式内容的闪烁问题,以及在加载时提高页面的渲染性能。
防止无样式内容闪烁
- 将CSS保留在HTML
<head>
标签中的一个强有力的原因是,它可以防止用户看到你的网站处于无样式状态。这种现象被称为无样式内容闪烁
使用flexbox
- 渲染内容时,flexbox往往是性能更优的解决方案
使用CSS过渡
- CSS过渡对于包含简单线性动画,且动画要求不多的网站来说是不二之选
- 在密集的DOM回流过程中减少了抖动,并且CSS过渡不会产生脚本开销。我的测试表明,CPU性能总体提高了22%
- 你正在构建的网站可能需要更复杂的动画行为,此时,使用JavaScript解决方案——
requestAnimationFrame()
方法会获得更好的性能 - 如果你的需求很简单,并且可以使用CSS实现高性能过渡,而不是通过JavaScript动画库向页面添加更多负载,那就请使用CSS过渡吧。
使用will-change属性优化过渡
- 告知浏览器该元素会有哪些变化的方法,这样浏览器可以在元素属性真正发生变化之前提前做好对应的优化准备工作。 这种优化可以将一部分复杂的计算工作提前准备好,使页面的反应更为快速灵敏。
- 误用它会影响设备上资源的分配方式 ,你可能会尝试在所有DOM元素上激活此属性,以优化页面上的所有过渡
- 这可能会对页面性能产生负面影响,特别是在分层很多和复杂的页面中。如果你使用了它,那就是让浏览器做好准备,以防页面上的每个元素都发生更改。这显然对性能不利
- 使用will-change时要考虑的另一件事是:需要给属性足够的时间工作。以下是will-change属性的不良用法
- 浏览器没有时间来应用必要的优化。此时要想更好地使用该属性,则应当将其应用于父元素的:hover状态,以便浏览器可以预测将要发生的情况
意思就是当鼠标移动上#siteHeader
时,告诉里面的a标签:你的background-color
将会改变哦
- 你可以预测元素的潜在更改,而不是假设它们会发生
理解关键CSS
- 关键CSS,即折叠之上的内容
- 非关键CSS,即折叠之下的内容
渲染阻塞
- 渲染阻塞指的是阻止浏览器将内容绘制到屏幕的任何活动。
- 使用
@import
指令或<link>
标签加载外部CSS时,会发生渲染阻塞,尽管<link>
标签是加载CSS的好方法,但它也会阻塞渲染
- 等待大约860毫秒,文档才开始绘制
内联
- 可以将网站的CSS直接内联到
- 中的
<style>
标签。这可以减少内容开始渲染前所需的时间
虽然内联对于HTTP/1服务器端和客户端是一种合适的实践,但它不应该用于HTTP/2服务器。这个功能可以通过使用HTTP/2的服务器推送特性来实现,同时保持可缓存性。
关键CSS的原理
- 加载首屏样式:将首屏样式存储到
<style>
标签中,并将其内联到HTML,剩下的样式将从外部文件加载 - 如果样式是通过
<link>
标签加载的,那么在浏览器必须等待CSS时,渲染就会被阻塞。但是当样式内联到HTML中时,用户只需要等待加载HTML的过程,随后浏览器就能解析CSS,页面就能渲染 - 缺点:会失去其可移植性,以后每次加载页面时都会出现无法有效缓存的情况。
- 加载首屏以外内容的样式:
- preload资源提示会在后台获取页面其余部分的样式。
- 这样可以在不阻塞渲染的情况下加载CSS。CSS完成下载时,标签上的onload事件处理程序将被触发。下载完成后,rel属性的值就会从preload转换为stylesheet。这将
<link>
标签从资源提示更改为普通CSS引入。(意思就是浏览器会再次向服务器发出请求请求CSS资源,这样就会阻塞,首先改为preload,是异步,让它先去请求,之后请求成功时,改为stylesheet就可以使用CSS资源啦)
实现关键CSS
VisualFold
书签工具
- 使用
preload
资源提示异步加载CSS
这段代码不仅异步加载了CSS,还考虑了那些禁用JavaScript
的用户,通过传统方式从<noscript>
标签(如最后一行所示)加载非关键CSS。这些用户将受到旧的CSS加载行为的阻塞渲染行为的影响,但他们不会得到无样式的页面。
- 0.1秒是用户感觉界面瞬间做出反应的极限
提升可维护性
- 每次文档发生更改时,将关键CSS复制并粘贴到文档的
<head>
中是很低效的。而且内联polyfill脚本也很麻烦
PHP
的file_get_contents
功能就非常适合此任务。此函数从磁盘读取文件,并允许将其内联到文档。使用该函数在文档的<head>
中内联关键CSS的方法如