如何换个CSS伪元素 [英] how to bench a css pseudo-elements

问题描述

有没有一种方法可以测量CSS中包含许多:after 和:before 的网页的性能(显示)?

Is there a way of measuring the performance (of displaying) for a web page with a lots of :after and :before in the CSS ?

我认为对每个元素的渲染时间影响不大，并且在现代计算机上没有问题，但在移动速度较慢的计算机上没有问题.

I think there is a small impact on rendering time of each element, and there is no problem on a modern computer but on a slow mobile.

推荐答案

Chromium开发人员工具现在包括一个简单的CSS选择器时序分析器.

The Chromium Developer Tools now include a simple CSS selector timing profiler.

打开开发人员工具( F12 或 Ctrl + Shift + I )，然后选择配置文件"；使用收集CSS选择器配置文件".(您需要启动分析并过一会儿才能查看结果).您可以在DevTools-Window底部的 ms 中将输出从百分比切换为时间度量.

Open the Developer Tools (F12 or Ctrl + Shift + I) and select "Profiles"; use the "Collect CSS Selector Profile". (You need to start the profiling and stop it after a while to see the results) You can switch the output from percentages to time measures in ms at the bottom of the DevTools-Window.

这篇关于如何换个CSS伪元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！