模块分层和容器预热是做了什么数据怎么测得模块分层是只把首屏视口内的组件打入主bundle其余需要滚动才进入视口的组件通过defineAsyncComponent 动态import导入生成独立chunk滚动到区域再加载提高首屏加载速度容器预热主要是针对秒杀这种高概率跳转场景做的优化进入秒杀商品超过60s后触发预热使用link-modulepreload来预下载和解析下单填写页模块点击下单跳转后可直接开始渲染省去了下载和解析的时间体积是直接比较build后的体积inp在main.js顶部埋点,Vue 实例创建之前用的web-vitalsinp通常是页面刚加载完的场景是最大的这时候主线程可能还在做其他任务没法及时响应首帧时间缩短是在路由跳转前埋点使用performance.now标记现在时间在mounted里结束计算时间差值多级资源预加载是做了什么对资源按重要程度分为三个程度做预加载首先最重要的首屏资源直接静态import立即加载然后首屏下需要滚动才能看见的资源使用link-preload在lcp的回调里开始加载link-proload的优先级比静态import的高在lcp回调里加载可以避免抢占首屏带宽lcp加载完时首屏基本已经加载完成最后是弹窗这种的资源就放在ric里用link-prefecth加载或者到用到的时候再动态import加载异步并发治理是做了什么首先采用async/await控制接口执行顺序避免一些接口的前置条件缺失同时封装请求调度工具对重复请求进行拦截同时对于同接口不同参数高频请求每次请求前取消旧请求避免竞态问题大文件上传做了什么首先通过slice方法对文件进行切片然后用spark-md5进行增量md5计算逐片读取计算然后向后端询问已上传分片列表过滤掉已上传的后继续上传最后通知后端合并说一下虚拟列表实现思路首先计算整体高度容器撑开实现滚动条然后计算索引起始范围开始索引是scrollTop / itemHeight- buffer结束是开始索引加可视条数2*buffer通过索引范围slice可视子集用translateY来偏移可视窗口模拟真实滚动效果走GPU合成不会触发重排对滚动事件用raf做节流避免高频触发回调计算实时搜索框竞态怎么解决的及封装思路实现对输入搜索做防抖处理减少请求次数然后每次请求先用controler.abort()取消之前的请求同时用axios.isCancel过滤掉主动取消的请求不进行错误弹窗然后再发新的请求。封装思路参数传入搜索关键词keywords请求函数及delay延迟内部定义data和loading作为返回值以及封装的核心定时器和controller还有清理函数再使用wantch监听keywords有变化先调用清理函数清理旧请求然后新建控制器传入请求函数发送新请求最后在卸载时自动清理说一下流式对话的实现思路正常发送fetch请求用getReader从response.body上得到可读流对象然后用read方法持续读取知道done为true用TextDecoder对读取的流进行解码。和后端约定用双换行分割每条消息收到的消息先存在buffer里如果有完整的消息就取出来解析渲染剩下的继续留在buffer里解决粘包问题对md做增量解析以md中的空行做分割每次解析的内容先放在暂存区解析到空行就把暂存区的固化添加到稳定区
模块分层和容器预热是做了什么数据怎么测得模块分层是只把首屏视口内的组件打入主bundle其余需要滚动才进入视口的组件通过defineAsyncComponent 动态import导入生成独立chunk滚动到区域再加载提高首屏加载速度容器预热主要是针对秒杀这种高概率跳转场景做的优化进入秒杀商品超过60s后触发预热使用link-modulepreload来预下载和解析下单填写页模块点击下单跳转后可直接开始渲染省去了下载和解析的时间体积是直接比较build后的体积inp在main.js顶部埋点,Vue 实例创建之前用的web-vitalsinp通常是页面刚加载完的场景是最大的这时候主线程可能还在做其他任务没法及时响应首帧时间缩短是在路由跳转前埋点使用performance.now标记现在时间在mounted里结束计算时间差值多级资源预加载是做了什么对资源按重要程度分为三个程度做预加载首先最重要的首屏资源直接静态import立即加载然后首屏下需要滚动才能看见的资源使用link-preload在lcp的回调里开始加载link-proload的优先级比静态import的高在lcp回调里加载可以避免抢占首屏带宽lcp加载完时首屏基本已经加载完成最后是弹窗这种的资源就放在ric里用link-prefecth加载或者到用到的时候再动态import加载异步并发治理是做了什么首先采用async/await控制接口执行顺序避免一些接口的前置条件缺失同时封装请求调度工具对重复请求进行拦截同时对于同接口不同参数高频请求每次请求前取消旧请求避免竞态问题大文件上传做了什么首先通过slice方法对文件进行切片然后用spark-md5进行增量md5计算逐片读取计算然后向后端询问已上传分片列表过滤掉已上传的后继续上传最后通知后端合并说一下虚拟列表实现思路首先计算整体高度容器撑开实现滚动条然后计算索引起始范围开始索引是scrollTop / itemHeight- buffer结束是开始索引加可视条数2*buffer通过索引范围slice可视子集用translateY来偏移可视窗口模拟真实滚动效果走GPU合成不会触发重排对滚动事件用raf做节流避免高频触发回调计算实时搜索框竞态怎么解决的及封装思路实现对输入搜索做防抖处理减少请求次数然后每次请求先用controler.abort()取消之前的请求同时用axios.isCancel过滤掉主动取消的请求不进行错误弹窗然后再发新的请求。封装思路参数传入搜索关键词keywords请求函数及delay延迟内部定义data和loading作为返回值以及封装的核心定时器和controller还有清理函数再使用wantch监听keywords有变化先调用清理函数清理旧请求然后新建控制器传入请求函数发送新请求最后在卸载时自动清理说一下流式对话的实现思路正常发送fetch请求用getReader从response.body上得到可读流对象然后用read方法持续读取知道done为true用TextDecoder对读取的流进行解码。和后端约定用双换行分割每条消息收到的消息先存在buffer里如果有完整的消息就取出来解析渲染剩下的继续留在buffer里解决粘包问题对md做增量解析以md中的空行做分割每次解析的内容先放在暂存区解析到空行就把暂存区的固化添加到稳定区
 与 data-* 自定义属性)
