2021年CSS变量性能基准

相关文章推荐

阳光的警车 · [Day27]活用 CSS 編排各種 ...· 3 月前 ·

英勇无比的水煮肉 · 石榴云/新疆日报：暴雪来临，这座城市何以从容 ...· 6 月前 ·

要出家的台灯 · 使用HALCON的标准软件 | 实例介绍 ...· 10 月前 ·

自信的登山鞋 · Combobox - ...· 1 年前 ·

精明的冲锋衣 · 如何在iOS ...· 1 年前 ·

绅士的咖啡 · 明侦老粉都知道，白敬亭是不是凶手，这个动作就 ...· 1 年前 ·

![1_vc2lQJNEHqbIXYTtBcmC6A.jpeg](http://www.guobacai.com/usr/uploads/2021/11/3454503966.jpeg)
自定义属性自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 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 , 组件 , 文件 , 颜色 , 属性 , 代码 , 变量

评论已关闭

上一篇: 使用HTML、CSS和JavaScript的可访问模式对话框

下一篇: 在Vue.js中创建一个高性能的虚拟滚动列表