前端高频面试题

1. js的基本类型有哪些？引用类型有哪些？

基本数据类型：
undefined、null、boolean、number、string
引用数据类型：
function、object、array

2、null和Undefined的区别

Undefined:表示变量声明但未初始化时的值
null：表示准备用来保存对象，还没有真正保存对象的值。从逻辑角度看，null值表示一个空对象指针。

3、如何判断一个变量是Array类型？如何判断一个变量是Number类型？ （ 都不止一种 ）。

• typeof：识别所有值类型；识别函数；判断是否为引用类型。
• instanceof：[ ] instanceof Array 判断是否为实例（只有在原型链上有）
• constructor:[ ].constructor==object 判断其构造函数
• object.prototype.toString.call( ) :执行原型中的toString方法并改变this指向obj
• Array.isArray 判断是否为数组。

4、数组常用方法

• 遍历 forEach
• 所有 every
• 排序 sort
• 查找下标 findIndex
• 查找 find
• 累计 reduce
• 映射 map
• 过滤 filter
• 有一个： some

详细介绍请访问下面这个博客地址：
数组的常用方法详解

5.、解释一下事件冒泡和事件捕获？

事件冒泡： 当你使用事件捕获时，父级元素先触发，子级元素后触发。
e.stopPropogation() 阻止时间冒泡流
e.preventDefault() 阻止默认事件
事件捕获： 当你使用事件冒泡时，子级元素先触发，父级元素后触发。
element.addEventListener(callbacak,false)

6、简单说一下对闭包的了解

闭包就是函数嵌套函数的特殊形式：

• 函数作为参数被传入
• 函数作为返回值被返回

闭包其实也是自由变量的特殊表现形式:

• 自由变量：没有在当前作用域声明的变量
• 自由变量的值和作用域是在函数定义的时候去欸的那个，不是在函数执行的时候确定

优点：

• 可以变量私有化，避免变量的全局污染
• 自由变量值，存储在内存中不会被销毁

应用场景：

• 封装组件，插件库的时候避免变量全局污染
• 创造局部作用域变量，类似于let效果

7、如何实现继承

• 构造函数绑定：使用 call 或 apply 方法，将父对象的构造函数绑定在子对象上

 functionA(name){this.name=name}
 functionB(name,age){
	A.call(this.age)
	this.age = age;
}
B.prototype = Object.create(A.prototype)
B.prototype.constructor =  B

• 实例继承：将子对象的 prototype 指向父对象的一个实例
• 拷贝继承：如果把父对象的所有属性和方法，拷贝进子对象
• 原型继承：将子对象的 prototype 指向父对象的 prototype
• ES6 语法糖 extends：class ColorPoint extends Point {}

8、原型与原型链应用场景

• 每一个对象都有一个隐式原型__proto__
• 每一个构造函数都有一个显示原型__prototype__
• 对象实例的隐式原型等同于，创建该对象的构造函数的显示原型prototype
• 原型链：
  当查找一个对象的方法和属性，先在自身对象属性上查找，找不到，则沿着隐式原型__proto__向上查找，（proto.proto）
• 应用场景：
  1.实现继承
  2.创建实例的公共方法：Vue.prototype.$http = axios

9、this指向问题

1. 全局 window ：script
   setInterval.setTimeout
2. 对象 指对象本身
3. 构造函数的实例
4. class类的实例
5. 箭头函数 指向上一层作用域this
6. 函数 函数的直接调者
7. call.apply.bind 指向第一个参数

10、浏览器的渲染过程

1. 解析 HTML 构建 DOM(DOM 树)
2. CSS 文件下载完成，开始构建 CSSOM(CSS 树)
3. 合并dom和css树，生成 渲染树
4. 渲染页面

11、在地址输入一个地址 按回车 ：

1. 查找IP
   a. 浏览器缓存
   b. host文件
   c. 本地缓存
   d. dns服务器向上查询 找到域名对应的 IP 为止
2. 得到响应数据 ： 三次握手 四次挥手 建立连接，下载html，根据 html 下载其他资源

12.前端性能优化

1. 减少 http 请求和大小 （压缩与合并）+ base64 图片
2. 优化首屏的渲染速度 （css放前面，js放后面，避免错误，只加载首屏的必要资源）
3. 按需加载，懒加载，预加载 （js，css，图片，页面，按需 懒预加载）
4. 让加载更快 启用 CDN ,开启gzip，缓存

13、promise

ES6 新增方法：解决异步操作，回调函数层级过深的问题（回调地狱）
详细介绍请进入以下链接
promise详解

14、跨域

• 跨域考虑到安全问题，有同源策略
• 所谓同源策略，就是“端口，域名，协议”三者一致，就算有两个相同的域名访问统一IP地址，也非同源
• 如果“端口，域名，协议”三者内有一者不相同，就称为跨域

跨域解决方案：
十种跨域方案详解

15、数组去重

• es6 中的set
• 遍历去重
  1、fliter : 当前的index与indexOf(elem)的值不一致去重
  2、对象key唯一 ：用一个临时对象吧数组的值，当key存储在对象中，如果对象上已经有key值，说明数组的值是重的

16、事件循环机制

js是基于V8引擎的单线程运行机制：也就是在主线程中，代码的执行是顺序执行的

• 宏任务：setTimeout、setInterval, Ajax，DOM事件
• 微任务：Promise， async/await，process.nextTick

先执行微任务再执行宏任务

17、重绘（回流）和重排

回流不一定需要重排，重排必然会导致重绘

1、重排：当渲染树的一部分必须更新并且节点的尺寸发生了变化，重新构造渲染树。

• 添加、删除可见的dom
• 元素的位置改变
• 元素的尺寸改变（外边距、内边距、边框厚度、宽高等几何属性）
• 页面渲染初始化
• 浏览器窗口尺寸改变

2、重绘：一般都是修改元素样式，例如颜色，字体大小，背景

减少重绘重排

1、不要一条一条的修改DOM的样式，可以先定义好css的class，然后修改DOM的className。

2、不要把DOM结点的属性值放在一个循环里当成循环里的变量。

3、加动画的HTML元素适用fixed或absolute的position，那5这样修改他们的css是不会reflow