这是我参与「第五届青训营 」伴学笔记创作活动的第7天
前端bug特点
- 多平台：web、nodejs、小程序
- 多环境：本地、线上
- 多工具：chrome
- 多技巧：clg、breakpoint
web上chrome调试
chrome
- .cls可以修改样式
- 右键代码可以强制激活伪类
log
console有多种日志等级 console.table()打印数组 console.debug——chrome不支持 console.time和console.timeEnd这两个方法可以用来让WEB开发人员测量一个javascript脚本程序执行消耗的时间。
断点调试web debugger
在source界面
压缩后代码调试
利用压缩和混淆将代码变得不可阅读 sourceMap——可以找到报错的源码
network
请求的资源
performance网络性能
利用此工具进行优化
录制后进行分析，查看丢帧，render渲染/http请求耗时
offset会对浏览器所有进行重绘重排，
Lighthouse
性能分析指标
移动端调试
移动端由于没有做过相应的开发，因此未认真看
虚拟滚动
补上一段今天学习的虚拟滚动吧
资料——虚拟滚动的三种实现思路
针对大列表渲染的场景(如全国城市列表、通讯录列表、聊天记录列表) 当列表数量级达到上千，页面渲染或操作就可能会出现卡顿，而当列表数量突破上万甚至十几万时，网页可能会出现严重卡顿甚至直接崩溃。为了解决大列表造成的渲染压力，便出现了虚拟滚动技术。
卡顿原因在于
- js脚本时间
- dom渲染时间
减少列表子项可以有效缓解压力——按需渲染
只渲染某一时刻用户看的到的内容，当用户滚动页面时，再通过JS的计算重现调整视窗内的内容
实现
- 确定当前视窗
- 确定当前渲染那些节点
- 把渲染节点移动到视窗内
transform
通过监听滚动区域的滚动事件，动态计算视窗内渲染节点的开始索引以及偏移量，然后重新触发渲染节点的渲染并将内容通过transform属性将该部分内容移动到视窗内。
数据
与懒加载不同，虚拟滚动需要一次性获取所有数据，但是只显示屏幕可见范围内的数据
代码
其中使用了节流方法限制多次滚动产生的多个请求
可以通过修改throttling()函数第二个参数，即变得明显——加载速度慢，clg输出1的速度也会变慢
如修改成2000，则不论怎么滚动，都只输出一次111
