1.前端项目难点
uniapp多端开发，兼容多种支付和pos机对接
性能监控
1.1.3 前端性能监控的发展
随着前端技术的发展，前端性能监控也逐渐成为前端开发人员和运维人员的关注点。目前，前端性能监控的主要工具有 Google 的 Lighthouse、WebPageTest 等。
2.核心概念与联系
2.1 前端性能监控的核心指标 在前端性能监控中，我们主要关注以下几个核心指标：
首次加载时间(First Contentful Paint, FCP)：首次内容显示时间，表示用户能看到的第一个内容的时间。 首次交互时间(Time to Interactive, TTI)：首次可交互时间，表示用户能够与页面进行交互的时间。 重绘和重排次数(Repaint and Reflow)：重绘和重排的次数，表示页面的视觉效果发生变化的次数。 用户操作时间(Time to First Byte, TTFB)：用户操作到服务器响应的时间，表示用户请求到服务器响应的时间。
优化前端性能的方法有很多，我们可以通过以下几个方法来优化前端性能：
减少 HTTP 请求：减少 HTTP 请求可以减少网络延迟，从而提高性能。我们可以通过合并文件、使用 Sprites 等方式来减少 HTTP 请求。 优化 CSS 和 JavaScript：优化 CSS 和 JavaScript 可以减少渲染和重排的次数，从而提高性能。我们可以通过减少 CSS 规则、减少 JavaScript 代码等方式来优化 CSS 和 JavaScript。 使用缓存：使用缓存可以减少服务器请求，从而提高性能。我们可以通过设置缓存头、使用 Service Worker 等方式来使用缓存。
前端监控
window.onerror = function(message,source,lineno,colno,error){ message:出错误的信息 source：出错误的文件 lineno：出错的代码行号 colno：出错的代码列号 error：错误的对象，包含错误的具体信息 }
window.onerror的捕获特点是：
- 只能捕获到运行时错误，无法捕获语法错误，语法错误就根本通不过JS的代码分析，也不可能运行。
- 可以捕获同步代码和异步代码的异常。
- 主要是来捕获预料之外的错误。
- 捕获不到静态资源加载异常。
- 最好写在所有 JS 脚本的前面，否则有可能捕获不到错误
2window.addEventListener('error',function(error){ logErrorInfo() // 要设置允许冒泡 },true)
window.addEventListener('error',()=>{})跟window.onerror的区别是：
- window.onerror是标准错误捕获接口，window.addEventListener('error')不那么标准，不同浏览器下返回的 error 对象可能不同，需要注意兼容处理。
- window.onError虽然标准但是不能捕获资源加载失败，window.addEventListener('error')就可以。
- 需要注意避免window.addEventListener重复监听。window.onerror不存在重复监听的现象。
总结
- 可疑区域增加 Try-Catch
- 全局监控 JS 异常 window.onerror
- 全局监控静态资源异常 window.addEventListener
- 捕获没有 Catch 的 Promise 异常：unhandledrejection
- VUE errorHandler 和 React componentDidCatch**
axios 封装及请求中断
axios中断请求的用法 axios提供了一个CancelToken类来实现中断请求的功能。CancelToken是一个工厂函数，可用于创建一个取消令牌。当请求被取消时，可以调用取消令牌的cancel方法来中断请求。下面是一个基本的使用示例：
`// 创建取消令牌 const CancelToken = axios.CancelToken; let cancel;
// 发送请求 axios.get('/api/data', { cancelToken: new CancelToken(function executor(c) { cancel = c; }) }).then(response => { console.log(response.data); }).catch(error => { if (axios.isCancel(error)) { console.log('请求已被取消', error.message); } else { console.log('请求失败', error.message); } });
// 中断请求 cancel('请求被取消');`
在上面的示例中，我们使用axios的get方法发送了一个HTTP GET请求，并在请求配置中指定了cancelToken。cancelToken的值是一个新创建的CancelToken实例，它接受一个执行器函数作为参数，该函数将在请求被取消时被调用。我们将cancel函数保存在变量cancel中，以便可以在需要的时候调用它来中断请求。
在响应处理函数中，我们首先判断请求是否被取消，如果是则打印出相应的信息，否则打印出请求失败的信息。
最后，我们在需要的时候调用cancel函数来中断请求。cancel函数接受一个可选的消息参数，它会被传递给取消令牌的执行器函数。在取消令牌的执行器函数中，我们可以通过error.message获取到该消息。
注意事项
在使用axios中断请求时，需要注意以下几点：
只有在请求还未完成时才能中断请求，即在请求被服务器响应之前。如果请求已经完成，则无法再中断它。 如果请求已经被中断，那么在请求的响应处理函数中将不会执行任何代码，因此需要在响应处理函数中进行相应的处理，例如显示错误信息或重置状态。 每个取消令牌只能用于一次请求，即使请求被中断，它也不能再次使用。如果需要多次中断请求，可以创建多个取消令牌。
总结
axios提供了一种简单而强大的方式来中断请求，使用CancelToken和cancel方法可以轻松地实现中断请求的功能。中断请求可以避免不必要的服务器响应和浪费带宽资源，提高请求的效率和性能。
axios封装
import axios from 'axios'
import { getToken } from '@/utils/auth'
// 创建axios实例
const request= axios.create({
baseURL: process.env.NODE_ENV === 'production' ? process.env.VUE_APP_BASE_API : '/', // api 的 base_url
timeout: 12000 // 请求超时时间
})
// request请求拦截器
request.interceptors.request.use(
config => {
if (getToken()) {
config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
}
return config
},
error => {
// Do something with request error
// for debug
Promise.reject(error)
}
)
// response 响应拦截器
request.interceptors.response.use(
response => {
return response.data
},
error => {
if (error.code === 'ECONNABORTED') {
Message({
message: '接口超时未响应',
duration: 1000,
forbidClick: true
})
return Promise.reject(error)
}
if (error.response.status === 401) {
Message({
message: '您的登录已失效',
duration: 1000,
forbidClick: true
})
} else {
let msg = error.message
if (error.response) {
const { data } = error.response
msg = data.message
}
Message({
message: msg,
duration: 1000,
type: 'error'
})
}
return Promise.reject(error)
}
)
export default request
虚拟dom
Vue的虚拟DOM是一种抽象层面的概念，它使得Vue可以高效地更新DOM。虚拟DOM是由Vue实例的$el属性表示的真实DOM元素。虚拟DOM的工作原理是：Vue会在内存中维护一个表示DOM结构的树形数据结构，我们称之为VNode。当Vue实例的数据发生变化时，Vue会重新渲染虚拟DOM，并比对新旧虚拟DOM之间的差异，最后只将变化的部分应用到真实的DOM上，而不是重新渲染整个视图。
虚拟DOM的优点是：
- 减少DOM操作，提高性能
- 可以跨平台使用，如服务器渲染(SSR)和Web组件构建
Vue.component('my-component', {
data: function () {
return { message: 'Hello, Vue!' }
},
template: '<div>{{ message }}</div>'
})
// 创建一个Vue实例
new Vue({
el: '#app',
data: {
message: 'Hello, World!'
}
})
