前端性能优化
1. DOM方面的优化
- 缓存DOM
const div = document.getElementById('div')
由于查询DOM比较耗时，在同一个节点无需多次查询的情况下，可以缓存DOM
- 减少DOM深度及DOM数量
HTML 中标签元素越多，标签的层级越深，浏览器解析DOM并绘制到浏览器中所花的时间就越长，所以应尽可能保持 DOM 元素简洁和层级较少。
- 减少DOM操作次数，批量操作DOM
由于DOM操作比较耗时，且可能会造成回流，因此要避免频繁操作DOM，可以批量操作DOM，先用字符串拼接完毕，再用innerHTML更新DOM
- DOM元素离线更新
对DOM进行相关操作时，例、appendChild等都可以使用Document Fragment对象进行离线操作，带元素“组装”完成后再一次插入页面，或者使用display:none 对元素隐藏，在元素“消失”后进行相关操作
- DOM读写分离
浏览器具有惰性渲染机制，连接多次修改DOM可能只触发浏览器的一次渲染。而如果修改DOM后，立即读取DOM。为了保证读取到正确的DOM值，会触发浏览器的一次渲染。因此，修改DOM的操作要与访问DOM分开进行
- 事件代理
事件代理是指将事件监听器注册在父级元素上，由于子元素的事件会通过事件冒泡的方式向上传播到父节点，因此，可以由父节点的监听函数统一处理多个子元素的事件。利用事件代理，可以减少内存使用，提高性能及降低代码复杂度
- 防抖和节流
使用函数节流（throttle）或函数去抖（debounce），限制某一个方法的频繁触发
2. 减少http请求
把JS CSS 图片文件进行压缩，合并
合理使用http缓存：使用cache-control或expires这类强缓存时，缓存不过期的情况下，不向服务器发送请求。强缓存过期时，会使用last-modified或etag这类协商缓存，向服务器发送请求，如果资源没有变化，则服务器返回304响应，浏览器继续从本地缓存加载资源；如果资源更新了，则服务器将更新后的资源发送到浏览器，并返回200响应
图片懒加载
3. CSS方面的优化
- 避免使用 CSS 表达式
- 不使用CSS @import，会造成额外的请求，使用
<link>代替 - CSS使用标签放在顶部，JS放在底部
