[Reading Notes] optimizes iOS Web applications and iosweb

[Reading Notes] optimizes iOS Web applications and iosweb

I. code optimization:

Code optimization is the first step of any optimization technology, because everything on the Web page is built on the code. Excellent code can save bandwidth, reduce rendering latency, and improve page readability and long-term maintainability. The following lists some best practices that should be remembered when writing any code in a Web application.

1. Use code that complies with Web standards.

2. Streamline the code.

3. Reduce the number of HTTP requests.

1) A single resource file must be less than 15 kb (in the case of not shrinking ).

For iPhone-designed pages, the size of each resource file must be limited to 15 kb to obtain the best cache behavior. The iPhone can cache up to 105 resource files smaller than 15 kb. After the maximum number of cached files is reached, the new cached files overwrite the old files in the cache.

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

Although the iPhone can cache many resource files, the maximum number of available bytes in the cache is about 105*15 = 1575KB.

3) Clear the HTTP cache after the device is shut down.

If you need to force restart the device, the resources in the cache will be lost. This is because on the iPhone, Safari allocates space from the system memory to create cache files, but does not write cache components into persistent storage devices.

4) disabling the tab also clears the HTTP cache.

Disable all tags, leave only blank tags, and then disable Safari to clear the cache.

From the perspective of development, this type of cache is unreliable. Because it is too frequent to clear, it is difficult to cache most resources of a modern web page. Even the JavaScript framework or CSS files that are compressed to the extreme are difficult to keep the size within 15 kb, not to mention that almost all the images used by Web applications exceed this size. Fortunately, we still have a better choice to achieve our goal, that is, the offline function provided by html5.

4. Merge CSS and JavaScript files.

5. Reduce DOM operations.

Ii. Image optimization.

1. Optimize the color depth.

2. Use the CSS Sprite.

3. Do not scale the image.

Always use an image of the appropriate size based on the device's viewport or the width and height of the design element. Do not expect Safari to automatically scale an image to a proper size. The only exception is that when you insert an image to a Web application of a specified device, you can set the width to 100% to adapt to the landscape or landscape view at the same time.

This rule can also shorten the webpage loading time and the latency caused to the user experience every time JavaScript is run on the page. It is very important to abide by this rule, at the same time, don't forget to set the width and height for the image, which also helps reduce the rendering time. This rule also shortens the webpage loading time and the latency caused to the user experience each time JavaScript is run on the page.

3. Apply compression.

Safari supports GZIP compression, so compressing some resources of Web applications is a good idea, which can improve the user experience level. We can decide when to compress HTML5 pages, CSS3 style sheets, or JavaScript code, but there is no need to compress images or PDF documents because these types of resources have been compressed. Compressing images or PDF files is a waste of CPU resources and may even increase the file size.

For servers, in order to use resources that can be compressed by GIP for Web applications, the server must be configured to automatically provide compressed resources during requests. On the other hand, the client must support such compressed files.

GIP compression is not limited by the file format, so this is the easiest way to "slim down" webpages. GZIP compression can reduce the file size by about 70%.

Although the benefits are obvious, the world is not perfect. In general, GZIP compression also has some shortcomings.

1. We need all browsers that support GZIP compression. Of course, this is not a problem for us, because Safari and other WebKit-based browsers support GZip.

2. We cannot compress the force sheets and PDF files because they are a compression format.

3. Because Safari needs to extract resources in real time, in some cases, this process will increase the CPU clock cycle and overhead, thus offsetting the possible benefits. Therefore, it is best to test it first to ensure that these additional overhead will not cause more harm than profit.

4. Availability optimization.

1. Check Availability.

2. availability test.

 

 

Reference: iOS Web Application Development