性能优化
性能优化
多使用内存、缓存或其他方法
减少CPU计算量，减少网络加载耗时
(适用于所有编程的性能优化——空间换时间)
如何入手
让加载更快 静态资源
减少资源体积︰压缩代码
减少访问次数:合并代码，懒加载，SSR服务器端渲染，缓存
SSR： 服务器端渲染:将网页和数据一起加载，一起渲染 非SSR（前后端分离):先加载网页，再加载数据，再渲染数据
使用更快的网络:CDN
分片：指得是将资源分布到不同的主机，这是为了突破浏览器对同一台主机建立tcp连接的数量限制，一般为6~8个。现代网站的资源数量有50~100个很常见，所以将资源分布到不同的主机上，可以建立更多的tcp请求，降低请求耗时，从而提升网页速度。
升级协议：可以升级我们的网络协议，比如使用HTTP2，quic 之类的，代替之前的http1.1，从协议层优化资源的加载。
让渲染更快
- 防止阻塞渲染
CSS放在head ,JS放在body最下面
- 减少重绘和回流
js尽量少访问dom节点和css 属性
尽可能的为产生动画的 HTML 元素使用 fixed 或 absolute 的 position ，那么修改他们的 CSS 是不会 Reflow 的
img标签要设置高宽，以减少重绘重排
把DOM离线后修改，如将一个dom脱离文档流，比如display：none ，再修改属性，这里只发生一次回流。
尽量用 transform 来做形变和位移，不会造成回流
- 提高代码质量
1）html：
dom的层级尽量不要太深，否则会增加dom树构建的时间，js访问深层的dom也会造成更大的负担。 meta标签里需要定义文档的编码，便于浏览器解析
2）css：
减少 CSS 嵌套层级和选择适当的选择器，
对于首屏的关键css 可以使用style标签内联。
3）js：
减少通过JavaScript代码修改元素样式，尽量使用修改class名方式操作样式或动画
访问dom节点时需要对dom节点转存，防止循环中重复访问dom节点造成性能损耗。
慎用 定时器 和 计时器， 使用完后需要销毁。
用于复杂计算的js代码可以放在worker进程中运行
对于一些高频的回调需要对其节流和消抖，就是 debounce 和 throttle 这两个函数。比如scroll和touch事件
懒加载（图片懒加载，上滑加载更多)
尽早开始执行JS，用DOMContentLoaded触发