程序员经验分享-hwhale

Chrome DevTools 中帧渲染的空闲时间

2023-12-27

在研究网页渲染优化时，我在许多流行网站上遇到了奇怪的渲染行为。帧渲染时间的很大一部分是没有任何操作的空白空间。Apple 促销页面的示例 https://i.stack.imgur.com/L00lb.png

在该时间范围内唯一运行的就是 GPU。我找不到这种行为的任何原因。这个问题背后的原因是什么？我如何改善项目中此类帧的渲染时间？


这是空闲时间，即浏览器等待 CPU 或 GPU 执行某些处理的时间。它显示在文档页面的饼图屏幕截图中如何使用时间轴工具 https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/timeline-tool.

我在官方文档中找不到任何好的解释，但我只是在其他地方找到了一些东西：

每个垂直条的透明区域对应于空闲时间，至少是页面部分的空闲时间。例如，假设您的第一帧需要 15 毫秒执行，下一帧需要 30 毫秒。常见的情况是帧与刷新率同步，在这种情况下，第二帧的渲染时间略长于 15 毫秒。此处，第 3 帧错过了“真实”硬件帧并在下一帧上渲染，因此，第二帧的长度实际上加倍了。

Source: 使用 Chrome DevTools 时间轴和配置文件提高 Web 应用程序性能 https://addyosmani.com/blog/performance-optimisation-with-timeline-profiles/

我会将这个 SO 线程传递给我认识的为 Google 编写文档的人。他们也许能够更好地涵盖这个主题。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

performance

Optimization

Web

Rendering

googlechromedevtools

Chrome DevTools 中帧渲染的空闲时间 的相关文章

  • 为什么 chrome.devtools.network “未定义”？

    我正在尝试创建一个记录所有网络事件的扩展 这是代码 清单 json name My extension version 1 0 background scripts background js persistent true devtool

  • C for 循环索引：新 CPU 中的前向索引更快吗？

    在我订阅的邮件列表上 两位知识渊博的 IMO 程序员正在讨论一些优化的代码 并说了以下内容 在 5 8 年前发布的 CPU 上 向后迭代 for 循环稍微快一些 e g for int i x 1 i gt 0 i 因为比较i归零比将其与其

  • .NET 中 UniqueQueue 和 UniqueReplacementQueue 集合最有效的实现

    考虑到入队和出队操作的速度同样重要 NET 中 UniqueQueue 和 UniqueReplacementQueue 集合最有效 就速度而言 的实现是什么 UniqueQueue是一个不可能出现重复的队列 因此 如果我将一个元素推送到队

  • 在 nHibernate 关系中使用实体的 Lite 版本？

    在某些情况下 出于性能原因 创建一个实体的轻量级版本 指向同一个表 但映射的列较少 这是一个好主意吗 例如 如果我有一个包含 50 列的联系人表 并且在一些相关实体中 我可能对 FirstName 和 LastName 属性感兴趣 那么创建

  • SQLite .NET 性能，如何加快速度？

    在我的系统上 约 86000 个 SQLite 插入需要长达 20 分钟 意味着每秒约 70 个插入 我要做数百万 我怎样才能加快速度 对每一行的 SQLiteConnection 对象调用 Open 和 Close 会降低性能吗 交易有帮

  • 使用 enum.values() 与字符串数组相比，性能是否会受到影响？

    我正在使用枚举来替换String我的 java 应用程序 JRE 1 5 中的常量 当我在不断调用的方法中将枚举视为名称的静态数组时 例如 在渲染 UI 时 是否会对性能造成影响 我的代码看起来有点像这样 public String get

  • Google App Engine 如何预编译 Java？

    App Engine 对应用程序的 Java 字节码使用 预编译 过程 以增强应用程序在 Java 运行时环境中的性能 预编译代码的功能与原始字节码相同 有没有详细的信息这是做什么的 我在一个中找到了这个谷歌群组消息 http groups

  • 如何使用文件系统访问 API 在 Web 浏览器中递归读取本地文件和目录

    我需要读取使用新的 Web 文件系统访问 API 打开的文件夹的所有文件和目录 我能够读取目录 但不知道如何以优雅的方式继续递归 try const directoryHandle await window showDirectoryPic

  • 与保留模式 GUI 相比，使用立即模式 GUI 对性能有何影响？

    我目前正在开发一个标准的 Windows 桌面应用程序 标准意味着没有花哨的东西 只是按钮 文本 滑块等 在研究了一些 GUI 框架并被拒绝后 我决定自己编写一个 GUI 框架他们全部 由于这是一个业余爱好项目 我也愿意尝试 并决定将 GU

  • 如何解决“布局有超过 80 个视图，对性能不利”？

    我正在做一个有点复杂的布局 只是我无法修复 LINT 指示的错误 黑莓浏览次数超过 80 对性能不利 这是布局

  • Angular 5 - ag-grid 18.0.1 - 边缘崩溃

    我一直在到处搜索 但无法找到与此相关的任何信息 很可能是因为 ag grid update 18 x 是新的 无论如何 似乎在将 ag grid 从 17 1 1 更新到 18 0 1 后 任何带有 ag grid 的页面最终都会导致 ED

  • 生成尽可能最快的可执行文件

    我有一个非常大的程序 我一直在 Visual Studio 下编译 v6 然后迁移到 2008 我需要可执行文件尽可能快地运行 该程序大部分时间都花在处理各种大小的整数上 并且执行很少的 IO 显然 我会选择最大优化 但似乎可以做很多不属于

  • 如何在 MATLAB 中绘制纹理映射三角形？

    我有一个三角形 u v 图像中的坐标 我想在 3D 坐标处绘制这个三角形 X Y Z 与图像中的三角形进行纹理映射 Here u v X Y Z都是具有三个元素的向量 代表三角形的三个角 我有一个非常丑陋 缓慢且令人不满意的解决方案 其中我

  • 获取url，给定的url重定向到

    我从 rss 链接中挖掘数据并获得一堆网址 例如 http feedproxy google com r electricpig 3 qoF8XbocUbE http feedproxy google com r electricpig 3

  • 1.2.840.113556.1.4.1941 (LDAP_MATCHING_RULE_IN_CHAIN) 存在性能问题？

    LDAP 搜索有一些内置规则 其中之一是LDAP MATCHING RULE IN CHAIN From MSDN https msdn microsoft com en us library aa746475 v vs 85 aspx 1

  • 提高第一个查询的性能

    如果执行以下数据库 postgres 查询 则第二次调用要快得多 我猜第一个查询很慢 因为操作系统 linux 需要从磁盘获取数据 第二个查询受益于文件系统级别和 postgres 中的缓存 有没有一种方法可以优化数据库以快速获得结果fir

  • 如何以最低的价格优化购物车？

    我有一个我想买的物品清单 这些商品由不同的商店提供 价格也不同 商店有单独的送货费用 我正在寻找一种最佳的购物策略 以及支持它的java库 以最低的总价购买所有商品 Example 商品 1 在 Shop1 的售价为 100 美元 在 Sh

  • 最小的有效 PDF 是多少？

    出于简单的好奇心 看到了最小的 GIF http probablyprogramming com 2009 03 15 the tiniest gif ever 最小的有效 PDF 文件是多少 这是一个有趣的问题 按照书本 你可以从以下开始

  • PHP 与 MySQL 查询性能（ if 、 函数 ）

    我只看到这个artice http www onextrapixel com 2010 06 23 mysql has functions part 5 php vs mysql performance 我需要知道在这种情况下什么是最好的表

  • SignalR 似乎正在减慢我的 MVC/Azure 应用程序的启动速度

    我有一个 MVC 应用程序在 Windows Azure 上的 WebRole 上的 NET 4 5 下运行 使用 SignalR 1 0 alpha2 并使用 ServiceBus 底板 在我的 App Start 文件夹中 我有 Reg

随机推荐

  • ggplot 时间序列绘图：按日期分组

    我想在同一个面板图上绘制多个时间序列 而不是在单独的面板上 我从以下位置获取了 R 代码另一个 stackoverflow 帖子 https stackoverflow com questions 14136703 ggplot2 time

  • 如何以编程方式确定包含哪些待签入项目？

    我可以查询 PendingSets 和候选 PendingSets 并且似乎无法区分包含的挂起更改和排除的挂起更改 我在包含的更改中包含一个文件 可以通过 Visual Studio 团队资源管理器签入 使用 Tfs dll 查询 我得到有

  • 附件的 HTTP 响应标头内容处置

    背景 将 XML 文档写入浏览器的响应流 并使浏览器显示 另存为 对话框 Problem 考虑以下download method HttpServletResponse response getResponse BufferedWriter

  • 更改上下文节点的 XSLT 指令/函数列表？

    有谁知道更改上下文节点的 XSLT 指令 函数列表 例如 像这样的指令for each是其中之一 更改上下文的明显 XSLT 2 0 指令是for each apply templates for each group and analyz

  • 将在 JBoss 4.2 上运行良好的应用程序部署到 JBoss 5 时出错

    我尝试将应用程序 ear 文件 部署到 JBoss 5 但收到以下错误 该应用程序在 4 2 2 下部署良好 15 31 33 172 ERROR AbstractKernelController Error installing to R

  • 如何从 pandas DataFrame 输出带有合并单元格的 html 表格

    我有一个 pandas DataFrame df 作为 gt gt gt df pd DataFrame 1 2 2 2 3 1 2 3 3 3 1 3 2 3 5 7 9 9 3 2 columns list ABCDE I want t

  • 使用 R-markdown knitr hooks 自定义 HTML 报告中的表格格式

    我正在尝试建立一个knitr knit hooks 自动格式化 R markdown 块的数据帧输出kableExtra在我的 HTML 报告中 我不想重复将以下行 或任何行 添加到每个列表数据块的末尾 head iris gt kable

  • App Store 中的应用内购买被拒绝

    我的免费应用程序刚刚从应用程序商店被拒绝 我上传了 3 个应用程序 HD iPad PayedIphone 和 freeiphone 在免费版本中 我有一个完整版本的链接 显然我需要免费版本的 inAppPurchase 而不是链接到完整版

  • 未找到未捕获的模块 jqueryify

    我的情况 我正在查看 spin js 以获取我正在考虑编写的 Web 应用程序 我已阅读所有文档并浏览了所有示例 现在 我尝试在我自己的 Windows 7 笔记本电脑上运行 spin contacts 示例项目 我正在运行适用于 Wind

  • 实体框架 GroupBy 采用 mySQL 最古老的

    我有一个巨大的项目列表 需要按一个属性对它们进行分组 然后应该选择每组中最古老的 简化示例 选择每个用户中最旧的用户FirstName using ED NWEntities ctx new ED NWEntities IQueryable

  • 如何使用 numpy 构建排序数组？ （什么是等级数组？）

    我希望你们所有人都度过愉快的一天 在我的 Python 课上 我们正在学习如何使用 Numpy 因此我们收到了有关该内容的作业 我的问题是 什么是排名数组以及如何使用 python 构建它 我的老师试图用这些台词解释这一点 但我实际上什么也

  • 如何在 YAWS/Erlang 中发送消息以接收

    通常在 Erlang 程序员中使用 在并发编程中发送消息以接收符号 但是我们如何在雅司病中做到这一点 说我正在尝试这样做 gt

  • 如何在 Rust 中解码和编码浮点数？

    我想在 Rust 中解码 存储和编码浮点数 我知道关于num Float integer decode https docs rs num 0 1 36 num trait Float html tymethod integer decod

  • Android 中 Google 地图上的图像平铺

    我正在开发一个 Android 应用程序 我在 Android 中的 Google 地图上放置了图像图块 我可以用简单的 javascript 来做 但谁能告诉我如何在 android 中做到这一点 这是我的 JavaScript 代码 f

  • 将打印重定向到日志文件

    好的 我已经完成了我的第一个Python程序 它有大约1000行代码 在开发过程中我放置了大量print使用运行命令之前的语句os system 说类似的话 print running command cmd os system cmd 现

  • 如何在多行 Vim 缩写中 Eatchar

    我想在 Vim 中触发多行缩写 无需输入 触发 字符 并且光标在特定位置以插入模式结束 我已经快到了 但只是没能成功 到目前为止 我已将以下内容添加到我的 vimrc 中 eat characters after abbreviation

  • 链接到使用 GCC5 编译的库时，clang 中未定义的引用

    我尝试使用 libmuparser 的 ubuntu 15 10 存储库版本 包 libmuparser2v5 使用 gcc 编译工作正常 但使用 clang 则不行 我对此进行了更深入的研究 提出了以下最小 非 工作示例和一些问题 考虑一

  • Android Volley 缓存不同的 POST 请求

    我正在使用 Android Volley 来缓存请求 当我使用 GET 时效果很好 但由于某些原因我转而使用 POST 现在我想用不同的 POST 数据缓存相同的 URL 请求 1 gt URL1 POST 数据 Cat 1 请求 2 gt

  • 使用 GUID 作为主键的最佳实践是什么，特别是在性能方面？ [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我有一个应用程序 几乎在所有表中都使用 GUID 作为主键 并且我读到 使用 GUID 作为主键时存在性能问题 老实说 我没有看到任何问题 但我

  • Chrome DevTools 中帧渲染的空闲时间

    在研究网页渲染优化时 我在许多流行网站上遇到了奇怪的渲染行为 帧渲染时间的很大一部分是没有任何操作的空白空间 Apple 促销页面的示例 https i stack imgur com L00lb png 在该时间范围内唯一运行的就是 GP

热门标签