Content-Visibility性能测试 - 长列表渲染对比
加载大量DOM元素,对比启用和不启用content-visibility: auto时的渲染时间和滚动体验。
UD5工具箱
--
--
MAX_TEXTURE_SIZE--
MAX_VIEWPORT_DIMS--
已支持扩展| 参数名 | 值 | 说明 | 分类 |
|---|---|---|---|
| 正在采集参数... | |||
RENDERER、VENDOR、MAX_TEXTURE_SIZE、支持的扩展列表、着色语言版本等。
RENDERER 参数在大多数浏览器中会被修改为通用字符串(如 Chrome 显示 "ANGLE (GPU名称)",Firefox 显示 "Mozilla")。而通过 WEBGL_debug_renderer_info 扩展获取的 UNMASKED_RENDERER_WEBGL 和 UNMASKED_VENDOR_WEBGL 会返回未经修改的真实 GPU 信息,具有更高的指纹熵值。该扩展在大多数现代浏览器中可用,但部分隐私模式或反指纹浏览器会禁用它。
webgl.disabled = true 完全禁用 WebGL(但这可能导致部分网站功能异常);--disable-webgl 启动参数禁用 WebGL。
RENDERER 和 VENDOR 的修改策略不同(Chrome 使用 ANGLE 包装,Firefox 曾简化为 "Mozilla");RENDERER 字符串会以 "ANGLE" 开头,后跟实际 GPU 名称。这是正常现象,不影响 WebGL 功能。如需查看未包装的原始 GPU 信息,可通过 WEBGL_debug_renderer_info 扩展获取 UNMASKED_RENDERER_WEBGL。
加载大量DOM元素,对比启用和不启用content-visibility: auto时的渲染时间和滚动体验。
实时显示当前页面可见状态,当切换标签页时记录时间并给出日志。
设定FCP、LCP、CLS等指标值,模拟计算PageSpeed Insights得分估算。
使用Eyedropper API激活系统取色器,拾取屏幕任意位置的颜色值。
校验Sitemap格式合法性,列出所有URL并统计数量。
将压缩的SQL语句按标准缩进美化,关键字高亮,兼容MySQL/PostgreSQL等方言。
搜索各类编程语言、框架和工具的矢量图标,点击复制其HTML或SVG代码。
渲染网页在Windows强制颜色模式下的样式,协助调试和适应系统高对比度主题。
粘贴HTML代码,自动提取所有 <!--注释--> 内容,方便查看遗留信息。
验证 Origin Trial 令牌的有效性与作用域,显示令牌启用的实验功能列表及过期时间。
演示并测试:focus-visible伪类在不同输入模式下的表现,辅助无障碍设计。
利用简单的边缘检测或熵分析,自动将图片裁剪到保留视觉主体的大小。
分析页面结构,提示哪些长列表区域适合添加content-visibility: auto优化。
可视化为视频添加时间点字幕文本,导出标准WebVTT文件或JSON。
输入 origin trial token,解析出启用的特性、域名和过期时间。
生成一个书签工具,点击后在当前页面动态加载任何 Google 字体并应用到所选文字。
选择两种开源许可证,并排显示全文,高亮关键差异条款,帮助选择合适许可证。
设置项目开始日期,添加里程碑节点,自动生成带时间轴的横向进度图,简洁展示阶段计划。
粘贴 HTML 和 CSS,交叉比对找出在 CSS 中定义但在 HTML 中从未使用的类选择器。
比较两段文本,在单词级别高亮新增、删除和修改的部分,类似 Google Docs 修订。
展示各种邮件客户端对CSS背景图片、VML背景的支持程度,附兼容代码。
一键切换当前页面的 media 类型为 screen 或 print,方便调试打印样式。
显示一系列石原色觉测试图,框选所见数字,初步判断色觉异常。
填空式生成通用服务条款,涵盖账号、知识产权、免责等,创业初期参考。
输入字体名或从列表选择,在示例文本上立刻看效果,获得@import代码。
按时间点添加事件,生成美观的垂直或水平时间轴HTML/CSS代码。
将SVG内容无损转换为PDF文件,保持矢量性质,支持打印和分享。
搜索并添加多个城市,显示当前时间与日期,适合远程团队。
配置时间节点、标题和描述,生成可横向滚动的交互式时间轴HTML代码。
粘贴HTML或URL,基于算法检测并抽取文章的主体内容,去除侧边栏和广告。