$ (window). Load () and $ (document). Ready ()

First, preface

When we write the JS file of the front-end code, we tend to write a $ (function () {}) before we continue to write our own code inside the curly braces. It was not understandable at the time to add such a thing, just to add it as a label to the code. Until one time alone to write a page, it was missing, so ...

Error, Uncaught referenceerror: ... is not defined

The effect of $ (function () {}) is to defer the execution of the code in parentheses until the HTML DOM tree is built, thus avoiding the bug that the JS operation was preceded by the DOM tree creation.

But just understand this $ (function () {}), window.onload = function () {} Again, this is another thing ... It seems that the same role as the former, but there are differences, I am puzzled.

Then

• $ (document). Ready (function () {}),
• $ (window). Load () and $ (document). Ready () Difference

The incoming, so completely messy ...

Second, the text

(i), browser rendering process

The rendering engine rendering process after loading into the HTML file via a network module is often referred to as the critical render path (Critical Rendering path):

1. Parse HTML to build the DOM tree (build DOM node): The rendering engine begins parsing the HTML and translates the tags into DOM nodes in the content tree.
   
   
2. Constructs a render tree (parsing style information): Parses the style information in external CSS files and style tags. The render tree consists of a number of rectangles that contain various attributes, which are displayed to the screen in the correct order.
   
   
3. Layout render tree (layout Dom node): Performs the layout process, which determines the exact coordinates of each node on the screen.
   
   
4. Draw a render tree (draw a DOM node): Once the render tree is built, the next step is to draw, traversing the render tree and drawing each node using the UI backend layer.

This is the basic process of HTML rendering, but this does not include the process of the browser loading external resource slices, scripts, IFRAME, etc. during parsing.

To put it bluntly, the above four steps are just the rendering flow of the HTML structure, while the loading of external resources is always in the rendering flow of the HTML structure, even if the drawing Dom node is completed, the external resources may still be loading or not yet loaded.

For HTML browsers There is a dedicated HTML parser to parse and build the DOM tree during parsing. Here we discuss the parsing of two DOM elements, the style (link, style) and the script file. Because the browser is parsed from top to bottom, the parsing of the browser is blocked when both elements are encountered, until the external resource is loaded and parsed or executed to continue parsing the HTML down.

1) The external style blocks subsequent script execution until the external style is loaded and parsed.

2) external styles do not block the loading of subsequent external scripts, but will block the execution of external scripts.

3) If the subsequent external script contains an async attribute (ie, defer), the external style does not block the script's loading and execution

4) The dynamically created link tag does not block the loading and execution of dynamically created script, regardless of whether the script tag has an async attribute, but for other non-dynamically created script, the above three conclusions still apply

Dynamically created external scripts are not blocked by link.

$ (window). Load () and $ (document). Ready ()