前端优化总结

资源合并

// 未合并
<script src="a.js"></script>
<script src="b.js"></script>
<script src="c.js"></script>

// 合并之后，可以减少请求
<script src="abc.js"></script>

缓存

• 静态资源加hash后缀，根据文件内容计算hash
• 文件内容不变，则hash不变，则url不变
• url和文件不变，则会自动触发http缓存机制，返回304

使用CDN

例：https://www.bootcdn.cn/

SSR服务的渲染（server side render）

• 服务端渲染：将网页和数据一起加载，一起渲染
• 非SSR（前后端分离）：先加载网页，再加载数据，再渲染数据

图片懒加载

​

缓存DOM查询

多个DOM操作一起插入到DOM结构

​

尽早开始JS执行

​