持续更新前端面试题

原创已于 2025-02-13 22:01:17 修改 · 288 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

前端面试合集

于 2025-02-10 21:13:49 首次发布

一.JavaScript

1.1 同步和异步

同步：是指在js执行过程中的方法都是顺序执行，也就是一个方法执行完成之后再执行下一个方法。
异步：比如我们在执行一个方法的时候这个方法的执行时间特别长，也因此出现异步执行，也就是说当一个方法在执行过程中不会阻塞
	 代码的运行，会继续执行下一个方法，当这个长时间方法执行完成之后会进行一个回调函数，在继续执行当前方法。

1.2 原型和原型链

原型：原型就是prototype，每个函数都会有一个prototype属性，
	作用：可以封装一些公共的函数或者方法，用于js中的继承
原型链：__proto__,每个对象都__proto__属性，用于查找构造函数中的原型(指向它的原型对象)，使用其中的方法，
     他可以一层一层的往上查找使用的方法。

1.3 事件循环机制

定义：事件循环机制就是指js在运行时候，按照一定的规则处理代码中的异步操作和事件的机制。
包含：调用栈（主线程）、宏任务队列、微任务队列
讲解：在js运行的时候，会存在同步和异步的方法，首先进入任务执行栈，先判断是同步任务还是异步任务，如果是同步任务
           直接进入调用栈中执行，当所有的同步任务执行完成之后，他会去查看微任务队列中是否存在任务，如果存在就
           拿出微任务队列中的任务，在调用栈中进行调用，当微任务队列中的任务都完成之后，在去查看宏任务队列中是
           否存在宏任务，如果存在继续执行，直到所有的任务在调用栈中完成。这样循环往复的过程被叫做事件循环机制。
注意：事件循环机制：先同后异，先微后宏。

1.4 垃圾回收机制

作用：是为了回收不再使用的对象，减少内存的使用。
策略：引用计数法和标记清除法。
引用计数法：当我们使用一次对象加+1，取消引用一次对象-1，当为0的时候执行垃圾回收。
	缺点：当我们进行循环应用的时候，永远不可能为0。
标记清除法：这是为了优化引用计数法，将所有的对象都标记为0，存活的对象赋值为1，清空所有为0的对象，在将为1的对象
		   置为0，然后在进行执行清除对象操作。
因为标记清除法会造成内存空间不连续，因此会有三种策略寻找内存空间位置：
1.first-fit：找到能放置新对象的第一个位置（当前最优策略）
2.best-fit：找到能防止新对象的最小位置
3.worst-fit:找到空间最大的内存位置，然后进行切割

1.5 闭包

定义：在js中“一个方法以及其运行环境的组合”，允许内部函数访问外部函数的变量。
场景：js中的函数嵌套就形成了一个闭包（Closure） [节流,防抖都存在闭包]
作用：将变量可以作为私有变量，只能访问不能修改。
注意：1.闭包中并不一定会存在内存泄漏。2.闭包中不一定存在return

1.5.1 什么时候存在return？

当外部函数想要访问内部变量的时候可以使用函数嵌套的方式，将方法的变量在内部函数中进行使用，然后return出去。

function outer() {
	let a = 10
	return function () {
		console.log(a)
	}
}
const fn = outer()
fn()

二.ES6

2.1 理解Promise

提出原因:为了解决异步编程中的“回调地狱”问题，提高代码的可读性
三种状态：pending(原始状态)、fulfilled(成功状态)、rejected(失败状态)   
		只能从原始状态改变为成功状态/失败状态，状态改变不可逆
优点：它可以采用链式结构将多个异步操作串联到一起（.then方法），在这个链式结构中可能会出现错误，我们可以在最后的时候
     加一个.catch方法，用于捕获在每一个阶段调用时候出现的错误。其中还会有一个.finally方法，无论在链式调用中是否完
     成都会执行一个finally中的逻辑代码(例如清理工作)
 Promise.all：接收一个Promise数组，这个数组里面如果有一个失败，直接执行catch方法，然后输出失败原因。
 Promise.race:接收一个Promise数组，将最先返回的Promise的结果输出出来，不管成功或者失败都输出第一个返回结果的Promise。

三.html

四.css

4.1 详细说一下flex:1代表什么？

1.这是一个简写属性
2.代表三个属性：flex-grow：1、flex-shrink：1和flex-basis:0%
 flex-grow：子元素的宽度总和在不超过父元素的宽度的时候，按照flex-grow比例进行分配剩余空间。
 flex-shrink：子元素的宽度总和超出父元素的宽度的时候，按照比例进行缩小，让父元素能够容下所有子元素。
 flex-basis：这个属性定义了项目在分配额外空间之前的基准大小。值为0%表示项目在分配额外空间之前不占用空间自动填充所有可用空间。

注意：在写上flex：1的时候width属性不生效。

4.2 position

1.static：默认值，当我们不设置position属性的时候，它是默认的
2.relative：相对定位，相对于“当前位置（未设置position时候的位置）”进行修改，top，left等调整位置
3.absolute：绝对定位，相对于非static父元素进行定位
4.fixed：浏览器绝对定位，相对于浏览器的绝对定位
5.sticky：粘性定位，介于relative和fixed之间

注意：2中的位置为非static，也就是说如果我们不给他的父元素设置position，那么他会继续往上寻找存在position属性的盒子，一直到body。
注意：5中的位置是在滚动的时候，在滚动前是relative定位，滚动之后是fixed定位。

五.框架(vue)

六.浏览器

6.1 从输入url到显示浏览器界面经历的过程？

1.DNS解析：为了解析域名，然后找到电脑的ip地址
2.建立TCP连接：三次握手，四次挥手，建立可靠的连接
3.发送HTTP请求：构建HTTP请求报文并通过TCP协议中发送到服务器指定端口
4.服务器处理请求并返回HTTP报文
5.浏览器解析渲染：渲染过程
6.断开连接

6.2 浏览器渲染过程？

1.请求得到服务器返回的html文件
	在这个过程中，发生的过程：字节-->字符-->token-->节点-->DOM
	（CSSOM也会经历这个过程，但是生成CSSOM树是通过style样式生成，而不是html结构）
	字节：请求得到的数据
	字符：程序员看到的<body>等标签结构
	token：电脑能够识别的数据
	节点：这是一些对象里面包含一些函数方法
	DOM：document object model 文档对象模型
2.构建DOM
3.构建CSSOM
4.将DOM和CSSOM进行组合形成渲染树
5.布局：这里就是进行的“回流”操作，这个时候浏览器会计算元素的大小、形状、位置
6.绘制：这里是进行的“重绘”操作，浏览器会绘制到浏览器上形成像素点，这个时候同样会将央视渲染上去