What points should you pay attention to when writing high-performance HTML applications?-HTML Tutorial-php.cn

What points should you pay attention to when writing high-performance HTML applications?

php中世界最好的语言

Release： 2018-01-25 11:25:41

Original

1199 people have browsed it

This time I will bring you what points you need to pay attention to when writing high-performance HTML applications. What are the precautions when writing high-performance HTML applications. The following is a practical case, let's take a look.

How can you improve web page performance?

Most developers will optimize through JavaScript and images, through server configuration, compressing files and merging files - even adjusting CSS (merging small images).

Poor HTML is always ignored, even though it has always been the core language of the Internet.

HTML is getting bigger and bigger. Each HTML page of the top 100 websites is mostly 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 the success of building extremely fast web pages that adapt to different devices.
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:

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

Copy after login

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

<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 JavaScript is loaded:

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

Copy after login

Add Event handling to JavaScript. Don't add it in HTML. This is very difficult to maintain, such as:

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:

<head>   
  ...   
</head>   
  
<body>   
  ...   
  <button id="foo">Foo</button>   
  ...   
  <script src="js/local.js">   
</body>   
  
　　js/local.js:   
  
init();   
var fooButton =   
    document.querySelector(&#39;#foo&#39;);   
fooButton.onclick = handleFoo();

Copy after login

Legal HTML

A successful Web page The main factor 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.

<p id="foobar">  
...   
</p> <!-- 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:

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

Copy after login

However, 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

The items element (li) does not have to be closed. Some very smart programmers will write it like this. However, the list element (ul) must be closed.

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

Copy after login

One thing you must pay attention to is the video and audio elements. They are not self-closing:

<!-- 错误: liable to cause layout grief -->  
<video src="foo.webm" />  
  
<!-- 正确 -->  
<video src="foo.webm">  
  <p>Video element not supported.</p>  
</video>

Copy after login

On the contrary, the HTML page will become cleaner by removing unnecessary code

There is no need to add "/" for self-closing elements, like img, etc.

The set attribute has no value. If no attribute is added (in this case, it will not play automatically and there is no control control),

video, it does not have any attributes.

<video src="foo.webm">

Copy after login

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!