前端八股文

前端八股文

---

1.css选择优先级？

!important > 行内样式 > id > 类/伪类/属性 > 标签 > 全局选择器

2.px与rem区别？

px是像素，每个像素大小是一样的，绝对单位长度。
rem，相对单位，相对于html根节点的font-size的值，font-size：62.5%
1rem = 10px。

3.重绘与重排的区别？

重排（回流）：布局引擎会根据所有的样式计算盒模型在页面的位置和大小。
重绘：计算盒模型在页面的位置、大小和其他属性后，浏览器会根据盒子模型的特性进行绘制。
对DOM的大小、位置进行修改后，浏览器需要重新计算元素的几何属性，叫作重排；
对DOM的样式进行修改，比如color和background-color，浏览器不需要重新计算几何属性的时候，直接绘制了该元素的新样式，只触发了重绘。

4.元素水平垂直居中的方法？

1.定位+margin
2.定位+transform
3.flex布局 justify-content:center align-item:center
4.grid布局
5.table布局

5.什么是闭包，闭包有什么特点？

函数嵌套函数，内部函数被外部函数返回并保存下来时候，就会产生闭包
特点：可以重复利用变量，并且这个变量不会污染全局的一种机制；这个变量一种保存再内存在，不会被垃圾回收机制回收
确定：闭包较多时候，会消耗内存，导致页面性能下降。
使用场景：防抖，节流，函数嵌套函数避免全局污染的时候。

function fn(a){
	return function(){
		console.log(a)
	}
}

6.什么是事件委托？

又叫事件代理，利用了事件冒泡的机制实现，也就是说把子元素的事件绑定到了父元素身上。
如果子元素阻止了事件冒泡，那么委托也不能成立。
阻止事件冒泡：event.stopPropagation()
addEventListener(‘click’,‘函数名’,true/false) 默认是false（事件冒泡），true（事件捕获）
好处：提高性能，减少事件的绑定

7.什么是原型链？

原型就是一个普通对象，他是为了构造函数的实例共享属性和方法：所有实例中引用的原型都是同一个对象
使用prototype可以把方法挂在原型上，内存只保留一份。
_ proto _可以理解为指针，实例对象中的属性，指向了构造函数原型（prototype）
一个实例对象在调用属性和方法的时候，会依次从实例本身、构造函数原型、原型的原型上去查找

function Person(){
	this.say = function(){
		console.log('唱歌')
}
Person.prototype.look = function(){
	console.log('西游')
}
var p1 = new Person()
var p2 = new Person()
p1.say()  // 唱歌
p2.say()  // 唱歌
p1.look()  // 西游
p2.look()  // 西游
console.log( p1._proto_ === Person.prototype )  true

8.new操作符具体做了什么？

1.先创建一个空对象；
2.把空对象和构造函数通过原型链进行链接；
3.把构造函数的this绑定到新的空对象身上；
4.根据构建函数返回的类型，如果是值类型，则返回对象，如果是引用类型，就返回引用类型。

9.Js是如何实现继承的？

1.原型链继承
2.借用构造函数继承
3.组合式继承
4.ES6的class类继承

10.JS中的this指向的问题？

1.全局中的this指向 指向的是window；
2.全局作用域或者普通函数中的this 指向的是全局window；
3.this永远指向最后调用它的对象 在不是箭头函数的情况下；
4.new关键词改变了this的指向；
5.apply,call,bind 可以改变this指向，不是箭头函数；
6.箭头函数中的this，它的指向在定义的时候已经确定了，箭头函数没有this，看外层是否有函数，有就是外层函数的this，没有就是window；
7.匿名函数中的this 永远指向window

11.ES6的新特性有哪些？

1.新增块级作用域（let,const）
2.新增定义类的语法(class)
3.新增了一种基本数据类型(symbol)
4.新增数组API
5.promise async与await
6.新增了set和map数据结构

12.call、apply、bind三者有什么区别？

都是改变this的指向和函数的调用，call和apply功能类似，只是传参的方法不同；
call方法传递的是一个参数列表，apply传递的是一个数组，bind传参后不会立刻执行，会返回一个改变了this指向的函数，这个函数还是可以传参的。

13.如何实现一个深拷贝？

深拷贝就是完全拷贝一份新对象，会在堆内存开辟新的空间，拷贝对象被修改后，原对象不受影响；
主要针对的是引用数据类型
1.扩展运算符 缺点：只能实现第一层，当有多层的时候还是浅拷贝；
2.JSON.parse（JSON.stringfy()）缺点：该方法不会拷贝内部函数；
3.利用递归函数实现 ；

14.ajax是什么？是怎么实现的？

创建交互式网页应用的网页开发技术 在不重新加载整个网页的前提下，与服务器交换数据并更新部分内容；
通过Xmlhttprequest对象向服务器发送异步请求，然后从服务器拿到数据，最后通过JS操作DOM更新界面：
1.创建Xmlhttprequest 对象 ；
2.通过Xml对象里的open()方法和服务器建立连接；
3.构建请求所需的数据，并通过Xml对象的send()发送给服务器；
4.通过Xml对象的onreadystate change 事件监听服务器和你的通信状态；
5.接收并处理服务器响应的数据结果；
6.把处理的数据更新到HTML页面上。

15.get和post有什么区别？

1.get一般是获取数据，post一般是提交数据；
2.get参数放在url中，所以安全性比较差，post是放在body中；
3.get请求刷新服务器或退回是没有影响的，post请求退回是会重新提交数据；
4.get请求时会被缓存，会保存再浏览器的历史记录中，post不会；

16.promise的原理是什么？优缺点是什么？

Promise对象，封装了一个异步操作并且还可以获取成功或失败的结果；
Promise主要就是解决回调地狱的问题，之前如果异步任务比较多，同时他们有相互依赖的关系，就只能使用回调函数处理，这样就容易形成回调地狱，代码的可读性差，可维护性也很差；
有三种状态：pending 初始状态 fulfilled 成功状态 reject 失败状态
状态改变会有两种情况：
pending -> fulfilled ; pending -> rejected 一旦发生，状态就会凝固，不会再变；
首先就是无法取消Promise，一旦创建他就会立即执行，不能中途取消；
如果不设回调，Promise内部抛出的就无法反馈到外面；
若当前处于pending状态时，无法得知目前在哪个阶段；
原理：
构造Promise实例，需要传递函数的参数，这个函数有两个形参，分别都是函数类型，一个是resolve，一个是reject；resolve 函数的作用是，将 Promise 对象的状态从 未完成 变为 成功（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；reject 函数的作用是，将 Promise 对象的状态从 未完成 变为 失败（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去；用then方法分别指定 resolved 状态和 rejected 状态的回调函数。

17.token登录流程？

1.客户端用账号密码请求登录；
2.服务端收到请求后，需要去验证账号密码；
3.验证成功后，服务端会签发一个token，把这个token发送给客户端；
4.客户端收到token后保存起来，可以放在cookie也可以是localstorage；
5.客户端每次向服务端发送请求资源的时候，都需要携带这个token；
6.服务端收到请求，接着去验证客户端里的token，验证成功才会返回给客户端请求的数据。

18.url解析/页面渲染的过程是怎么样的？

1.DNS解析
2.建立TCP连接
3.发送HTTP请求
4.服务器处理请求
5.渲染页面 浏览器获取HTML和CSS资源，构建DOM树和CSS树，把DOM和CSS合并成渲染树
6.断开TCP连接