Reasons for slow loading of front-end pages and performance optimization issues

1. Reasons for Slow Page Loading

When we open a webpage and the page loads slowly, the possible reasons are as follows:
(1) Too many http requests
(2) JS threads are occupied for a long time
(3) There are many page reflows and redraws
(4) Resource loading Blockage
(5) Memory leaks lead to excessive memory
(6) Dom nodes or events occupy too much memory
(7) Occupy js threads for a long time (
8) Resource loading blocking
(9) More page reflows and redraws

2. Front-end performance optimization method

Optimization principles:
(1) Reduce http requests (use Sprite, Base64, font icons, etc. for pictures, reduce redirection, use cache, do not use css@import, and avoid using empty src and href) (2) Resource compression and merging
( Including html compression, css compression, js compression and confusion, file merging, etc.)
(3) Optimize network connections (use CDN, DNS pre-analysis, use keep-alive or persistent to establish persistent connections)
(4) Optimize resource loading, code disassembly Divide, load on demand, reduce the blocking of CSS on rendering, load CSS as soon as possible, reduce the size of loading
(5) reduce redrawing reflow
(6) webpack performance optimization (package public code, dynamic import and on-demand loading, delete useless Code, long cache optimization, common code inline)
(7) Reduce the use of iframes
(8) Avoid table layout
(9) Try to use external links for css and js
(10) Avoid adding new attributes after instantiation
(11) Avoid reading Exceeding the length of the array
(12) avoids element type conversion

---

Original reference link: Seven methods of front-end performance optimization