Resource consolidation
// 未合并
<script src="a.js"></script>
<script src="b.js"></script>
<script src="c.js"></script>
// 合并之后，可以减少请求
<script src="abc.js"></script>
Cache
- Add hash suffix to static resources and calculate hash based on file content
- The content of the file is unchanged, the hash is unchanged, and the url is unchanged
- If the url and file are unchanged, the http caching mechanism will be triggered automatically, and 304 will be returned
Use CDN
Example: https://www.bootcdn.cn/
SSR service rendering (server side render)
- Server-side rendering: load web pages and data together, and render them together
- Non-SSR (front-end and back-end separation): load the web page first, then load the data, and then render the data
Image lazy loading
Cache DOM query
Multiple DOM operations are inserted into the DOM structure together
Start JS execution as early as possible
