1. Lazy loading of images

The principle of picture lazy loading technology: the SRC attribute of the picture is set as the placeholder map of the picture, the data-original attribute of the picture is set as the real address of the picture, and the real address of the picture is assigned to SRC through the trigger of an event callback in the front end.

2. Basic performance optimization:
  • Amount of code: CSS Try not to use CSS expressions (which can be implemented through the pre-compiled syntax of CSS such as LESS, SASS, stylus, etc.) and avoid advanced selectors.
  • The number of requests: the more requests, the more occupied the browser process, the result is the page load wait time is too long, the solution is: extract common style, merge style script file, use Sprite diagram, static resources on demand, paging load, etc.
  • Cache utilization: Cookies, sessionStorage, and localStorage can be cached in the browser memory or system memory for data that occupies a large amount of memory and does not need to be changed all the time.
  • Request bandwidth: Code to be published can be compressed and obfuscated before coming online.

###### Mobile optimization

  • Speed up the rendering engine (hardware) using CSS3 animations, transitions, gradients, etc
  • Use touch instead of Click, which is 300ms later than Touch
3. Mobile optimization
  • Use CSS3 animation to enable hardware acceleration
  • Use Touch, not Click
  • This can be accelerated using Transform :translateZ(0)