如何优化光栅(光栅器线程)，如Chrome Dev Tools Performance选项卡中所示？
我试图理解为什么这些Raster过程具有如此长的持续时间，但我发现文档很稀疏。
从其他人的问题中，我认为这可能与正在绘制的图像，或javascript侦听器，或由于次优的CSS过渡而重新绘制的元素有关，但删除图像，javascript和CSS过渡并没有起到作用。
有没有人能给我指个方向？如何缩小导致这个漫长过程的元素或脚本的范围？已经两天了，我一点进展都没有。
谢谢!
回答 2
Stack Overflow用户
发布于 2019-12-16 20:17:18
"Raster“部分代表与绘画相关的所有活动。毕竟，任何HTML页面都是一个“图像”。浏览器将DOM和CSS转换为图像以将其显示在屏幕上。你可以在here上读到它。因此，即使页面上没有任何图像，您仍然会在"Raster“中看到至少一个光栅化器线程，它表示将HTML页面转换为" image”。
顺便说一句，Chrome(79.0.3945.79)提供了一些信息，如果图像是在这个线程中启动的。
此外，您还可以在“性能”设置中启用"Advanced paint instrumentation"，以便更详细地查看浏览器渲染图像时发生的情况
Stack Overflow用户
发布于 2020-01-14 18:38:38
在花了几个小时之后，我相信这4个丑陋的绿色矩形叫做"Rasterize paint“，是分析器显示中的一个bug。我的怀疑基于：
1)在分析器启动后，矩形启动一些sencond。不是在页面加载之后，因此它似乎是绑定到分析器，而不是绑定到页面。
2)矩形的起始点取决于分析时间范围的大小。如果我捕获3秒，它在~2秒后开始，如果我捕获30秒，它在~20秒后开始。因此，"cpu负载增加“取决于您按下停止按钮的时间。
3)如果我按照maksimr的建议启用了"Advanced paint instrumentation“，我可以点击矩形来查看细节，细节会在"Paint profiler”中显示大约0.4毫秒的事件，就像在终止矩形开始之前一样。(见屏幕截图，右下角)
3b)我甚至可以点击同一矩形的不同部分，在画图分析器中产生不同的~0.4毫秒长的事件...
https://stackoverflow.com/questions/58615867
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号