Detailed introduction to HTML page loading and parsing process
The order in which browsers load and render HTML, how to speed up HTML page loading, HTML page loading and parsing processes, etc., will be introduced in detail in this article. Interested friends should not miss Browser loading and The order of rendering html
1. The order of IE 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.
2. When rendering to a certain part of the page, all parts above it have been downloaded (this does not mean that all associated elements have been downloaded).
3. If you encounter a semantically interpretable tag embedded file (JS script, CSS style), then the IE download process will enable a separate connection for downloading.
4. 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.
5. If there is redefinition in JS or CSS, the later-defined function will overwrite the previously-defined function.
Loading of JS
1. Cannot download and parse in parallel (blocking download).
2. When JS is referenced, the browser sends a js request and will wait for the return of the request. 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. Jump, in order to prevent JS from modifying the DOM tree, the browser needs to rebuild the DOM tree, so it will block other downloads and renderings.
How to speed up HTML Page loading speed
1. Page weight loss:
a. The weight of the page is the most important factor affecting the loading speed.
b. Delete unnecessary spaces and comments.
c. Move the inline script and css to external files.
d. You can use HTML Tidy to lose weight for HTML, and you can also use some compression tools to lose weight for JavaScript.
2. Reduce the number of files:
a. Reducing the number of files referenced on the page can reduce the number of HTTP connections.
b. Many JavaScript and CSS files can be merged and are best merged. Caibangzi has merged its JavaScript. functions and Prototype.js into a base.js file.
3. Reduce domain name queries:
a. DNS queries and domain name resolution are also time-consuming, so it is necessary to reduce references to external JavaScript, CSS, images and other resources. The more different domain names are used, Less is better.
4. Cache reused data:
a. Cache reused data.
5. Optimize the loading order of page elements:
a. First load the content initially displayed on the page and the JavaScript and CSS related to it, then load HTML-related things, like what is not initially displayed Relevant pictures, flash, videos and other very fat resources are loaded last.
6. Reduce the number of inline JavaScript:
a. The browser parser will assume that inline JavaScript will change the page structure, so using inline JavaScript is more expensive.
b. Do not use document.write() to output content, use modern W3C DOM methods to handle page content for modern browsers.
7. Use modern CSS and legal tags:
a. Use modern CSS to reduce tags and images. For example, using modern CSS + text can completely replace some images with only text.
b. Use legal tags to prevent the browser from doing "error correction" and other operations when parsing HTML. It can also be used by HTML Tidy to slim down HTML.
8. Chunk your content:
a. Do not use nested tables, but use non-nested tables or p. Break the layout based on a large nested table into multiple small tables, so that there is no need to wait until the entire page (or large table) content is loaded before displaying it.
9. Specify the size of images and tables:
a. If the browser can immediately determine the size of the image or table, then it can display the page immediately without having to re-layout. Work.
b. This not only speeds up the display of the page, but also prevents some inappropriate changes in the layout after the page is loaded.
c. Image uses height and width.
HTML page loading and parsing process
1. The user enters the URL (assuming it is an HTML page and it is the first visit), and the browser sends a request to the server. The server returns the html file.
2. The browser starts loading the html code and finds that there is a tag in the
3. The browser sends a request for the CSS file again, and the server returns the CSS file.
4. The browser continues to load the code of the part of the html, and the CSS file has been obtained, and the page can be rendered.
5. The browser finds an
6. The server returns the image file. Since the image occupies a certain area and affects the arrangement of subsequent paragraphs, the browser needs to go back and re-render this part of the code.
7. The browser finds a
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
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1377
52
What is the purpose of the <progress> element?
Mar 21, 2025 pm 12:34 PM
The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati
What is the purpose of the <datalist> element?
Mar 21, 2025 pm 12:33 PM
The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159
What are the best practices for cross-browser compatibility in HTML5?
Mar 17, 2025 pm 12:20 PM
Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.
What is the purpose of the <meter> element?
Mar 21, 2025 pm 12:35 PM
The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex
How do I use the HTML5 <time> element to represent dates and times semantically?
Mar 12, 2025 pm 04:05 PM
This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit
How do I use HTML5 form validation attributes to validate user input?
Mar 17, 2025 pm 12:27 PM
The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.
What is the viewport meta tag? Why is it important for responsive design?
Mar 20, 2025 pm 05:56 PM
The article discusses the viewport meta tag, essential for responsive web design on mobile devices. It explains how proper use ensures optimal content scaling and user interaction, while misuse can lead to design and accessibility issues.
What is the purpose of the <iframe> tag? What are the security considerations when using it?
Mar 20, 2025 pm 06:05 PM
The article discusses the <iframe> tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.
