边距左：2px；渲染速度比边距：0 0 0 2px;？答案

【问题标题】：Does margin-left:2px; render faster than margin:0 0 0 2px;?边距左：2px；渲染速度比边距：0 0 0 2px;？
【发布时间】：2011-02-09 20:46:01
【问题描述】：

Douglas Crockford 描述了 JavaScript 查询节点样式的结果。简单地询问 div 的边距如何导致浏览器在浏览器的渲染引擎中“重排”该 div 四次。

所以这让我想知道，在页面的初始渲染期间（或者用 Crockford 的术语来说，“网络滚动”）编写只定义非零/非默认值的 CSS 是否更快？举个例子：

div{  
  margin-left:2px;  
}

比

div{  
  margin:0 0 0 2px;  
}

我知道这种“节省”的后果是微不足道的，但我认为了解这些技术的实施方式仍然很重要。此外，这不是关于格式化 CSS 的问题——这是关于呈现 CSS 的浏览器实现的问题。

【问题讨论】：

【解决方案1】：

不，取决于您的浏览器，它甚至会在应用样式之前以不同的方式解压值，并且在 Firefox 中，它会对执行速度产生轻微影响。不管怎样，使用简写 CSS 是个好主意。

如果你想了解它是如何工作的，Firefox 会解压值：

{margin: 0 0 0 2px;}

作为

{margin-top: 0pt;margin-right: 0pt;margin-bottom: 0pt;margin-left: .04pt;}

在将样式应用到页面之前。这是为了标准化。

*(.04pt 是一个估计值)

【讨论】：

【解决方案2】：

我不确定它是否“渲染”得更快。但是：第二个版本比第一个版本大几个字节。（我会假设网络比页面渲染时间慢，使得第一个版本实际上“渲染得更快”）

【讨论】：