2021年CSS变量性能基准 2021-11-18 默认分类 暂无评论 7435 次阅读  自定义属性自Chrome 49（2016年3月3日）起可用。虽然Internet Explorer 11不支持它们，但也许现在是时候跳上这一行列了？性能如何呢？ 我决定创建一个简单的基准来检查5000个变量是否会减慢页面的渲染速度。如果你想审查或重用我的代码，你可以在这里找到它。 ## 测试条件 - 生成5000种颜色。 - 创建10000个HTML节点（可重复使用系数=1）。 - 输出一个带有标准CSS类的HTML文件。 - 输出一个带有CSS变量的HTML文件。 - 运行本地节点HTTP服务器，对两个文件进行五次基准测试（使用Chrome浏览器的性能工具）。 Linux，谷歌浏览器版本92.0.4515.159（官方版本）（64位） 访客配置文件，完全没有浏览器附加组件。 ## 测试工具 ``` git clone git@github.com:fedek6/css-variables-benchmark.git cd css-variables-benchmark yarn yarn build yarn start:compiled [number of random colors] [reuse factor] ``` 这样你就会得到一个叫做bundle的目录，里面有两个文件，静态和动态。 你可以使用一个名为http-server的包，并使用Chrome的性能工具对这两个变体进行基准测试。 ## 结果 动态文件显然更大（因为你需要输出所有的变量和使用它们的类名）。当用于更复杂的情况或需要声明不同的主题时，自定义属性是有优势的。 #### 静态CSS (ms) | Try | Loading | Scripting | Rendering | Painting | System | Idle | Total | | --- | ------- | --------- | --------- | -------- | ------ | ----- | ----- | | 1 | 33 | 4 | 329 | 17 | 110 | 4948 | 5441 | | 2 | 31 | 3 | 317 | 12 | 113 | 4928 | 5404 | | 3 | 28 | 3 | 351 | 19 | 117 | 4950 | 5468 | | 4 | 29 | 4 | 314 | 14 | 117 | 4943 | 5421 | | 5 | 31 | 4 | 332 | 18 | 112 | 4944 | 5441 | | SUM | 152 | 18 | 1643 | 80 | 569 | 24713 | 27175 | #### 动态CSS (ms) | Try | Loading | Scripting | Rendering | Painting | System | Idle | Total | | --- | ------- | --------- | --------- | -------- | ------ | ----- | ----- | | 1 | 33 | 3 | 381 | 16 | 110 | 4906 | 5449 | | 2 | 38 | 2 | 358 | 20 | 114 | 4962 | 5494 | | 3 | 36 | 2 | 371 | 24 | 106 | 4978 | 5517 | | 4 | 36 | 2 | 321 | 11 | 106 | 4934 | 5410 | | 5 | 33 | 3 | 353 | 22 | 108 | 4977 | 5496 | | SUM | 176 | 12 | 1784 | 93 | 544 | 24757 | 27366 | # 结论 在10 000个HTML节点上使用5000个CSS变量，只比原始CSS慢0.7%。你必须考虑到这是一个非常简单的使用场景。在我看来，仅仅通过使用自定义属性，你的网站渲染速度不会明显降低。 在CSS计算中使用变量或使用JavaScript经常改变变量时，你应该小心。 标签: Chrome, 浏览器, css, html, 组件, 文件, 颜色, 属性, 代码, 变量
评论已关闭