14 suggestions for html5 experience optimization page loading

14 suggestions for html5 experience optimization page loading
14 suggestions for html5 experience optimization page loading 1. fake page-acceleration target for the first screen: Within 3 s because 71% of users expect mobile pages to be as fast as pc pages (3 s), 74% of users can tolerate 5 seconds of response, therefore, we must ensure that the mobile page has sufficient speed. Solution:-to avoid a long white page, page rendering only requires complete HTML and CSS-after loading, the first screen of the page is rendered, then asynchronously load js-static resources do not use cookies-optimized loading sequence css header and js Tail 2. reduce request "count"-merge CSS and JS files that can be merged-CSS sprites merge Image resources 3. reduce Request volume-reasonably use image resources (process large charts and use vector images)-JavaScript obfuscation (simplify function names, variable names, remove spaces to reduce the JS file size)-plan a third-party tool library to reduce unnecessary references-enable GZIP compression-Zepto replace JQuery 4. cache everything that can be cached-page cache (manifest, reduce server pressure, speed up page loading)-data cache (localStorage/indexedDataBase)-only cache non-sensitive information 5. make Rational Use of Ajax Get and Post-Post methods in The JAX request will be split into two types: sending header first, and then sending data-Get. Fewer data is submitted.-Post is relatively safer. 6. use a reasonable image loading scheme-delayed loading: use setTimeOut or setInterval for loading delay-conditional loading: asynchronous download starts only when certain conditions are met or some events are triggered-visual area loading: that is, load only the area that the user can see. This is mainly implemented by the monitoring scroll bar. It is usually loaded some time before the user can see an image, this ensures that the user can see the picture properly when pulling down. 7. reduce rendering reflux-HTML rendering process | generate DOM tree | calculate CSS style | build render tree | reflow, positioning element location size | drawing pages-these operations will lead to backflow | dom structure | animation | DOM style modification | get element size API note: if javascript dynamically changes the DOM Tree, it will cause reflo. W page element change, as long as it does not affect the size, for example, only the color change will cause repaint will not cause reflux 8. reduce the issue that may occur when the location element-static is in the Document Stream and the rendering speed is the fastest-absolute location element on the mobile phone: -The positioning element cannot be displayed on the mobile phone.-The animation effect of the positioning element is invalid. -The above problem is caused by the failure of UI rendering. The best solution is to reduce the use of positioning elements, otherwise, only a strong reflow can be triggered to solve the problem caused by the-Fix positioning element-the fixed element becomes invalid when it encounters a text box, and may float in the middle of the page to block the Input-affecting efficiency 9. manually release resources-not completely dependent on browser garbage **-resources must be manually released | release unused closures | the observer needs to be cleared | release the timer | during view switching, release view-related resources in destroy 10. area rolling use Iscroll-webapp area rolling-solve the problem of long and short pages caused by the animation process 11. touch event replacement Click-Click response is 300 ms slower than Touch (the mobile phone needs to know if you want to double-Click to enlarge the webpage content)-solve the problem of the length of pages caused by the animation process-In summary, the IScroll solution is to bring webapps closer than native apps, and the true stability still requires browser support 12. rational use of CSS features-do not use CSS fonts-avoid using CSS expressions-high-frequency rendering triggers GPU acceleration (CSS3transitionsCSS3 3D transforms) 13. do not use DataURI-resolution by cost-the mobile-end DataURI is 6 times slower than a simple external link resource. 14. reasonable Use of Canvas animation-Canvas is a state machine, reducing state switching can improve efficiency-Canvas layered rendering-less shadow-canvas. WIDTH1: = canvas. WIDTH1: replace context. clearRect (0, 0, WIDTH1:, HEIGHT1)-Coordinate System integer-use requeatAnimationFrame-Discard settimeout Animation