web前端---网页的性能优化

网络层面优化

1. 减少http请求，合并资源（js、css、图片）
2. 大量数据加载或大量图片加载时使用懒加载或预加载优化
3. 使用按需加载，加快首屏渲染速度
4. 利用http缓存机制，对资源进行缓存
5. 网站用到很多域名时，可使用DNS预解析，提前解析域名
6. 使用CDN给网站静态资源加速

js 层面优化

1. 将脚本放到页面底部
2. 将javascript和css从外部引入
3. 减少资源体积，压缩javascript、css和图片
4. 删除不需要的脚本
5. 合理设计事件监听器
6. 尽量减少DOM操作，DOM操作尽量做到批量更新，减少页面回流和重绘
7. 避免内存泄漏，及时清理已经没用的定时器、挂载的事件和其他引用
8. 合理使用事件委托，避免给大量子元素添加相同事件
9. 使用变量缓存多次使用的资源，避免每次使用都去获取或计算
10. 频繁执行的函数使用节流或防抖进行优化
11. 有大量数据需运算时，开启Web Worker多线程进行计算可避免js主线程阻塞
12. js文件引入放置在HTML body尾部，因为js的加载、执行会阻塞页面渲染

https://blog.csdn.net/qq_38160012/article/details/80556158
感觉这个写的比较好，比较全面，引用一下