Not a very useful opening paragraph

As a front-end worker at the bottom of the society, page optimization should mostly have done or understood, after all, if you write out a project when others visit a page to the first ten seconds of the white screen, may have been killed by the boss…

Page optimization design to a lot of points, corresponding to these points also have a lot of solutions. For example, common lazy image loading, one of the solutions is to use the value of data-src to reference the image address, and so on the current image to the visible area of the time to change the data-src to SRC, so as to reduce a lot of unnecessary requests, not because of the load too much request blocking. This belongs to our manual code to achieve page optimization, the following preload,prefetch belongs to the optimization solution provided by the browser itself.

Note: When loading resources, the browser calculates and sorts the priority of each resource, and then loads resources according to this priority. Just as water is most important in arid regions, browsers also have a ranking of the importance of JAVASCRIPT, CSS, images, font files, etc

Before prefetch, you need to know the priority of the browser to load resources.

Resource priority

Display on console, 5 grades are: Highest, High, Medium, Low, Lowest; These levels are visible directly from the console. (priorityOption)

Default priority for resources:

  1. HTML, CSS, and FONT resources have the highest priorities
  2. Then preload resources, script, XHR requests
  3. Picture, video and audio
  4. The lowest is prefetch.

Here is only the default priority, in fact, will be adjusted according to certain conditions.

  1. In general, the XHR requests we send are asynchronous requests, which are maximized if they are synchronous.
  2. For images, the priority is changed based on whether the image is in the visible view. Modern browsers give viewport visible images a high priority for the first screen experience.
  3. For addingdefer/asyncThe priority of all scripts for property tags is reduced to Low. Scripts that do not add this attribute can then be divided into two categories based on whether the script is positioned in the document before or after the first image displayed by the browser. In the previous(mark early * *)It will be given High priority, after(tag newest * *)It is set to Medium priority.

Here’s an example:

<! DOCTYPEhtml>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>test</title>
    <style type="text/css">
      @font-face {
        font-family: 'tt';
        src: url('./webfont.ttf');
      }
      .custom-font {
        font-family: 'tt';
        font-size: 80px;
      }
    </style>
  </head>
  <body>
    <p class="custom-font">HEAD</p>
    <img style="width: 100px; height: 100px" src="./750-480.png" alt="" />
    <video
      style="width: 100px; height: 100px"
      src="./bbffe1b327a80bbfe118fdbf70ff6c4e.mp4"
    ></video>
    <script src="./a.js"></script>
    <script src="./b.js" defer></script>
    <script>
      window.addEventListener('load'.() = > {
      	// Import images
        const img = document.createElement('img')
        img.src = './test.png'
        document.body.appendChild(img)
        / / into the js
        const js = document.createElement('script')
        js.src = './c.js'
        document.body.appendChild(js)
        / / into the CSS
        const css = document.createElement('link')
        css.href = './style.css'
        css.rel = 'stylesheet'
        document.head.appendChild(css)
      })
    </script>
  </body>
</html>
Copy the code

Below is the result of the execution

And then look at the resulting graph in order of priority at the top

HTML has the highest priority:// so index.html is loaded firstFor images, the priority is changed according to whether the image is in the visible view. Modern browsers give viewport visible images a high priority for the first screen experience:// Images 750-480 in the current viewport are loaded secondDepending on whether the script is placed in the document before or after the first image displayed by the browser, it falls into two categories. In the previous` ` (mark early * *)It will be given High priority, after` ` (mark newest * *)Is set to Medium priority:// The a.js after images 750-480 is marked as medium and is the third to be loadedWith the addition of defer/asyncThe priority of all scripts for attribute tags will be reduced to Low:// B. js sets defer, marked low, and is the fourth loaded.Font resources have the highest priority: the font file webfont-. TTF is tagged as highest, but why is it the fifth loaded, because the font file is imported from CSS and is loaded after CSS is loaded and then parsed, so it is behindCopy the code

Note: we are talking about resource loading priorities here, but don’t forget about page parsing and execution order.

These are the resources introduced at the beginning of the page, while the following resources are created dynamically

Note that we create the tags in the order of image -> js -> CSS. You can see that the tags are low -> low -> highest for CSS and images, both are loaded by priority, but C. js does not. Because js is introduced, the current JS code is executed synchronously, so c.js is loaded directly. Again, this is about resource loading priorities, but don't forget about page parsing and execution orderCopy the code

Here said so much, the order seems to know, but know not to know seems to have no relationship. What does this have to do with preload, prefetch, what does it have to do with optimizing my page?

Preload – preload

Preload can indicate which resources are needed immediately after the current page loads. For this immediate-need resource, the sooner you get it, the better, and Preload specifies this resource

Here are two examples: both from juejin.cn/post/689368…

You can see:

When the page is loaded for the first time, the text will flash for a short time. As you have seen above, the font file is imported from the CSS and will be loaded after the CSS is parsed. The browser can only use the default font until the loading is complete. That is, the font file loads too late. This is where you can preload with preload

<link rel="preload" as="font" href="./webfont.ttf" />
Copy the code

Comparing the loading order diagram above, it is clear that the loading order of the font files is advanced.

Link prefetch -prefetch

Prefetch tells the browser which resources are likely to be used later, and stores them in the cache after the browser has finished loading the current page. When the user accesses one of the prefetched documents, it can be quickly retrieved from the browser cache. (It may or may not be used, but preload is definitely used)

When you enter the page for selecting gift certificates, the image will be loaded, and you can use Prefetch here

<link rel="prefetch" href="static/img/ticket_bg.a5bb7c33.png">
Copy the code

Effect after modification:

Before and after effects are used in a project as shown in the example above.

Scene 1: the autumn wind gradually, the weather is getting colder and colder, chicken yellow in order to not old cold legs also find out the necessary long Johns

  • Before using preload:

Anyway, I have long Johns, so I can wear them when my legs are cold. – Chicken yellow thought so, when I felt cold, my legs shivered all day – Chicken yellow, pawn.

  • After preload:

Although I didn’t feel too cold, I took out my long Johns and put them on first — chicken Huang made a wise decision, so the cold leg shaking incident didn’t happen at all, and I didn’t die for the time being

Scene 2: Older and older, it seems that the hair is getting whiter and whiter, do you need to prepare some black sesame and black rice to maintain your hair? Chicken Xiao Huang touched his hair and used prefetch: When he did not work overtime, he would buy more than ten kilograms of black sesame and black rice and so on to store up.

  • Possible outcome 1:

To my surprise, as a CV engineer at the bottom of society, my hair is not white, but I am bald. Chicken yellow vomits blood two liters, pawn

  • Possible outcome two:

Time flies, chicken yellow hair is indeed more and more white, because from the beginning to adhere to the tonic food, so compared with other chickens, chicken yellow hair is black and bright. — Chicken Yellow very happy, not pawn

They are available in real projects, but are not very compatible with either, so browsers that don’t support Preload and Prefetch automatically ignore them, so they can be used as incremental enhancements to optimize resource loading on our pages, improving performance and user experience. This additional lift a mouth: use vue – cli generated project usually default to the two attributes, specific to see cli.vuejs.org/zh/guide/ht… Preload is recommended to retain, prefetch to see if they need to decide whether to retain

Attachment: compatibility

preload

prefetch

Refer to the article

Browser page resource loading process and optimization juejin.cn/post/684490… Optimize resource loading of front-end pages using Preload&Prefetch juejin.cn/post/689368… Preload content via rel=”preload” developer.mozilla.org/zh-CN/docs/… The Link prefetching developer.mozilla.org/zh-CN/docs/…

Constant END

I understand that for the time being, if there are deficiencies or mistakes, I hope you don’t hesitate to comment