哪些CSS规则渲染速度更快?

时间:2021-12-06 02:58:08

I am wondering which one out of the CSS rules below renders faster:

我想知道下面的CSS规则中哪一个渲染速度更快:

#avriable_info table td {width: 250px; font-size: 13px;}

or

要么

#avriable_info table td {
    width: 250px; 
    font-size: 13px;
}

3 个解决方案

#1


7  

Neither one will be "faster" to render than the other because most parsers will normalize a file before parsing. e.g. Getting rid of white spaces and new lines and such.

由于大多数解析器在解析之前将文件规范化,因此两者都不会比另一个“更快”地呈现。例如摆脱白色空间和新线条等。

Now, if you have a huge file that isn't being gzipped across the wire then the first one will download faster to the client than the second one which will allow the browser to start rendering it before the larger, slower one.

现在,如果你有一个巨大的文件没有通过网络进行gzip压缩,那么第一个文件将比第二个更快地下载到客户端,这将允许浏览器在较大的较慢的文件之前开始呈现它。

#2


5  

Neither will make any noticeable difference. A couple of newlines in your CSS is gong to make no more than a few CPU instructions difference to the rendering.

两者都不会产生明显的差异。 CSS中的几个换行符只是为了使渲染不超过一些CPU指令。

Maybe if you had a million lines of CSS you might notice a millisecond's difference, but if you're optimising that much (especially on a webpage!) you have far more serious issues to worry about (and they're not code related! ;-)).

也许如果你有一百万行的CSS,你可能会注意到毫秒的差异,但是如果你进行了那么多优化(特别是在网页上!),你就会担心更严重的问题(并且它们与代码无关! - ))。

#3


3  

The difference is two line breaks. This difference is eliminated by the parsing of the file and is unnoticable compared to the parse time of the CSS.

区别在于两个换行符。通过解析文件消除了这种差异,并且与CSS的解析时间相比是不可察觉的。

#1


7  

Neither one will be "faster" to render than the other because most parsers will normalize a file before parsing. e.g. Getting rid of white spaces and new lines and such.

由于大多数解析器在解析之前将文件规范化,因此两者都不会比另一个“更快”地呈现。例如摆脱白色空间和新线条等。

Now, if you have a huge file that isn't being gzipped across the wire then the first one will download faster to the client than the second one which will allow the browser to start rendering it before the larger, slower one.

现在,如果你有一个巨大的文件没有通过网络进行gzip压缩,那么第一个文件将比第二个更快地下载到客户端,这将允许浏览器在较大的较慢的文件之前开始呈现它。

#2


5  

Neither will make any noticeable difference. A couple of newlines in your CSS is gong to make no more than a few CPU instructions difference to the rendering.

两者都不会产生明显的差异。 CSS中的几个换行符只是为了使渲染不超过一些CPU指令。

Maybe if you had a million lines of CSS you might notice a millisecond's difference, but if you're optimising that much (especially on a webpage!) you have far more serious issues to worry about (and they're not code related! ;-)).

也许如果你有一百万行的CSS,你可能会注意到毫秒的差异,但是如果你进行了那么多优化(特别是在网页上!),你就会担心更严重的问题(并且它们与代码无关! - ))。

#3


3  

The difference is two line breaks. This difference is eliminated by the parsing of the file and is unnoticable compared to the parse time of the CSS.

区别在于两个换行符。通过解析文件消除了这种差异,并且与CSS的解析时间相比是不可察觉的。