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.
- 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.
- Don’t use the table layout, a small change may cause the entire table to be rearranged.