在开发工具时间轴中,空的绿色矩形是什么?

2023-12-26

在 Chrome 开发工具时间轴中,填充的绿色矩形(代表绘制操作)和空的绿色矩形(显然也代表有关绘制操作的某些内容......)之间有什么区别?


绘画实际上是两个任务:绘制调用和光栅化。

  • 绘制调用。这是您想要绘制的内容的列表,它源自应用于您的元素的 CSS。最终,有一个与 Canvas 元素没有什么不同的绘制调用列表:moveTo、lineTo、fillRect(尽管它们在 Chrome 的绘画后端 Skia 中的名称略有不同,但这是一个相似的概念。)
  • 光栅化。逐步执行这些绘制调用并将实际像素填充到可以上传到 GPU 进行合成的缓冲区的过程。

那么,有了这个背景,我们就开始吧:

  • The 实心绿色块是 Chrome 记录的绘制调用。这些都是在主线程上与 JavaScript、样式计算和布局一起完成的。这些绘制调用被组合在一起作为数据结构并传递到合成器线程。
  • The 空的绿色块是光栅化。这些由合成器生成的工作线程处理。

从本质上讲,两者都是油漆,它们只是代表整个工作的不同子任务。如果您遇到性能问题(并且从您提供的抓取来看,您似乎受到了绘制限制),那么您可能需要检查您通过 CSS 或 JavaScript 更改的属性,并查看是否存在仅合成器的方法来实现相同的结局。CSS 触发器 http://csstriggers.com也许可以在这里提供帮助。

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

在开发工具时间轴中,空的绿色矩形是什么? 的相关文章

  • chrome 72 更改了源映射行为

    我正在为 Chrome 开发一个 Webextension 代码是用 Typescript 编写的 所以我需要源映射 该扩展与 ParcelJS 捆绑在一起 但我相信我的问题与捆绑器无关 从 Chrome 70 更新到 72 后 源映射不再
  • 在 Chrome 开发者工具中禁用脚本编辑

    我使用 Chrome 开发者工具来调试 JavaScript 代码 但我对 Chrome 允许在 脚本 选项卡下编辑 JavaScript 文件的方式感到不满 有时 我没有意识到我在 Chrome 中 开始对 脚本 选项卡下的代码进行更改
  • 有没有办法在 Chrome 开发者工具中评估源映射中的变量?

    我正在 Chrome 中使用 SuperDevMode 调试 GWT 应用程序 它让我能够访问 devtools 中的 Java 源映射 我的问题是 当我调试代码时 我想评估一些变量 我的问题是 是否可以从源映射中评估变量 如果没有 是否可
  • 如何使用 Puppeteer 执行右键单击?

    我正在尝试使用 Puppeteer 执行右键单击 我尝试添加选项 await component click button right 但我得到的只是定期单击该组件 我关注木偶师的API https github com GoogleChr
  • Chrome DevTools 中的渲染去了哪里?

    看起来渲染设置不再是原来的位置 即启用绘画闪烁 显示图层边框 显示 FPS 仪表 显示滚动性能问题 我怎样才能再次访问这些功能 渲染设置已移动铬48 您现在可以通过三点菜单图标 更多工具 渲染设置来访问它们 或者 您可以通过底部窗格的新菜单
  • Chrome 开发工具命中代码但未命中断点

    我在 chrome 开发工具上启用了断点 并且在一行上有一个断点 我知道 chrome 正在运行 因为我将断点放在具有以下语句的行上 alert why is this not breaking 如果我在本地主机中找到该文件 则断点有效 断
  • 在 Chrome 开发者工具中禁用调试器语句

    我正在尝试对恶意 JavaScript 进行逆向工程 当我最初加载侧面时 会注入 JS 代码 其中包括 debugger 语句并将断点注入我的 chrome 开发人员控制台 通过stackoverflow阅读 禁用所有断点does not帮
  • 为什么在使用 repaint() 而不是使用 getParent().repaint() 时会出现此 Swing 错误?

    这个问题是基于我不久前在一个简单的 Swing 骰子程序中遇到的问题 我发布的原始问题是here https stackoverflow com questions 22306637 mystery concurrency componen
  • Chrome 中的 V8 原生语法

    Nodejs 有特殊标志 allow natives syntax 是否可以将这样的东西传递给 Google Chrome 或者也许开发工具提供了其他方式来访问此类信息 running node with allow natives syn
  • 在 userCodeAppPanel 中看不到我的 javascript 代码

    这是来自 Google 电子表格中包含的脚本的代码 唯一的其他代码是onOpen它创建菜单和showDialog 功能 function showDialog userInterface HtmlService createHtmlOutp
  • Chrome DevTools:Html 元素悬停不起作用

    我遇到这个问题已经有一段时间了 我的 chrome 开发工具有一个奇怪的行为 由于某些不明原因 悬停和突出显示元素不起作用 请看下面的 gif 当我展开特定元素时 它会破坏开发工具 我真的不明白这是从哪里来的 我和朋友比较了设置 我们有相同
  • 在调试器中暂停时在 Chrome 开发工具中向下滚动

    当 Chrome 在调试器模式下暂停时 有没有办法在页面上向下滚动而不取消暂停 如果您的工具已固定 您可以将其取消固定以查看更多内容 另一种方法 转到元素选项卡 右键单击任何visible元素 即不隐藏 display none etc 选
  • 通过 DevTools 协议从 Chromium 进行“向外”通信

    我有一个页面在无头 Chromium 实例中运行 我通过 DevTools 协议使用 Node js 中的 Puppeteer NPM 包来操作它 我正在将脚本注入到页面中 在某些时候 我希望脚本给我回电并向我发送一些信息 通过 DevTo
  • 摆动刷新周期

    我试图了解何时使用重新验证 重绘 打包 令人惊讶的是 我没有找到详细的底层文档 请随意链接 到目前为止我已经明白这都是 RepaintManager 的责任 油漆 重新油漆指的是脏 干净的东西 pack validate revalidat
  • 在全局范围内查找 JavaScript 函数

    有没有办法在当前活动的对象模型中搜索 JavaScript 属性 例如命名函数 Firebug 在 DOM 选项卡上显示的内容 我在 Chrome 开发人员工具中找不到直接等效项 加载页面 使用主要浏览器的通用开发人员工具 一个例子是 我搜
  • 如何清除 Chrome 开发工具中的时间线选择?

    How to clear selectin on the timeline If I do double click then selection will be expanded to the end of the timeline bu
  • Chrome 开发者工具中的空闲时间和其他时间。为什么浏览器长时间不活动?

    Chrome 开发者工具的 时间线摘要 选项卡中的 空闲 和 其他 时间包含哪些内容 是什么导致如此不作为 为什么会出现这些情况呢 如何减少这些时间呢 是否可以 为什么浏览器长时间处于不活动状态 在空闲时间的情况下 开始时超过 1 8 秒没
  • 调试修改某些特定画布元素的 JS

    我正在尝试使用 Chrome 开发者工具调试画布元素 由此 如何检查画布框架 https stackoverflow com questions 31802514 how to inspect canvas frames我可以看到有一个实验
  • 调试时忽略chrome开发工具中的特定js文件

    在 Chrome 开发者工具中使用断点进行调试时是否可以忽略某些 javascript 文件 就说在这个网站上http todomvc com architecture examples angularjs http todomvc com
  • CSS 样式直到刷新才应用

    我有一个具有以下 CSS 样式的网页 该样式覆盖了一些更高级别的样式 pnlActions background image webkit gradient linear left top left bottom from 000 to 0

随机推荐

  • 如何在 python-gql 中使用变量?

    这个函数将返回所有用户而不是给定的用户名 我怎样才能使它正确 还有更好的 Python GraphQL 客户端吗 gql 太简单了 没有太多文档可以检查 def fetch user username query gql query get
  • 将深色模式/浅色模式保存到本地存储

    我有一个黑暗模式功能 HTML SCSS 和 javascript 工作正常 但是当我刷新页面时 一切都恢复正常 而不是黑暗模式 我想将深色模式和浅色模式的值保存到localStorage 但我很困惑 我不知道该怎么办 有人可以帮助我吗 请
  • 将字节数组保存到 Excel 文件

    我从 ssrs 报告中获取一个字节数组 然后我想将其保存在服务器上的 Excel 中以供进一步处理 我可以在客户端浏览器上导出它 但是当尝试将文件保存在服务器上时 它会保存 但打开时出现错误 excel 无法打开文件 因为文件格式或文件扩展
  • 带有 http-bind 的 strope.js 无法加载资源 404 未找到

    我尝试使用 strope js 连接 ejabberd 服务器 但出现以下错误 POST http localhost http bind 404 Not Found Strophe Bosh processRequest sendFunc
  • RTMP流录制

    我有一堂课 在 ExoPLayer 的帮助下观看 rtmp 流 player ExoPlayerFactory newSimpleInstance context val rtmpDataSourceFactory RtmpDataSour
  • 如何在NUnit测试用例中传递字符串和字典?

    我想对我的方法进行测试 我可以传递 2 个字符串变量 但我不知道如何传递Dictionary lt gt 它看起来像这样 Test TestCase agr1 askdwskdls Dictionary
  • 退出按钮覆盖整个屏幕

    退出按钮覆盖整个屏幕有什么问题 我设置的边界覆盖文本 Exit 因此边界为 x 280 y 385 width 70 height 20 覆盖整个框架的按钮图像 注意 我在笔记本电脑上尝试了相同的代码 它工作得很好 但是当我在学校计算机上运
  • 如何可靠地将 X11 键码转换回扫描码或隐藏使用 ID

    几乎自己解决了 背景信息 Linux 密钥代码 以下内容来自 linux xmodmap tutorial 扫描码 键盘发送到计算机的数字 USB用 键盘 它是由 USB 标准定义的 Keycode Linux 内核用来表示按键 或鼠标 的
  • 在 Visual Studio 2013 中使用 Bootstrap 调试响应式 Web 应用程序时,IE 11 引发异常

    当我调整浏览器窗口大小并遇到响应断点时 此 动态 方法会在第 3 行抛出异常 window BROWSERTOOLS CONSOLE SAFEFUNC function fn var returnFn function return fn
  • R 函数 bs() 的输出解释(B 样条基矩阵)

    我经常使用 B 样条进行回归 到目前为止 我从来不需要理解的输出bs详细信息 我只会选择我感兴趣的模型 并将其与lm 但是 我现在需要在外部 非 R 代码中重现 B 样条模型 那么 生成的矩阵的含义是什么bs 例子 x lt c 0 0 1
  • 如何更改 yii2 中所有 gridview 的标题颜色?

    我想更改所有标题的背景颜色GridViewYii2 中的头文件 我知道下面的代码可以完成这项工作 但我只想更改一次 所有标题都具有相同的颜色 code
  • Chrome 标签在前台长时间处于后台后崩溃/挂起

    我有一个显示实时统计数据的页面 它运行大量 JavaScript 发出大量 HTTP 请求 使用 D3 js 每隔几秒渲染一次 SVG 图表 具有大量 CSS 动画 并频繁重新排列 DOM 只要页面聚焦 它就可以顺利运行 如果我切换到另一个
  • 根据条件更改 GridView 行颜色

    我想根据某些条件更改 gridview 的特定行颜色 我正在使用 ASP NET 和 C protected void GridView1 RowDataBound object sender GridViewRowEventArgs e
  • Python内部排序方法[重复]

    这个问题在这里已经有答案了 有谁知道Python在list sort 内部使用什么类型的排序 或者它至少保证 O n log n 这docs http docs python org 2 tutorial datastructures ht
  • 具有重复键名称的 JSON 在解析时会丢失信息

    因此 要么我回去告诉某人他们应该修复 JSON 要么我需要找出我做错了什么 这是 JSON 请注意范围出现三次 String j jobname test parameters parameter name maxErrors value
  • 通过引用 id 分配给环境(即不将 env. 传递给子函数)

    程序员经常在大函数中使用多个小函数 一路上我们可能想要收集某个环境中的东西以供以后参考 我们可以创造一个环境new env hash FALSE 并将其传递给较小的函数并分配assign 好吧 花花公子 我想知道我们是否可以使用环境的引用
  • 更改 dsym 文件中的 uuid

    我一直在努力改变uuid生成的 dsym 文件 以便 crashlytics 可以将崩溃日志与dsym 你知道有什么方法可以做到吗 有关更多上下文 在构建期间上传 dsym 的脚本失败 我没有注意到 Bitcode 被禁用 因此 itune
  • 如何在 Android 中以编程方式在 EditText 中设置 Id

    我在 GridLayout 上有一个名为 addnewTask 的按钮 当您创建此按钮时 它将创建一个 EditText private GridLayout gridLayout int rowIndex 3 int colIndex 1
  • Postgres 将所有数组值与条件 ---updated 匹配到同一列

    我有表 table a 和以下列 id event id 1 101 1 102 1 103 2 105 2 103 2 106 I 和 to 搜索 101 103 使用 and 条件类似于使用 OR 条件进行 IN 查询 例如 id 1
  • 在开发工具时间轴中,空的绿色矩形是什么?

    在 Chrome 开发工具时间轴中 填充的绿色矩形 代表绘制操作 和空的绿色矩形 显然也代表有关绘制操作的某些内容 之间有什么区别 绘画实际上是两个任务 绘制调用和光栅化 绘制调用 这是您想要绘制的内容的列表 它源自应用于您的元素的 CSS