瀑布流

Author: zhangdong

configure/difficult.md

@@ -72,25 +72,31 @@ ui方面有两种实现分别是使用treeview或者webview，最终选择使用
 ## 组件库
 ## 瀑布流
 描述
+
 这个瀑布流不太一样，他有搜索功能，瀑布流下的商品列表里附带sku信息，点击不同的sku展示的图片也会发生变化，也就是高度会发生变化，并且我想做成懒加载和响应式的。也就是根据屏幕会变化列数
 
-实现思路
-对于瀑布流，因为我要实现响应式的，所以首先我需要拿到瀑布流组件的宽度，根据断点判断应该展示n列，因为我不想组件跟业务耦合，所以请求api都是放在外面，然后我将列数emit到父组件，父组件会watch列数。在watch的回调里会发送第一次请求，请求的pageSize我是设置为n*8,对于瀑布流要先拿到它的高度，开始我想让后端返回高宽比，后来我自己看华为云obs文档，发现可以通过api的方式获取图片信息。所以拿到数据后我请求api将高宽比添加进来。将数据传递给瀑布流组件，首先要声明一个n长度的数组记录每一列的高度，以及一个n长度的数组，里面的元素都是数组。遍历数据，从高度最低的列添加元素，添加之后更新高度数组.这样就完成了首屏的展示了.对于图片懒加载,是使用了vue的自定义指令以及web api intersectionobserve.简单来说就是在合适的时机给src赋值.然后是滚动时请求下一页,这里我自己想了一种办法,之前的intersectionobserve监听范围其实还包括视口的下300px,所以只要出现在这个位置可以认为可以请求下一页了.当然不可能每个子元素出现在这个位置都进行请求.我这边的判断逻辑是,只以第一列为准,它下面的最后一个元素触发了intersection的回调才请求下一页.最后是关于宽度改变怎么做到响应式.这里我使用到web api的resizeobserve,我会根据宽度更新应该展示多少列,然后再把元素重新分配到这些列中.然后对性能以及用户体验做了一些优化
+说一下实现思路,因为后面优化会基于这个
+
+首先对于瀑布流要先拿到它的高度，开始我想让后端返回高宽比，但是后端没时间弄,后来我自己看华为云obs文档，发现可以通过api的方式获取图片信息.对于图片懒加载,是使用了vue的自定义指令以及web api intersectionobserve.最后是关于响应式.这里我使用到web api的resizeobserve,我会根据宽度更新应该展示多少列,然后再把元素重新分配到这些列中
 
 性能优化
-1. 主要是图片方面,为了降低FCP,LCP
-* 可以使用preconnect提前建立与oss域名的连接，当然如果需要与多个第三方域建立连接，全部preconnect可能会适得其反，可以替换为dns-prefetch
-* 我观察到现在的协议是http1.1，可以使用http2解决队头阻塞的问题，当然http2也只是解决了http层的阻塞，tcp层的阻塞没有解决，http3就是为了解决tcp层的队头阻塞问题，他使用的是quic协议，基于utp而非tcp，所有下一代方案是使用http3
+
+1. 首先是图片方面,为了降低FCP,LCP
 * 图片格式可以转成webp格式，按照华为云obs文档，在url上添加请求参数可以返回webp格式图片，但是这么请求的图片不会被http缓存，并且每请求一次都会重新进行格式转化，成本会大幅上升。所有需要上传的时候就将图片转成webp格式存放在桶里，返回的时候返回webp即可
-* 按照需求控制图片请求大小，虽然我这里是做的响应式布局，但是我会以第一次计算的列宽作为图片宽度请求,但会回到之前那个问题也就是不会被http缓存，这样虽然可以加速首屏，但是之后每次都需要重新获取。这里有一种比较现代的解决方案，也就是使用service worker。我会拦截指定的oss地址请求，如果没有命中会放入cache中，命中则从cache中取。当然也可以给缓存设置过期时间，类似于强缓存的效果
+* 按照需求控制图片请求大小，虽然我这里是做的响应式布局，但是我会以第一次计算的列宽作为图片宽度请求,但会回到之前那个问题也就是不会被http缓存，这样虽然可以加速首屏，但是之后每次都需要重新获取。我是通过service worker来解决的。我会拦截指定的图片域名请求，如果没有命中会放入cache中，命中则从cache中取。当然也可以给缓存设置过期时间，类似于强缓存的效果
+* 可以使用preconnect提前建立与obs域名的连接，当然如果需要与多个第三方域建立连接，全部preconnect可能会适得其反，可以替换为dns-prefetch
+* 我观察到现在的协议是http1.1，可以使用http2解决队头阻塞的问题，当然http2也只是解决了http层的阻塞，tcp层的阻塞没有解决，http3就是为了解决tcp层的队头阻塞问题，他使用的是quic协议，基于utp而非tcp，所有下一代方案是使用http3
+* 可以使用cdn,打包后的资源使用Gzip或br压缩
+
 2.代码或者框架层面
-*  我刚才又提到我自己fetch api拿到图片信息,之前是在for循环了一个一个await拿到,但是可以并发发送请求.但由于是http1.1,所以需要写一个限制最大并发数的函数,并发数我设置的是6.
-* 刚才提到我实现了一个懒加载的自定义指令,里面new 了一个intersectionobserve,包括我看的一些文章都是这么写的.但是在我看来每张图片都会new 一个insectionobserve,这里应该可以使用单例模式,并且我在mdn看了文档,发现它可以observe某个元素,不需要可以unobserve.证明这是可行的,所以我封装了一个hook用来创建intersectionobserve实例.这样只需要一个实例既可完成监听功能
+*  我刚才又提到我自己fetch api拿到图片信息,之前是在for循环了一个一个await拿到,但是可以并发发送请求.因为每个网站都有最大连接数,需要写一个限制最大并发数的函数,并发数我设置的是6.
+* 刚才提到我实现了一个懒加载的自定义指令,每个图片里都会new 一个intersectionobserve,我想使用一个单例实现,并且我在mdn看了文档,发现它可以observe某个元素,不需要可以unobserve.证明这是可行的,所以我封装了一个hook用来创建intersectionobserve实例.这样只需要一个实例既可完成监听功能
 * 对于resizeObserve,因为他的触发频率会很高,所以使用了节流,并且将回调放在requestAnimationFrame里，还有就是我只关心它的宽度，如果宽度不变，高度改变，不会触发回调，这在初始化的时候高度会变化
-* 框架上则是使用computed缓存了一些计算结果,刚才有提到第一个请求接口我是放在watch中的,监听列数n,pagesize是n*8.这个watch也就是第一次有用,使用了vue一个比较新的配置项once.来实现一次监听即销毁
+* 框架上则是使用computed缓存了一些计算结果,有使用到watch,但是这个watch只是第一次有用,使用了vue一个比较新的配置项once.来实现一次监听即销毁
 * 最后在umounted生命周期释放之前那两个web api实例的内存占用
 
 用户体验上
+
 1. ui上的要求是滚动时隐藏搜索条件，使用了vue的内置组件transion实现了v-if的动画。
 2. 对于瀑布流组件需要先获取数据才能渲染，为了视觉不会太突兀，这里准备了一个骨架屏
 

frame/react/manage.md

@@ -127,8 +127,8 @@ useEffect(() => {
 
 这些浏览器内置组件接收用户的输入：
 
-* <input>
-* <select>
-* <textarea>
+* `<input>`
+* `<select>`
+* `<textarea>`
 
 将value作为prop 传递给这些组件会将其变为受控组件。

optimization/image.md

@@ -2,6 +2,8 @@
 layout: doc
 outline: deep
 ---
+## 测试网站
+webpagetest
 ## image cdn
 
 图片 CDN 专门用于转换、优化和交付图片。您也可以将它们视为用于访问和处理网站上使用的图片的 API。对于从图片 CDN 加载的图片，图片 URL 不仅指示要加载哪张图片，还指示尺寸、格式和质量等参数。
@@ -11,3 +13,6 @@ outline: deep
 
 ## 延迟加载图片
 
+## 识别动画/交互(滚动..)的性能影响
+![alt text](https://github.com/dddssw/-/blob/main/performance/command.png?raw=true)
+![alt text](https://github.com/dddssw/-/blob/main/performance/frame.png?raw=true)