火狐浏览器与chrome_在Google Chrome和Mozilla Firefox中查看浏览器重画

火狐浏览器与chrome

One goal of super-optimized websites is to prevent browser repaints due to changes in a block's style or content. There are numerous ways we intentionally (or unintentionally) trigger block repaints, but the browser does it so quickly we have trouble seeing when and where it happens. Recognizing the importance of allowing developers to micro-optimize their pages, the Chrome and Firefox teams have added features to their browsers to allow us to see those repaints. Here's how to do it!

超级优化的网站的一个目标是防止由于块的样式或内容的更改而导致浏览器重新绘制。 我们有多种方式有意(或无意地)触发了块重绘，但是浏览器是如此之快，以至于我们很难看到它何时何地发生。 Chrome和Firefox团队认识到允许开发人员对页面进行微优化的重要性，因此已在其浏览器中添加了一些功能，使我们可以查看这些重绘。 这是怎么做！

谷歌浏览器和金丝雀 (Google Chrome & Canary)

The repaint feature needs to be enabled at startup for Chrome and Canary with the --show-paint-rects config:

需要在启动时--show-paint-rects配置为Chrome和Canary启用重新绘制功能：

open ./Google\ Chrome\ Canary.app --args --show-paint-rects

Be sure to include --args in your command or you'll run into problems opening the browser. Repaints will display on each site you visit.

确保在命令中包含--args ， --args在打开浏览器时会遇到问题。 重新粉刷将显示在您访问的每个站点上。

Mozilla Firefox，Aurora，每晚 (Mozilla Firefox, Aurora, Nightly)

To view repaints in Firefox and Aurora browsers, you need to enable an about:config option. The option name is nglayout.debug.paint_flashing. Turn this option to true and you'll quickly see repaints as the happen!

要在Firefox和Aurora浏览器中查看重绘，您需要启用about：config选项。 选项名称为nglayout.debug.paint_flashing 。 将此选项设置为true，您很快就会看到重新绘制！

At the time of publish, only nightly exposed this config feature.

在发布时，仅每晚公开此配置功能。

I recommend you take a few moments to scope out the repaint frequency on your websites and see what you can do to improve performance!

我建议您花一些时间来确定网站上的重绘频率，然后看看可以采取哪些措施来提高性能！

翻译自: https://davidwalsh.name/browser-repaint

火狐浏览器与chrome