Home > Article > Web Front-end > HTML optimization tips
HTML optimization tips
- 高洛峰Original
- 2017-02-27 10:39:31795browse
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 can run well on a variety of 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 clean: for work Flow adds code validation tools; use tools or style wizards to maintain code structure and format
Learn a new language: Get element structure and semantic markup.
Ensure accessibility: Use ARIA attributes and Fallback attributes, etc.
Test: To make the website run well on multiple devices, you can 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 the page. 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 general design rules:
Use HTML to construct the page structure, CSS to modify the page presentation, and JavaScript to implement the page function. CSS ZenGarden demonstrates behavioral separation very well.
If it can be implemented with CSS or JavaScript, use less HTML code.
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 the HTML5 document type. The following is an empty file:
<!DOCTYPE html> <html> <head> <title>Recipes: pesto</title> </head> <body> <h1>Pesto</h1> <p>Pesto is good!</p> </body> </html>
2. Quote the CSS file at the beginning of the document, as follows:
<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 closing tag of the body 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. .
<body> ... <script src="/js/global.js"> <script src="js/local.js"> </body>
Using 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:
<head>
...
<script src="js/local.js">
</head>
<body onload="init()">
...
<button onclick="handleFoo()">Foo</button>
...
</body>
The following writing method Better:
index.html:
<head> ... </head> <body> ... <button id="foo">Foo</button> ... <script src="js/local.js"> </body>
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. 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 report various errors when integrated with other modules. Therefore, the quality of HTML code must be ensured. , you can take the following measures:
Add validation functionality to your workflow: Use validation plug-ins such as 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.
Delete unnecessary code; there is no need to add closing tags for self-closing elements; Boolean attributes do not need to be assigned a value, if they exist, it is True;
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 1aa9e5d373740b65a0cc8f0a02150c53, c37f8231a37e88427e62669260f0074d and c787b9a589a3ece771e842a6176cf8e9.
Choose appropriate elements to write code to ensure the readability of the code:
使用4a249f0d628e2318394fd9b75b4636b1(c1a436a314ed609750bd7c7d319db4da,684271ed9684bde649abda8831d4d355…)表示标题，ff6d136ddc5fdfeffaf53ff6ee95f185或c34106e0b4e09414b63b2ea253ff83d6实现列表；
注意使用23c3de37f2f9ebcb477c4a90aac6fffd 标签之前应添加4a249f0d628e2318394fd9b75b4636b1标签；
选择合适的HTML5语义元素如1aa9e5d373740b65a0cc8f0a02150c53，c37f8231a37e88427e62669260f0074d,c787b9a589a3ece771e842a6176cf8e9,15221ee8cba27fc1d7a26c47a001eb9b；
使用e388a4556c0f65e1904146cc1a846bee描述Body 文本，HTML5 语义元素可以形成内容，反之不成立。
使用907fae80ddef53131f3292ee4f81644b和8e99a69fbe029cd4e2b854e244eab143标签替代5a8028ccc7a7e27417bff9f05adf5932和a4b561c25d9afb9ac8dc4d70affff419标签。
使用2e1cf0710519d5598b1f0f14c36ba674元素，输入类型，占位符及其他属性来强制验证。
将文本和元素混合，并作为另一元素的子元素，会导致布局错误。
例如：
<p>Name: <input type="text" id="name"></p>
换种写法会更好：
1: e388a4556c0f65e1904146cc1a846bee
2: 62f4dd80875f0d2585fe00dc94f97b94Name:8c1ecd4bb896b2264e0711597d40766cb8ecd12412814ff6993a9b9f10fe1177
3: 94b3e26ee717c64999d7867364b1b4a3
布局
要提高HTML代码的性能，要遵循HTML 代码以实现功能和为目标，而不是样式。
使用e388a4556c0f65e1904146cc1a846bee元素修饰文本，而不是布局；默认e388a4556c0f65e1904146cc1a846bee是自动提供边缘，而且其他样式也是浏览器默认提供的。
避免使用0c6dc11e160d3b678d68754cc175188a分行，可以使用block元素或CSS显示属性来代替。
避免使用f32b48428a809b51f04d3228cdf461fa来添加水平线，可使用CSS的border-bottom 来代替。
不到关键时刻不要使用p标签。
尽量少用Tables来布局。
可以多使用Flex Box
使用CSS 来调整边距等。
CSS
虽然本文讲解的是如何优化HTML，下面介绍了一些使用css的基本技能：
避免内联css
最多使用ID类 一次
当涉及多个元素时，可使用Class来实现。
以上就是本文介绍的优化HTML代码的技巧，一个高质量高性能的网站，往往取决于对细节的处理
更多HTML优化技巧相关文章请关注PHP中文网！