May 29, 2021 Article blog
1. Development and design principles
2. HTML, CSS, and JavaScript are three relationships
HTML as one of the most popular development technology foundations today, I believe that many people are no strangers, so the presence of cumbersome and lengthy code in HTML programming is not friendly to subsequent reading, and the next little compilation will show you how to optimize HTML code
HTML has long evolved into a must-have core language for developing web interfaces, so the load on HTML pages is increasing. Compared to most pages, which require 40K of space capacity, the code for larger sites has thousands of HTML elements, which makes page Size very large.
So how do you significantly reduce the complexity of HTML code and the number of HTML elements? This article takes you to this issue, introducing how to write clear HTML code in a concise way from multiple angles, to increase the speed of your page loading, and to run well on a variety of devices.
HTML is the markup language used to build page structures and content, and HTML cannot be used to decorate the style effects of content, nor to enter text content into the beginning tab can make the code complex and lengthy, instead we use CSS to decorate the layout and appearance of the page.
The default appearance of HTML elements is defined by browser style sheets, for example, in
<h1>
tags are rendered in bold of 32px.
Three common design rules:
Use HTML5 document types
<!DOCTYPE html>
<html>
<head>
<title>Recipes: pesto</title>
</head>
<body>
<h1>Pesto</h1>
<p>Pesto is good!</p>
</body>
</html>
The CSS file is referenced at the beginning of the document
<head>
<title>My pesto recipe</title>
<link rel="stylesheet" href="/css/global.css">
<link rel="stylesheet" href="css/local.css">
</head>
Using both of these methods, the browser prepares the CSS code before parsing it. This helps improve page load performance.
Entering JavaScript code before the bottom body ends the tab at the bottom of the page can help speed up page loading because the browser loads the page before parsing the JavaScript code, and using JavaScript can have a positive impact on page elements.
<body>
...
<script src="/js/global.js">
<script src="js/local.js">
</body>
You can use
Defer
and
async
properties, and script elements with
async
properties are not guaranteed to execute sequentially.
Handlers can be
Handlers
added to JavaScript code.
Never add to HTML inline code, such as the following code, which is prone to errors and is not easy to maintain:
index.html:
<head>
...
<script src="js/local.js">
</head>
<body onload="init()">
...
<button onclick="handleFoo()">Foo</button>
...
</body>
The following 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();
One way to optimize a Web page is for the browser to handle illegal HTML code. L egitimate HTML code is easy to debug, takes up less memory, consumes less resources, and is easy to parse and render to run faster. Illegal HTML code makes implementing responsive design extremely difficult.
Legitimate HTML code is extremely important when using templates, and templates often run well individually, reporting a variety of errors when integrated with other modules, so be sure to ensure the quality of your HTML code by:
Format consistency makes HTML code easy to read, understand, optimize, and debug.
Semantic tags
Semantics refer to things related to meaning, and HTML can be seen in the content of the page: the naming of elements and properties expresses the role and function of the content to some extent.
HTML5 introduces new semantic elements such as
<header>
<footer>
and
<nav>
Choosing the right elements to write code ensures that the code is readable:
<h1>
(< h2>, < h3>...)
Represents the title,
<ul>
or
<ol>
implementation list
<h1>
label should be added before using the <
<article>
> label;
<header>
<footer>
<nav>
<aside>
<p>
describe Body text, HTML5 semantic elements can form content and vice versa.
<strong>
labels with
<em>
<i>
and
<b>
labels.
For example:
<div>Name: <input type="text" id="name"></div>
It would be better to write differently:
- <div>
- <label for="name">Name:</label><input type="text" id="name">
- </div>
To improve the performance of HTML code, follow HTML code for functionality and targeting, not style.
<p>
elements to decorate text, not
<p>
<br>
branches, and you can use the block element or CSS display properties instead.
<hr>
and use CSS's
border-bottom
instead.
While this article describes how to optimize HTML, here are some basic skills for using CSS:
Recommended lessons: HTML micro-class (including HTML5), HTML-CSS basic combat
That's all you've come up with about HTML code optimization tips.