性能优化

Author: dddssw

configure/opt.md

@@ -22,11 +22,11 @@ layout: doc
 * 首先禁止上传gif格式。图片格式可以转成webp格式，按照华为云obs文档，在url上添加请求参数可以返回webp格式图片，但是这么请求的图片不会被http缓存，并且每请求一次都会重新进行格式转化，成本会大幅上升。所有需要上传的时候就将图片转成webp格式存放在桶里，返回的时候返回webp即可
 * 按照屏幕宽度请求合适尺寸的图片，但会回到之前那个问题也就是不会被http缓存，这样虽然可以加速首屏，但是之后每次都需要重新获取。我是通过service worker来解决的。通过拦截指定的图片域名请求，如果没有命中会放入cache中，命中则从cache中取。当然也可以给缓存设置过期时间，类似于强缓存的效果
 * 可以使用preconnect提前建立与obs域名的连接，当然如果需要与多个第三方域建立连接，全部preconnect可能会适得其反，可以替换为dns-prefetch
-* 我观察到现在的协议是http1.1，可以使用http2解决队头阻塞的问题，当然http2也只是解决了http层的阻塞，tcp层的阻塞没有解决，http3就是为了解决tcp层的队头阻塞问题，他使用的是quic协议，基于utp而非tcp，所有下一代方案是使用http3
+* 我观察到现在的协议是http1.1，可以使用http2解决队头阻塞的问题，当然http2也只是解决了http层的阻塞，tcp层的阻塞没有解决
 
 2.代码或者框架层面
-*  我刚才又提到我自己fetch api拿到图片信息,之前是在for循环了一个一个await拿到,但是可以并发发送请求.因为每个网站都有最大连接数,需要写一个限制最大并发数的函数,并发数我设置的是6.
-* 刚才提到我实现了一个懒加载的自定义指令,每个图片里都会new 一个intersectionobserve,我想使用一个单例实现,并且我在mdn看了文档,发现它可以observe某个元素,不需要可以unobserve.证明这是可行的,所以我封装了一个hook用来创建intersectionobserve实例.这样只需要一个实例既可完成监听功能
+*  我是通过fetch拿到图片信息,之前是在for循环了一个一个await拿到,但是可以并发发送请求.因为每个网站都有最大连接数,需要写一个限制最大并发数的函数
+* 懒加载我是通过自定义指令和intersectionobserve实现的,每个图片里都会new 一个intersectionobserve,我想使用一个单例实现,并且我在mdn看了文档,发现它可以observe某个元素,不需要可以unobserve.证明这是可行的,所以我封装了一个hook用来创建intersectionobserve实例.这样只需要一个实例既可完成监听功能
 * 对于resizeObserve,因为他的触发频率会很高,所以使用了节流,并且将回调放在requestAnimationFrame里，还有就是我只关心它的宽度，如果宽度不变，高度改变，不会触发回调，这在初始化的时候高度会变化
 * 框架上则是使用computed缓存了一些计算结果,有使用到watch,但是这个watch只是第一次有用,使用了vue一个比较新的配置项once.来实现一次监听即销毁
 * 最后在umounted生命周期释放之前那两个web api实例的内存占用