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 tidy: Add code validation tools to your workflow; 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: Make the website run well on multiple devices and can be used 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. HTML ElementThe default appearance 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 achieved with CSS or JavaScript, use less HTML code.
Store CSS and JavaScript files separately from HTML. This can aid caching and debugging.
The document structure can also be optimized, as follows:
Use HTML5 document type , the following is an empty file:
<!DOCTYPE html> <html> <head> <title>Recipes: pesto</title> </head> <body> <h1 id="Pesto">Pesto</h1> <p>Pesto is good!</p> </body> </html>
Reference 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 way of writing is 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();
- 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 the left-open state Make 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, if they exist, they are True;
-
<video src="foo.webm" autoplay controls>
Code format
Format consistency makes HTML code easy to read, understand, optimize, and debug.
语义标记
语义指意义相关的事物，HTML 可从页面内容中看出语义：元素和属性的命名一定程度上表达了内容的角色和功能。HTML5 引入了新的语义元素，如
选择合适的元素来编写代码可保证代码的易读性：
-
使用
(
,
…)表示标题，
- 或
- 实现列表
注意使用
标签之前应添加 选择合适的HTML5语义元素如
， -
使用
描述Body 文本，HTML5 语义元素可以形成内容，反之不成立。
使用和标签替代和标签。
使用
将文本和元素混合，并作为另一元素的子元素，会导致布局错误，
例如：
<p>Name: <input type="text" id="name"></p>
换种写法会更好：
1: <p>
2: <label>Name:</label><input>
3: </p>
<br>
布局
要提高HTML代码的性能，要遵循HTML 代码以实现功能和为目标，而不是样式。
-
使用
元素修饰文本，而不是布局；默认
是自动提供边缘，而且其他样式也是浏览器默认提供的。
避免使用
分行，可以使用block元素或CSS显示属性来代替。-
避免使用
来添加水平线，可使用CSS的border-bottom 来代替。 不到关键时刻不要使用p标签。
尽量少用Tables来布局。
可以多使用Flex Box
使用CSS 来调整边距等。
CSS
虽然本文讲解的是如何优化HTML，下面介绍了一些使用css的基本技能：
避免内联css
最多使用ID类 一次
当涉及多个元素时，可使用Class来实现。
以上就是本文介绍的优化HTML代码的技巧，一个高质量高性能的网站，往往取决于对细节的处理，因此我们在日常开发中，能够考虑到用户体验，后期维护等方面，则会产生更高效的开发。在进行前端开发时，不忘借助开发工具来助力开发过程。新一代HTML5 / JavaScript UI控件Wijmo，大而全面的前端开发工具包，为企业应用提供更加灵活的操作体验，现已全面支持Angular 2。
The above is the detailed content of HTML optimization tips you should know. For more information, please follow other related articles on the PHP Chinese website!
Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
HTML超文本标记语言--超在那里？（文档分析）Aug 02, 2022 pm 06:04 PM本篇文章带大家了解一下HTML（超文本标记语言），介绍一下HTML的本质，HTML文档的结构、HTML文档的基本标签和图像标签、列表、表格标签、媒体元素、表单，希望对大家有所帮助！
html和css算编程语言吗Sep 21, 2022 pm 04:09 PM不算。html是一种用来告知浏览器如何组织页面的标记语言，而CSS是一种用来表现HTML或XML等文件样式的样式设计语言；html和css不具备很强的逻辑性和流程控制功能，缺乏灵活性，且html和css不能按照人类的设计对一件工作进行重复的循环，直至得到让人类满意的答案。
web前端笔试题库之HTML篇Apr 21, 2022 am 11:56 AM总结了一些web前端面试（笔试）题分享给大家，本篇文章就先给大家分享HTML部分的笔试题（附答案），大家可以自己做做，看看能答对几个！
HTML5中画布标签是什么May 18, 2022 pm 04:55 PMHTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制，它只是一个矩形的图形容器，绘制图形必须通过脚本（通常是JavaScript）来完成；开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。
html中document是什么Jun 17, 2022 pm 04:18 PM在html中，document是文档对象的意思，代表浏览器窗口的文档；document对象是window对象的子对象，所以可通过“window.document”属性对其进行访问，每个载入浏览器的HTML文档都会成为Document对象。
html5废弃了哪个列表标签Jun 01, 2022 pm 06:32 PMhtml5废弃了dir列表标签。dir标签被用来定义目录列表，一般和li标签配合使用，在dir标签对中通过li标签来设置列表项，语法“<dir><li>列表项值</li>...</dir>”。HTML5已经不支持dir，可使用ul标签取代。
Html5怎么取消td边框May 18, 2022 pm 06:57 PM3种取消方法：1、给td元素添加“border:none”无边框样式即可，语法“td{border:none}”。2、给td元素添加“border:0”样式，语法“td{border:0;}”，将td边框的宽度设置为0即可。3、给td元素添加“border:transparent”样式，语法“td{border:transparent;}”，将td边框的颜色设置为透明即可。
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
How Long Does It Take To Beat Split Fiction?
1 months agoByDDD
R.E.P.O. Save File Location: Where Is It & How to Protect It?
1 months agoByDDD
R.E.P.O. Best Graphic Settings
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Assassin's Creed Shadows: Seashell Riddle Solution
1 weeks agoByDDD
Hot Tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.
MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.
WebStorm Mac version
Useful JavaScript development tools
Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.
