1. Standard Mode and Weird Mode
There are two modes for browser rendering of pages: weird mode (the browser uses its own mode to parse and render the page) and standard mode (the browser uses the official W3C standard to parse and render the page). Different rendering modes will affect the browser's parsing of CSS code and even Javascript. With <!DOCTYPE html>, the browser will render the page in standards mode.
2.meta tags
The meta tag defines document metadata, expressed in the form "name=value". Its purposes are: (1) setting the page character set; (2) setting keywords for easy search by search engines; (3) setting web page description information
3. What happened during the period from when the browser entered a URL to when the content of the web page was completely displayed?
(1) When the browser receives this command, it will open a separate thread to process the command. First, it must determine whether the user input is a legal or reasonable URL address, and whether it is an HTTP protocol request. If so, enter the next Step 1;
(2) The browser engine of the browser will analyze this URL, if there is a cache "cache-control" and it has not expired, it will extract the file from the local cache (From Memory Cache, 200 return code), if the cache "cache-control" "cache-control" does not exist or expires, the browser will initiate a remote request;
(3) Obtain the IP address corresponding to the website address through DNS resolution domain name, and send a GET request to this IP together with the browser's cookie, userAgent and other information;
(4) ) Next is the classic "three-way handshake", HTTP protocol session, the browser client sends messages to the Web server for communication and data transmission;
(5) Enter the back-end services of the website, such as Tomcat, Apache, etc., and The popular Node.js servers in recent years have application codes deployed on these servers, and there are many languages, such as Java, PHP, C++, C#, and Javascript;
(6) The server executes the corresponding back-end application logic according to the URL, during which Use "server cache" or "database";
(7) The server processes the request and returns a response message. If the browser has visited the page, there are corresponding resources in the cache, and compared with the last modification record of the server, if it is consistent, it will return 304, otherwise Return 200 and the corresponding content;
(8) The browser receives the return information and starts to download the HTML file (no cache, 200 return code) or extract the file from the local cache (with cache, 304 return code);
(9) Browser After the rendering engine gets the HTML file, it starts parsing and constructing the DOM tree, and downloads the specified MIME type file (such as CSS, JavaScript script, etc.) according to the tag request in the HTML, and uses and sets the cache and other content at the same time;
(10) The rendering engine expands the DOM tree into a rendering tree according to CSS style rules, and then rearranges and redraws;
(11) If it contains JS files, it will be executed to perform DOM operations, cache reading and storage, event binding and other operations. The final page will be displayed on the browser.
4. Browser structure composition
The browser is generally composed of seven modules, User Interface (user interface), Browser engine (browser engine), Rendering engine (rendering engine), Networking (network), JavaScript Interpreter (js interpreter), UI Backend (UI backend). ), Date Persistence (data persistent storage)
(2) Browser engine: can be used between the user interface and the rendering engine. It is the core of mutual communication between various parts of the browser, such as transferring instructions between different times or reading and writing data in the client's local cache.
(3) Rendering engine: parses DOM documents and CSS rules and typesets the content into the browser to display styles. The interface, also called the typesetting engine, we often say that the browser kernel mainly refers to the rendering engine
(4) Network: a module used to complete network calls or resource downloads
(5) UI backend: used to draw basic Controls in the browser window, such as input boxes, buttons, radio buttons, etc., have different visual effects depending on the browser, but the functions are the same.
(6) JS interpreter: modules used to interpret and execute JS scripts, such as V8 engine, JavaScriptCore
(7) Data storage: the browser saves various data such as cookies and localStorage in the hard disk, which can be processed through the API provided by the browser engine. Call
As front-end developers, we need to focus on understanding the working principle of the rendering engine and flexibly apply data storage technology. These two parts are often involved in actual project development, especially when doing project performance optimization, understand the browser rendering engine. The working principle is particularly important. Other parts are managed by the browser itself, and the developer has less control.
"Browser kernel" mainly refers to the rendering engine (Rendering Engine), which is responsible for parsing web page syntax (such as HTML, JavaScript) and rendering and displaying web pages. The rendering engine determines how the browser displays the content of the web page and the formatting information of the page. Different browser kernels also parse web page writing syntax differently, so the rendering and display effects of the same web page in different kernel browsers may also be different. The current mainstream browser kernels include Trident (IE), Gecko (Mozilla Firefox), WebKit (Safari, Chrome kernel prototype), Presto (Pre-Opera kernel), Blink (Opera, Chrome).
The most important job of the browser rendering engine is to parse the HTML and CSS document and finally render it to the browser window. After receiving the HTML file, the rendering engine mainly performs the following operations: Parsing HTML to construct the DOM -> Construct render tree -> Layout of the render tree - > painting the render tree.
6.基于浏览器内核工作原理而进行的优化
(1) Reduce the impact of JS loading on DOM rendering: load the JS file after the HTML document, or use an asynchronous method to load the JS code;(2) Avoid reflow and reduce repaint: doing When CSS animation, reduce the use of width, margin, padding and other rules that affect CSS layout, you can use CSS3 transform instead. It is also worth noting that when loading a large number of image elements, try to pre-limit the size of the image, otherwise the typesetting information of the image will be updated during the image loading process, resulting in a large number of rearrangements;
(3) Directly use a unique class name (instead of using tags) can maximize rendering efficiency, and try to avoid wildcard selectors;
(4) Reduce DOM levels: Reducing meaningless DOM levels can reduce the amount of matching calculations in the attachment process of the rendering engine.
7. New features of HTML
Painting canvas; media elements video and audio; local offline storage localStorage long-term storage data, data is not lost after the browser is closed; session storage sessionStorage data is automatically deleted after the browser is closed; content elements with better semantics, such as article, header , footer, nav, section; new form controls, such as: date, time, email, url, etc.; new technologies such as WebSocket, Webworkers, etc.;
8. HTML Semantic
Use the right tags to do the right things, HTML semantics makes the content of the page structured, the structure is clearer, it is easy to parse for browsers and search engines, and it is displayed in a document format even without CSS, and it is easy to read.
9. The introduction location and reason of css file and js file
The css file is introduced in the head tag: when the page is rendered, a DOM tree is first generated according to the DOM structure, and then a rendering tree is generated by adding CSS styles. If the CSS is placed in the back, the page may feel flickering, or the screen will be white or the layout will be chaotic until the CSS is loaded.
js文件在body标签尾部尾部引入：js是阻塞加载，当页面依次序载入到script的时候，DOM树的解析和渲染会暂停，在js载入执行完毕之前， 页面会保持后续内容不完整的状态。将script后置，可以避免这个情况，特别在脚本下载和执行耗时很长的时候会更明显。
这么做可以使得用户先看到样式，具体的操作逻辑可以等待整个网页都传输完成后再生效，有利于提高Web浏览体验.
10.浏览器页面加载解析渲染机制
浏览器在拿到HTML文件后便开始进行加载：加载过程中遇到外部css文件，浏览器另外发出一个请求，来获取css文件。遇到图片资源，浏览器也会另外发出一个请求，来获取图片资源。这是异步请求，并不会影响html文档进行加载，但是当文档加载过程中遇到js文件，html文档会挂起渲染的线程，不仅要等待文档中js文件加载完毕，还要等待解析执行完毕，才可以恢复html文档的渲染线程（原因：js有可能会修改DOM，这意味在js执行完成前，后续所有资源的下载可能是没有必要的，这是js阻塞后续资源加载的根本原因）。