瀑布流

Author: 张东

configure/difficult.md

@@ -86,12 +86,15 @@ ui方面有两种实现分别是使用treeview或者webview，最终选择使用
 2.代码或者框架层面
 *  我刚才又提到我自己fetch api拿到图片信息,之前是在for循环了一个一个await拿到,但是可以并发发送请求.但由于是http1.1,所以需要写一个限制最大并发数的函数,并发数我设置的是6.
 * 刚才提到我实现了一个懒加载的自定义指令,里面new 了一个intersectionobserve,包括我看的一些文章都是这么写的.但是在我看来每张图片都会new 一个insectionobserve,这里应该可以使用单例模式,并且我在mdn看了文档,发现它可以observe某个元素,不需要可以unobserve.证明这是可行的,所以我封装了一个hook用来创建intersectionobserve实例.这样只需要一个实例既可完成监听功能
-* 对于resizeObserve,因为他的触发频率会很高,所以使用了节流,并且将回调放在requestAnimationFrame里
+* 对于resizeObserve,因为他的触发频率会很高,所以使用了节流,并且将回调放在requestAnimationFrame里，还有就是我只关心它的宽度，如果宽度不变，高度改变，不会触发回调，这在初始化的时候高度会变化
 * 框架上则是使用computed缓存了一些计算结果,刚才有提到第一个请求接口我是放在watch中的,监听列数n,pagesize是n*8.这个watch也就是第一次有用,使用了vue一个比较新的配置项once.来实现一次监听即销毁
 * 最后在umounted生命周期释放之前那两个web api实例的内存占用
 
 用户体验上
 1. ui上的要求是滚动时隐藏搜索条件，使用了vue的内置组件transion实现了v-if的动画。
 2. 对于瀑布流组件需要先获取数据才能渲染，为了视觉不会太突兀，这里准备了一个骨架屏
 
+性能指标
+整体得分是从93到96，fcp提升12.5%，lcp提升18.75%，speed index提升了27.27%，在低速网络下因为骨架屏会造成一些cls偏移
+
 本来想加个虚拟列表的功能,但是因为子元素的高度是会变化的,重新计算高度应该不会造成性能问题,有性能问题也可以放到web worker里执行,但是因为虚拟列表部分dom不会渲染,刚才我那个自定义指令因为没有渲染请求下一页好像不会执行,这个问题我还在研究.