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
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
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
1666
14
1425
52
1328
25
1273
29
1253
24
HTML: The Structure, CSS: The Style, JavaScript: The Behavior
Apr 18, 2025 am 12:09 AM
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, CSS, and JavaScript: Web Development Trends
Apr 19, 2025 am 12:02 AM
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 Future of HTML: Evolution and Trends in Web Design
Apr 17, 2025 am 12:12 AM
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.
HTML vs. CSS vs. JavaScript: A Comparative Overview
Apr 16, 2025 am 12:04 AM
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.
HTML: Building the Structure of Web Pages
Apr 14, 2025 am 12:14 AM
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 vs. CSS and JavaScript: Comparing Web Technologies
Apr 23, 2025 am 12:05 AM
HTML, CSS and JavaScript are the core technologies for building modern web pages: 1. HTML defines the web page structure, 2. CSS is responsible for the appearance of the web page, 3. JavaScript provides web page dynamics and interactivity, and they work together to create a website with a good user experience.
HTML: Is It a Programming Language or Something Else?
Apr 15, 2025 am 12:13 AM
HTMLisnotaprogramminglanguage;itisamarkuplanguage.1)HTMLstructuresandformatswebcontentusingtags.2)ItworkswithCSSforstylingandJavaScriptforinteractivity,enhancingwebdevelopment.
From Text to Websites: The Power of HTML
Apr 13, 2025 am 12:07 AM
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.
