Shulou(Shulou.com)06/01 Report--

This article mainly introduces the common HTML optimization skills what the relevant knowledge, the content is detailed and easy to understand, the operation is simple and fast, with a certain reference value, I believe you will have some gains after reading this common HTML optimization skills, let's take a look at it.

It is clear that HTML has reached a bottleneck, although it is a necessary core language for developing Web interfaces. HTML pages are also getting heavier and heavier. Most pages require an average of 40K of space. For example, some large websites will contain thousands of HTML elements, and the page Size will be larger.

How to effectively reduce the complexity of HTML code and the number of page elements, this paper mainly solves this problem, and introduces how to write concise and clear HTML code from many aspects, which can make the page load faster and run well in a variety of devices.

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

Structure separation: use HTML to add structure instead of style content

Keep it clean: add code verification tools to your workflow; use tools or style wizards to maintain code structure and formatting

Learn a new language: get element structure and semantic markup.

Make sure you can access: use the ARIA property, the Fallback property, etc.

Testing: enables the site to run well on a variety of devices, using emulators and performance tools.

The relationship among HTML, CSS and JavaScript

HTML is a markup language for adjusting the structure and content of a page. HTML cannot be used to decorate style content, nor can you enter text content in the header tag, making the code lengthy and complex. Instead, it is more appropriate to use CSS to decorate layout elements and appearance. The default appearance of the HTML element is defined by the browser's default stylesheet, for example, the H2 tag element is rendered as 32px's Times bold in Chrome.

Three general design rules:

Use HTML to construct the page structure, CSS to decorate the page rendering, JavaScript to achieve the page function. CSS ZenGarden is a good example of behavior separation.

Use less HTML code if you can implement it in CSS or JavaScript.

Separate the CSS and JavaScript files from the HTML. This can help with caching and debugging.

You can also optimize the document structure, as follows:

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

Recipes: pesto

Pesto

Pesto is good!

Reference the CSS file at the beginning of the document, as follows:

My pesto recipe

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

Entering the JavaScript code before the body closing tag at the bottom of the page helps speed up the page loading, because the browser loads the page before parsing the JavaScript code, and using JavaScript has a positive impact on the page elements.

...

Using the Defer and async attributes, the script element with the async attribute is not guaranteed to be executed sequentially.

You can add Handlers to your JavaScript code. Never add it to HTML inline code. For example, the following code can easily lead to errors and is not easy to maintain:

Index.html:

...

Foo

...

The following is a better way to write:

Index.html:

...

...

Foo

...

Js/local.js:

Init ()

Var fooButton =

Document.querySelector ('# foo')

FooButton.onclick = handleFoo ()

Verification

One way to optimize web pages is for browsers to handle illegal HTML code. Legitimate HTML code is easy to debug, takes up less memory, consumes less resources, and is easier to parse and render faster. Illegal HTML code makes it extremely difficult to implement responsive design.

When using templates, legitimate HTML code is extremely important. Templates often run well alone, and various errors are reported when integrated with other modules, so be sure to ensure the quality of HTML code, you can take the following measures:

Add validation to your workflow: use validation plug-ins such as HTMLHint or SublineLinter to help you detect code errors.

Use HTML5 document types

Make sure that the HTML hierarchy is easy to maintain and avoid left-open element nesting.

Be sure to add the closing tag for each element.

Remove unnecessary code; there is no need to add closing tags to self-closing elements; the Boolean attribute does not need to be assigned, or True if it exists

Code format

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

Semantic marker

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

Choosing the right element to write the code ensures that the code is readable:

Use (,...) Represents the title, or implementation list

Note that tags should be added before using them.

Select the appropriate HTML5 semantic elements, such as

Use

To describe Body text, HTML5 semantic elements can form content, and vice versa.

Use and tags instead of and tags.

Use elements, input types, placeholders, and other attributes to force validation.

Mixing text with an element as a child of another element can lead to layout errors

For example:

Name:

It would be better to write it another way.

Name:

Overall Arrangement

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

Use

Element decorates the text, not the layout; default

Edges are provided automatically, and other styles are provided by default by the browser.

Avoid using

Branches, which can be replaced by block elements or CSS display attributes.

Avoid using to add horizontal lines and use CSS's border-bottom instead.

Do not use the div tag until the critical moment.

Try to use less Tables for layout.

You can use Flex Box more often.

Use CSS to adjust the margins and so on.

CSS

Although this article is about 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 do so.

This is the end of this article on "what are the common HTML optimization techniques?" Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "what are the common HTML optimization skills". If you want to learn more knowledge, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.