学习分享，共勉

题外话，毕竟我工作多年，深知技术改革和创新的方向，Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心

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

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';
import App from './App.vue';

const app = createApp(App);

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

app.mount('#app');
React的ErrorBoundary
import React, { Component } from 'react';

class MyComponent extends Component {
  state = { hasError: false };

  static getDerivedStateFromError(error) {
    // 更新state使下一次渲染能够显示降级后的UI
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // 你也可以将错误日志上报给服务器
    console.error('React Error:', error, info);
  }

  render() {
    if (this.state.hasError) {
      // 你可以渲染任何自定义的降级UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

export default MyComponent;
try…catch

try…catch语句只能捕获同步错误，对于异步错误（如Promise和setTimeout）则无法捕获

try {
  // 这里放置可能会引发错误的代码
} catch (error) {
  // 这里是错误被捕获的地方，你可以在这里处理错误
  console.log('Error caught:', error);
}
Sentry

Sentry是一个开源的监控系统，能支持服务端与客户端的监控，还有个强大的后台错误分析、报警平台。主要用于如何快速的发现故障。支持几乎所有主流开发语言和平台，并提供了现代化UI，它专门用于监视错误和提取执行适当的事后操作所需的所有信息，官方提供了多个语言的SDK。让开发者第一时间获悉错误信息，并方便的整合进自己和团队的工作流中。

在vue项目里的使用大概步骤，具体可能会有些出入，根据实际应用看吧：
1、安装 Sentry
通过 npm 或 yarn 来安装 Sentry SDK

npm install --save @sentry/vue

2、配置 Sentry
在你的 Vue 项目的入口文件（通常是 main.js 或 main.ts）中，引入 Sentry 并使用你的 DSN 进行初始化：

import { createApp } from 'vue';
import App from './App.vue';
import \* as Sentry from '@sentry/vue';
import { Integrations } from '@sentry/tracing';

const app = createApp(App);

Sentry.init({
  app,
  dsn: '你的DSN',
  integrations: [new Integrations.BrowserTracing()],
  tracesSampleRate: 1.0,
});

app.mount('#app');

3、环境配置
在开发环境中，你可能不希望将错误报告发送到 Sentry，以避免泄露敏感信息。你可以通过环境变量来控制 Sentry 的行为：

const isProduction = import.meta.env.MODE === 'production';

if (isProduction) {
  Sentry.init({
    app,
    dsn: '你的DSN',
    integrations: [new Integrations.BrowserTracing()],
    tracesSampleRate: 1.0,
  });
}

4、上传 SourceMap
为了能够更准确地定位到错误发生的源头，你需要配置SourceMap。你可以使用vite-plugin-sentry插件来自动上传SourceMap文件

yarn add @sentry/tracing vite-plugin-sentry


import viteSentry from 'vite-plugin-sentry';

export default defineConfig({
  plugins: [
    viteSentry({
      // 你的Sentry DSN
      url: 'https://publickey@hostname/1234567890abcdef',
      authToken: 'yourAuthToken',
      org: 'yourOrgName',
      project: 'yourProjectName',
      release: 'yourReleaseVersion',
      deploy: {
        env: 'production',
      },
      setCommits: {
        auto: true,
      },
      sourceMaps: {
        include: ['./src'],
        ignore: ['node\_modules'],
        urlPrefix: '~/',
      },
    }),


### 总结

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

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

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

* **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)



371)**

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

* **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)
# 前端 # 学习
Logo
开源鸿蒙跨平台开发者社区

开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。

更多推荐

cover

万字长文解读 lycium_plusplus：OpenHarmony C_C++ 三方库编译利器

avatar 开源鸿蒙跨平台开发者社区

#鸿蒙三方库生态深度分析：现状、缺口与移植指南

鸿蒙三方库生态现状与移植指南 摘要 鸿蒙操作系统（HarmonyOS）的OHPM生态相比主流包管理系统（如npm、Maven、PyPI）仍存在显著差距，但这也为开发者提供了巨大机会。本文分析了鸿蒙三方库生态现状：当前覆盖较完善的领域包括网络通信、状态管理和日期处理，但图表可视化、地图SDK和AI/ML库等领域存在严重短缺。 文章详细介绍了将开源库移植到鸿蒙的实用方法，包括四步移植流程和常见API替

avatar 开源鸿蒙跨平台开发者社区
cover

鸿蒙 Flutter 实战：package_info_plus 10.1.0 适配 3.27-ohos 全流程

avatar 开源鸿蒙跨平台开发者社区