Web performance optimization series (2): Analyzing page drawing time_html/css_WEB-ITnose

This article was translated by Bole Online - J.c and proofread by sunbiaobiao. Reprinting without permission is prohibited!
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 were a lot of conversations, but what really caught my attention was a performance session called "Making m.facebook.com faster", which was about Facebook How to continually strive to improve web page performance and lessons learned from it.

The Facebook development team uses Chrome Cannry to test the web page's CSS performance. Google Chrome Canary has the latest features of Chrome and allows you to try out some of the latest features that will soon become the standard version of Chrome. Considering that Chrome Canary is a "preview version" specially designed for developers and early adopters, sometimes there will be some bugs caused by the rapid iteration of the Chrome development team. Still, it has some great developer tools to help you test the performance of your web pages.

In this article, I show you how to use Chrome Canary’s developer tools to locate parts of your CSS that may cause slow scrolling and affect the page’s performance. Draw time. When a browser loads and draws a page, it needs to iterate through all visible elements in order to "draw" and get the content to appear on the screen. As this relies on layout and complex CSS, you may find that draw times can be very long. This can cause web pages to appear choppy and slow to respond. This kind of slow scrolling is also called jank (jank is a professional term in the Android system, which refers to the lag phenomenon that interrupts the smooth dynamic picture on the screen). This is even more apparent when scrolling on mobile devices, where the browser struggles to draw complex CSS.

Even if the page load time is very fast, it is still worth studying the page draw time. Different devices react differently to CSS properties, but regardless, improving performance is always a good thing. In order to test, you must first go to the Google Chrome website to download Chrome Canary. Once the installation is complete, you can open the web page you want to test. There is a good case study website on the HTML5 Rocks website. We use it to prove that the operation of high-energy-consuming CSS properties will increase the drawing time of the page.

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

Clicking will display a control panel that allows you to change settings.

Because we want to test the rendering performance of the page, select "Enable continuous page repainting (page continues to be repainted) " and "Show FPS meter (display FPS meter)". If you close the settings panel and view your page, you should see the image below in the upper right corner of the page.

The table shows the time required to draw the current page in milliseconds, while the right side shows the minimum and maximum values ​​of the current chart. In addition, a tree diagram of the last 80 frames is also displayed. The power of this chart is that it constantly attempts to redraw the page, making it appear as if the page is loading for the first time. This allows you to pinpoint drawing issues caused by CSS without having to reload the page every time. Whether your changes have an impact or not, the treemap will continuously monitor it.

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

This div has border-radius (rounded corners) and projection attributes. When removing the box-shadow attribute, observe the changes in the FPS meter during drawing time.

Wow! As you can see from the chart, there is an interesting change in page draw times. By simply removing the border-radius attribute, it can be seen that this change can significantly reduce the drawing time of the page. When you update or change the CSS properties, this chart immediately drops. Using both box-shadow and border-radius on the same element will cause a very heavy drawing load because the browser cannot optimize for it. If there is an element that needs to be redrawn frequently, you should keep this in mind when building the page.

Here’s a great video from the Google IO website that goes into more depth about draw times and introduces some tips for reducing “jank” on web pages.

If you want to learn more about draw time optimization, check out these links.

Happy testing!