学习
实践
活动
专区
工具
TVP
写文章

Css样式书写顺序

我不知道是否有人严格按照一定的顺序来书写css的样式,可以说几乎都是需要什么样式就加什么样式,完全没有考虑过样式属性书写的顺序对性能有什么影响。

我一直坚信,前端的性能优化都是从细节堆出来的,不注意css属性的顺序确实也可以实现我们需要的各种操作,但是慢慢的让自己遵从最优的写法,提高自己或者是优秀自己还是有必要的。

讲顺序之前,我们先要知道浏览器渲染页面的过程,之前有写过一篇文章了,这边简单提一下:

1.解析HTML构建DOM树

2.解析CSS构建CSSOM树

3.将DOM树和CSSOM树合并构建render树

4.布局

5.绘制

6.重排reflow

7.重绘repaint

整体来说,页面渲染初始过程涉及到2、3、4,我们推荐的书写顺序是这样的:

位置属性:position display float left top right bottom overflow clear z-index

尺寸(自身)属性:width height padding border margin

文字属性:font-family font-size font-style font-weight font-varient color text-align vertical-align word-spacing white-space text-overflow

背景:background、border等

css3中新增属性:content box-shadow border-radius transform等

这样比较不好理解,我们讲一些例子

span{

width: 200px;

height: 300px;

background: red;

font-size: 20px;

color: #fff;

left: 10px;

position: absolute;

}

初始化渲染的时候,解析到了position之后,发现元素脱离文档流了,之前解析是按照static去解析的,又要回头重新解析。

span{

width: 200px;

height: 300px;

background: red;

font-size: 20px;

color: #fff;

display: block;

margin: 20px;

}

当这个样式解析的时候,一开始按照普通行内元素解析,解析到了display之后,需要回头重新按照块级元素解析,之后解析到margin之后,触发了位置的变更,进行重排。

简单说就是位置和尺寸会涉及重排,颜色等会涉及重绘,初始化过程中我们当然是尽量避免重排和重绘,所以按照顺序书写css样式,有助于性能的优化,页面的渲染。

(完)

Coding 个人笔记

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180821G1U05900?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

关注

腾讯云开发者公众号
10元无门槛代金券
洞察腾讯核心技术
剖析业界实践案例
腾讯云开发者公众号二维码

扫码关注腾讯云开发者

领取腾讯云代金券