🐕🦺性能优化技术
# 🐕🦺性能优化技术
# 性能优化知识体系
暂时接触不到这部分的内容（毕竟咱暂时就是个实习生 做到代码规范&减少冗余代码、冗余变量&使用合适的编码手段实现需求就很ok了）-2022/3/6
- 大数据渲染问题
- CDN
- 回流（重排）& 重绘
- 节流 & 防抖
- 这部分要求熟练掌握，尤其是简单实现手写这二者的操作
#
# 大量数据渲染问题
# 假设一个列表有十万条数据 应该如何渲染
- 数据分页
- 懒加载
- 数组分块
- 为要处理的项目创建一个队列 使用定时器每过一段时间取出一部分内容 然后再设置一个定时器（有点像节流的实现细节 但是目的不同~
# 虚拟滚动
「前端进阶」高性能渲染十万条数据(虚拟列表) - 掘金 (juejin.cn) (opens new window)
虚拟列表其实是按需显示的一种实现，即只对可见区域进行渲染，对非可见区域中的数据不渲染或部分渲染的技术，从而达到极高的渲染性能。假设有1万条记录需要同时渲染，我们屏幕的
可见区域的高度为500px,而列表项的高度为50px，则此时我们在屏幕中最多只能看到10个列表项，那么在首次渲染的时候，我们只需加载10条即可。
使用
javascript来控制元素、维护滚动偏移量。目前github也有很多的开源框架，是选择自己自研还是现有方案，需要团队做技术调研。
滑到一个区域之后再去将对应去与内容进行渲染
# 使用Worker来计算
众所周知，
javascript是单线程的，如果将所有的计算code写在UI层，就会造成页面的卡死。使用Worker可以将其独立出来，但是里面有大量的坑需要踩踩。
# 数据切片
请求数据的时候不是请求所有的数据，而是只请求在一个range内的数据，避免与Worker传输大量数据，造成性能问题。
# 提升用户体验的手段
- 从选中到编辑，以及敏感的键盘响应
- 对于中文输入法在表格中的使用体验
- 移动设备键盘弹起之后对页面的影响
要是想让用户体验提升，就要让用户的体验尽可能的贴近桌面端的使用，例如基础的，对上下左右箭头的响应，对于tab，enter按键的监听；进阶的对于一些冷门API的使用；对于不同的浏览器平台和使用设备，都需要做不同的适配。
# 懒加载
# 浏览器灵魂之问 第11篇: 实现图片懒加载 (opens new window)
# CDN的原理、应用
# 回流与重绘
# 节流与防抖
# 浏览器灵魂之问 第10篇: 实现事件的防抖和节流 (opens new window)
# 用吃巧克力来理解 防抖和节流！ (opens new window)
# 防抖与节流的应用场景
可以尝试手写
函数防抖是指在事件被触发 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。
- 防抖 debounce
- 当用户在短时间内，多次点击登陆，发送短信等请求数据的操作时
- 文本编辑器一段时间不操作，进行自动保存
- 搜索框的联想——实时发送请求
- 用户输入文字，只在停顿1s时才进行联想
固定的时间内只执行一次
- 节流 throttle
- 鼠标mouseover事件，只执行一次时
- 页面滚动，每隔1s（固定的时间）才计算一次位置信息，避免边滚动边计算