Front End-"learning experience"-improved mobile performance by 1

To the year four basically worship the years are finished, today's weather exceptionally good, sunny, and sometimes feel light is simply the sun is happy, it is hoped that a lot of calm down to think carefully, and then to learn. Okay, no nonsense, today I would like to share some of the front end of the mobile side of the accumulation of knowledge of the exploration.

First introduce a book "HTML5 Touch Interface Design and development", this book is not thick, but the things are dry, very useful, I want to share this is also from the book.

The importance of mobile is self-evident, compared to the native app, the biggest advantage of mobile web is that the development rate is high, and for those content-based applications do not need particularly high performance requirements, in addition to the Web mobile can be combined with a hybrid application framework similar to PhoneGap to build hybrid applications , which is certainly a worthwhile area for US web developers to study.

Compared to the PC-side Web application, the mobile side of the performance requirements more, because after all, the small mobile phone computing power is still inferior to the PC, here I first from the performance of the more people say.

First look at how the browser loads the interface:

1 Resolving domain Names

The domain name entered by the user becomes IP after the DNS server resolves, and then through IP access to the application, in order to reduce the load on the DNS server, the DNS lookup mechanism is cached by the browser, the device and the router and proxy server between the device and the server.

2 initiating a request

The browser initiates a TCP connection to the IP address host and then sends the request with the URL, browser information, the type of data (encoding and language) that the browser can accept, and the cookie that contains the domain and path of the cookie.

3 Download response

The browser begins to download the response, and as the response arrives, the browser parses the HTML and identifies more resources. The browser then starts to get these resources.

4 Rendering interface

Finally, the browser renders the page as soon as possible. If the page contains CSS or script files, the browser waits until the files are loaded and parsed before rendering.

This can be summed up several reasons for the slow page load:

The total number of HTTP connections.

The total number of bytes.

The render block when waiting.

Delay.

Poor cache capacity.

Earlier I shared a front-end tool, a Chrome browser, that lets you see the response time by using the Chrome timeline plugin. The method is to review the element->network.

And then we can solve that for each of these reasons,

Too many HTTP requests we can merge those resource files, such as Css,js, and image, which can be done using grunt, koalas, etc.

The total number of bytes, in the same vein we compress the relevant resource files.

Wait for the rendering blocking, that is, must wait for JS to complete before rendering the interface, then we put the dependency of JS to the end of the page, of course, this is not absolute, because sometimes you have to put the relevant JS to the front.

Network latency, the solution is to improve the performance of their servers, such as increasing bandwidth, using Content distribution network CDN.

Poor cache capability, for cache issues I'll share it with you tomorrow.

In addition, Google has also published relevant articles on interface performance optimization, Wslow is a tool developed by the Yahoo Performance Team in 2007, and will give you recommendations for optimal optimization by testing the differences between your website and best practices. Developer.yahoo.com/yslow, this is related to the website, interested students can study under their own.

Front End-"learning experience"-improved mobile performance by 1