1. How do browsers render HTML?

    • If the render is blocked when an external chain js is encountered

      • Case 1: GUI rendering is blocked (a single JS file, functions, operation on elements….)
      • Case 2: If you add a DOMContentLoaded or onLoad event to the window, it will not block GUI rendering
      • Case 3: Using async to request JS resources is asynchronous [open HTTP request separately], the GUI continues rendering, but once the JS request comes back, it immediately suspends the GUI processing and renders JS
      • Case 4: Using defer does not hinder GUI rendering, and only when the GUI is rendered will all the JS returned using the request from defer be rendered

    • If CSS blocks rendering in case of external chain

      • Does not block GUI rendering
      • The GUI rendering thread will open an HTTP thread to request the CSS from the external chain, and the GUI will continue to render the CSS resource after the request comes back

    • How many attribute values does the script tag have

      <script type="text/javascript" src="index.js" async/defer></script>

- type="text/javascript"Tell the browser that the code I'm introducing is in the form of text js-src outside the chain js path -async: load the JS asynchronously -defer: defer rendering the JS file and then render it when the GUI is finishedCopy the code

  2. Why CSS in the header and JS in the interior? CSS in the header:

    • In order to notify HTTP network threads to request CSS resources when dom rendering is not available, GUI rendering is not blocked, and time differences are reused to speed up rendering

    Js at the bottom:

    • Prevents blocking GUI rendering