优化策略
- 多使用内存、缓存或其他方法
- 减少CPU计算、减少网络
入手
- 加载页面和静态资源
- 页面渲染
加载资源优化
- 静态资源的压缩合并
- 静态资源缓存（如jquery版本更换）
- 使用cdn让资源加载更快一些（不同区域的网络优化）
- 使用ssr后端渲染，数据直接输出到HTML中（vue、angular出来后提出的概念）之前的asp、jsp页面，数据不是先写html,然后将数据通过ajax渲染到页面中
渲染优化
- css放前面，js放后面
- 懒加载（图片懒加载、下拉加载更多）
- 减少DOM 查询，对DOM查询做缓存
- 减少DOM操作，多个操作尽量合并在一起执行
- 事件节流
- 尽早执行操作（如：DOMContentLoaded）
示例
- 资源合并
image.png
- 缓存
- 通过连接名称缓存
- 只有内容改变的时候，链接名称才会改变
image.png
image.png
- cdn
image.png
- 使用SSR后端渲染
- 现在react vue提出了这样的概念（先拉出模板再通过ajax获取数据）
- jsp php asp都属于后端渲染（数据可以直接输出到HTML中，不通过AJAX）
- 懒加载
image.png
- 缓存DOM查询
image.png
- 合并DOM查询
image.png
frag先定义一个片段，将10个li依次插入片段中，这个时候不会频繁的做DOM查询操作，最后将片段插入到listNode中
- 事件节流
image.png
当连续输入ABCDE,会触发多次change事件。解决办法是当用户输入ABCDE完了停下来的时候，这个时候再触发change操作，减少操作次数（计算）
- 尽早操作
image.png
jquery zepto都是通过第二种方式
