Example of first screen performance optimization

Recently, I was helping a colleague to see the slow loading of the first screen. Take a little note of this article

Outline of contents:

  1. First screen Performance Problem Simple procedure description
    1. Look at the load timeline of the resource
      1. First, look at the life cycle of an HTML page
      2. Analyze the first screen, when should it be rendered?
      3. The optimization effect

First screen Performance Problem Simple procedure description

  1. Performance issues, first look at developer tools Network

  2. After optimizing the file size and so on, start looking at the resource loading timeline

Look at the load timeline of the resource

  1. First, look at the life cycle of an HTML page

    1. DOMContentLoaded (shown in blue above) – The browser has fully loaded the HTML and built the DOM tree, but external resources like and style sheets may not have been loaded yet.

      The DOM is ready, so the handler can begin to get the DOM node and initialize the interface.

    2. Load (shown in red) – The browser loads not only the HTML, but also all external resources: images, styles, fonts, etc.

      External resources have been loaded, styles and fonts have been applied, and the image size is known.

    3. Beforeunload/Unload – When the user is leaving the page.

      Beforeunload event — User is leaving: We can check whether the user has saved the changes and ask him if he really wants to leave.

      Unload event – The user has almost left, but we can still start some operations such as sending burial statistics.

  2. Analyze the first screen, when should it be rendered?

    For the vue+ WebPack project, the first screen content style and JS are in the same JS file, so normally the DOMContentLoaded time is about the time the page should be rendered

    Look at the first screen of the “Problem” project. There is a problem. First Paint is much slower than DOMContentLoaded. Nearly a second slower

    Analyze code to find problems :(app.vue)

    <template>
  <div id="app">
    <router-view></router-view>// The page is waiting for the get_menu interface to return</div>
</template>
Copy the code

    • Cause: The page is waiting for the get_menu interface to return (because of authentication, the corresponding menu menu content is displayed according to the permission).

    • To optimize the space, you can render the things that can be rendered in the page first without waiting for the GEt_menu interface, such as rendering the layout first: the header section (black) and the empty menu section (black) on the left. And then the actual page content, just waits for the interface to return (so that the first screen time is promoted to about the same time as DOMContentLoaded. As shown in figure)

      First screen rendering time is 788ms and DOMContentLoaded time is about the same.

    The actual code operation is also very simple (the following is the transformation of app.vue)

    • Render the things in the page that can be rendered first, such as the head and left side 
      <template>
  <div id="app">
    <system-header></system-header>/ / to the head<div class="content-wrap">
      <system-left></system-left>/ / on the left side of the<div class="right-content">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
Copy the code
    • As an added benefit, the first screen time will be shorter with each subsequent refresh. Even after the refresh, will not appear in the case of white screen

  3. Optimization effect:

    1. After optimization, it increased from 1.62s to 0.788s, more than one times!

    2. With each subsequent refresh, the first screen time will be shorter. Even after the refresh, will not appear in the case of white screen

Code words are not easy