Shulou(Shulou.com)06/03 Report--

Developers need to know what the performance of HTML5, for this problem, this article describes in detail the corresponding analysis and solutions, hoping to help more partners who want to solve this problem to find a more simple and easy way.

From a performance perspective, HTML5 first reduces the size of HTML documents, making it easier.

First, in terms of user readability, a lot of things, such as those seen by beginners for the first time, are incomprehensible, and HTML5's statement is obviously more user-friendly.

Second, the declaration of document encoding, if used in HTML5, is simple. Many people ask what HTML5 is. The way we say we can use HTML5 first is to change the DOCTYPE first, because many pages in front of us are still in the traditional way. HTML5 is inherently compatible with IE browsers, from IE6 to IE10, including advanced browsers. So the easiest way to hug HTML5 is to change the DOCTYPE.

1. A more concise label

It may not be a very common thing to do next, but it's something I prefer to use a more concise tagging approach. HTML5 can be heard from this name, it is inherited from HTML4. There are strict mode and transition mode in HTML4, and HTML5 supports this transition mode, that is, you can not close some tabs. However, I do not recommend all tags, such as BODY tags that are not closed, which we do not recommend. But like the P tag, the most commonly used is the list tag LI. Why do you say that? First of all, from a visual point of view, this approach is a little more concise. Then the key is that during the transmission of the document, there will be less content.

The declaration of HTML5 tag attributes supports three ways: single parentheses, double parentheses, and no parentheses. In order to reduce the document size, I choose not to add double quotation marks or single quotation marks. Note, however, that the assumption is that it is a declaration of a class property, because the attribute may include multiple classes, and multiple classes must be enclosed in parentheses. In this regard, let's take a look at one of Google's practices. Google has a page that fully practices the above, reducing the size of the document by 20% and reducing the transfer of HTML documents by 20%. If we put the whole thing into practice, we can achieve a reduction of 5% and 20%. This is the first step to reduce the size of the HTML document.

two。 Picture optimization

Next is about the optimization of the picture, the picture is always a love-hate element. Because when there are many pictures, it will seriously drag down the loading speed of the entire page. On the way to optimize the picture, the "high-performance website" book has a lot of introduction, to sum up, there are three main points: the use of wizard images, optimize the size of the picture, the use of DATA URI, the details will not be detailed here.

Another idea for image optimization is no-image. Abandon the picture and hug CSS3. Originally need to set a fillet effect of the picture, now use border-radius; in CSS3 originally need to set shadow effect of the picture, now use box-shadow; in CSS3 originally need to set gradient background picture, now use gradient in CSS3.

3. Prefetch

Next, let's talk about Prefetching, prefetching, which is another idea of optimization. Our idea of optimization now is nothing more than less. Many of them are from a small point of view, such as reducing the size of the document and reducing the size of the picture. Many pictures are turned into a genie picture in order to reduce the number of requests sent. Prefetching is another way of thinking, loading resources early, and when users go to click, they are actually loaded, which must be faster.

Prefetching, there are two parts: one is the prefetching of resources, the other is the preparsing of DNS.

The resource preloading contains several points to note:

Preloading will only be pulled when the browser is idle, but there is no guarantee that it will be pulled, which is very important. Because the browser itself has a global listener, which is an internal interface, when the browser is idle, it will perform what the browser should do when the browser is idle, but this idle callback is not necessarily triggered, so there is no guarantee that preloading will be performed.

Chrome does not support preloading of HTTPS resources. For example, if Alipay is a HTTPS page, Chrome will not prefetch it.

Although a pre-pulled page is not visible after it exists, it is actually parsing normally. If I pre-pull the landing page, the landing page has a lot of resources, such as pictures, CSS files, JS files. It is normally parsed from top to bottom, and in the process of parsing, the page does not appear, but it actually exists. In HTML5, you can get the current page state through document.visibilityState. Usually the page has two states, visible and invisible, but now there is a new state called pre-rendered state. You can determine whether the page is in a pre-rendered state by directly determining whether document.visibilityState is equal to prerender.

4.DNS parsing

Next is the parsing of DNS. Sometimes when we log on to the page, it is relatively difficult to detect where the user may click, of course, sometimes we do some burying points to find out that most of the user's next step is to go inside. But in some cases, we don't know exactly which page the user will go to next, but we know which domain he is going to go to. At this point, I can pre-analyze DNS. Because in fact, there is a long DNS parsing process in the middle of the request process of the whole page, if we do this in advance, we can further let the user see the page.

The following is a case of Q+ wallpaper. Q+ wallpaper is a certain system of Q+. First of all, the whole architecture of Q+ is based on WEB + client. What we see now is a WEB page, although it is outside a client shell, but its heart is WEB. When we finished the whole process for the first time, because there were so many pictures, all the static resources were allocated to more than a dozen static servers. In other words, if I want to pull, I have to parse 10 DNS, this time is quite time-consuming, the slowest time may be delayed for a few seconds, which we can feel with the naked eye. If we do DNS pre-parsing, I don't know which one it is because of its own resources, and all the pictures are random, so we can only say that we can make efforts on DNS pre-parsing to improve its speed. In that case, it may take 2 seconds from the original, I will become 1 second.

Next, let's talk about the application of Q+. We will be like QQ, QQ and Q+ have a lot of text chains, that is, there is a text APP message push in the lower left corner of the window. Here, the backend is pulled from time to time through WEB, which is pulled from the backend and displayed in the foreground. But in a certain period of time, in fact, all APP it pushes a total of operational information is fixed. If you press a specific APP to analyze the corresponding array of each text chain, this time is very big data. Because there are about 300 to 400 bytes here, from an optimization point of view, we store these pull areas locally each time. Then save the local localStorage, we are in the same domain, and all the information between APP can be accessed to each other. Then it will pull all the ID that have been pulled, so that it will not be pulled again.

There is also a point to note here that many vendors of localStorage currently have synchronous implementations. If you call the localStorage interface a lot, it will actually block your rendering process. At this time, when the user drags down the page, and then you happen to be doing storage data at this time, the data is relatively large, and the user will feel that your page is very stuck. They have discussed this problem before. The IE of this interface is designed to be asynchronous, and they are designed to be synchronous. This will lead to the assumption that you have more programs when calling this excuse, because there is a serialization process that sequences to disk. In this way, the whole process will seem slow. Coupled with the fact that localStorage itself can share this data between different windows, it will lock the data. If a large amount of data is calling this local interface, it will look stuck. So there is no particularly good solution at present, but this is something to keep in mind. Even if you say the largest five-point megabyte at present, if you use it, it will make the user very sad. Because if you call this excuse and the user is dragging the mouse, it will feel very stuck.

5. Offline storage

Next, let's talk about the performance benefits of offline storage. First of all, the definition file of inbound and offline storage, all system modules in Q+ are defined offline support. That is to say, all applications can still be used if the network is cut off. A file that adds MANIFEST to the document. MANIFEST is a definition file that declares which current pages need to be stored locally. Which do not need to be stored? If the request fails, which new pictures or what should be used instead? This is divided into three pieces:

First, CACHE, which needs to be stored locally.

Second, NETWORK is not stored locally, it goes back and asks for it every time, but it should be pointed out here that local storage and browser storage are actually two different things, they store two different places. Even if the NETWORK side needs to tell APP that I need to pull it every time, because like Chrome, his storage cache is very abominable and difficult to clear, and must be cleared manually to fully take effect. So even if you set it up not to store it locally, the browser itself may store it because it stores two different places.

Third, FALLBACK. If a picture fails, it is 404. What kind of picture should be used instead? I think this is more fun.

How to set up MAEIFEST? MANIFEST needs to pay attention to three points here:

MANIFEST homology restriction

MIME type must be text/cache-manifest, which is standard. If it is any other format, it will not take effect.

CHROME, if you want to see if this thing is in effect, you may enter chrome://appcache-internals in the browser through the pseudo-protocol CHROME.

About how to update the application's cache. Why store offline? When the browser knows that you have offline storage, it will first go to the offline storage directory to find out if the resource has been Cache. When it has been Cache, he will get the resource directly from here and will not send another request. Because the browser's request is like this, when there is offline storage, even the request will not be sent, so it will be faster. If sometimes we need to update, what should we do when we update?

Users can manually clear the browser's Cache, which automatically clears the local storage.

Modify any content of MANIFEST, this is the more recommended way, but also the way we use online. That is to say, we can modify the specific project inside, but it should be best to modify the comments here, because every time I release, we automatically release the mechanism, and when we release, we can modify the comments on it. In this way, each published content will be synchronized to the local client in real time.

Through the program to execute, the program is window.applicationCache.update (). That is, I am going to operate offline storage, in fact, I sometimes call it application storage, because its meaning is application storage. Let's update the application store manually.

6.Web Worker

Next, Web Worker. Web Worker is a multithreaded JS process. In fact, if we are online, there is no application scenario, so I won't talk about it. But I can talk about the specific application scenarios I've seen.

First of all, what is WEBWORK? It is an OS-level thread. Before we imitated multithreading, we actually opened one more window. But now, the browser itself provides, this will make the operation more convenient, is to make our entire document heavy, not very recommended way.

Then WebWorker access is limited, and it doesn't have access to many global objects. For example, the documnet object cannot be accessed. The most suitable scenario for WebWorker is the CPU-intensive computing operations. When we played games before, we used BOX2D. Many people should have heard that it involves a large number of calculations, that is, in the whole page, all the objects below have to calculate their collision relations, which is a very large amount of calculation. However, if you put it into the current JS process to execute, the amount of calculation is large, as soon as the calculation, the whole page is very stuck. But if you use WebWorker to do it, it is an asynchronous process, sent in real time, and can do other things in the process of computing, which is multithreading.

7. Device API

Talk about the device API. I think the device API is the most important in terms of performance, and it is also the earliest API to be implemented. One is CONNECTION, which is network bandwidth. What's the use of this? In this scenario in China, it must be kept in mind that the Internet speed of many users is still very low. We hope that users can be automatically downgraded to a relatively low solution when the network speed is low. If we use the existing technology, we can't do it. But we can use the device API. Because we know that this information can be obtained from the device. How much broadband is it, what we can do when it is broadband. For example, when broadband is good, I use high-definition pictures. When the broadband is relatively low, use low-definition pictures.

8. Battery

The next one is about batteries. I think from a performance point of view, it is mainly in terms of electricity. If it is said that the user battery is relatively low, I think we should do as little as possible. There is no breakthrough in the battery technology of my own mobile phone. I think it is also a publicity highlight to make the APP look like a high performance.

9.CANVAS

Next up is CANVAS. Talk about several performance optimization points of CANVAS, using these things, the performance will be improved 10 times.

First, each CANVAS is a canvas, and when we want to render a graphic, we can layer it. Just like in PS, it has one layer, two layers and three layers. When many users are playing games, they directly put everything into one layer, and when updating, everything has to be updated. But if you layer it, you put the background on the background layer and the character on the role layer. In this way, when I want to update the character, I will only update the character, and the background layer does not need to change. With less work done by CPU, performance is naturally improved.

Second, context.drawImage. Don't zoom the picture, we made a mistake at the beginning, our artist's picture is not consistent with us all the time, and then we have to zoom the picture. Because the size of the picture of its own device is like this, we have to scale the picture according to the ratio. After zooming the picture, we find that it will be very stuck on low-end devices, such as iPad or iPhone, so why do we want to do this? For code analysis, when using this method, it takes a lot of time.

Third, requestAnimationFrame. This is a method optimized specifically for rendering. It works like this: every time the browser passes over a frame, it triggers this square, and when I trigger it, Canvas gets that the browser is ready to do something under the frame. If you use the traditional method, you will not think about more things, it will only know how much time I have passed, and I will implement it. If the user is blocked before, execute this method every 10 seconds, within 10 seconds, in fact, his previous work has not been done, and then this thing will be delayed. It is optimized to make the animation look smoother, because every frame, it tells you that you can do something.

The answers to the questions about the HTML5 performance that developers need to know are shared here. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel for more related knowledge.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.