瀑布流

Author: 张东

configure/difficult.md

@@ -70,3 +70,19 @@ ui方面有两种实现分别是使用treeview或者webview，最终选择使用
 * 进行语法分析，根据编程语言的语法规则，将Tokens组合成AST,语法分析器会检验代码是否符合语法规范
 
 ## 组件库
+## 瀑布流
+描述
+这个瀑布流不太一样，他有搜索功能，瀑布流下的商品列表里附带sku信息，点击不同的sku展示的图片也会发生变化，也就是高度会发生变化，并且我想做成懒加载和响应式的。也就是根据屏幕会变化列数
+
+实现思路
+对于瀑布流，因为我要实现响应式的，所以首先我需要拿到瀑布流组件的宽度，根据断点判断应该展示n列，因为我不想组件跟业务耦合，所以请求api都是放在外面，然后我将列数emit到父组件，父组件会watch列数。在watch的回调里会发送第一次请求，请求的pageSize我是设置为n*8,对于瀑布流要先拿到它的高度，开始我想让后端返回高宽比，后来我自己看华为云obs文档，发现可以通过api的方式获取图片信息。所以拿到数据后我请求api将高宽比添加进来。将数据传递给瀑布流组件，首先要声明一个n长度的数组记录每一列的高度，以及一个n长度的数组，里面的元素都是数组。遍历数据，从高度最低的列添加元素，添加之后更新高度数组
+性能优化
+1. 主要是图片方面,为了降低FCP,LCP
+* 可以使用preconnect提前建立与oss域名的连接，当然如果需要与多个第三方域建立连接，全部preconnect可能会适得其反，可以替换为dns-prefetch
+* 我观察到现在的协议是http1.1，可以使用http2解决队头阻塞的问题，当然http2也只是解决了http层的阻塞，tcp层的阻塞没有解决，http3就是为了解决tcp层的队头阻塞问题，他使用的是quic协议，基于utp而非tcp，所有下一代方案是使用http3
+* 图片格式可以转成webp格式，按照华为云obs文档，在url上添加请求参数可以返回webp格式图片，但是这么请求的图片不会被http缓存，并且每请求一次都会重新进行格式转化，成本会大幅上升。所有需要上传的时候就将图片转成webp格式存放在桶里，返回的时候返回webp即可
+* 按照需求控制图片请求大小，虽然我这里是做的响应式布局，但是我会以第一次计算的列宽作为图片宽度请求,但会回到之前那个问题也就是不会被http缓存，这样虽然可以加速首屏，但是之后每次都需要重新获取。这里有一种比较现代的解决方案，也就是使用service worker。我会拦截指定的oss地址请求，如果没有命中会放入cache中，命中则从cache中取。当然也可以给缓存设置过期时间，类似于强缓存的效果
+
+用户体验上
+1. ui上的要求是滚动时隐藏搜索条件，使用了vue的内置组件transion实现了v-if的动画。
+2. 对于瀑布流组件需要先获取数据才能渲染，为了视觉不会太突兀，这里准备了一个骨架屏