前端学习笔记7

1.如何监控页面的奔溃

用webService进行心跳检测，load开始，unload结束，每次postMessage记录时间，时间差超过指定时间间隔的2-3倍认为卡顿奔溃。

// 页面 JavaScript 代码
if (navigator.serviceWorker.controller !== null) {
  let HEARTBEAT_INTERVAL = 5 * 1000; // 每五秒发一次心跳
  let sessionId = uuid();
  let heartbeat = function () {
    navigator.serviceWorker.controller.postMessage({
      type: 'heartbeat',
      id: sessionId,
      data: {} // 附加信息，如果页面 crash，上报的附加数据
    });
  }
  window.addEventListener("beforeunload", function() {
    navigator.serviceWorker.controller.postMessage({
      type: 'unload',
      id: sessionId
    });
  });
  setInterval(heartbeat, HEARTBEAT_INTERVAL);
  heartbeat();
}

2.前端工程化

模块化、组件化、规范化、自动化四个方面思考。

3.代理服务器：正向代理和反向代理

正向代理（普通代理）：
在内部网络中，客户机指定代理服务器，并将本来要直接发送到Web服务器上的 http请求发送到代理服务器中，由代理服务器进行转发
反向代理：
代理外部网络的访问请求，可以通过缓存减少服务器压力，是一种通过在繁忙的web服务器和外部网络之间增加一个高速的web缓冲服务器来降低实际的web服务器的负载的一种技术。

代理服务器的好处：1.提供一道屏障，可以处理一些网络攻击，保护真实的服务器。2.通过缓存减轻服务器压力。

4.创建async函数

const AsyncFunction = Object.getPrototypeOf(async function(){}).constructor;

// 使用
const fetchPage = new AsyncFunction("url", "name", "return await fetch(url);");
fetchPage("/").then(response => { ... });