1, the principle of
(1) a multi-use memory, cache, or other methods.
(2) reduce the cpu usage, reduce network.
Ways to improve page performance What?
A loading pages and static resources
1, static compression merge resources and reduce http requests.
(1) reducing the number of http request
(2) to reduce the size of the resource request
2, the non-core code loaded asynchronously.
3, static resource cache: cache control through the link name, only when the content changes, the link name will change.
4, using the browser cache
5, cdn make use of the resources load faster
6, the pre-analytical dns
7, using ssr back-end rendering, data output directly to the html (ssr: server site render)
Second, the page rendering
1, css, js and placement
(1) to avoid writing style attribute in the HTML tag
(2) placed in front of CSS, js put back.
(3) Avoid using Expression CSS
2, picture
(1) pictures and iFrame avoid such empty Src. Src empty reloads the current page, affect the speed and efficiency
(2) lazy loading (picture lazy loading, pull down to load more)
3, dom operations
(1) to reduce the query dom, dom query to do caching.
(2) reduction dom operation, a plurality of possible operations performed combined.
(3) instead of innerHTML DOM operations, reducing the number of DOM operations, optimize performance javascript
4, the event
(1) performs an operation (e.g., the DOMContentLoaded) as soon as possible
(2) the event choke
5, details of the code optimization
(1) to optimize the use hash-table lookup
(2) multiple variables declared the merger
(3) less global variables
(4) to avoid global query
(5) Avoid using with (with creates its own scope will increase the scope chain length)
(6) with a page to avoid loss of response setTimeout
three mobile terminal performance optimization
. 1, CSS
(. 1) do not abuse Float. Float when rendering computationally intensive, minimize the use of
(2) do not abuse the Web font. Web fonts need to download, parse, redraw the current page, minimize the use.
(3) Avoid using css3 gradient shading effect.
2, css animation
(1) to make use css3 animation, open hardware acceleration.
You can transform: translateZ (0) to turn on hardware acceleration.
The CSS property (CSS3 transitions, CSS3 3D transforms, Opacity, Canvas, WebGL, Video) will trigger GPU rendering, reasonable use. Excessive use will lead to increase in power consumption over the phone
3, the rational use of requestAnimationFrame animation instead of the setTimeout
4, the appropriate use of touch event instead of click event.
----------------