Article introduction of Wulin.com (www.vevb.com): Many people ask what HTML5 is? We say that the method we can use HTML5 first is to change DOCTYPE first, because many pages are still in the traditional way at present. The HTML5 method is compatible with IE browser, and can be used from IE6 to IE10, and it can be supported by advanced browsers.
[Editor's Note] The following article was written by an IT technician named Zhang Liming, published on the InfoQ webpage. This time, he analyzed the performance of HTML5 from 9 different aspects in the full text, which is still worth reading by corresponding developers.
From a performance perspective, HTML5 first reduces HTML documents, making this simpler. First, from the perspective of user readability, there were a lot of things that were originally not understood by beginners for the first time to see these things, and the HTML5 declaration method is obviously more friendly to users. Second, the document encoding declaration is very simple if it is in HTML5. Many people ask what HTML5 is? We say that the method we can use HTML5 first is to change DOCTYPE first, because many pages are still in the traditional way at present. The HTML5 method is compatible with IE browser, and can be used from IE6 to IE10, and it can be supported by advanced browsers. So the easiest way to embrace HTML5 is to change DOCTYPE.
1. A simpler label
The next thing may not be a very common thing, but it is something I prefer, using a simpler label method. As you can tell from this name, HTML5 is inherited from HTML4. HTML4 has strict mode and transition mode. HTML5 supports this transition mode, which means you can not close some tags. However, I do not recommend all tags, for example, the BODY tag is not closed, which we do not recommend. But the most commonly used P-label is also the list tag LI. Why do you say so? First of all, from a visual perspective, this method is a bit simpler. Then the key is that during the document transfer process, there will be less content.
The declaration of HTML5 tag attributes supports three ways: single brackets, double brackets and unbranched brackets. To reduce the size of the document, I chose the method without double quotes or single quotes. However, it should be noted that assuming it is a declaration of class attributes, because attributes may include multiple classes, and when multiple classes, they must be enclosed in brackets. In this regard, let me show you a practice of Google. Google itself has a page that completely practices the above, reducing the size of the document by 20%, reducing the transfer of HTML documents by 20%. If the whole thing is practiced, it can achieve a decrease of between 5% and 20%. This is the first step, reducing the size of the HTML document.
2. Picture optimization
Next is about the optimization of pictures, which are always elements that love and hate. Because when there are too many pictures, it will seriously drag down the loading speed of the entire page. Regarding the optimization methods of pictures, there are many introductions in the book "High Performance Website". To summarize, there are three main points: using elves, optimizing the size of pictures, and using DATA URI. I won't go into details here.
Another idea of image optimization is: no-image. Abandon the pictures and embrace CSS3. Originally, I needed to set a picture with a rounded corner effect, but now I used border-radius in CSS3; I used to set a shadow effect, but now I use box-shadow in CSS3; I used to set a gradient background image, but now I use gradient in CSS3.
3. Pre-fetch
Next, let’s talk about Prefetching, which is another way of optimization. Our current optimization ideas are nothing more than few. Many of them are from the perspective of fewer things, for example, the document size was reduced before and the image size was reduced. Many pictures become elves, in order to reduce the number of sending requests. For prefetching, it is another way of thinking. Loading resources early. When the user goes to the point, it has actually loaded, so it will definitely be faster.
There are two parts for prefetching: one is prefetching of resources, and the other is pre-resolving of DNS.
There are several points to note when resource preloading:
Preloading will only pull when the browser is idle, but it is not guaranteed to pull it. This is a very important point. Because the browser itself has a global listener, which is an internal interface. When the browsing air is idle, it will execute the browser when it is idle, but this idle callback may not be triggered, so it does not guarantee that preloading will be performed.
Chrome does not support preloading of HTTPS resources. For example, Alipay is an HTTPS page, Chrome will not pre-pull.
Although a pre-pulled page is not visible after it exists, it is actually parsing normally. If I pre-pull the login page, the login page has many resources, such as pictures, CSS files, and JS files. It will be parsed from top to bottom normally. During the parsing process, this page does not appear, but it actually exists. In HTML5, you can get the current page status through document.visibilityState. Usually the page has two states, visible and invisible, but now there is a new state called pre-rendering state. You can directly determine whether the page is in the prerender state by whether document.visibilityState is equal to prerender.