HTML optimization tips-HTML/Xhtml-web page creation

This article mainly gives you a detailed introduction to HTML optimization techniques to improve the performance of web pages. This article describes how to effectively reduce the complexity of HTML code and the number of page elements. If you are interested, you can refer to how to improve the performance of web pages, many developers start from many aspects, such as JavaScript, image optimization, server configuration, File compression, and CSS adjustment.

Obviously, HTML has reached a bottleneck, although it is a core language essential for Web interface development. The load on HTML pages is getting heavier and heavier. On average, most pages require 40 kb of space. For example, some large websites contain thousands of HTML elements and the page Size is larger.

This article mainly solves the problem of how to effectively reduce the complexity of HTML code and the number of page elements. It introduces how to write concise and clear HTML code from multiple aspects, this allows you to load pages more quickly and run well on multiple devices.

In the design and development processFollow the following principles:

• Structure separation: Use HTML to add a structure instead of style content;
  Clean: Add a code verification tool to the workflow. Use the tool or style Wizard to maintain the code structure and format.
  Learning new languages: Get element structures and semantic tags.
  Ensure access: Use the ARIA and Fallback attributes.
  Test: Enable the website to run well on multiple devices. You can use emulators and Performance Tools.

HTML, CSS, and JavaScriptRelationship

HTML is the markup language used to adjust the page structure and content. HTML cannot be used to modify the style content, nor can it be used to input text content in the header label to make the code lengthy and complex. On the contrary, it is more appropriate to use CSS to modify the layout element and appearance. The default appearance of HTML elements is defined by the default style sheet of the browser. For example, in Chrome, the h1 label element is rendered to the 32px Times bold.

Three general design rules:

• Use HTML to construct the Page Structure, CSS to modify page rendering, and JavaScript to implement page functions. CSS ZenGarden demonstrates behavior separation.
  If CSS or JavaScript is used, less HTML code is used.
  Separate CSS and JavaScript files from HTML files. This helps cache and debugging.

The document structure can also be optimized as follows:

1. Use the HTML5 document type. The following are empty files:

Copy XML/HTML Code to clipboard

5. Recipes: pesto

10. Pesto

12. Pesto is good!

2. reference the CSS file at the beginning of the document as follows:

Copy XML/HTML Code to clipboard

2. My pesto recipe

With these two methods, the browser will prepare the CSS information before parsing the HTML code. This helps improve page loading performance.

Enter JavaScript code before the body ends the tag at the bottom of the page, which helps increase the page loading speed, because the browser loads the page before parsing the JavaScript code, using JavaScript will have a positive impact on page elements.

Copy XML/HTML Code to clipboard

3. ...