JS前端响应劫持 const trackerXHR = () => {     // 拿到 XMLHttpRequest     let XMLHttpRequest = window.XMLHttpRequest     // 保存原有的open方法     let XMLOriginOpen = XMLHttpRequest.prototype.open     // 重写 open 方法 目的是为了保存 ethods, url 这个参数的值 用于埋点上报     // 不能用箭头函数     // 1. 箭头函数没有 arguments     // 2. 箭头函数会改变指向 我们需要将 this指向 XMLHttpRequest     // 3. 箭头函数this绑定的是上一层的this     XMLHttpRequest.prototype.open = function (methods, url, async) {         // 将值挂在XMLHttpRequest.logData 中         this.logData = {             methods,             url         }         // 执行原有的open方法         return XMLOriginOpen.apply(this, arguments)     }     // 保留原有的send方法     let XMLOriginSend = XMLHttpRequest.prototype.send     XMLHttpRequest.prototype.send = function (request) {         //  send 里 去监听         const startTime = new Date() // 计算接口的duration, send 时记录请求时刻         const handle = (eventType) => {             return () => {                 //延迟两秒后初始化，防止用户切换页面过快                setTimeout(()=>{                     window.pageChange.RefreshState()                },2000)             }         }         this.addEventListener('load', handle('load'), false)         this.addEventListener('error', handle('error'), false)         this.addEventListener('abort', handle('abort'), false)         return XMLOriginSend.apply(this, arguments)     } } trackerXHR()

diff算法 新旧的虚拟dom，使用diff算法快速找出差异并最小化更新视图 本质上就是比较两个js对象的差异 diff算法流程图

JQuery 过滤器大全 1.基本过滤器： selector:first 获取所有已选择到的元素中的第一个元素 selector:last 获取所有已选择到的元素中的最后一个元素 selector:even 获取所有已选择到的元素中的索引为偶数的元素 selector:odd 获取所有已选择到的元素中的索引为奇数的元素 selector:eq(index) 获取所有已选择到的元素中的索引为index的元素 selector:lt(num) 获取所有已选择到的元素中的索引值小于num的元素 selector:gt(num) 获取所有已选择到的元素中的索引值大于num的元素 selector1:not(selector2) 获取所有已选择到的元素中的除了selector2的元素 selector:header 获取所有已选择到的元素中的标题元素(h1~h6) 2.内容过滤器： selector:contains(text) 获取所有已选择到的元素中文本包含text的元素 selector:empty 获取所有已选择到的元素中的空元素(没有子节点) selector:parent 获取所有已选择到的元素中的非空元素(有子节点)，如$("div:parent"); selector1:has(selector2) 获取所有已选择到的元素中包含selector2的元素，如$("div:has('span')"); 3.可见性过滤器： 隐藏类型分两种： 1）不占据屏幕空间 display:none; <input type="hidden"> 2）占据屏幕空间 visibility:hidden; opacity:0;//透明度为0 使用： :visible 选择所有占据屏幕空间的元素 :hidden 选择所有不占据屏幕空间的元素 4.属性过滤器： selector[attrKey] 获取所有已选择到的元素中具有属性attrKey的元素 selector[attrKey=attrVal] 获取所有已选择到的元素中具有属性attrKey，并且属性值为attrVal的元素 selector[attrKey^=attrVal] 获取所有已选择到的元素中具有属性attrKey，并且属性值为以attrVal开头的元素 selector[attrKey$=attrVal] 获取所有已选择到的元素中具有属性attrKey，并且属性值为以attrVal结尾的元素 selector[attrKey*=attrVal] 获取所有已选择到的元素中具有属性attrKey，并且属性值为包含attrVal的元素 selector[attrKey!=attrVal] 获取所有已选择到的元素中具有属性attrKey，并且属性值不为以attrVal的元素或者没有属性attrVal的元素 5.后代选择器： selector:nth-child(index) 获取每个selector元素中索引为index的子元素。【注意】index从1开始 selector:first-child 获取每一个selector元素中的第一个子元素（每个父元素的第一个子元素） selector:last-child 获取每一个selector元素中的最后一个子元素（每个父元素的最后一个子元素） selector:only-child 获取每一个selector元素中的独生子子元素（每个父元素如果只有一个孩子元素，获取该元素） selector:first-of-type 获取每个selector元素中每种类型子元素中的第一个 selector:last-of-type 获取每个selector元素中每种类型子元素中的最后一个 6.表单过滤器： :checked 选取所有被选中的元素，用于复选框、单选框、下拉框 :selected 选取所有被选中的元素，该选择器只适用于<option> :focus 选取当前获取焦点的元素 :text 选取所有的单行文本框(<input type="text">) :password 选取所有的密码框 :input 选取所有的<input>,<textarea>,<select>,<button>元素。 *注意，$(":input")是选中可以让用户输入的标签元素；而$("input")是选择名字为input的标签元素。* :enable 选取所有可用元素，该选择器仅可用于支持disable属性的html元素。(<button>,<input>,<optgruop>,<option>,<select>,<textarea>) :disable 选取所有不可用元素，该选择器也仅可用于支持disable属性的html元素。 :radio 选取所有的单选框 :checkbox 选取所有的多选框 :submit 选取所有的提交按钮 :image 选取所有的input类型为image的表单元素 :reset 选取所有的input类型为reset的表单元素 :button 选取所有的input类型为button的表单元素 :file 选取所有的input类型为file的表单元素

强制重新渲染组件 this.$forceUpdate()方法

对于Vue3 diff的讨论 vue3.0的diff 深度递归遍历vnode树，节点的标签和key相同认为是同一个节点则更新，不同则删除，然后处理子节点。 子节点分这几种情况处理：纯文本、vnode 数组和空 空往往意味着添加或删除； 纯文本相同直接更新innerText，不同则删除； 新旧子节点都是vnode数组则diff算法来处理； vue3.0 diff算法思想 编译模版时进行静态分析，标记动态节点，diff对比差异时仅对比动态节点（性能提升明显）； diff算法先去头去尾，借此缩短遍历对比数组长度（对数组插入和删除操作性能优化明显）； 通过对更新前后子节点数组建立映射表的方式，将O(n^2)复杂度的遍历降低到O(n)； 通过最长递增子序列方法了来diff前后的子节点数组，减少移动操作的次数； 最长递增子序列算法实现： /* 寻找最长递增子序列 使用动态规划思想，a -> c = a -> b + b -> c 其中p数组存储的是从p[p[i]] 到 p[i] 的最长递增子序列索引，也就是前一个b的索引； r数组存储最后一个元素也就是c的索引 */