google-chrome - Chrome 开发工具中的 "Paint"和 "Rasterize Paint"有什么区别?

标签 google-chrome google-chrome-devtools web-performance

我一直在阅读关于 chrome 中的关键渲染路径 herehere .我对这些资源的理解是“合成”步骤发生在主线程之外,并且依赖于之前的“绘制”步骤,该步骤生成要合成在一起的光栅化图层。
但是,当我查看 Chrome 开发工具中位置动画的单帧期间发生的情况时,我看到了以下内容:
enter image description here

  • 看起来主线程上正在发生“合成”,这不是我通过阅读这些资源所理解的。
  • 在合成之前主线程上有一个绘制步骤,但是在“光栅化线程”上合成之后还有另一个“光栅化绘制”步骤。

  • 那么“Paint”和“Rasterize Paint”有什么区别,为什么在合成已经完成后会发生光栅化绘制步骤?为什么合成似乎发生在 chrome dev-tools 的主线程上,但文档将其描述为发生在不同的线程上?

    最佳答案

    根据 this article :

    you may hear the term "rasterize" used in conjunction with paint. This is because painting is actually two tasks: 1) creating a list of draw calls, and 2) filling in the pixels.
    The latter is called "rasterization" and so whenever you see paint records in DevTools, you should think of it as including rasterization. (In some architectures creating the list of draw calls and rasterizing are done in different threads, but that isn't something under developer control.)


    光栅化也是将矢量图像转换为像素矩阵的 Action 。

    关于google-chrome - Chrome 开发工具中的 "Paint"和 "Rasterize Paint"有什么区别?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53316338/

    相关文章:

    google-chrome - 禁用Chrome自动重新加载超时错误

    javascript - 是否可以使用 Chrome DevTools 覆盖登录逻辑?

    javascript - 如何获取最后执行的JS函数

    redirect - 在 Chrome 中内联 javascript 重定向之前中断 javascript

    css - margin : 0 auto; isn't working in Firefox and Safari. 适用于谷歌浏览器

    internet-explorer - 如何通知用户他的浏览器不受支持

    google-chrome - 安装特定版本的 google-chrome-unstable

    html - DOM API 如何影响 HTML 解析?

    javascript - 如何查找在 Chrome 中阻塞的资源(CSS、JS 等)

    angular - 如何解决我网站中的性能问题