How to optimize web apps running on webkit

Recently, the company has a web app project running on the mobile android system, and found that the web pages running smoothly on the computer are not fluent on the mobile webkit. It cannot compete with native apps. HTML5 performance is really confusing...

Later, I found that the web apps of Netflix network TV service providers abroad were all implemented in HTML5, and they ran on more than 250 mobile devices two years ago and listed in more than 40 countries, the UI is very smooth. So I think HTML5 is barely saved.

The company found Netflix materials and decided to further optimize its web app project. So far, the results have been very remarkable. The following is the optimization point:

1. Replace the class with the inline style setting, that is, directly set the style to change the style.

I couldn't understand this at the beginning, but it was tested at least on the mobile webkit kernel browser with poor hardware performance.

2. Some css selector writing methods will be exported to deep repainting, and such css selector writing methods should be avoided, such:

. List-showing # browse {... }

 

3. When the duration Attribute in webkit-transition is greater than 0, repeated re-painting may occur during the animation cycle.

 

4. reuse instead of allocate & destroy

Reuse instead of re-declaring creation and destruction, reuse the existing dom instead of creating a new one to delete the old one, to reduce dom tree updates

 

5. don't do in software what can be handled by hardware

Hardware acceleration can be used with hardware acceleration. The hardware acceleration method is directly painted, and computing, rendering, and painting are required instead of hardware acceleration.

 

6. Pay attention to the following css attributes:

-Webkit-gradient

-Webkit-box-shadow

Background-position

Background-repeat

Border

Use them as appropriate

 

7. Static Image Rendering is always faster than css Rendering

Css needs to be drawn by cpu. Once the image is downloaded, the rendering speed is always faster than that implemented by css. the css rendering effect must be re-computed, rendered, and drawn on the layout.

 

8. Try to make fewer animations. If necessary, use transition.

It is better to support each device;

There are also many animation attributes;

The rendering engine will optimize this;

-Webkit-transition-property: opacity,-webkit-transform; these two attributes do not need to be re-painted during hardware acceleration.

 

9. force certain elements to have hardware acceleration capabilities

-Webkit-transform: translateZ (0 );

This property is like zoom: 1 in the past, which does not sound the effect, but does make the corresponding element have the hardware capability.

 

10. Memory considerations

Avoid unlimited memory growth;

Should discard at least the re-creation element (dom );

When video is set to display: none, the memory may be released;

Too many objects will lead to frequent and slow garbage collection;

Closure or something will cause the memory to continue to rise;

 

11. layer (I understand it as div)

Number of reduced Layers

The smaller the layer, the better.

Update the layer as few as possible

Rational combination Layer

 

================================ I am ====================================

Enable the browser debugging function safari (on mac OS, I don't know if there is wood on windows, as if safari6.0 had wood on windows)

To display the debug menu items in safari, enter

Defaults write com. apple. Safari \ IncludeInternalDebugMenu 1

Then you can see an additional debug option on the safari menu bar.

Find show composition borders in the debug menu, and then you can see the status of each area of Your webpage.

Color Block description:

1. Red compositing layer

Indicates the combination layer, and the number in the upper left corner indicates the number of recalculations.

The rendering layer is flattened (pixel-based) into a single image format and sometimes mapped to the GPU texture.

2. Yellow container layer

Indicates the content layer. no backing surface-the child element is a layer.

3. Blue overflow box

No backing surface-debugging tool. (I don't know how to translate it, but this does not affect it)

4. Green tiled layer

Layer Width or height: 1024px

 

 

Similar debugging functions are also available in chrome (both mac OS and windows)

Enter about: flags in the address bar of the chrome browser.

Then Enable the composited render layer borders option.

 

Note: Reprinted please indicate the source blog Garden: Green Tea-continued (steal rice cat) email: willian12345@126.com