1. Front-end performance optimization

Reducing data requests

  • Js file merge compression
  • Merge and compress CSS files
  • Use the right size image, do not zoom the image
  • Use Sprite
  • Use font ICONS
  • Use image lazy loading
  • Small images use Base64 images
  • Using page caching
  • Cancel audio and video preloading

Code writing habits

  • Reduce manipulation of the DOM (reduce DOM backflow and redrawing) using a data-driven framework
  • For animation, can use CSS to solve for a long time without js (don’t use CSS styles, if you can do it with the transform transfrom: translateZ (0) open hardware acceleration, won’t cause reflux, or use the positioning of the elements can also, from the document flow, RequestAnimationFrames (which stop when the browser is asleep, reducing unnecessary consumption) can be resolved using requestAnimationFrames
  • Avoid iframe (it can nest pages and render children when the parent page is rendered
  • Use event delegates whenever possible
  • Avoid using dead loops and loop nested loops
  • Low coupling and high cohesion, as far as possible to achieve code encapsulation, reduce redundant code
  • Asynchronous programming is used in the project to simulate multithreading as much as possible to avoid main thread blocking
  • Minimize the use of CSS expressions, and if you must use them, keep them separate from reading and writing
  • Function tremble and function throttling
  • Reduce the use of filter filters
  • Minimize the hierarchy of CSS selectors
  • Do not use a table layout
  • Manually reclaim stack memory (assigned to NULL)
  • Reduce the use of eval (the main reason is to prevent errors caused by improper notation writing during code compression)
  • Reduce the use of closures in JS (prone to memory leaks)

Enable Gzip compression