Must-Know HTML Optimization Skills_HTML/Xhtml_Web Page Production-HTML Tutorial-php.cn

How to improve the performance of web pages, many developers start from many aspects, such as JavaScript, image optimization, server configuration, file compression or adjusting CSS.

It is clear that HTML has reached a bottleneck, even though it is an essential core language for developing Web interfaces. The load of HTML pages is also getting heavier and heavier. Most pages require an average of 40K of space. For example, some large websites 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 article mainly solves this problem. It introduces how to write concise and clear HTML code from many aspects, which can make the page load faster and enable Works well across multiple devices.

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

Structural separation: use HTML to add structure, not style content;
Keep it tidy: add code verification tools to workflow; use tools or style wizards to maintain code structure and format
Learn New language: Get element structure and semantic markup.
Ensure accessibility: Use ARIA attributes, Fallback attributes, etc.
Test: Make the website run well on multiple devices, use emulators and performance tools.

The relationship between HTML, CSS and JavaScript

HTML is a markup language used to adjust the structure and content of pages. HTML cannot be used to modify 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 modify layout elements and appearance. The default appearance of HTML elements is defined by the browser's default style sheet. For example, in Chrome, the h1 tag element will be rendered into a 32px Times bold font.

Three universal design rules:

Use HTML to construct the page structure, CSS to modify the page presentation, and JavaScript to implement the page functions. CSS ZenGarden demonstrates behavioral separation very well.
Use less HTML code if it can be implemented with CSS or JavaScript.
Store CSS and JavaScript files separately from HTML. This can help with caching and debugging.

The document structure can also be optimized, as follows:

1. Use HTML5 document type, the following is an empty file:

XML/HTML CodeCopy content to clipboard

>
<html>
<head>
<title>Recipes: pesto title>
head>
<body>
<h1>Pestoh1>
<p>Pesto is good!p>
body>
html>

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

XML/HTML CodeCopy content to clipboard

<head>
<title>My pesto recipe title>
<link rel="stylesheet" href="/css/global.css">
<link rel="stylesheet" href="css/local.css">
head>

Using 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 closing tag at the bottom of the page. This will help improve the page loading speed, because the browser will load the page before parsing the JavaScript code. Using JavaScript will have a positive impact on page elements.

XML/HTML CodeCopy content to clipboard

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

Use Defer and async attributes. Script elements with async attributes are not guaranteed to be executed in order.

Handlers can be added in JavaScript code. Never add it to HTML inline code. For example, the following code can easily lead to errors and is difficult to maintain:

index.html:

XML/HTML CodeCopy content to clipboard

<head>
...
<script src="js/local.js">
head>
<body onload="init()">
...
<button onclick="handleFoo()">Foobutton>
...
body>

下面的写法比较好：

index.html:

XML/HTML Code复制内容到剪贴板

<head>
...
head>
<body>
...
<button id="foo">Foobutton>
...
<script src="js/local.js">
body>

js/local.js:

JavaScript Code复制内容到剪贴板

init();
var fooButton =
document.querySelector('#foo');
fooButton.onclick = handleFoo();

Verification

One way to optimize your web pages is for your browser to handle illegal HTML code. Legal HTML code is easy to debug, takes up less memory, consumes less resources, is easy to parse, renders and runs faster. Illegal HTML code makes it extremely difficult to implement responsive design.

When using templates, legal HTML code is extremely important. It often happens that templates run well alone, but when integrated with other modules, various errors are reported. Therefore, the quality of HTML code must be ensured. You can take The following measures:

Add validation functionality to your workflow: Use validation plugins like HTMLHint or SublineLinter to help you detect code errors.
Use HTML5 document type
Ensure that the hierarchical structure of HTML is easy to maintain and avoid nesting elements in a left-open state.
Be sure to add the closing tag of each element.
Remove unnecessary code; there is no need to add closing tags for self-closing elements; Boolean attributes do not need to be assigned a value, and are True if present;

Code format

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

Semantic tags

Semantics refers to things related to meaning. 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