A variety of tips for optimizing HTML code

Last Update:2016-01-14 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

How to improve the performance of Web pages, many developers from a number of aspects such as JavaScript, image optimization, server configuration, file compression, or adjust CSS.

It is clear that HTML has reached a bottleneck, although it is the core language required to develop web interfaces. The load on the HTML page is also getting heavier. Most pages require 40K of space on average, as some large Web sites contain thousands of HTML elements, and the page size is larger.

How to effectively reduce the complexity of the HTML code and the number of page elements, this article mainly solves this problem, from several aspects of how to write concise, clear HTML code, can make the page load more quickly, and can run well in a variety of devices.

The following principles need to be followed in the design and development process:

Structure separation: Use HTML to add structure rather than style content;
Keep it neat: Add code validation tools to your workflow; Maintain code structure and formatting with tools or style wizards
Learn a new language: Get the element structure and semantic markup.
Ensure accessibility: Use ARIA properties and fallback properties, and more
Testing: Make your site work well across multiple devices, using emulators and performance tools.

The relationship between Html,css and JavaScript

HTML is the markup language used to adjust the structure and content of the page. HTML cannot be used to decorate style content, or to enter text content in header tags, making the code verbose and complex, rather than using CSS to decorate layout elements and look more appropriately. The default appearance of HTML elements is defined by the default style sheet of the browser, such as the H1 tag element in Chrome that renders 32px times bold.

Three general design rules:

Using HTML to construct the page structure, CSS decorated page rendering, JavaScript implementation page function. CSS Zengarden is a good way to show the separation of behaviors.
If you can implement CSS or JavaScript, use less HTML code.
Store CSS and JavaScript files separately from HTML. This can be useful for caching and debugging.

The document structure can also be optimized as follows:

Using the HTML5 document type, the following is an empty file:

<! DOCTYPE html> good!</p></body>

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

 "stylesheet"  href= "/css/ Global.css " > <link rel=  "stylesheet"  Href= "css/local.css"  >

Using both of these methods, the browser prepares the CSS information before parsing the HTML code. Therefore, it helps to improve page load performance.

Entering JavaScript code before the body ends the tag at the bottom of the page can help increase the speed of page loading because the browser will load the page before parsing the JavaScript code, and using JavaScript will have a positive impact on the page elements.

<body> ...  <script src="/js/global.js">  <script src="Js/local.js"></body>

With the defer and async properties, script elements with async properties cannot be guaranteed to be executed sequentially.

You can add handlers in your JavaScript code. Do not add to HTML inline code, such as the following code, which is prone to errors and is not easy to maintain:

Index.html:

"js/local.js">"init ()">  ...  <button onclick="Handlefoo ()">Foo</button>  ...</body>

The following wording is better:

Index.html:

"foo">Foo</button> ...  <script src="Js/local.js"></body>

Js/local.js:

Init (); var Foobutton =    document.queryselector (' #foo '); Foobutton.onclick = Handlefoo ();

Verify

One way to optimize a Web page is for the browser to handle illegal HTML code. Legitimate HTML code is easy to debug and takes up less memory, consumes less resources, and is easy to parse and render to run faster. Illegal HTML code makes it extremely difficult to implement a responsive design.

Make sure that the HTML hierarchy is easy to maintain and that you want to avoid nesting elements in left-open state.
Ensure that the end tag of each element is added.
remove unnecessary code; No need to add an end tag for self-closing elements; Boolean The property does not need to be assigned, or true if it exists;

<video src= "FOO.WEBM" AutoPlay controls>

Code format

Format consistency makes HTML code easy to read, understand, optimize, Debug.

Semantic markup

Semantics refers to the meaning of things, HTML can be seen from the content of the page semantics: the naming of elements and attributes to a certain extent, the role and function of the content is expressed. HTML5 introduces new semantic elements, such as

Choosing the right element to write code can guarantee the readability of the code:

Use
Note the
Choosing the right HTML5 semantic elements such as
Using to describe body text, HTML5 semantic elements can form content, and vice versa.
Use and tags instead of and tags.
Use the <label> element, input type, placeholder, and other attributes to force validation.
Mixing text and elements, and as child elements of another element, can cause layout errors,

For example:

<div>name: <input type="text" id="Name"></div>

It's better to do it in another way:

   1:  <div>

 <label for  = "name"  >name : </label><input type= " Text " id=" name " >

   3:  </div>

Layout

To improve the performance of your HTML code, follow the HTML code to achieve functionality and as a goal, not a style.

Use the element to decorate the text instead of the layout; default provides edges automatically, and other styles are provided by the browser by default.
Avoid using branches, instead using block elements or CSS display properties.
Avoid using
Do not use div tags at critical times.
Try to use less tables to layout.
You can use Flex Box more
Use CSS to adjust margins, and so on.

Css

While this article explains how to optimize HTML, here are some basic skills for using CSS:

Avoid inline CSS
Use the ID class at most once
When multiple elements are involved, you can use class to implement them.

The above is the introduction of the technique of optimizing HTML code, a high-quality high-performance Web site, often depends on the processing of details, so we in the daily development, to consider the user experience, post-maintenance and other aspects, will lead to more efficient development.

A variety of tips for optimizing HTML code

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

A variety of tips for optimizing HTML code

Contact Us

What's Trending

Top 10 Tags

Top 10 Keywords

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support

A variety of tips for optimizing HTML code

Contact Us

What's Trending

Top 10 Tags

Top 10 Keywords

Trending Topic

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support