


First, let’s take a look at the browser rendering process defined by the standard (found online):
The process of opening a web page with a browser
The first time a user visits a website, the browser sends a request to the server, and the server returns an html file;
The browser starts loading the html code and finds that there is a link tag in the head tag that refers to an external CSS or JS file;
The browser sends a request for CSS and JS files again, and the server returns the CSS and JS files;
The browser continues to load the code of the body part of the html, and the CSS and JS files have been obtained, and the page can be started to be rendered;
The browser found an img tag in the code that referenced an image, and sent it to The server makes the request. At this time, the browser will not wait until the image is downloaded, but will continue to render the following code ;
The server returns the image file. Since the image occupies a certain area and affects the page layout, the browser needs to go back and re- Render this part of the code;
The browser found a script tag containing a line of Javascript code and quickly executed it;
The Javascript script executed this statement, which ordered the browser to hide a certain p in the code (style.display=”none”). Oops, suddenly such an element is missing, and the browser has to re-render this part of the code;
Finally waited for the arrival of html, and the browser burst into tears...
The browser loads and The order of rendering html
The order of IE browser downloading is from top to bottom, and the order of rendering is also from top to bottom. Downloading and rendering are performed at the same time.
When rendering to a certain part of the page, all parts above it have been downloaded (It does not mean that all associated elements have been downloaded)
If you encounter a semantically interpretive tag Embed files (JS scripts, CSS styles), then the download process of IE will enable a separate connection for downloading.
And parse after downloading. During the parsing process, the download of all downward elements of the page is stopped, blocking the loading.
After the style sheet is downloaded, it will be parsed together with all previously downloaded style sheets. After the parsing is completed, all previous elements (including previously rendered ones) will be re-rendered.
If there is redefinition in JS or CSS, the later-defined function will overwrite the previously-defined function.
JS loading
cannot be downloaded and parsed in parallel (blocking download)
The web mode is synchronous. Developers want to parse and execute the script immediately when a script tag is parsed, and block the document parsing until the script is executed; if the script is imported from outside, when JS is referenced, the browser sends a js request and will wait for the return of the request. This process is also synchronous and will block the parsing of the document until The resource is requested. Because the browser needs a stable DOM tree structure, and it is very likely that there is code in JS that directly changes the DOM tree structure, such as using document.write or appendChild, or even directly using location.href to jump, the browser in order to prevent When JS modifies the DOM tree, the DOM tree needs to be rebuilt, thus blocking other downloads and presentations. This pattern has been maintained for many years and is specifically specified in HTML4 and HTML5. Developers can mark the script as defer so that it does not block the document parsing and is executed after the document parsing is completed. Html5 adds the option to mark a script as asynchronous so that the parsing execution of the script uses another thread.
There are a few points that need to be explained here:
1. We know that the browser’s processing process is parsing html to generate DOM tree->generating render tree based on DOM tree and style sheet->rendering render tree display . In order to allow users to see the page faster, the browser generates a partial DOM tree while parsing the HTML, and the browser generates a partial render tree and displays it.
2. In this process, there are two external resources that block script execution and thus block rendering, namely external js and external css. External js blocks the generation of DOM tree, because the browser needs a stable DOM tree, and js may destroy this structure (of course, the style may also be changed [note the style, not the style sheet], but this does not block There will be no impact); external css style sheets will also block the execution of the script. Theoretically, since the style sheets do not change the Dom tree, there is no need to stop the parsing of the document and wait for them. However, there is a problem , the script may request style information during the parsing process of the document. If the style has not been loaded and parsed, the script will get the wrong value. Obviously this will cause a lot of problems. This seems to be an edge case, but it is indeed very common. Firefox blocks all scripts while a style sheet is loading and parsing, while Chrome only blocks scripts when they try to access certain style properties that might be affected by an unloaded style sheet.
3. Other external resources do not block rendering, such as pictures. We can see that many times the general frame of the page is displayed, but the position of the picture is not displayed. Wait until the picture is downloaded. Come down and re-render later.
Optimization for modern browsers:
Follow the standard browser rendering and download process. The following code loads external resources in the same order as the resources in HTML. An external resource request http is added to the head://hm.baidu.com/hm.js?a041a0f4ff93aef6aa83f34134331a1d should be loaded before all styles
...百度统计代码--> <script>var _hmt = _hmt || []; (function() {var host=document.location.hostname;if(/lcfarm.com$/ig.test(host)){ var hm = document.createElement("script"); hm.src = "//hm.baidu.com/hm.js?a041a0f4ff93aef6aa83f34134331a1d"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); } })();script> <link rel="stylesheet" type="text/css" href="//static.lcfarm.com/pc-dist/pkg/index.html_aio_f9db6a6.css?1.1.2"> <link rel="stylesheet" type="text/css" href="//static.lcfarm.com/pc-dist/common/css/common_530eedd.css?1.1.2"> <link rel="stylesheet" type="text/css" href="//static.lcfarm.com/pc-dist/css/index_8b620da.css?1.1.2"> <link rel="stylesheet" type="text/css" href="//static.lcfarm.com/pc-dist/pkg/index.html_aio_2_2379650.css?1.1.2">head> <body>... <script type="text/javascript" data-loader="" src="//static.lcfarm.com/pc-dist/common/dep/mod_36ad799.js?1.1.2">script> <script type="text/javascript" data-loader="" src="//static.lcfarm.com/pc-dist/common/dep/jquery_c07f226.js?1.1.2">script> <script type="text/javascript" src="//static.lcfarm.com/pc-dist/common/js/jquery/jquery.cookie_546183c.js?1.1.2">script> <script type="text/javascript" src="//static.lcfarm.com/pc-dist/pkg/common_85ea494.js?1.1.2">script> <script type="text/javascript" src="//static.lcfarm.com/pc-dist/pkg/index.html_aio_350303c.js?1.1.2">script>body>html></script>But in reality on chrome. The following effect was found in Firefox, ie8+ and other browsers (tested using https://www.webpagetest.org/)
Speculative parsing
Both Webkit and Firefox have done this optimization. When the script is executed, another thread parses the remaining documents and loads the resources that need to be loaded later through the network . This approach allows resources to be loaded in parallel, making the overall speed faster. It should be noted that pre-parsing does not change the Dom tree. It leaves this work to the main parsing process, which only parses references to external resources, such as external scripts, style sheets and images.
As shown in the picture above, it can be seen that when executing the script, a lot of external resource references are parsed and the thread is started to download them. The main thread is still waiting for the return of hm.js.
The function of HTML is to define the structure and content of a web page, and its purpose is to provide a standardized way to display information. 1) HTML organizes various parts of the web page through tags and attributes, such as titles and paragraphs. 2) It supports the separation of content and performance and improves maintenance efficiency. 3) HTML is extensible, allowing custom tags to enhance SEO.

The future trends of HTML are semantics and web components, the future trends of CSS are CSS-in-JS and CSSHoudini, and the future trends of JavaScript are WebAssembly and Serverless. 1. HTML semantics improve accessibility and SEO effects, and Web components improve development efficiency, but attention should be paid to browser compatibility. 2. CSS-in-JS enhances style management flexibility but may increase file size. CSSHoudini allows direct operation of CSS rendering. 3.WebAssembly optimizes browser application performance but has a steep learning curve, and Serverless simplifies development but requires optimization of cold start problems.

The roles of HTML, CSS and JavaScript in web development are: 1. HTML defines the web page structure, 2. CSS controls the web page style, and 3. JavaScript adds dynamic behavior. Together, they build the framework, aesthetics and interactivity of modern websites.

The future of HTML is full of infinite possibilities. 1) New features and standards will include more semantic tags and the popularity of WebComponents. 2) The web design trend will continue to develop towards responsive and accessible design. 3) Performance optimization will improve the user experience through responsive image loading and lazy loading technologies.

The roles of HTML, CSS and JavaScript in web development are: HTML is responsible for content structure, CSS is responsible for style, and JavaScript is responsible for dynamic behavior. 1. HTML defines the web page structure and content through tags to ensure semantics. 2. CSS controls the web page style through selectors and attributes to make it beautiful and easy to read. 3. JavaScript controls web page behavior through scripts to achieve dynamic and interactive functions.

HTMLisnotaprogramminglanguage;itisamarkuplanguage.1)HTMLstructuresandformatswebcontentusingtags.2)ItworkswithCSSforstylingandJavaScriptforinteractivity,enhancingwebdevelopment.

HTML is the cornerstone of building web page structure. 1. HTML defines the content structure and semantics, and uses, etc. tags. 2. Provide semantic markers, such as, etc., to improve SEO effect. 3. To realize user interaction through tags, pay attention to form verification. 4. Use advanced elements such as, combined with JavaScript to achieve dynamic effects. 5. Common errors include unclosed labels and unquoted attribute values, and verification tools are required. 6. Optimization strategies include reducing HTTP requests, compressing HTML, using semantic tags, etc.

HTML is a language used to build web pages, defining web page structure and content through tags and attributes. 1) HTML organizes document structure through tags, such as,. 2) The browser parses HTML to build the DOM and renders the web page. 3) New features of HTML5, such as, enhance multimedia functions. 4) Common errors include unclosed labels and unquoted attribute values. 5) Optimization suggestions include using semantic tags and reducing file size.


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool

MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment