浅谈前端js面试--运行环境（性能优化）

优化策略

• 多使用内存、缓存或其他方法
• 减少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都是通过第二种方式