2024年Web前端最新前端性能监控、异常监控的一些记录，四面楚歌的Web前端工程师该何去何从

2401_84619530

于 2024-05-12 03:34:43 发布

阅读量940

点赞数 10

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84619530/article/details/138738424

版权

程序员专栏收录该内容

95 篇文章 0 订阅

订阅专栏

下面是我在学习HTML和CSS的时候整理的一些笔记，有兴趣的可以看下：

HTML、CSS部分截图

进阶阶段

进阶阶段，开始攻 JS，对于刚接触 JS 的初学者，确实比学习 HTML 和 CSS 有难度，但是只要肯下功夫，这部分对于你来说，也不是什么大问题。

JS 内容涉及到的知识点较多，看到网上有很多人建议你从头到尾抱着那本《JavaScript高级程序设计》学，我是不建议的，毕竟刚接触 JS 谁能看得下去，当时我也不能，也没那样做。

我这部分的学习技巧是，增加次数，减少单次看的内容。就是说，第一遍学习 JS 走马观花的看，看个大概，去找视频以及网站学习，不建议直接看书。因为看书看不下去的时候很打击你学下去的信心。

然后通过一些网站的小例子，开始动手敲代码，一定要去实践、实践、实践，这一遍是为了更好的去熟悉 JS 的语法。别只顾着来回的看知识点，眼高手低可不是个好习惯，我在这吃过亏，你懂的。

1、JavaScript 和 ES6

在这个过程你会发现，有很多 JS 知识点你并不能更好的理解为什么这么设计，以及这样设计的好处是什么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？第一，书籍，我知道你不喜欢看，我最近通过刷大厂面试题整理了一份前端核心知识笔记，比较书籍更精简，一句废话都没有，这份笔记也让我通过跳槽从8k涨成20k。

JavaScript部分截图

2、前端框架

前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

以 Vue 为例，我整理了如下的面试题。

Vue部分截图

- 常见异常类型
  - 常用的一些异常监控的方法
  - - window.error

在前端开发中，异常监控是一个重要的环节，它可以帮助开发者及时发现和修复应用中的问题，提升用户体验。

常见异常类型

请求异常：请求异常通常发生在客户端与服务器进行数据交互时，比如网络问题、服务器错误、API请求异常、资源请求异常等
JS异常： JS异常是指在JavaScript代码执行过程中出现的异常，这可能包括语法错误、运行时错误、类型错误等。
环境异常 ：环境异常是指由于客户端环境的不同（如不同的浏览器、设备、操作系统）导致的异常，这可能包括兼容性问题、性能问题、小程序、容器等。
业务异常 ：业务异常是指在执行特定业务逻辑时出现的错误，这可能包括用户输入错误、数据处理错误、业务流程错误等等。

常用的一些异常监控的方法

window.error

window.error 用于捕获和处理JavaScript运行时错误，提供更详细的错误堆栈信息，例如脚本执行报错，
但需要注意的是，它可能无法捕获所有类型的资源加载错误，比如某些跨域资源的错误。

window.onerror = function(message, source, lineno, colno, error) {
  // 构建错误信息对象
  const errorInfo = {
    message: message, // 错误消息
    source: source, // 错误发生的URL
    lineno: lineno, // 出错的行号
    colno: colno, // 列号
    error: error // 错误对象
  };

  // 上报错误信息到服务器或错误监控系统
  reportError(errorInfo);
};

window.addEventListener(‘error’)

window.addEventListener(‘error’)也可以用来捕获错误，但它只能捕获资源加载错误，例如<img>或<script>标签加载失败

window.addEventListener('error', function(event) {
  // 过滤出非JavaScript错误
  if (event.target instanceof HTMLScriptElement ||
      event.target instanceof HTMLLinkElement ||
      event.target instanceof HTMLImageElement) {
    // 构建错误信息对象
    const errorInfo = {
      target: event.target,
      message: event.message,
      // 其他需要的信息
    };

    // 上报错误信息到服务器或错误监控系统
    reportError(errorInfo);
  }
});

window.addEventListener(‘load’)

用来监听页面的加载状态。load事件在页面所有资源（如图片、样式表等）加载完成后触发

// 监听页面加载完成
window.addEventListener('load', function() {
  // 页面所有资源加载完成
  console.log('Page fully loaded.');
});

看到这个可能很多人会想到window.onload，他们还是有一些区别的：

触发时间： window.onload 事件是在页面及其所有资源（如图像和脚本）加载完毕后才触发，而 window.addEventListener(‘load’)则是在页面加载完毕后触发。
多次绑定： window.onload 只能绑定一个处理程序，而 window.addEventListener(‘load’) 可以绑定多个处理程序。
兼容性： window.onload 在 IE8 及以下版本的浏览器中不支持，而 window.addEventListener(‘load’) 兼容性更好

window.addEventListener(‘DOMContentLoaded’)

用于监听 DOMContentLoaded 事件的代码片段。当 HTML 文档已经被完全解析，并且所有延迟的脚本（例如 <script defer>）都已经加载和执行后，DOMContentLoaded 事件就会被触发，不等待样式表、图片和子框架的加载。

注意：由于 DOMContentLoaded 事件可能会在运行脚本之前就被触发，所以在添加监听器之前可以通过检查 document.readyState 是否为 “loading” 检查文档的状态，来判断是否应该添加监听器

function doSomething() {
  console.info("DOM loaded");
}

if (document.readyState === "loading") {
  document.addEventListener("DOMContentLoaded", doSomething);
} else {
  doSomething();
}

window.performance

window.performance是一个全局属性，用于获取关于浏览器性能的信息。它返回一个Performance对象，你可以通过这个对象来收集有关当前上下文（例如 window 或 worker）的性能信息。可以用来监控页面加载性能，包括资源加载时间等。

window.performance很强大，api很多, 随便说几个

performance.memory： 获取 JavaScript 对内存的占用情况，包括已使用的 JS 堆大小、总 JS 堆大小以及内存大小限制。
performance.navigation： 提供有关网页导航的信息，例如重定向数量、页面是如何加载的等信息。
performance.timing： 包含了一系列关于页面加载时间的详细信息，例如起始时间、DNS 查询开始时间、TCP 连接建立时间等

// 获取页面加载总耗时
var duration = window.performance.timing.loadEventEnd - window.performance.timing.navigationStart;
console.log('页面加载总耗时: ' + duration + 'ms');

// 获取DNS查询耗时
const dnsQueryTime = window.performance.timing.domainLookupEnd - window.performance.timing.domainLookupStart;
console.log('DNS查询耗时: ' + dnsQueryTime + 'ms');

// 获取TCP连接耗时
const tcpConnectionTime = window.performance.timing.connectEnd - window.performance.timing.connectStart;
console.log('TCP连接耗时: ' + tcpConnectionTime + 'ms');

// 获取页面重定向耗时
const redirectTime = window.performance.timing.redirectEnd - window.performance.timing.redirectStart;
console.log('页面重定向耗时: ' + redirectTime + 'ms');

// 获取首次渲染时间
const renderTime = window.performance.timing.responseStart - window.performance.timing.fetchStart;
console.log('首次渲染时间: ' + renderTime + 'ms');

// 获取下载服务端返回数据的时间
const downloadTime = window.performance.timing.responseEnd - window.performance.timing.responseStart;
console.log('下载服务端返回数据的时间: ' + downloadTime + 'ms');

// 获取解析DOM树耗时
const domParseTime = window.performance.timing.domComplete - window.performance.timing.domInteractive;
console.log('解析DOM树耗时: ' + domParseTime + 'ms');

navigator.sendBeacon

navigator.sendBeacon() 是一个在Web API中用于异步发送HTTP POST请求的方法，通常用于向服务器发送小量数据，它允许你在页面卸载时发送异步请求，这对于上报错误或性能数据非常有用，因为它不会阻塞页面的卸载过程。

特性

发出的是异步请求，并且是POST请求，后端解析参数时，需要注意处理方式；
发出的请求，是放到浏览器任务队列执行的，脱离了当前页面，所以不会阻塞当前页面的卸载和后面页面的加载过程，用户体验较好；
只能判断出是否放入浏览器任务队列，不能判断是否发送成功

注意

发送的数据大小有限制，具体数值可能因浏览器不同而有所差异。当数据长度达到一定值时，异步请求可能会进入浏览器发送队列失败。
存在兼容性问题，除了IE，大部分浏览器都已经支持。如果不支持，可以用同步的xhr来替代

// 上报错误信息
function reportError(error) {
  const url = 'https://your-error-reporting-endpoint.com';
  const data = new URLSearchParams({
    error: error.message,
    stack: error.stack
  });
  navigator.sendBeacon(url, data);
}

// 在捕获到错误时调用
reportError(error);

1*1像素gif

在前端监控中，1x1像素的GIF图像通常被用作跟踪像素或Web Beacon。这种技术通过在页面中嵌入一个极小的透明GIF图像，来记录用户的访问行为和页面性能数据。当用户访问页面时，这个小图像会向服务器发送一个请求，从而收集用户行为数据或页面性能指标。

1x1像素的GIF图像有几个优点：

体积小： 1x1像素的GIF图像文件体积非常小，通常只需要几十个字节，这有助于减少网络传输数据量，提高数据上报的效率。
透明性： GIF图像可以设置为完全透明，这样即使在页面上显示，也不会对用户体验造成干扰。
兼容性： GIF格式支持动画和透明，且被所有主流浏览器支持，因此可以确保监控数据的准确上报。
不阻塞页面加载： 由于文件体积小，1x1像素的GIF图像不会对页面加载速度产生影响。
易于隐藏： 由于尺寸极小，这种图像可以轻松地隐藏在页面的角落或边缘，用户几乎无法察觉。

axios 请求/响应拦截器

// 设置请求拦截器
axios.interceptors.request.use(config => {
  // 请求前的异常检查
  return config;
}, error => {
  // 请求错误处理
  return Promise.reject(error);
});

// 设置响应拦截器
axios.interceptors.response.use(response => {
  // 响应成功的处理
  return response;
}, error => {
  // 响应错误处理
  // 这里可以将错误信息上报给异常监控系统
  console.error('Axios Response Error:', error);
  return Promise.reject(error);
});

Vue的errorHandler

在Vue 2中，使用Vue.config.errorHandler来自定义错误处理。

// main.js
Vue.config.errorHandler = (err, vm, info) => {
  // 错误处理逻辑
  console.error('Vue 2 Error:', err, info);
  // 上报错误到监控系统
};

// 组件中使用
try {
  // 可能会抛出错误的代码
} catch (error) {
  // 捕获异常并调用全局错误处理函数
  Vue.config.errorHandler(error, this, 'Error in Component');
}

Vue 3中，你可以使用app.config.errorHandler来处理异常

// main.js
import { createApp } from 'vue';


### 总结

根据路线图上的重点去进行有针对性的学习，在学习过程中，学会写笔记，做总结。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

这里分享一些前端学习笔记：

* **html5 / css3 学习笔记**  

  ![](https://img-blog.csdnimg.cn/img_convert/c7aea89db6b059151c753196f8f4e9b5.png)

  

* **JavaScript 学习笔记**  

  ![](https://img-blog.csdnimg.cn/img_convert/af0c75f32f6618baccf39ce440a0fb5c.png)

* **Vue 学习笔记**  

  ![](https://img-blog.csdnimg.cn/img_convert/94cca01f6717f672208838e9ac549be1.png)

2401_84619530

关注

10
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
2024年Web前端最新前端性能监控、异常监控的一些记录，四面楚歌的Web前端工程师该何去何从

前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。进阶阶段，开始攻 JS，对于刚接触 JS 的初学者，确实比学习 HTML 和 CSS 有难度，但是只要肯下功夫，这部分对于你来说，也不是什么大问题。用来监听页面的加载状态。
复制链接

扫一扫