是否 margin-left:2px;渲染速度比 margin:0 0 0 2px;?
Douglas Crockford 描述了 JavaScript 查询节点样式的结果。简单地请求 div 的边距会导致浏览器在浏览器的渲染引擎中“回流”该 div 四次。
所以这让我想知道，在页面的初始渲染过程中（或者用 Crockford 的术语来说是“网络滚动”），编写仅定义非零/非默认值的 CSS 是否更快？举个例子：
div{
margin-left:2px;
}
据
div{
margin:0 0 0 2px;
}
我所知，这种“节省”的后果是微不足道的，但我认为了解技术的实施方式仍然很重要。另外，这不是一个关于格式化 CSS 的问题——这是一个关于浏览器渲染 CSS 的实现的问题。
参考： http://developer.yahoo.com/yui/ Theater/video.php?v=crockonjs-4
Douglas Crockford describes the consequence of JavaScript inquiring a node's style. How simply asking for the margin of a div causes the browser to 'reflow' the div in the browser's rendering engine four times.
So that made me wonder, during the initial rendering of a page (or in Crockford's jargon a "web scroll") is it faster to write CSS that defines only the non-zero/non-default values? To provide an example:
div{
margin-left:2px;
}
Than
div{
margin:0 0 0 2px;
}
I know consequence of this 'savings' is insignificant, but I think it is still important to understand how the technologies are implemented. Also, this is not a question about formatting CSS--this is a question about the implementations of browsers rendering CSS.
Reference: http://developer.yahoo.com/yui/theater/video.php?v=crockonjs-4
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我不确定它是否“渲染”得更快。但是：第二个版本比第一个版本大几个字节。 （我假设网络比页面渲染时间慢，使得第一个版本实际上“渲染得更快”）
I am not sure if it "renders" any faster. BUT: The second version is a few bytes larger than the first version. (And I would assume that the network is slower than the page render time, making the first version actually "render faster")
不会，根据您的浏览器，它会在应用样式之前以不同的方式解压缩值，并且在 Firefox 中，它会对执行速度产生轻微影响。不管怎样，使用速记 CSS 都是一个好主意。
如果您想了解它是如何工作的，Firefox 将解压该值：
一样
与将样式应用到页面之前 。这是为了标准化。
*（.04pt 是估计值）
No, depending on your browser, it will unpack the values in different ways before even applying the styles, and in Firefox, it would have a slight effect on the execution speed. It's a good idea to use shorthand CSS either way though.
If you want to understand how it works, Firefox, unpacks the value:
as
before applying the styles to the page. This is for normalization.
*(.04pt is an estimation)