2021年CSS变量性能基准 - 锅巴菜

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

暗恋学妹的稀饭 · CSS 缩写· 15 小时前 ·

帅呆的豌豆 · 看懂CSS属性值定义语法 - 捡破烂的小z ...· 15 小时前 ·

绅士的松鼠 · CSS 属性值语法 · Issue #10 ...· 15 小时前 ·

有腹肌的板凳 · CSS 属性值定义语法 - ...· 15 小时前 ·

仗义的花生 · CSS属性动态传值_css传值-CSDN博客· 15 小时前 ·

风流的芹菜 · 全部-所属国家:加拿大;-第1页-500强情 ...· 3 天前 ·

高大的麦片 · php怎么传两个参数 • Worktile社区· 2 周前 ·

打篮球的拐杖 · 【VBA入門】Sleep関数(API)やWa ...· 1 月前 ·

爽快的绿豆 · 加拿大如何申请兽医专业-金吉列留学官网· 2 月前 ·

爱听歌的匕首 · HUNK subfamily - ...· 4 月前 ·

![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中创建一个高性能的虚拟滚动列表