项目问题~

一、 国际化（i18n）北京外国语大学27种语言    vue-i18n + i18n Ally  + xlsx + vue-json-excel

        1. 开始开发用zh-cn.json的文件写完页面逻辑
        2. 通过公司免费的api接口将每个字段翻译成27种语言（生成一个大对象）
        3. 使用vue-json-excel读取json数据，导出一个excel文件
        4. 让内容组同事修正翻译，通过腾讯文档同步内容，改完导成本地
        5. 通过 xlsx 插件xlsx文件内容读出来，FileSaver 生成js文件

         但是有个问题，后续添加的翻译，不能使用i18n Ally翻译了，它是全量翻译，会覆盖同事手动翻译的内容，只能使用公司翻译的接口，把新增的字段翻译（拿到zh-cn文件字段，对比en.json文件没有的就是新增的，翻译完第一个将所有新增的字段放在一个数组里边）将翻译内容写入json文件。后端的返回信息也需要翻译，在自己封装的接口请求方法加个变量，每个接口都需要传语言字段

• 国际化翻译 Vue-i18n 的架构组织和 $t 的原理，当遇到插值对象的时候，需要进行 parse 和 compile
• Vue-i18n 通过转义字符避免 XSS
• 通过观察者模式对数据进行监听和更新，做到无刷新更新页面
• 全局自定义指令和全局组件的实现

二、大文件分片上传，断点续传
        1.通过el-upload组件拿到binary类型文件
        2.校验文件不能超高20G，通过请求接口盘点磁盘大小，是否够存储文件
        3. 直接将文件抛给webworker，file.slice()进行分片5M每片，用spark-md5给每一片加密（md5是一种信息摘要算法，它是一段数据,即128bit的由“0”和“1”组成的一段二进制数据。无论原始数据长短是多少,其MD5值都只是128bit）
        4. 传送index、hash、file、size、total
        5. 断点续传，刷新或者退出前端会停止上传，再次上传拿到MD5，后台先查有没有这个，有的话返回上次的index，前端从index继续上传。
        6. 每一片5M传输最合理（nginx默认的上传文件大小是有限制的，一般为2MB，修改client_max_body_size 30M），oss存储有自动清理垃圾文件机制。调用的oss的api
        7. nginx默认限制请求1M，修改client_max_body_size 20M;

大文件下载 
        阶段1：后台返回文件地址，创建隐藏的iframe下载，批量下载是创建多个iframe或者后端生成zip下载。（单线程下载速度慢）

        阶段2： 多线程大文件下载，http1.1的range字段（分片下载blod文件，请求返回206，部分下载，下载完成合并blod文件，单个域名并发限制一次最多只能发送6个请求）  或者用jszip压缩文件

const zip = new JSZip();
zip.file(file.name, file);
const blob = await zip.generateAsync({type:"blob"})
saveAs(blob, "example.zip");

         升级http2，没有并发限制，并不是并发越多越好。最后经过大量测试24个请求是最快的，请求完24个在请求24分片,请求完成合并文件
弊端google最大显示2G，Opera500M，不同浏览器大小限制不同，超过缓存大小会崩溃

 Promise.all(arr).then((res) => {
    const arrBufferList = res
      .sort((item) => item.i - item.i)
      .map((item) => new Uint8Array(item.buffer));
    count = 0;
    const allBuffer = concatenate(Uint8Array, arrBufferList);
    const blob = new Blob([allBuffer], { type: "image/jpeg" });
    const blobUrl = URL.createObjectURL(blob);
//a标签下载
    const aTag = document.createElement("a");
    aTag.download = donwloadName;
    aTag.href = blobUrl;
    aTag.click();
    URL.revokeObjectURL(blob);
    console.timeEnd("并发下载1");
// fileServer.js保存
 FileSaver.saveAs(blob , '文件名')
  });

前端多线程大文件下载实践，提速10倍(拿捏百度云盘)-阿里云开发者社区

 阶段三：Streams API 是浏览器提供给 JS 的流式操作数据的接口。 将文件流直接写入磁盘
它借助了 Streams API 和 Service Worker 解决了内存占用过大的问题

https://segmentfault.com/a/1190000021367378
JS 实现流式打包下载 - 知乎JS前端批量下载大文件并打包zip（StreamSaver.js）_斗战圣佛91的博客-CSDN博客_js批量下载文件生成zip

responseType: 'arraybuffer'（请求arraybuffer文件流）

Service worker 它可以拦截浏览器的请求并提供离线缓存。

Service worker 本质上充当 Web 应用程序、浏览器与网络（可用时）之间的代理服务器。这个 API 旨在创建有效的离线体验，它会拦截网络请求并根据网络是否可用来采取适当的动作、更新来自服务器的的资源。

StreamSaver.js 包含两部分代码，一部分是客户端代码，一部分是 Service Worker 的代码（对于不支持 Service Worker 的情况，作者在 GitHub Pages 上提供了一个运行 Service Worker 的页面供跨域使用）。

在初始化时客户端代码会创建一个 TransformStream 并将可写入的一端封装为 writer 暴露给外部使用，在脚本调用 writer.write(chunk) 写入文件片段时，客户端会和 Service Worker 之间建立一个 MessageChannel，并将之前的 TransformStream 中可读取的一端通过 port1.postMessage() 传递给 Service Worker。Service Worker 里监听到通道的 onmessage 事件时会生成一个随机的 URL，并将 URL 和可读取的流存入一个 Map 中，然后将这个 URL 通过 port2.postMessage() 传递给客户端代码。

客户端接收到 URL 后会控制浏览器跳转到这个链接，此时 Service Worker 的 onfetch 事件接收到这个请求，将 URL 和之前的 Map 存储的 URL 比对，将对应的流取出来，再加上一些让浏览器认为可以下载的响应头（例如 Content-Disposition）封装成 Response 对象，最后通过 event.respondWith() 返回。这样在当客户端将数据写入 writer 时，经过 Service Worker 的流转，数据可以立刻下载到用户的设备上。这样就不需要分配巨大的内存来存放 Blob，数据块经过流的流转后直接被回收了，降低了内存的占用。

所以借助 StreamSaver.js，之前下载图片的流程可以优化如下：JSZip 提供了一个 StreamHelper 的接口来模拟流的实现，所以我们可以调用 generateInternalStream() 方法以小文件块的形式接收数据，每次接收到数据时数据会写入 StreamSaver.js 的 writer，经过 Service Worker 后数据直接被下载。这样就不会再像之前那样在生成 zip 时占用大量的内存空间了，因为 zip 数据在实时生成时被划分成了小块并迅速被处理掉了。
 

下载完成流---->postmessage发送给serviceWorker------>onmessage事件内部随机生成一个URL，存在map中 ------> 通过postMessage发送给客户端 ----> 客户端通过跳转这个url------->serviceWorker拦截请求------>将对应流拉取出来，加上响应头，下载线程拿到响应，开启流式下载

readableStream .pipeTo(fileStream) .then(() => console.log("done writing"))

AXIOS取消请求   

let CancelToken; //取消请求的token令牌
let cancel:any; //取消请求的方法
// 发送请求
function sendAxios() { 
   CancelToken = axios.CancelToken
   axios.get('https://edu.newsight.cn/wxList.php', {
      cancelToken: new CancelToken(function excutor(c) {
         cancel = c;
      })
   }).then((res) => { 
      console.log('axios1发回来的数据',res)
   }).catch((thrown) => { 
      if (axios.isCancel(thrown)) {
         console.log('请求已经取消了==>', thrown.message);
      } else {
         // 处理错误
      }
   });
}
// 取消请求
function cancelHandert() {
   cancel&&cancel(); 
}

三、主题切换
        1. 给ued组开发了一个定义主题颜色的系统，table表格展示每一个主题色的属性，通过FileSaver保存生成scss文件，供前端使用 ，新增主题，修改主题只需要UI去修改颜色，生成新的scss文件供前端使用。
        2. table是一个数组，一列就是一个主题，每个主题有多个属性，最后点确认，生成一个js文件存放这次生成的数组，供下次使用。还要将数组对象拼接成字符串，输出成scss文件。

a = { '--theme-color': "#eee", '--theme-background': "#333" } ->

a = '.a {--theme-color: "#eee";--theme-background: "#333"}'

        3. 基础常用的样式的样式 通过@mixin，@extend减少重复

        4. 通过动态设置html的class实现切换主题

        5. 还有一个项目用户需要自定义主题颜色，自己选择每一个模块的颜色（可以颜色面板选择）

/* 定义根作用域下的变量 */
:root {
  --theme-color: #333;
  --theme-background: #eee;
}
/* 更改dark类名下变量的取值 */
.dark{
  --theme-color: #eee;
  --theme-background: #333;
}
/* 更改pink类名下变量的取值 */
.pink{
  --theme-color: #fff;
  --theme-background: pink;
}

.box {
  transition: all .2s;
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  /* 使用变量 */
  color: var(--theme-color);
  background: var(--theme-background);
}

四、网盘存储、资源管理
        1. 资源分片上传
        2. 大文件下载，批量下载（生成一个zip）
        3. 资源、文件夹的分享、复制、移动、收藏、下载、公开、编辑、删除
        4. 视频资源支持打点、剪切、视频融合、字幕、分享、字幕转写、添加笔记、无效片段处理，COR识别、编辑字幕、字幕翻译、词云、图文模式、多路视频随意切换、局部全屏（所有全屏）
        5. 文件预览。文档，图片，视频 ，音频
        6. 直播，字幕（实时语音翻译，websocket拿到数据展示），实时语音聊天(类似腾讯课堂，但是支持多路和多路全屏，显示实时语音翻译，)

五、大屏数据展示，移动端
        大屏适配

 const baseWidth = 1920;
    const baseHeight = 1080;
    let timer = null;
    let calcScale = function () {
      let windowInnerWidth = window.innerWidth;
      let windowInnerHeight = window.innerHeight;
      // let ratioW = baseWidth / windowInnerWidth;
      let ratioW = windowInnerWidth / baseWidth;
      // let ratioH = baseHeight / windowInnerHeight;
      let ratioH = windowInnerHeight / baseHeight;
      document.body.style.width = baseWidth + 'px';
      document.body.style.height = baseHeight + 'px';
      document.body.style.transformOrigin = 'left top';
      document.body.style.transform = `scale(${ratioW})`;
    }
    calcScale();
    window.onresize = function () {
      if (timer) {
        clearTimeout(timer);
      }
      timer = setTimeout(calcScale, 300)
    }

        移动端适配：rem是相对长度单位。相对于根元素(即html元素)font-size计算值的倍数的一个css单位,默认1rem = 16px，不好计算，重新设置比率   html{font-size: 100px;} 1rem = 100px
等比缩放
vw，wh是 1/100宽高，兼容性不太好
em：相对于父元素的大小，一个改变后边子元素也得变

(function(win, doc) {
    function changeSize() {
        doc.documentElement.style.fontSize = 100 * 
            doc.documentElement.clientWidth / 375 + 'px';
    }
    changeSize();
    win.addEventListener('resize', changeSize, false);
})(window, document);

postcss-plugin  pxtovw  实现px转化为vw

import pxtovw from 'postcss-px-to-viewport'

const getPlagin = (isVant) => {
    let opt: any = {
        //这里是设计稿宽度 自己修改
        viewportWidth: isVant ? 375 : 750,
        viewportUnit: 'vw',
    }
    if (isVant) {
        opt.include = [/node_modules\/vant/]
        opt.exclude = [/controller/]
    } else {
        opt.exclude = [/node_modules\/vant/, /controller/]
    }
    return pxtovw(opt)

}
const config = {
    base: '/iplat/fifMobile/fif_zjzx/',
    css: {
        postcss: {
            plugins: [getPlagin(false), getPlagin(true)]
        }
    },
  
    plugins: [
        vue(),
        vueSetupExtend(),
        Components({
            resolvers: [VantResolver()],
        }),
        // viteCompression({ deleteOriginFile: true }) // gzip 压缩
    ],
  
}

六、弹幕问题
        通过css3 
        transition: -webkit-transform 0s linear 0s;（过度效果时间，匀速，延迟）
        transform: matrix(1, 0, 0, 1, -406.081, 0);（矩阵变换，线性代数，运动就是在线性空间的一种变换，transform: matrix(a,b,c,d,e,f);，x'=ax+cy+e y'=bx+dy+f）
        animation: 0s ease 0s 1 normal none running none;（动画: 动画-名 动画-持续时间 动画-时间控制函数 动画-延时 动画-重复次数 动画-方向 动画-填充方法 动画-播放状态;）
        will-change: transform, opacity;（transform和animation有时会出现闪烁，将动画交给GPU，硬件加速，属性允许你提前告知浏览器你可能会对一个元素进行什么样的改变，这样它就可以提前设置适当的优化，该元素会被移动到属于它自己的“图层”，在那里它可以独立于页面的其他部分进行渲染。避免其他元素的重排和重绘）
        stroke-width:1px;stroke: rgba(0,0,0,.5); 文字描边

直播半屏，显示右侧聊天室，网页全屏显示弹幕功能
录播功能2分钟根据当前时间请求一次最新的弹幕，轮循，websocket常
直播使用websocket（弹幕+实时字幕），录播30s根据播放时间获取一次弹幕

流程：添加新弹幕到等待队列、寻找合适的轨道、从等待队列中抽取弹幕并放入轨道、整体渲染、清空。

分为三部分：舞台、轨道、弹幕池
舞台是整个弹幕的主控制，它维护着多个轨道、一个等待队列、一个弹幕池
弹幕池：[[1,2,3],[4,5,6]]（new WeakMap() ）   等待队列：[7,8,9,10] 
获取每一行的宽度，找到最小的给他添加新的弹幕，（先填充满上边的一行）

 transition:1s linear 0s, 速度是transition的时间控制的
追及问题，设置最大速度为两倍，计算两个之前的距离
丢弃排队时间过长的弹幕大神

-webkit-mask-image：url（） //防止弹幕遮挡人物

自定义指令：水印（手机端人名字水印和视频水印，mutationObserver检测dom变化，执行生成水印方法，防止人为删除dom），懒加载，按钮节流，输入防抖，拖拽

// 选择需要观察变动的节点（获取到DOM）
const targetNode = document.getElementById('app');
 
// 观察器的配置（需要观察什么变动）
const config = { attributes: true, childList: true, subtree: true };
 
// 当观察到变动时执行的回调函数
const callback = function() {
   console.log('触发回调')
};
 
// 创建一个观察器实例并传入回调函数
const observer = new MutationObserver(callback);
 
// 以上述配置开始观察目标节点
observer.observe(targetNode, config);
 
// 之后，可停止观察

childList: true,  // 观察目标子节点的变化，是否有添加或者删除
attributes: true, // 观察属性变动
subtree: true     // 观察后代节点，默认为 false

前端优化 

1、减少请求量
        雪碧图，iconfont、spritesmith（生成png和scss）、nginx开启http2(server {listen 10.10.10.10:443 backlog=20480 http2 ssl;ssl_async on;)、图片懒加载、虚拟列表、

// 定义懒加载图片或者文件等，自定义指令
Vue.directive('lazy', (el, binding) => {
  let oldSrc = el.src //保存旧的src，方便后期渲染时候赋值src真实路径
  el.src = "" //将渲染的src赋为空，则不会渲染图片出来
  let observer = new IntersectionObserver(([{ isIntersecting }]) => { // 调用方法得到该elDOM元素是否处于可视区域
    if (isIntersecting) { //回调是否处于可视区域，true or false
      el.src = oldSrc //如果处于可视区域额，将最开始保存的真实路径赋予DOM元素渲染
      observer.unobserve(el) // 只需要监听一次即可，第二次滑动到可视区域时候不在监听
    }
  })
  observer.observe(el) // 调用方法
})

2、减小文件大小
​    路由懒加载，组件按需加载、开启zip（CompressionPlugin）、压缩css（css-minimizer-webpack-plugin）、压缩图片（image-webpack-loader / webp ）、提取公共库（SplitChunksPlugin）、Tree Shaking 移除无用代码、减少不必要的 cookie

3、加快请求速度
​    预解析DNS（ ，官网配置子应用）、CDN 分发、nginx负载均衡、使用 preconnect 提前建立连接、webpackPrefetch（预加载资源文件）、CDN 托管静态资源 + HTTP 缓存（强缓存，协商缓存）

4. 交互层面：减少回流/重绘（使用 will-change 开启 GPU 加速、减少对 DOM 进行频繁操作、使经常变动的元素脱离文档流）、防抖/节流

5. Web Worker

JavaScript 是单线程的，如果存在需要大量计算的场景（如视频解码），UI 线程就会被阻塞，甚至浏览器直接卡死。
Web Worker 可以使脚本运行在新的线程中，它们独立于主线程，可以进行大量的计算活动，而不会影响主线程的 UI 渲染，但不能滥用 Web Worker 。
6、虚拟列表

最常用的还是 分页加载 的方式：

• 基于 上拉加载 列表的渲染，随着加载数据的增多，对应的 DOM 节点也会增多，达到某个限制页面一定会发生卡顿

虚拟列表 核心就是固定渲染的 DOM 数，通过动态切换数据内容实现视图的更新，并保证文档中真实 DOM 的数量不随着数据量增大而增大（其实和 table 分页很像，但它支持滚动）。

7. 大文件分片上传、下载

8. 前端文件导入/导出

​ Minify把 CSS 和 JS 压缩和削减(Minify：去掉空格回车符等)，以及把多个CSS，JS文件整合到一个文件里。

4、缓存
​ ① HTTP协议缓存请求（ng开启强缓存，协商缓存）

​ ② 离线缓存 manifest（webpack-manifest）

​ ③ 本地缓存 localStorage

补充知识：
​ GET请求可以缓存，POST请求不能缓存。GET请求后退/刷新无害，POST后退/刷新则会致使重新提交数据

4、渲染
​ ① JS优化，如防抖、节流、事件委托、减少重排重绘等。

​ ② CSS优化，如提取公共样式减少代码量、减少选择器嵌套层数、精灵图等。

​ ③ 服务器端渲染

​ ④ 使用Web Workers

​ ⑤ CSS写在文件头部，JS写在文件底部。

img/css这些文件都可以用强缓存。通过更改文件名的方式来获取最新的数据，index.html就要用协商

FP : 首次绘制（白屏时间）
FCP：首次内容绘制（绘制第一个元素）
LCP：首屏时间（最大内容绘制，应在2.5s完成）mutationObserve*dom树的层级计算一个权重，页面元素一直在变化，取一个相对的比较大的变化作为首屏渲染截止时间
FID：第一次输入事件延迟
CLS：累积布局偏移
浏览器perfermace观察各项指标，但是不直观
可以用lightHouse观察（各项指标性能）

会在项目部署的初期，通过设置变量控制各个性能指标的开启，监听load事件，load完成以后将各项指标上传，前端人员进行分析，运行平稳以后，可以把一些dns，tcp的检测给去掉。

import {getCLS, getFID, getLCP} from 'web-vitals';  1.5k很小

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  // Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
      fetch('/analytics', {body, method: 'POST', keepalive: true});
}

getCLS(sendToAnalytics);
getFID(sendToAnalytics);
getLCP(sendToAnalytics);

perfermence.timing

DNS查询耗时 ：domainLookupEnd - domainLookupStart

TCP链接耗时 ：connectEnd - connectStart

request请求耗时 ：responseEnd - responseStart

解析dom树耗时 ： domComplete- domInteractive

白屏时间 ：responseStart - navigationStart

domready时间 ：domContentLoadedEventEnd - navigationStart

onload时间 ：loadEventEnd - navigationStart

DOMContentLoaded：文档被加载完，图片还未加载，样式表还未渲染
   （1）解析html结构

   （2）加载外部脚本和样式表文件

   （3）解析并执行脚本代码

   （4）构造HTML DOM模型   //DOMContentLoaded执行点

   （5）加载图片等外部文件

   （6）页面加载完毕  //load
   window.addEventListener("load", function () {   //添加load事件
       console.log("load执行");
   }, false);

   window.addEventListener("DOMContentLoaded", function () {  //添加DOMContentLoaded事件
       console.log("domContentLoad执行");
   }, false)

统计接口响应时间
const start = response.config.headers['request-startTime']
const currentTime = new Date().getTime()
const requestDuration = ((currentTime - start)/1000).toFixed(2)

axios取消请求CancelToken = axios.CancelToken
 

let CancelToken; //取消请求的token令牌
let cancel:any; //取消请求的方法
// 发送请求
function sendAxios() { 
   CancelToken = axios.CancelToken
   axios.get('https://edu.newsight.cn/wxList.php', {
      cancelToken: new CancelToken(function excutor(c) {
         cancel = c;
      })
   }).then((res) => { 
      console.log('axios1发回来的数据',res)
   }).catch((thrown) => { 
      if (axios.isCancel(thrown)) {
         console.log('请求已经取消了==>', thrown.message);
      } else {
         // 处理错误
      }
   });
}
// 取消请求
function cancelHandert() {
   cancel&&cancel(); 
}

function sendAxios2() {
   axios.get('https://edu.newsight.cn/wxList.php').then(function (response) {
      console.log('返回来的数据sendAxios2', response)
   })
}

DocumentFragment:它不是真实 DOM 树的一部分，它的变化不会触发 DOM 树的重新渲染，且不会对性能产生影响。

IntersectionObserver: 监听元素是否进入了可视区域

图片懒加载
const imgList = [...document.querySelectorAll('img')]

var io = new IntersectionObserver((entries) =>{
  entries.forEach(item => {
    // isIntersecting是一个Boolean值，判断目标元素当前是否可见
    if (item.isIntersecting) {
      item.target.src = item.target.dataset.src
      // 图片加载后即停止监听该元素
      io.unobserve(item.target)
    }
  })
}, {
  root: document.querySelector('.root')
})

// observe遍历监听所有img节点
imgList.forEach(img => io.observe(img))

HTTP 101 Switching Protocols响应代码指示服务器正在根据发送包括Upgrade请求头的消息的客户端的请求切换到的协议。

服务器在此响应中包含一个Upgrade响应标题，指示它切换到的协议。该过程在文章“协议升级机制”中有详细描述

前端错误监控

1. window.onerror可以捕捉语法错误，也可以捕捉运行时错误，可以拿到出错的信息，堆栈，出错的文件、行号、列号
2. 当一项资源（如图片或脚本）加载失败，加载资源的元素会触发一个 Event 接口的 error 事件，并执行该元素上的onerror() 处理函数
window.addEventListener('error', function(event) {
         // onerror_statements
})
3. 在vue中使用errorHandler 或者生命周期钩子 errorCaptured
        app.config.errorHandler = (err, vm, info) => {
                  // 处理错误
                  // `info` 是 Vue 特定的错误信息，比如错误所在的生命周期钩子
        }
4. 请求异常在响应拦截器中处理  在axios中拦截
5. promise异常使用Promise Catch，在全局增加一个对 unhandledrejection 的监听，用来全局监听Uncaught Promise Error。使用方式：

window.addEventListener("unhandledrejection", function(e){
  console.log(e);
});

6. 崩溃和卡顿
        1.利用 window 对象的 load 和 beforeunload 事件实现了网页崩溃的监控(在页面加载时（load 事件）在 sessionStorage 记录 good_exit 状态为 pending，如果用户正常退出（beforeunload 事件）状态改为 true，如果 crash 了，状态依然为 pending，在用户第2次访问网页的时候（第2个load事件），查看 good_exit 的状态，如果仍然是 pending 就是可以断定上次访问网页崩溃了！存在的问题：采用 sessionStorage 存储状态，但通常网页崩溃/卡死后，用户会强制关闭网页或者索性重新打开浏览器，sessionStorage 存储但状态将不复存在；如果将状态存储在 localStorage 甚至 Cookie 中，如果用户先后打开多个网页，但不关闭，good_exit 存储的一直都是 pending，完了，每有一次网页打开，就会有一个 crash 上报。)。
       2. 可以使用 Service Worker 来实现网页崩溃的监控
(1).Service Worker 有自己独立的工作线程，与网页区分开，网页崩溃了，Service Worker 一般情况下不会崩溃；
(2).Service Worker 生命周期一般要比网页还要长，可以用来监控网页的状态；
(3).网页可以通过 navigator.serviceWorker.controller.postMessage API 向掌管自己的 SW 发送消息。
基于心跳检测的监控方案：

• p1：网页加载后，通过 postMessage API 每 5s 给 sw 发送一个心跳，表示自己的在线，sw 将在线的网页登记下来，更新登记时间；
• p2：网页在 beforeunload 时，通过 postMessage API 告知自己已经正常关闭，sw 将登记的网页清除；
• p3：如果网页在运行的过程中 crash 了，sw 中的 running 状态将不会被清除，更新时间停留在奔溃前的最后一次心跳；
• sw：Service Worker 每 10s 查看一遍登记中的网页，发现登记时间已经超出了一定时间（比如 15s）即可判定该网页 crash 了

终极解决方案 sentry 上报流程 （doker搭建一套，通过钉钉生成webhook地址，将错误信息发送到钉钉开发者群，实时关注错误提示）

1. Sentry Init 初始化，读取配置的 Release 和 DSN 信息，然后将 Sentry 对象挂在到全局
2. 当代码在运行过程中发生错误时，往上抛出一个 Error 对象，会执行 TraceKit 重写的 window.onerror 方法
3. 如果是一个未捕获的 Promise 错误是，将执行重写的 window.onunhandledrejection
4. 然后使用网络请求上报到 Sentry 服务器，这里会用到配置时使用的 DNS

微前端  qiankun

主应用需要安装乾坤，子应用有三个周期函数，bootstrap，mount，unmount
 

子应用

let instance = null;
function render(props = {}) {
  const { container } = props;
  if (props) {
    // 注入 actions 实例
    actions.setActions(props);
  }
  instance = new Vue({
    router,
    store,
    render: (h) => h(App),
  }).$mount(container ? container.querySelector('#learningApp') : '#learningApp');
}

// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {
  render();
}

export async function bootstrap() { //初始化之前
  console.log('[vue] vue app bootstraped');
}
export async function mount(props) {//挂载
  console.log('[vue] props from main framework', props);
  render(props);
}
export async function unmount() { //卸载
  instance.$destroy();
  instance.$el.innerHTML = '';
  instance = null;
}
//子应用打包生成的umd格式的js，在window上挂载这三个生命周期，主应用可以直接调用



主应用
import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'react app', // app name registered
    entry: '//localhost:7100',
    container: '#yourContainer',
    activeRule: '/yourActiveRule',
  },
  {
    name: 'vue app',
    entry: { scripts: ['//localhost:7100/main.js'] },
    container: '#yourContainer2',
    activeRule: '/yourActiveRule2',
  },
]);

start({
  sandbox: {
    strictStyleIsolation: true, // 使用shadow dom解决样式冲突
    experimentalStyleIsolation: true // 通过添加选择器范围来解决样式冲突 [date-react-app]
  }
}); // 开启应用


 // 配置全局环境变量
  window.__POWERED_BY_QIANKUN__ = true;
  window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__ = app.entry;


如果图片出不来，src目录下面加一个文件public-path.js,然后引入,将文件域名指向子应用
if(window.__POWERED_BY_QIANKUN__) {
    __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

原理 手写微前端qiankun框架,vue+react双重配置_进阶的巨人001的博客-CSDN博客

1.监视路由变化

2.匹配子应用

3.加载子应用 （unmount(prevApp); 之前的应用需要先卸载）

4.渲染子应用

1.客户端渲染需要通过执行 js 来生成内容
2.浏览器出于安全考虑， innerHtml中的 script 不会加载执行
3.所以需要手动加载子应用的script，执行script中的代码，我们可以用eval或者new Function

 监听路由变化，hash的话是 onhashchange， history 监听 popstate、pushState、replaceState
GitHub - lsh555/qiankun: 手写微前端qiankun框架，vue+react双重配置

js沙箱原理   乾坤会根据当前环境是否支持proxy来决定用那种方式。

1.快照沙箱： 激活微应用时将当前的window对象拷贝存起来，然后从modifyPropsMap中恢复这个微应用上次修改的属性到window中。在离开微应用时会与原有的window对象做对比，将有修改的属性保存起来，以便再次进入这个微应用时进行数据恢复，然后把有修改的属性值恢复到以前的状态。
缺点：需要遍历window上的所有属性，性能差，同时间内只能激活一个微应用

2. 代理沙箱 proxy  （单例和多例）

 import-html-entry 里，也就是加载后的 js 就被包裹了一层 

 function 包裹了一层，所以代码放在了单独作用域跑，又用 with 修改了 window，所以 window 也被隔离了。
        

css样式隔离

1. shadow dom 隔离样式 

if (appElement.attachShadow) {
    shadow = appElement.attachShadow({ mode: 'open' });
} else {
    shadow = (appElement as any).createShadowRoot();
}
shadow.innerHTML = innerHTML;

2.  使用scopedCss做到样式隔离

先查找要添加的应用是否有相应的属性，没有的话给子应用容器添加一个属性。然后遍历每个style标签，在每个style标签代码前面增加属性选择符，通过属性选择符+样式来确保样式不被重写

div[data-qiankun="app-vue"]

qiankun通讯方式

1.  props，主应用通过全局的mount生命周期传递props 

export async function mount(props) {//挂载
  render(props);
}

2. initGlobalState(state)
        （1）onGlobalStateChange：注册 观察者 函数 - 响应 globalState 变化，在 globalState 发生改变时触发该 观察者 函数。
        （2）setGlobalState：设置 globalState - 设置新的值时，内部将执行 浅检查，如果检查到 globalState 发生改变则触发通知，通知到所有的 观察者 函数【深度监听的】
        （3）offGlobalStateChange：取消 观察者 函数 - 该实例不再响应 globalState 变化

==第一步：==首先需要在父应用中使用initGlobalState设置全局状态actions并导出供其他组件使用。
==第二步：==然后在main.js中引入actions实例并在注册子应用时通过props传递全局状态actions：
==第三步：==主应用中的组件要修改全局状态actions，就在此组件中引入actions实例
==第四步：==配置子应用的全局状态Actions，子应用中的全局状态必须要跟主应用中的全局状态变量属性名相同，比如主应用中全局状态变量为{project_id: “项目2”}，则子应用中也需要保证在setGloabalState时也需要设定相同的变量名。
然后在mounted的生命周期里注入actions实例：
微前端qiankun框架的底层实现原理_veggie_a_h的博客-CSDN博客_qiankun原理
微前端解决方案-qiankun实战及部署 - 简书

网页SEO

 1.