博客首页前端开发分类

前端性能优化之CSS

发布时间:2016-08-16 16:54:32编辑:Mr.Co阅读(490)

前端开发

添加或移除一个 DOM 元素、修改元素属性和样式类、应用动画效果等操作,都会引起 DOM 结构的改变,从而导致浏览器需要重新计算每个元素的样式、对页面或其一部分重新布局(多数情况下)


计算样式的第一步是创建一套匹配的样式选择器,浏览器就是靠它们来对一个元素应用样式的。第二步是根据匹配的样式选择器来获取对应的具体样式规则,计算出最终具体有哪些样式是要应用在 DOM 元素上的。所以样式的优化也是这两步:

减小选择器的复杂性

如何减小选择器的复杂性?

.box:nth-last-child(-n+1) .title {
  /* styles */}
.final-box-title {
  /* styles */
}

上面代码都是选择同一个元素,当元素很多时,第二个选择器的性能会明显优于第一个。BEM 规范有做类似事情,按照特性直接由一个选择器选择元素的性能往往会更优。

减少样式的计算量

因为元素的计算量和被改变的元素的数量成正比,所以你只需要注意一点,减少无效元素。

多层无意义的标签

像上面的例子,有时候创建了一些冗余的标签。当改变外层的样式时,冗余的标签也需要进行样式计算,浪费性能。


转载请注明出自:http://www.mrco.cn/article/57b2d4c8cf6935bd6dd1c0ad.html

最新评论(0)

    我要评论

    *
    *
    *
    *
    *
    验证码