前端开发常见面试题

1. 说说你对盒子模型的理解？

CSS盒模型本质上就是一个div，封装周围的HTML元素，它包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性，

content：即实际内容，显示文本和图像；

border：即边框，围绕元素内容的线，由粗细、样式、颜色三部分组成；

padding：即内边距，内边距是透明的，取值不能为负，受盒子的background属性影响；

margin：即外边距，在元素外创建格外的空白。

1. 如何让一个盒子水平垂直居中,有哪些方法越多越好？

text-align: center和行高line-height

Margin: auto。

Transform：translate(x，y), x是总宽的一半减去自身宽度的一半， y是总高的一半减去自身宽度的一半。

弹性盒子布局，display：flex

子元素绝对定位display：left：50%；top：50%

1. 说说javascript都有哪些数据类型，如何存储的？

基本数据类型：字符串，数字，布尔，数组，undefined，Null，Symbol

引用数据类型：Object

基本数据类型：直接存储在栈（stack）中，占据空间小、大小固定，被频繁使用数据。
引用数据类型：同时存储在栈（stack）和堆（heap）中，占据空间大、大小不固定。

1. 如何理解响应式，实现响应式的方法有哪些？有什么区别？

响应式就是当数据发生改变的同时，页面数据也会随之发生改变。

Vue2中实现响应式原理是通过object.definepropty中get和set方法来进行响应式的，其中get式获取到数据的方法，set是改变数据的方法。

Vue3中实现响应式原理是通过proxy（）对象来实现响应式的，拦截对象中任意属性的变化,

 包括：属性值的读写、属性的添加、属性的删除等。

作用: 定义一个响应式的数据可以使用ref（）和reactive（）

ref可以是基本数据类型，也可以是对象，通过Object.defineProperty()来实现，需要.value获取到数据。

reactive（）只能是对象数据类型通过proxy（）劫持实现。

1. Css性能优化有哪些常见的方法？具体如何实现？

合并css文件，减少css嵌套，减少公共样式，减少通配符选择器，多用继承css属性，不使用css表达式，用<link>代替import

1. 判断数据类型的方法有哪些？有什么区别？

Typeof(）用来返回基本数据的类型  

instanceof用来返回引用数据的类型 ，返回布尔值。

Object.prototype.toString.call() 返回的是数据的类型

1. 说说你对事件循环的理解？

因为js是单线程的一门语言，分为同步任务和异步任务，同步任务会在执行栈中先被执行，遇到异步任务会将其挂载到任务队列暂时保存，异步任务又分为宏任务和微任务，一般来说，微任务的执行顺序要比宏任务高，一次事件循环只能处理一个宏任务，也会将所有微任务清空，微任务发生在渲染之前，宏任务发生在渲染之后，这样由同步任务到微任务再到宏任务执行完成一次称为一次事件循环，反复进行此操作，称为事件循环。

1. 说说你对BOM的理解，BOM的核心都有哪些？作用是什么

BOM (Browser Object Model)，浏览器对象模型，提供了独立于内容与浏览器窗口进行交互的对象

其作用就是跟浏览器做一些交互效果。

Bom的核心对象是window，它表示浏览器的一个实例

在浏览器中，window对象有双重角色，即是浏览器窗口的一个接口，又是全局对象

因此所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法

window.open() 既可以导航到一个特定的url，也可以打开一个新的浏览器窗口

1. Bind,call,apply有什么区别？如何实现一个bind方法？

call()方法和apply()都是调用一个函数，call()是将一个对象作为函数执行时的上下文(this 值)，以及一个参数列表传递给函数。apply()它接受一个数组作为参数，数组中的每个元素将被视为函数的一个参数。

bind()方法创建一个新的函数，将传入的对象绑定为新函数的this值，并返回一个新函数。这个新函数可以在以后的任何时间被调用，并且this值始终指向绑定的对象。

实现一个bind()方法：返回一个新的函数，该函数在调用时将传入的对象作为其上下文对象(this 值)。

　返回的函数应该接受任意数量的参数，这些参数在调用时应该作为原始函数的参数传递。

　　如果返回的函数被用作构造函数(使用 new 关键字)，则应该创建一个新对象并使用原始函数的原型继承它，然后使用新对象作为上下文对象来调用原始函数，并将其参数传递给原始函数。

　　如果返回的函数被直接调用，则只需要将参数传递给原始函数。

1. 如何理解闭包？闭包的应用场景是？

闭包是指有权访问另一个函数作用域中的变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量。

应用场景：创建私有变量，函数柯里化，节流和防抖，维持生命周期

1. 说说你对同步和异步的区别的理解？

同步任务是在主线程上执行，是所有的操作都做完，才返回给用户结果。即写完数据库之后，在相应用户，用户体验不好。

异步任务会被挂载，不用等所有操作等做完，就相应用户请求。即先相应用户请求，然后慢慢去写数据库，用户体验较好。

1. Css选择器有哪些？优先级是什么？哪些属性可以继承？

id选择器（#box）类选择器（.one）标签选择器（div），后代选择器（#box div）伪类选择器：hover方法名 滑过的元素

内联 > ID选择器 > 类选择器 > 标签选择器

字体系列属性

文本系列属性

元素可见性

表格布局属性

列表属性

1. 简单说一下什么是事件代理？

React 并不会把所有的处理函数直接绑定在真实的节点上。而是把所有的事件绑定到结构的最外层，使用一个统一的事件监听器，这个事件监听器上维持了一个映射来保存所有组件内部的事件监听和处理函数。当组件挂载或卸载时，只是在这个统一的事件监听器上插入或删除一些对象。当事件发生时，首先被这个统一的事件监听器处理，然后在映射里找到真正的事件处理函数并调用。

这样做的优点是解决了兼容性问题，并且简化了事件处理和回收机制。但是有些事件 React 并没有实现，比如 window 的 resize 事件。

1. 如何理解重回和回流？什么场景下才能

回流：布局引擎会根据各种样式计算每个盒子在页面上的大小与位置

回流这一阶段主要是计算节点的位置和几何信息，那么当页面布局和几何信息发生变化的时候，就需要回流

重绘：当计算好盒模型的位置、大小及其他属性后，浏览器根据每个盒子特性进行绘制

触发回流一定会触发重绘颜色的修改，文本方向的修改，阴影的修改

1. 什么是防抖和节流，有什么区别？如何实现？

节流：n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效，使用定时器设置固定的时间触发回调函数的执行。在一段连续操作中，每一段时间只执行一次，频率较高的事件中使用来提高性能

防抖：n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时，函数防抖，在一段连续操作结束后，处理回调，利用clearTimeout 和 setTimeout实现。

1. 说说你对作用域链的理解？

作用域又分为了 全局作用域 和 函数作用域 ，es6提供了三个定义变量的方法，let，const，var

全局作用域：var 定义变量时会对变量作用域进行提升，在任何位置都能访问，window的内置属性就是全局作用域

函数作用域：let，const定义变量只能在函数作用域中访问，不会进行变量提升。

1. 说说你对原型和原型链的理解？

每一个构造函数都有一个prototype属性，被称为函数的原型，函数通过被new实例化后，会有一个__proto__实例化属性。Fn.prototype===new obj.__proto__。

当访问函数的某个属性时，会先从自身查找，如果查找到就结束。如果没有查找到，会到实例化对象上查找，也就是new obj的__proto__, 如果还没有找到，那么会继续向上查找，依此类推，一直查找到原型链的最顶端object对象，如果还没有找到，会返回null，按这个顺序进行查找属性的隐形链条称为原型链。

1. Vue的生命周期和含义有哪些？

创建阶段   beforeCreate：在实例被创建之初，完成数据观测和event/eventBus事件配置等初始化任务之前调用。created：实例已经完成了数据观测等初始化任务，但是DOM元素并没有生成，$el属性不存在，无法访问。

   挂载阶段：beforeMount：在DOM挂载之前调用，在此期间可以对DOM进行处理，但还未能访问到DOM元素。mounted：DOM挂载完成后调用，可以访问到DOM元素、实例属性和方法，并可以与后端请求数据和操作DOM。

更新阶段 ：beforeUpdate：在数据更新且虚拟DOM重新渲染之前调用，此时可以在更新之前访问现有的DOM，可以在这里对更新之前的状态做一些操作。updated：数据已经更新，虚拟DOM也重新渲染完成后调用，在此期间可以操作更新后的DOM。

卸载阶段：当组件不再需要的时候，需要进行卸载操作，也会触发一系列的生命周期函数：

   beforeDestroy：在实例销毁之前调用。这个阶段可以进行一些清除工作，比如清除事件监听器或取消定时器。destroyed：实例被销毁后调用，此时组件中的数据和订阅都已经被销毁。

1. Vue自定义指令的钩子函数有哪些？.

bind:只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

inserted:被绑定元素插入父节点时调用

update:所在组建的VNode更新时调用，但是可能发生在其子VNode更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模块更新。

1. Javascript本地存储有哪些？区别和使用场景？

Cookie：cookie是指某些网站为了辨别用户身份而储存在用户本地终端上的数据。标记用户和跟踪用户。

localStorage：持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的，长期保存的数据使用

sessionStorage：和localStorage的用法基本一致，但是sessionStorage一旦页面关闭，将会删除数据。敏感账号登录