2024最新前端面试题_2024前端面试题

一、css

1、说一下css的盒模型

2、css选择器的优先级

3、隐藏元素的方法有哪些

4、px和rem的区别是什么

 

5、重绘和重排（回流）的区别

浏览器渲染机制

 

6、让一个元素水平垂直居中的方式 定位+margin

定位+transform

flex布局

7、css的哪些属性可以继承？哪些不可以继承？

• 能继承的属性

1. 字体系列属性:font、font-family、font-weight、font-size、font-style;
2. 文本系列属性: 2.1）内联元素：color、line-height、word-spacing、letter-spacing、 text-transform; 2.2）块级元素：text-indent、text-align;
3. 元素可见性：visibility
4. 表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、 table-layout;
5. 列表布局属性：list-style

• 不能继承的属性

1. display：规定元素应该生成的框的类型；
2. 文本属性：vertical-align、text-decoration;
3. 盒子模型的属性：width、height、margin 、border、padding;
4. 背景属性：background、background-color、background-image;
5. 定位属性：float、clear、position、top、right、bottom、left、min-width、 min-height、max-width、max-height、overflow、clip;

8、有没有用过预处理器

 

二、js

1、js由哪三部分组成

2、js有哪些内置对象

3、操作数组的方法有哪些

 4、js对数据类的检测方式有哪些

 

判断数组的几种方法

数组是属于Object类型的，也就是引用类型，所以不能使用 typeof 来判断其具体类型。下面这些方法是判断数组的几种方法：

1、instanceof运算符

主要是判断某个实例（arr）是否属于某个对象。

let arr = [1,2,3];

console.log(arr instanceof Array); //true

 

2、constructor

判断实例（arr）的构造函数是否等于某个对象。

let arr = [1,2,3];

console.log(arr.constructor == Array); //true

 

3、isArray

ES5新增数组方法，判断数组是不是数组。

let arr = [1,2,3];

console.log(Array.isArray(arr)); //true

 

4、Object.getPrototypeOf()

Object.getPrototypeOf()方法返回指定对象的原型，然后和Array的原型对比。

let arr = [1,2,3];

console.log(Object.getPrototypeOf(arr) == Array.prototype); //true

 

5、Array原型链上的isPrototypeOf

Array.prototype表示Array的构造函数的原型；

isPrototypeOf()方法可以判断一个对象是否存在于另一个对象的原型链上。

let arr = [1,2,3];

console.log(Array.prototype.isPrototypeOf(arr)); //true

 

6、Object.prototype.toString.call()

把对象转化成字符串和一个已知的对象进行对比。

let arr = [1,2,3];

console.log(Object.prototype.toString.cal(arr) == '[object Array]'); //true

5、说一下闭包、闭包有什么特点

6、前端的内存泄漏怎么理解

7、事件委托是什么

8、基本数据类型和引用数据类型的区别

9、说一下原型链

10、new操作符具体做了什么

11、js是如何实现继承的

12、js的设计原理是什么

13、js中关于this指向的问题

JavaScript 的 this 原理 - 阮一峰的网络日志

14、script标签里的async和defer有什么区别

15、setTimeout最小执行时间

16、ES6和ES5有什么区别

17、ES6的新特性有哪些

18、call、apply、bind三者的区别

19

 

20

 

 

21

JavaScript的事件循环机制是一种用于处理异步任务的系统，它确保代码能够顺序执行，同时处理异步操作如定时器和事件监听。事件循环机制主要由以下三个部分组成：

1. 调用栈：用于存储主线程代码的执行顺序。
2. 任务队列：用于存储异步任务（如定时器或事件监听器）的回调函数。
3. 事件循环线程：负责循环监听任务队列中是否有任务需要执行。如果有，则将其添加到调用栈中执行。

当代码遇到一个异步任务时，该任务的回调函数会被添加到任务队列中。当主线程中的代码执行完毕，事件循环线程会从任务队列中取出一个任务并添加到调用栈中执行。这个过程会一直重复，直到任务队列中没有任何任务为止。需要注意的是，任务队列中的任务是按照先进先出的原则执行的。

在浏览器环境中，主线程运行在浏览器渲染进程中，而渲染进程中还有一个I/O线程和网络进程，它们会产生新的任务。这些任务会被I/O线程放入消息队列中，由渲染进程维护。主线程的事件循环线程会不断地从消息队列中取出新的任务去执行，以处理由I/O线程和其他进程产生的异步任务。

总结来说，JavaScript的事件循环机制通过一个循环系统来处理主线程内部产生的任务以及由其他进程产生的任务，确保代码能够顺序执行并处理异步操作。

22

 

23

 24

 25

26

 27

 28

 29

 30

 

 

 

 

 

三、vue相关

【分享当下较新的30道Vue面试题！-CSDN博客】

1、Vue的事件绑定原理

• 原生DOM 的绑定：Vue在创建真实DOM时会调用 createElm ，默认会调用 invokeCreateHooks 。会遍历当前平台下相对的属性处理代码，其中就有 updateDOMListeners 方法，内部会传入 add（） 方法

• 组件绑定事件，原生事件，自定义事件；组件绑定之间是通过Vue中自定义的 $on 方法实现的。（可以理解为：组件的 nativeOnOn 等价于 普通元素on 组件的on会单独处理）

2、vue是如何实现响应式数据的呢？（响应式数据原理）❗

Vue2： Object.defineProperty 重新定义 data 中所有的属性， Object.defineProperty 可以使数据的获取与设置增加一个拦截的功能，拦截属性的获取，进行依赖收集。拦截属性的更新操作，进行通知。

具体的过程：首先Vue使用 initData 初始化用户传入的参数，然后使用 new Observer 对数据进行观测，如果数据是一个对象类型就会调用 this.walk（value） 对对象进行处理，内部使用 defineeReactive 循环对象属性定义响应式变化，核心就是使用 Object.defineProperty 重新定义数据。

 

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】