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

HTML5 local storage and content on-demand loading ideas and methods, I believe that many inexperienced people do not know what to do, so this paper summarizes the causes of the problem and solutions, through this article I hope you can solve this problem.

HTML5 has been destined to start its extraordinary life since its birth, and all the major technology companies have high hopes for it and have tried it one after another. Apple, Google and Microsoft have launched HTML5 display pages one after another, and major video websites have also announced their support for HTML5 video technology. HTML5 geolocation technology has sprung up like bamboo shoots after a spring rain and has been applied in foreign social networking sites.

On the other hand, on the mobile device platform, iPhone shipped more than 100m units, while iPad sold more than 15 million, and iPad2 sold nearly 1 million units in its first week, accounting for 9.5 billion of the total tablet market share. We know that these two do not support Flash, and this popularity reminds us that it is imperative to improve the compatibility of multiple platforms.

At the same time, while paying attention to the performance optimization of the website, we should note that reducing the amount of loading when users load the page is also an extremely important aspect. You can imagine how good it would be to save 10K downloads for a website with 1000W daily views, which is of great benefit to users' access speed and server load.

> Optimization of official website

In order to tie in with the LOL non-deletion test and improve the user's browsing experience, the official website began to be revised in January this year. The official website tries to adopt a new idea of content layout to better guide users. This revision, the official website mainly has the following four aspects of adjustment: a large number of removal of the previous version of the Flash animation affecting browsing, leaving only the Flash effect of the home page download button, speeding up the loading speed of the page; guide the page to divert users, access to the game information users to enter the official website, understand the game strategy to enter the War Academy The home page has enhanced the display of game events and events, using different large-scale rotation ads and lists that occupy nearly 1/3 space on the page, and added free hero displays and game honor walls.

In addition, in view of the current situation, the official website has greatly improved the page performance by using HTML5 local storage, content loading on demand, delayed loading, file compression, CSS Sprites and other technologies. In addition, the use of HTML5 video technology, so that the official website has a good performance on Apple's mobile platform.

This article will focus on the ideas and methods of HTML5 local storage and content on-demand loading, as well as the effect of HTML5 video technology. The method of reducing the load adopted by the LOL official website saves users at least 600K of downloads on the home page, and greatly reduces the load of the server.

Home page GTmetrix score

Overall health (more than 70% in 1 second, 80% in 2 seconds, and 90% in 3 seconds)

Reducing page loading

The main purpose of reducing page loading is to reduce resource consumption and speed up the rendering of pages. Although delayed loading can optimize the performance of the page to some extent, not all content needs to be loaded to the user in the first place or repeatedly. For example, if the user is browsing the content of the first screen of the page, it is not necessary for the page to load some content below the first screen when the page is opened. Or, some of the same parts of the official website page, such as navigation and foot statements, are requested from the server every time, increasing the load on the page to some extent.

There are many ways to reduce page loading. This revision of the LOL official website mainly uses the following methods:

Use HTML5 local storage technology to store some content of the page in the user's computer, such as navigation, cooperative media, foot statement and so on. In this way, when the user loads the page, the browser obtains the content directly from the local, which reduces the consumption of resources to a certain extent.

The picture scrolls and loads with the scroll bar, so that the user can dynamically load the picture on demand when browsing the page. For example, when the user browses the content of the first screen, the picture after the first screen is not loaded, and when the user scrolls the page, the part presented in the browser will load the picture dynamically.

Optimize the loading mode of the rotation ad, load only the first picture when the page opens, request the second picture when the second picture is rotated, and so on.

To load the content of the page card on demand, the news section in the upper right corner of the home page of the official website only requests the content of the first page card when loading, and then loads the content of the page card when the user clicks on another page card.

HTML5 local storage

To put it simply, local storage is a way to store key-value pairs locally for web pages through a client-side web browser. Just like Cookie, even if you leave the site, close the browser tab, exit the browser, and so on, the data will always be there. Unlike Cookie, data is never sent to a remote network server (unless you use some other method to transfer it manually). Unlike all the above attempts to provide long-term local storage, it is executed natively within a web browser, so it can be executed effectively if a third-party browser plug-in fails.

For browsers that support HTML5 (Firefox, Chrome, Safari, Opera, etc.), we use the methods provided by HTML5's localStorage; for IE browsers, we use the userData method provided by IE; and for other browsers, we use regular methods to load content.

Locally stored data for IE

UserData is a local storage method provided by IE. It places the content that needs to be stored in a local XML file and sets an anchor point for the call in an element of the page. The specific usage is as follows: use getElementById to get an element within the page, use addBehavior ("# default#userData") to add the behavior of local storage; use setAttribute to assign the content that needs to be stored, and use the save ("XXX") method to store the content in the XML file named XXX; use the load ("XXX") method to load the local XXX.xml file, and use getAttribute to get the content that has been stored.

Locally stored data for Chrome

For detailed methods for storing localStorage locally in HTML5, see HTML5 Web Storage. One of my translated documents, "past Life and this Life of Local Storage of Network applications" will also be posted on the blog later.

For the specific implementation, my approach is to first determine whether there is stored content locally, if there is no data or the version has expired (the version is actually a variable I set, and the version expires when modifying this variable), load the corresponding JS data, process the data into the desired format through a function, and then store it locally; if there is any and the version does not expire, obtain the data directly from the local. Then the data is further processed by the function and inserted into the corresponding structure.

On the official website, navigation, cooperative media, health game announcements, foot statements and free heroes all use local storage to store data on users' computers.

Among them, the local storage applications of navigation, honor wall, cooperative media, health game announcement and foot statement have saved a total of more than 10 K (the local storage file of IE actually has 30K, because IE escaped the characters in the content to comply with the rules of XML).

The free heroes section belongs to the dynamic section, and the data in it is obtained through a json file provided by the game (including the data of all heroes in the game, the free heroes will be different every week). After storing it locally, it saves 500K downloads. It's just that when the free hero changes are made every Monday, they will be downloaded again.

> Pictures are scrolled and loaded with the page

In fact, this is the method used by many large websites, such as Taobao, Pat and so on. This time in the game official website to do an attempt, the effect is good, the initial page for the first page to save dozens of K download, because different display resolution is different, so the first screen height is different, this data fluctuates.

The picture being loaded on the current screen when scrolling

First, the path to the picture is stored in a non-src attribute of the img tag, and the LOL home page is stored in the rel attribute, which prevents the page from loading the image directly. Then use JS's listening method (IE is attachEvent, other browsers are addEventListener) to listen for scroll events on the page. Once the page is scrolled, a written function is executed to determine whether the picture is in the browser's current screen, if so, assign the address in the rel property to the src property, and if not, continue listening. When all the pictures in the plate are loaded, cancel the monitoring. Both the activity section and the media cooperation section on the home page of LOL's official website use this technology, which greatly reduces the amount of page loading.

On-demand loading of rotating ads

In the past, the loading mode of rotation ads was to load all at once, although delayed loading was used, users may not browse all the rotation ads. When the user stays on the home page for only 5 seconds (the home page of the LOL website is set to switch every 5 seconds), there is no need to load the picture after the second ad picture.

The home page of the LOL official website uses the method of loading the first ad image for the first time, and after 5 seconds, determine whether the second picture has been loaded, if not, load the second picture, and so on. In this way, if the user stays on the home page for only 14 seconds, it will save the downloads of the 4th or 5th advertising pictures, which is about 100K.

Page card content loading on demand

For the news page card, the old way is to use include to load and hide the invisible page card. However, if the user does not switch to another page card, it is not necessary to load the contents of those page cards directly.

Trigger to load page card content

LOL official website home page card is used to load only the content of the first visible page card. When the user clicks to switch the page card, the contents of the corresponding page card are loaded. Including navigation and honor wall, although the data is loaded locally, it is also inserted into the corresponding structure after it is triggered by the user. This not only reduces a certain amount of downloads, but also reduces part of the rendering work of the browser.

Multi-platform compatibility

In the final analysis, the problem of platform compatibility is the compatibility of browsers. On the PC platform, we need to be compatible with N multi-browsers, as well as on mobile platforms. What is even more frightening is that the browser variety and complexity of the mobile platform is much larger than that of the PC platform.

So the multi-platform compatibility of LOL's official website is only aimed at modern browsers on mobile platforms.

Apple platform

The boot page under iPad

The main problem with iPad and iPhone is that they do not support Flash. The LOL official website has two places, one is the video of the guide page, and the other is the download button of the home page. It is easy to implement, use JS to determine browser information (navigator.userAgent), if it is iPad and iPhone, use HTML5 video technology to replace the Flash player on the boot page, block the insertion of the Flash download button on the front page, and keep it a link with a tag. For specific methods, please refer to the document "the iPad Road of Imperial Dragon in Heaven", which was revised on the official website of Yulong Zaitian.

Google platform

For Android phones and tablets, there is no need to do anything extra, as long as your page meets the standard, because the Android phone itself supports Flash, after my test, the LOL official website browsing under HTC Desire is completely normal.

Some tips > faster data parsing

We usually use json or XML to store large amounts of data. The book "High performance Javascript" introduces a custom format and tests that the custom format is the fastest to parse. The way to do this is to use symbols to interval the data, such as var test= "1, 2, 3, 4", and then use the split (",") method to get each data. The LOL official website is the data stored locally in this way.

> CSS Sprites

In order to reduce requests, the LOL official website integrates the small images of each page into its own large picture, the home page is BT, the integrated image has 90K.

The integrated picture of the home page

MP4 file size control

The size of the MP4 file output for Apple mobile devices needs to be controlled, and the file is too large to make browsing feel stuck. After all, the CPU of mobile platform devices cannot be compared with PC. The MP4 file of the LOL boot page is compressed from the initial 10m to 6m.

Function execution

The LOL official website uses a lot of JS, especially the home page. If a large number of functions are executed at one time, the CPU suspension rate is very high and the page is very stuck. Therefore, the LOL official website uses a function to execute these functions at intervals. When the page is loaded, several functions that must be used immediately are executed at once, and then the remaining functions are executed one by one according to the degree of importance, in order to lighten the load on CPU. By comparison, although the home page of LOL official website is much more used by JS than that of DNF official website in this way, the occupancy rate of CPU when loading is about 5% lower than that of DNF.

> CSS selector

When we write CSS, there will be a lot of selectors, but different writing methods, the efficiency of the page in rendering is not the same. According to the matching rule, the browser matches the corresponding element from right to left. For example, .header li a {}, when rendering, the browser will first traverse all the a tags in the page, and then traverse the a tags who are in the li tag, and then find out who is under the .header, which is actually very inefficient and expensive. In fact, we can write the class name .header _ lnk {} directly to these a tags, so that the browser can find it at once when rendering, and avoid going through the cabinets again. In addition, .header .header _ lnk {} is also unnecessary, it is more efficient to write .header {} directly, so why do we need browsers to filter again?

Of course, it is also necessary to reduce HTTP requests, use delayed loading, and so on. The optimization of the official website is endless, in fact, the revised page still has a lot of places to optimize. For example, reduce the initial rendering of pages, optimize JS to further reduce CPU occupancy, be compatible with more mobile platforms, and so on.

After reading the above, have you mastered the ideas and methods of HTML5 local storage and content on-demand loading? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

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.