跳到主要内容

错误监控与性能优化

错误分类：

  • 及时运行错误（代码错误）；
  • 资源加载错误（比如css文件加载失败，图片加载失败）；

及时运行错误的捕获方式：

  1. try-catch
  2. window.onerror 该事件会在资源加载失败或无法使用时触发，比如 script 执行时报错；

资源加载错误捕获方法：

  1. dom.onerror，主要是图片、脚本等文件（如 img.onerror）；
  2. performance.getEntries()，它会返回一个数组，数组中是成功加载的各种静态资源；
  3. Error 事件捕获；

Error 事件捕获：

window.addEventListener('error', function(e){
    console.log(e);
}, true);

错误事件无冒泡，但可以捕获。

对于跨域的 JavaScript 运行错误，前端可以在 script 标签中增加 crossorigin 属性，后端还需要设置资源响应头 Access-Control-Allow-Origin

错误上报​

  • 采用 Ajax 通信的方式上报；
  • 利用 Image 对象上报（相对简单）；

图片的 src 属性不受跨域限制，可以利用这一特点用 get 请求上报错误。

(new Image()).src = 'http://xxx/report?msg=xxxx';

页面性能​

提升页面性能的方法：

  1. 资源压缩和并，减少 HTTP 请求；
  2. 非核心代码异步加载；
  3. 利用浏览器缓存；
  4. 使用 CDN；
  5. 与解析 DNS