前端埋点方案xm（前端埋点方案对比）



目录

一、JavaScript

1.1 数组遍历方法

1.2 数组元素添加、删除

1.3 匹配、过滤、排序、合并

1.4 拷贝

1.5 去重

二、CSS

2.1 CSS3动画属性

简单案例

2.2 弹性布局

简单案例

2.3 定位

三、Vue

3.1 组件通信方式

父子通信

兄弟通信

跨级通信

3.2 路由跳转

router-link

this.$router.push() 

this.$router.resolve() 

this.$router.replace() 

this.router.go(n)  | this.router.back()

3.3双向绑定原理

四、前端性能优化

4.1 加载优化（减少http请求数）

4.2 图片优化

4.3 样式表和JS文件的优化

4.4 防抖和节流

防抖的应用场景

节流的应用场景

以下是我在工作中以及面试中的总结，后续还会不断更新，希望可以帮助到大家。

• 1.1 数组遍历方法

• 1.2 数组元素添加、删除

添加：

1. push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度
2. unshift() 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度
3. splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组，并以数组形式返回被修改的内容

删除：

1. shift() 方法用于把数组的第一个元素从其中删除，方法会改变原数组的长度
2. pop() 方法用于删除数组的最后一个元素并返回删除的元素，方法会改变原数组的长度
3. slice() 方法可从已有的数组中返回选定的元素，方法不会改变原数组的长度
4. splice() 方法用于添加或删除数组中的元素，方法会改变原数组的长度

• 1.3 匹配、过滤、排序、合并

匹配：

1. find() 方法返回通过测试（函数内判断）的数组的第一个元素的值
2. findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置
3. some() 方法用于检测数组中的元素是否满足指定条件（通过函数提供）
4. every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）
5. includes()用来判断一个数组（使用时不会改变原数组）是或者字符串中否包含一个指定的值，如果存在返回 true，否则false
6. indexOf()检索某个指定的元素在数组（使用时不会改变原数组）或者字符串中首次出现的位置，返回元素的索引，未找到返回-1

过滤：

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素，不会改变原数组

排序：

1. sort() 方法用于对数组的元素进行排序，排序顺序可以是字母或数字，并按升序或降序，默认排序顺序为按字母升序，会改变原数组
2. reserve()用于反转数组的元素顺序，会改变原数组

合并：

concat()将数组和数组（或数组和元素)合并，并返回一个新的数组;不会改变原数组

• 1.4 拷贝

浅拷贝：Object.assign()

深拷贝：JSON.parse(JSON.stringify())

区别：浅拷贝只复制某个对象的引用，而不复制对象本身，新旧对象还是共享同一块内存；深拷贝会创造一个一摸一样的对象，新对象和原对象不共享内存，修改新对象不会改变原对对象。

• 1.5 去重

利用Array.from()以及new Set()  （最简单直接的数组去重方法）

function unique (arr) {
  return Array.from(new Set(arr))
}

• 2.1 CSS3动画属性

考虑浏览器支持加以下前缀，-webkit-、-ms- 或 -moz-前的数字为支持该前缀属性的第一个浏览器版本号。

简单案例

• 2.2 弹性布局

下表列出了在弹性盒子中常用到的属性(注意：flex属性写在父盒子里面):

简单案例

• 2.3 定位

3.1 组件通信方式

• 父子通信

• 兄弟通信

• 跨级通信

3.2 路由跳转

• router-link

声明式路由，在页面中调用

• this.$router.push() 

在函数里面调用

• this.$router.resolve() 

打开新窗口跳转

• this.$router.replace() 

用法同this.$router.push()

• this.router.go(n)  | this.router.back()

3.3双向绑定原理

vue的双向绑定是通过实现的。vue将响应式地将数据转换成属性，当数据变化时，视图也会自动更新。

4.1 加载优化（减少http请求数）

• 合并图片：当图片较多时，像精灵图，雪碧图可以合并为一张大图，从而减少http请求数。经常变化的图片可能不太合适，变化相对稳定的就可以考虑。合并大图除了能减少http 请求数外，还可以充分利用缓存来提升性能。
• 合并压缩css样式表和js脚本，他们的共同目的都是为了减少http连接数。
• 去掉不必要的请求，开发写代码或者系统升级之后残留的无效请求连接。
• 首屏加载：首屏快速显示可大大的提升用户对页面速度的感知，应尽量针对首屏的快速显示做出相应的优化。
• 充分利用缓存：来减少向服务器发送的请求数，节省网络资源，所有静态资源都要放在服务器端并设置缓存，并且要尽量使用长缓存。
• 预加载：大型资源页面可使用Loading，资源加载完成后再显示页面，但是加载时间过长，会造成负体验。
• 异步加载第三方资源：第三方资源不可控，会影响页面加载，所以要异步加载第三方资源。

4.2 图片优化

• 尽可能的使用PNG格式的图片，它相对来说体积较小，可以使用工具压缩，在上线之前最好进行一定的优化。
• 同时在代码中进行图片的延迟加载，也叫做赖加载。
• 避免img、iframe等标签的src属性为空：空src会重新加载当前页面，影响速度和效率。

4.3 样式表和JS文件的优化

• 头部内联的样式和脚本会阻塞页面的渲染，一般我们会把css样式表文件放到文件的头部使用link引入，这样可以让CSS样式表尽早地完成下载。
• 对应js脚本文件，一般我们把脚本放在尾部并使用异步方式加载，这样可以尽最大限度的减少样式和脚本对页面的阻塞。

4.4 防抖和节流

防抖与节流通常作为项目优化的手段，一般都是为了防止用户在短时间内快而频地多次操作，触发动作执行。比如防止用户点击多次提交按钮，触发表单多次提交；防止用户拉动滚动条，多次触发加载更多等情况。

防抖：定义一个周期，操作只会在时间周期函数执行完成后才开始执行。

举例：周期2秒，不管你怎么点击，只在2秒后触发事件，2秒内点击多次也只触发一次也要等到2s后再触发事件。

节流：定义一个周期，操作第一次点击会立刻执行，后续操作时间间隔大于定义的时间周期后才开始执行。

举例：周期2秒，用户点击按钮，第一次请求马上触发，往后不管你怎么点击（2秒内点击多次也只不会触发），用户点击间隔时间大于周期后才会触发。

防抖的应用场景

• 登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖
• 调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖
• 文本编辑器实时保存，当无任何更改操作一秒后进行保存

节流的应用场景

• 鼠标连续不断地触发某事件（如点击），单位时间内只触发一次；
• 监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断。例如：懒加载；
• 浏览器播放事件，每个一秒计算一次进度信息等

代码

持续更新中。。。

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdkf/35383.html