How to optimize HTML to improve web page performance-HTML Tutorial-php.cn

There are many ways to improve web page performance. In addition to using js or adjusting server configuration and css to improve web page performance, we can actually improve web page performance through HTML.

HTML is getting bigger and bigger. Most of the HTML pages of the top 100 websites are around 40K. Amazon and Yahoo use thousands of HTML pages. On the main page of youtube.com, there are as many as 3,500 HTML elements.

Reducing the complexity of HTML and the number of elements on a page does not significantly improve parsing time - but HTML is a critical factor in building extremely fast web pages, adapting to different devices and affecting success.
In this article, you will learn how to write concise and clean HTML, allowing you to create a website that loads quickly and supports multiple devices, and will be easy to debug and maintain.

There is no one way to write code - especially HTML. This is just a general experience, but it is not the only right choice.
　HTML, CSS and JavaScript

　HTML is a markup language used to represent structure and content.

HTML should not be used to display styles and styles. Don’t put text in title tags (h1~h6) to appear “bigger” or use blockquotes elements just for indentation. Instead, use CSS to change the appearance and layout of elements.

The default appearance of HTML elements is achieved through the browser's default style: Firefox, Internet Explorer and Opera are all different. For example, in Chrome the h1 element is rendered to a size of 32px by default.

Three basic principles:

Use HTML to express structure, and CSS to express different styles and themes. JavaScript to respond to user actions.

Use HTML, CSS when necessary, and JavaScript when necessary. For example: In many cases, you might use HTML forms for validation and CSS or SVG for animations.

Separate CSS and JavaScript from your HTML code. Making them cacheable makes the code easier to debug. In production, CSS and JavaScript can be minified and merged and should be included as part of your Build system. Note* See JavaScript Construction (Compilation) System Competition
Document document structure

Use HTML5 document type:

XML/HTML Code to copy content to the clipboard

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

Copy after login

Quote the CSS file at the top of the page, such as in the head element:

CSS Code copy content to the clipboard

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

Copy after login

In this way, the browser can preload the style before parsing the HTML Without rendering a confusing page layout.

Place JavaScript at the very bottom of the page, before the body is closed. This will improve page rendering time because the browser can render the page before the JavaScript is loaded:

JavaScript CodeCopy content to the clipboard

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

Copy after login

Add event handling in JavaScript. Don't add it in HTML. This is very difficult to maintain, for example:

XML/HTML Code copy the content to the clipboard

index.html:

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

Copy after login

This is much better:

JavaScript Code copies content to the clipboard

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

Copy after login

js/local.js:

init();   
var fooButton =   
    document.querySelector(&#39;#foo&#39;);   
fooButton.onclick = handleFoo();  
　合法的HTML

Copy after login

One of the main factors for the success of Web pages is that the browser can handle invalid HTML. Browsers also have some standardized rules for how to render invalid code.

However, this is no reason for you to let it go. Valid HTML is easier to debug, tends to have smaller file sizes, is faster, and uses fewer resources because it renders faster. Invalid HTML makes responsive design difficult to implement.

It is especially important to write valid HTML when using templates.

Validate HTML in your BUILD system: Use validation plugins such as HTMLHint and SublimeLinter to check the syntax of your HTML.

Use HTML5 document type.

Be sure to keep your HTML hierarchical: nest elements correctly and make sure there are no unclosed elements. It helps debuggers add comments.

XML/HTML CodeCopy content to the clipboard

<div id="foobar">  
...   
</div> <!-- foobar ends -->

Copy after login

Please be sure to add a closing tag after the non-self-closing element. For example, the following will also work:

XML/HTML Code Copy content to the clipboard

<p>Pesto is good to eat...   
<p>...and pesto is easy to make.

Copy after login

But the following writing method can avoid errors and make the paragraph hierarchy more obvious:

<p>Pesto is good to eat...</p>
<p>...and pesto is easy to make.</p>

Copy after login

　　items元素（li）并不是必须封闭的，有些非常聪明的的程序员会写成这样，无论如何，list元素(ul)是必须封闭的。

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

<ul>  
  <li>Basil   
  <li>Pine nuts   
  <li>Garlic   
</ul>

Copy after login

　　有一点你必须注意video和audio元素。他们不是自封闭的：

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

<video src="foo.webm" />

Copy after login

<video src="foo.webm">  
  <p>Video element not supported.</p>  
</video>

Copy after login

　　相反，通过删除不必要的代码HTML页面会变得更干净

　　没有必要为自封闭元素添加"/"，像img等

　　设置属性是没有值的，如果不加属性的话（这种情况下，它不会自动播放，没有控制控件），

　　video，它是没有任何属性的

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

<video src="foo.webm">

Copy after login

　　下面两种更好

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

<video src="foo.webm" autoplay="false" controls="false">  
<video src="foo.webm" autoplay="true" controls="true">

Copy after login

　　这种可读性更强

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

<video src="foo.webm" autoplay controls>

Copy after login

　　stylet和script标签不需要type属性；默认就是css和javascript

　　优化协议地址更好（去除置http或https，它会根据当前协议自动配)

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

<a href="//en.wikipedia.org/wiki/Tag_soup">Tag soup</a>

Copy after login

　　增强可读性，如，第一眼看上去就像是个标题

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

<h2><a href="/contact">Contact</a><h2>

Copy after login

　　而这种则像个链接

<a href="/contact"><h2>Contact</h1></a>

Copy after login

　　应该使用小写

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

<A HREF="/">Home</A>

Copy after login

　　大小写混合看上去更恶心

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

<H2>Pesto</h2>

Copy after login

　语义标记

　　“语义”意思是跟含义相关

　　HTML应该标记有意义的内容：元素和描述的内容相符。

　　HTML5引入了一些新的‘语义元素’像