Web Performance Optimization Series (2): Profiling page Drawing Time

This article by Bole Online-j.c translation, Sunbiaobiao School Draft. without permission, no reprint!
English Source: www.deanhume.com. Welcome to join the translation team.

Recently, I attended the Facebook Mobile Developer conference in London. During that day, there was a lot of talk, but what really got me focused on was a performance, called " make m.facebook.com faster " conversation, on how Facebook is constantly working to improve Web performance and learn from it.

The Facebook development team uses Chrome cannry to test Web page CSS performance. Google Chrome Canary has the latest features of Chrome, and allows you to try out some of the latest features that are going to be Chrome's standard version. Given that Chrome Canary is a "preview" designed specifically for developers and early adopters, it is sometimes caused by a quick iteration of the Chrome development team that leads to some B-UG. Nonetheless, it still has some great developer tools to help you test Web performance .

In this article, I show you how to use the Chrome Canary Developer tools to locate part of your CSS, which may cause the page to scroll slowly and affect the drawing time of the page. When the browser loads and draws the page, in order to "draw" and let the content appear on the screen, all visible elements need to be traversed. Since this relies on layout and complex CSS, you may find that drawing time can be very long. This causes the page to appear to be jerky and unresponsive. This slow scrolling is also known as Jank (Jank is a professional term for Android that refers to the stutter of a smooth, dynamic screen interrupt on the display). This is even more noticeable when scrolling through a page on a mobile device and the browser is straining to draw complex CSS.

Even if the page load time is very fast, it is still worth studying the drawing time of the page. Different devices react differently to CSS properties, but in any case, it's always a good thing to improve performance. In order to test, you first have to go to Google chrome website to download Chrome Canary. Once the installation is complete, you can open the Web page you want to test. HTML5 Rocks website has a good case site, we use it to prove the high-energy-consuming CSS property operation, will increase the page drawing time.

Once you open this page and press F12, the Chrome Developer tool will pop up. Then click the Settings button on the bottom right of the developer tool to turn on the settings for the test page rendering performance.

A dashboard that allows you to change settings is displayed when clicked.

Because we want to test the rendering performance of the page, select "Enable continuous page repainting(page continuous redraw)" and "Show fps meter (display fps meter) " . If you close the Settings panel and view your page, you should see the picture below in the top right corner of the page.

The table shows the time it takes to draw the current page in milliseconds, while the right side shows the minimum and maximum values for the current chart. In addition, a tree view of the last 80 frames is shown. The power of this chart is that it constantly tries to redraw the page so that the page appears to be loading for the first time. This allows you to pinpoint the drawing problem that is affected by the CSS without having to reload the page every time. Regardless of whether your changes have an impact, the tree chart will be continuously monitored.

If we look at the HTML and CSS of this page in detail, you will see that one div has added some CSS effects.

This div has Border-radius (rounded corners) and projection properties. When removing the Box-shadow attribute, observe the change in the drawing time of the FPS meter.

Wow! As you can see from the chart, there is an interesting change in page drawing time. By simply removing the Border-radius attribute, you can prove that the change will significantly reduce the time it takes to draw the page. When you update or change the CSS properties, the chart is dropped immediately. Using both Box-shadow and Border-radiuson the same element results in a very heavy drawing burden, because the browser cannot optimize for it. If you have an element that requires frequent repetition, you should always keep this in mind when creating a Web page.

This is a good video on the Google IO website, which explains the drawing time in more depth and introduces some tips for reducing the "jank" of Web pages.

To learn more about drawing time optimization, look at these links.

Good test!

Web Performance Optimization Series (2): Profiling page Drawing Time