Sample code analysis on how to improve website front-end performance in HTML5

1. Use web storage to replace cookies

The biggest problem with Cookie is that it will follow the request every time. In HTML5, sessionStorage and localStorage are used to store user data directly on the client, which can reduce the amount of data in HTTP requests. Moreover, Web storage also provides APIs to manipulate data, unlike cookies, which you have to write yourself.

 // if localStorage is present, use that
 if (('localStorage' in window) && window.localStorage !== null) {
 
   // easy object property API
   localStorage.wishlist = '["Unicorn","Narwhal","Deathbear"]';
 
 } else {
 
   // without sessionStorage we'll have to use a far-future cookie
   //   with document.cookie's awkward API :(
   var date = new Date();
   date.setTime(date.getTime()+(365*24*60*60*1000));
   var expires = date.toGMTString();
   var cookiestr = 'wishlist=["Unicorn","Narwhal","Deathbear"];'+
                   ' expires='+expires+'; path=/';
   document.cookie = cookiestr;
 }

2. Use CSS animation instead of JavaScript animation

Use CSS animation instead of JS animation. Because some machines can perform GPU acceleration on CSS animations, and also reduce JS file requests.

 p.box {
   left: 40px;
   -webkit-transition: all 0.3s ease-out;
      -moz-transition: all 0.3s ease-out;
        -o-transition: all 0.3s ease-out;
           transition: all 0.3s ease-out;
 }
 p.box.totheleft { left: 0px; }
 p.box.totheright { left: 80px; }

3. Use client database

Using client databases such as Web SQLDatabase or IndexedDB can reduce the number of HTTP requests. Data such as region lists and friend lists can be stored directly on the client. Sometimes you can also use sessionStorage and localStorage, because generally speaking, these types of comparisons are faster.

4. Directly use the new features of JS

JS has developed a lot. For example, Array has introduced many new methods, such as map, filter, forEach, etc. In addition, JSON is also directly embedded in the browser, so there is no need to introduce the json2.js file.

// Give me a new array of all values multiplied by 10.
 [5, 6, 7, 8, 900].map(function(value) { return value * 10; });
 // [50, 60, 70, 80, 9000]
 
 // Create links to specs and drop them into #links.
 ['html5', 'css3', 'webgl'].forEach(function(value) {
   var linksList = document.querySelector('#links');
   var newLink = value.link('http://google.com/search?btnI=1&q=' + value + ' spec');
   linksList.innerHTML +=  newLink;
 });
 
 // Return a new array of all mathematical constants under 2.
 [3.14, 2.718, 1.618].filter(function(number) {
   return number < 2;
 });
 // [1.618]
 
 // You can also use these extras on other collections like nodeLists.
 [].forEach.call(document.querySelectorAll(&#39;section[data-bucket]&#39;), function(elem, i) {
   localStorage[&#39;bucket&#39; + i] = elem.getAttribute(&#39;data-bucket&#39;);
 });

5. Caching HTML tags

Cache HTML files on the client through caching. However, these cached HTML files only have structure and no content. The content needs to operate JSON objects through JS to fill the data into the page. Such HTML files are equivalent to templates.

6. Use hardware acceleration

Now leading browsers have enabled GPU-level hardware acceleration, which can be turned on through certain instructions or hacks. For example, when using 3D transformation or animation in CSS, you can turn on GPU hardware acceleration.

   .hwaccel { -webkit-transform: translateZ(0); }

7. Use WebWorker to complete CPU-consuming operations

For operations that require time-consuming or CPU-consuming operations, use WebWorker. This is not only fast, but also operates in the background. Affects normal browser interaction.

8. Use the new features of form

HTML form has added many new attributes, elements and validation functions. Using these new functions can reduce the involvement of JS and CSS.

9. Use CSS3 to replace CSS sprites

Using CSS3 can achieve the effect of some CSS sprites. Maybe about 100 bytes of CSS can replace 2K image sprites, and the number of requests is also large. decreased.

The more commonly used special effects of CSS3 include: rounded corners, gradients, shadows, transparency, deformation, masks, etc.

10. For real-time applications, use WebSocket to replace XHR

WebSocket was first designed to replace Ajax polling. Its advantage over Ajax is that it is lightweight and less used than Ajax. bandwidth. According to some reports, WebSocket requires about 30% less transmission than Ajax, and is about 35 times faster. When Ericsson tested the performance of WebSocket, it was found that using the ping command consumes 3 to 5 more times than WebSocket, so it is very suitable for real-time applications.

The above is the detailed content of Sample code analysis on how to improve website front-end performance in HTML5. For more information, please follow other related articles on the PHP Chinese website!