来跟我一起学习呀！本人程序媛一枚，2年工作经验，换了2次工作，下面是我总结的一些经常被问道的前端面试题，常用于一面，检验程序猿基本功。

从浏览器发起请求到用户正常访问页面都经历了什么？

1. 预处理
2. DNS预处理
3. 建立TCP连接
4. 发起请求
5. 等待响应，接收数据
6. 处理元素
7. 布局渲染

前端性能优化的方法

1. 减少http请求，防抖和节流
2. 使用CDN引入外部js
3. 将引入的js放到body的底部
4. 减少全局变量的引入
5. vue中组件懒加载
6. 代码精简，封装模块，封装组件
7. 减少DOM操作
8. 减少作用域链查找
9. 将js和css作为外部模块来引入

数组去重

1. 一个数组的去重

Array.from(new Set(arr))

2. 两个数组的去重

Array.from(new Set(arr1,arr2))

3. 先对数组进行排序，然后比较相邻元素是否相等，从而排除重复项进项去重，如果为两个数组则先合并为一个数组在去重

Array.sort(arr)
arr.forEach(item,index){item===arr[index+1] arr.splice(index,1) index--}

4. 最优解，首先创建一个空对象，然后用for循环遍历，利用对象的属性不会重复这一特性检验数组元素是否重复

let obj = {}
for(let i of arr){
  if(!obj[i]){
    arr.push(i)
    obj[i]=1
  }
}

对象的深拷贝

JSON.stringfy(JSON.parse())

先将js对象转化为json对象，在将json对象转化为js对象，拷贝过程中如果对象中有undefined,symbol拷贝后这个键值对会消失

数组的深拷贝

for循环，slice,push,concat等对数组的操作都可以实现数组的深拷贝

请求多个接口时如何保证同时拿到数据并渲染同一个页面

Promise([methods1,method2,method3]}.then(res1,res2,res3){}

跨域的原理与解决方法

1. 跨域的原因：浏览器的同源策略，（同源策略：协议相同，域名相同，端口相同）
2. 同源策略的目的：为了保护用户数据的安全性，防止恶意的网站窃取数据
3. 如何违背了同源策略，DOM无法获取，ajax请求不能发送
4. websocket是一种通信协议，该协议不实行同源策略可以跨域没有浏览器的跨域问题
5. 解决办法：JSONP需要目标服务器赔给一个callback函数

今天就先到这里吧，会继续不定期更新web前端知识，包括Vue,ES6,CSS3,HTML5,uni-app等等，如果我的文章对你有帮助点个关注共同学习吧！