1. Page loading process

1.1 Process of Loading a Resource

Enter the URL in the browser address bar

Browser View Cache (Strong Cache)

Browser Parses URL Acquisition Protocol, Host, Port, path

The browser assembles an HTTP(GET) request message

The browser obtains the IP address of the domain name according to the DNS server

Open a socket and the destination IP address, and the port establishes TCP link

Send http/https requests to this IP machine

The server receives and processes the http request and returns it

Judgment negotiation buffer

The server sends the response message back to the browser through TCP connection

Close TCP connection

Does the browser check the response status and make different treatments

If the resource is cacheable, cache it

The browser gets the returned content

1.2 browser rendering process

Generating DOM Tree according to HTML structure

Generate CSSOM from csss

DOM and CSSOM are integrated into RenderTree (rendering tree, with more styles than DOM tree)

Start rendering and presentation according to RenderTree.

When an HTML parser encounters a script without async and defer, it will execute and block rendering (js may change dom structure)

The browser triggers the DOMContentLoaded event on the Document object

Show page

Picture loaded

Call onload

1.3 Why css in head

Render css before html rendering

If css is placed after html elements, html will be rendered without css first, and then html elements will be re-rendered after being loaded into css, which will lose performance.

1.4 why should js be placed at the bottom of body

1. It will not block the rendering of elements in the body, and can make the page come out faster.

2.script can get all the labels

1.5 pictures

Pictures are asynchronous requests and will not affect dom tree rendering.

1.6 load,DOMContentLoaded

window.addEventListener('load',function(){
 //All page resources are loaded, including pictures and videos.
 });
 
 document.addEventListener('DOMContentLoaded',function(){
 //DOM can be executed after rendering, and the pictures and videos have not been loaded yet.
 });

• Domcontentloaded: when the DOM structure is complete
• Load: After DOM structure and static resources are all load：dom
• At the bottom of the ready layer is the DOMContentLoaded function.
• $ (Window). The load function is at the bottom of LOAD.
• $(function () {}) is an abbreviation for $ (document) .ready.

var show = console.log.bind(console);
 
 Show ('Observe Sequence of Script Loading')
 
 document.addEventListener("DOMContentLoaded", function () {
 Show('DOMContentLoaded callback')
 }, false);
 
 window.addEventListener("load", function () {
 Show('load event callback')
 }, false);
 
 
 Show ('Script Resolves One');
 
 
 $(document).ready(function () {
 show('$(document).ready')
 })
 
 //Test Load
 $(function () {
 Show ('Script Parse II');
 })
 
 
 $(window).load(function () {
 show('$(document).load');
 });
 
 Show ('Script Parse Three');

1.7 Reflow

The elements in the DOM structure have their own boxes, which all require the browser to calculate according to various styles and put the elements where they should appear according to the calculation results, called Reflow.

Conditions that trigger reflow:

1. Add or delete dom nodes

2. Move dom position or animation

3. Modify css styles

4.resize the window or scroll (mobile end does not have this problem)

1.8 redrawing Repaint

The content to be rendered on the page is drawn on the screen.

DOM changes, CSS changes (to determine whether the content presented on the page has changed)

1.9 Avoid relow and repaint

1. try to use class to modify the style

If you want to modify more than one style, each style will be reflowed when it is modified. You can save these styles in a class and only reflow once for each modification.

1. Setting the position of an element to absolute and fixed can make the element separate from the DOM tree structure and exist independently. When the browser needs to render, it only needs to render the element and the element located below the element, thus shortening the rendering time of the browser to some extent. This is especially worth considering in today’s more and more Javascript animations.
2. Don’t use the table layout, a small change may cause the entire table to be rearranged.