一些技巧
2020-07-20 本文已影响0人
不困于情
分割CSS
对于不同的浏览终端，同一终端的不同模式，我们可能会提供不同的规则集：
@media print {
html {
font-family: 'Open Sans';
font-size: 12px;
}
}
@media orientation:landscape {
//
}
如果将这些内容写到统一个文件中，浏览器需要下载并解析这些内容（虽然不会实际应用这些规则）。更好的做法是，将这些内容通过对link元素的media属性来指定：
<link href="print.css" rel="stylesheet" media="print">
<link href="landscape.css" rel="stylesheet" media="orientation:landscape">
这样，print.css和landscape.css的内容不会阻塞Render Tree的建立，用户可以更快的看到页面，从而获得更好的体验。
高效的CSS规则
CSS规则的优先级
很多使用SASS/LESS的开发人员，太过分的喜爱嵌套规则的特性，这可能会导致复杂的、无必要深层次的规则，比如：
#container {
p {
.title {
span {
color: #f3f3f3;
}
}
}
}
在生成的CSS中，可以看到：
#container p .title span {
color: #f3f3f3;
}
而这个层次可能并非必要。CSS规则越复杂，在构建Render Tree时，浏览器花费的时间越长。CSS规则有自己的优先级，不同的写法对效率也会有影响，特别是当规则很多的时候。这里有一篇关于CSS规则优先级的文章可供参考。
使用GPU加速
很多动画都会定时执行，每次执行都可能会导致浏览器的重新布局，比如：
@keyframes my {
20% {
top: 10px;
}
50% {
top: 120px;
}
80% {
top: 10px;
}
}
这些内容可以放到GPU加速执行（GPU是专门设计来进行图形处理的，在图形处理上，比CPU要高效很多）。可以通过使用transform来启动这一特性：
@keyframes my {
20% {
transform: translateY(10px);
}
50% {
transform: translateY(120px);
}
80% {
transform: translateY(10px);
}
}
异步JavaScript
我们知道，JavaScript的执行会阻塞DOM的构建过程，这是因为JavaScript中可能会有DOM操作：
var element = document.createElement('div');
element.style.width = '200px';
element.style.color = 'blue';
body.appendChild(element);
因此浏览器会等等待JS引擎的执行，执行结束之后，再恢复DOM的构建。但是并不是所有的JavaScript都会设计DOM操作，比如审计信息，WebWorker等，对于这些脚本，我们可以显式地指定该脚本是不阻塞DOM渲染的。
<script src="worker.js" async></script>
