前端八股文

2023-12-13 19:02:03

前端八股文


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连接

文章来源:https://blog.csdn.net/qq_42882457/article/details/134900117
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。