"Book Notes" Optimizing iOS Web Apps

One, code optimization:

Code optimization is the first step in any optimization technique because everything on the Web page is built on top of the code. Good code can save bandwidth, reduce rendering latency, and improve page readability and long-term maintainability. Here are some best practices to keep in mind when writing any code in a Web App.

1, use code that adheres to Web standards.

2, streamline the code.

3, reduce the number of HTTP requests.

1) A single resource file must be less than 15KB (in the case of non-shrinking).

Pages designed for the iphone need to limit the size of each resource file to within 15KB to get the best caching behavior. The iphone can cache up to 105 resource files below 15KB. After the maximum cache count is reached, the newly cached file overwrites the old file in the cache.

2) The global cache resource must be less than 1.5KB.

Although the iphone can cache many resource files, it can only cache about 1.5MB. The upper limit of the number of bytes available for caching is approximately 105*15=1575kb.

3) Empty the HTTP cache after the device shuts down the opportunity.

If the user needs to force a restart of the device, the resources in the cache are lost. This is because safari allocates space from system memory to create cache files on the iphone, but does not write cache components to persistent storage devices.

4) Closing the tab will also empty the HTTP cache.

Close all tags, leaving only a blank label and then turning off Safari will also empty the cache.

From a development point of view, this type of caching is unreliable. Because of its high frequency of emptying, it is also difficult to cache most of the resources of a modern web page. Even the most compressed JavaScript frameworks or CSS files are hard to control the size of 15k, not to mention that almost all Web applications use more images than this size. Fortunately, we have a better choice to achieve the goal, namely the offline functionality provided by HTML5.

4, merge CSS and JavaScript files.

5, reduce DOM operation.

Second, picture optimization.

1, optimize color depth.

2. Use the CSS sprite diagram.

3, do not scale the picture.

Always use the picture in the right size, depending on the device viewport or the width of the design element Takaki. Don't expect Safari to automatically scale a picture to the right size. The only exception to this is that when we insert a picture in a web app for a given device, you can adjust the width of the value 100% to both the horizontal screen and the portrait view.

This rule can also shorten the load time of Web pages and the user experience caused by each time you run JavaScript in the page, it is important to follow this rule, and also do not forget to set the width and height of the image, which also help reduce the time spent rendering. This rule also shortens the load time of the Web page and the delay in the user experience each time the JavaScript is run on the page.

Third, apply compression.

Safari supports gzip compression, so compressing some of the Web app's resources can be a good idea to improve the level of user experience. We can decide when to compress HTML5 pages, CSS3 stylesheets or JavaScript code, but there is no need to compress images or PDF documents, because these types of resources are already compressed. Compressing a picture or PDF document is a waste of CPU resources and may even increase the volume of the file.

For a server, to use a web app to use GIP compressed resources, the server must be configured to provide compressed resources automatically when requested. On the other hand, the client must support files of this type of compression.

GIP compression is not a limitation of the bone file format, so this is the easiest way to dramatically "slim" the Web page. Gzip compression can reduce the file by approximately 70%.

Although the benefits are obvious, but the world is not perfect, generally gzip compression also has some shortcomings.

1, we need all browsers that support gzip compression. Of course, this is not a problem for our situation, as both Safari and other WebKit-based browsers support Gzip.

2, we cannot compress the force slices and PDF documents because they are in themselves a compressed format.

3, because Safari needs to decompress resources in real time, in some cases this process increases the CPU clock cycle and overhead, offsetting the potential benefits. So it's a good idea to test first to make sure that this extra overhead does not outweigh the benefits.

Four, usability optimization.

1, usability check.

2, usability testing.

Reference: IOS Web App Development

Book notes optimize iOS Web apps