How to optimize running on webkit on web app

 

Recently the company has a web app project runs on the mobile version of the android system, found on the computer running very smooth web pages on the mobile version webkit very smooth. And native app can not be comparable. HTML5 performance really is tangled ah the egg pain ...

 

later found abroad Netflix Internet TV service provider web app, full of HTML5 to achieve, but two years ago and ran in the more than 250 kinds of mobile devices, in more than 40 countries listed, UI is very smooth . Therefore, I think HTML5 is still barely saved.

 

company looking for a Netflix data, the decision on their own web app project was further optimized, so far the effect is very obvious. No nonsense, is to optimize the following points:

 

1, use inline styles instead of setting change class, that is directly set style to change the style

 

this point, I can not understand the beginning, but after testing at least in the poor performance of the hardware kernel mobile version webkit browser is such

 

2, some css selector wording will lead to a depth repaint, you should avoid such wording css selectors, such as:

 

. list-showing # browse {...}

 

 

3, when the duration webkit-transition property is greater than 0, the animation cycle will lead to repeated repainting

 

 

4, reuse instead of allocate & destroy

 

reuse instead of re-affirm creation and destruction, reuse existing dom instead of creating a new delete old to reduce the dom tree update

 

 

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

 

use hardware acceleration on the use of hardware acceleration, hardware acceleration is to paint it directly, rather than hardware acceleration mode requires calculation, rendering, and then paint

 

 

6, the following css properties to note

 

-webkit-gradient

 

-webkit-box-shadow

 

background-position

 

background-repeat

 

border

 

appropriate choice to use them

 

 

7, static image rendering is always faster than css rendering

 

css cpu need to draw, once the download is complete picture, rendering speed is always a way to achieve faster than css, css rendering effects need to be recalculated on the layout, rendering, drawing

 

 

8, as little as possible to do animation, if you want, use the transition

 

supported on each device better;

 

corresponding animation property is greater;

 

this rendering engine optimization;

 

-webkit-transition-property: opacity,-webkit-transform; these two properties do not need to redraw the hardware-accelerated

 

 

9, certain elements have forced hardware acceleration capabilities

 

-webkit-transform: translateZ (0);

 

and this property is like the previous zoom: 1 did not produce any results cited loud, but it does make the corresponding element has the hardware capabilities matter

 

 

10, memory, attention items

 

avoid memory grow indefinitely;

 

should lose the least re-create elements (dom);

 

video is set to display: none may be freed memory;

 

too many objects cause frequent and very slow garbage collection;

 What

closures cause memory continued to rise;

 

 

11, layer (I understood as a div)

 reducing the number of layers

 

layer to keep the smaller the better

 

as little as possible to update the layer

 

rational combination of layers

 

 

=============================== i am dividing line ========== ==========================

 

how to use the debugging tools to help optimize?

 

open the browser debugging features safari (I was on the mac os, windows do not know there is wood there, it seems safari6.0 rear windows on wood with)

 

in safari debug menu item is displayed, you need to enter in the terminal program

 

defaults write com.apple.Safari \ IncludeInternalDebugMenu 1

 

then you can see on the menu bar at the safari more than one debug option

 

 

in the debug menu item found inside show composition borders, then you can see your pages each region of the state of the

 

 

 

color Description:

 

1, Red compositing layer

 

represents a combination of layers, the upper left corner of the figure represents the number of recalculations Recalculate

 

render layers will be flattened (pixelated) into a single picture form, sometimes the texture is mapped to the GPU

 

2, yellow container layer

 

representative of the content layer, no red layer (no backing surface) - sub-elements for the layer

 

3, cyan overflow box

 

no backing surface-debugging tool. (do not know how to translate, but this does not affect)

 

4, green tiled layer

 

layer wide or tall at 1024px

 

 

 

chrome has a similar debugging capabilities, (mac os, windows are)

 

in the chrome browser address bar enter about: flags

 

then composited render layer borders this option Enable

 

 

 

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