2023年前端面试整理（持续更新中）

html/css

1、CSS有哪些选择器？优先级怎么样？

还有通用、分组、后代、子、相邻兄弟。优先级行内、ID、类、标签。如果是两个以上同类型选择器则后定义的会覆盖先定义的。

2、怎么理解高度坍缩？

使用了absolute/fixed或者float之后，对于上下的元素来说当前元素不存在，所在位置会被填充。可以通过对父元素使用overflow：hidden或者清楚浮动的技术来避免这个问题。

3、relative和absolute及应用场景？

relative相对与元素本身进行定位，absolute相对于最近的父级定位元素进行定位。比如要调整一个容器某个图标的位置。对容器使用position：relative。对图标元素使用position:absolute，left值/top值填写上。这是最常见的应用

4、说下盒模型？

包括content/padding/border/margin

5、html语义化标签有什么好处？

 1、提高可读性。2、方便搜索引擎优化

6、行内标签和块级标签有哪些？

行内：span/img/a 块级：div/h1-h5/header/footer/body

7、bfc产生条件？

BFC指的是内部元素不会影响外部元素的变化。

场景：1、在css的margin值纵向重叠；2、清除浮动解决高度坍缩。3、overflow设置为hidden

8、margin-负值问题及其应用？

圣杯布局和双飞翼布局。margi-top/left 自身向上或者左移动。margin-bottom/right，下边或者右边元素向上或者向左移动，且对于旁边元素宽度或者高度在减小。

9、marin纵向重叠的问题？

上下两个元素margin-bottom和margin-top重叠了，取大的那一个。

10、如何清除浮动？

display:table;clear:both;content: ' '

11、介绍下flex布局？

        1、justify-content:水平方向调整位置；align-items：垂直方向调整位置；flex-direction：调整元素显示方向；flex-wrap：超出是否换行。2、子元素都设置味flex：1 可以实现元素均分父元素宽度，其中一个元素设置为1，可以实现填充父元素剩余高度或者宽度。

12、用flex布局实现三骰子

父元素：display: flex;justify-content: space-between; 子元素1:align-self:flex-start 子元素3:align-self:flex-end

13、absolute与relative有什么区别？

absolute相对于父级定位元素定位，relative相对于自身。实际项目中经常搭配使用。父级元素使用relative，然后子元素使用absolute。left:0 top：0，就能实现将元素移动到左上角。

14、居中的方式？

        1、使用position:absolute：top/left 50%，transform:translate(-50%,-50%)。

        2、使用flex。justify-content/align-items：center。

        3、使用margin：auto。

        4、配合margin:auto和position:abluste，top/left/bottom/right都设置为0。

        5、行内元素：text-align:center，line-height等于元素当前高度。

15、min-height实际应用

没有数据返回时仍然撑起一个高度，提示无数据

16、rem是什么？

相对根元素的单位，比如根元素为20px，1rem就是20px

17、响应式布局常见方案

使用媒体查询配合rem，给根元素设置不同的font-size

18、vh/vw是什么？

可是区域的宽度为100，1vh相当于可视区域的1%

19、flex:1意味着什么？

包含三个属性flex-grow/flex-shrink/flex-basic。如果子元素都设置为1，有剩余空间时或者超出父容器，则等比例放大和缩小。

20、::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用

单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素，用于区分伪类和伪元素

21、form中的input可以设置为readonly和disable，请问2者有什么区别？

readonly不可编辑，但可以选择和复制；值可以传递到后台

disabled不能编辑，不能复制，不能选择；值不可以传递到后台

js基础

1、怎么作父类继承？

在类名后面使用extend 父类名称 或者 在构造函数的显示原型上指向要继承的父类

2、谈谈对原型链的理解？

以一个普通对象为例，如果这个普通对象有一个proto属性它执行其构造函数的prototype属性。它的构造函数就是Object.protoType。Object.prototype也是一个普通对象它的隐式原型指向null。当有个函数在普通对象被使用时，首先在普通对象中找，如果找不到则在其proto对应的对象上找，一直找到null。

3、怎么理解this？

使用场景：1、全局作用域中this就是window属性。2、普通对象的方法中，this指向当前对象。3、构造函数的方法里面，this指向被实例化的对象。4、箭头函数里面this指向上级作用域的对象。5、call/apply/bind中，this指向传入的对象

4、new 一个对象时发生了什么？

1、新建一个空对象。2、构造函数的this指向空对象，并执行函数体。3、将空对象的proto属性指向构造函数的prototype属性。4、返回新对象

5、call/apply/bind有什么区别？

参数列表格式不一样，一个是把参数放到第二个第三个一次类推。另一个是把所有参数放到一个数组里面。

6、什么叫做闭包？

变量的定义与使用不在用一个作用域的情况。有两种情况，变量作为函数的参数时，变量作为函数中定义，在返回的函数中使用。

7、什么叫做作用域提升？

使用var定义的变量，会把变量的声明放在第一行。

8、==和===有什么区别？

在与数字比较时==会把字符串类型的数字转换为数字在进行比较。===先比较类型，如果一致在比较值。

9、NaN、undefined、null有什么区别？

undefined是未初始化的变量，null指的没有指向的对象，NaN预期返回数字类型却没有返回数字类型的情况。注意：用typeof判断null返回object，用==判断undefined和null，得到true。

10、什么是短路运算符？

用&符号连接的逻辑判断，如果左边的逻辑判断返回false就不执行右边的逻辑判断了

11、说一下对Promise的理解?

1、解决回调地狱问题。

2、创建Promise对象会自己执行里面的方法。方法的resolved会更改状态为fullfid，方法rejected会更改状态为rejected。

3、根据状态会触发then和catch。并能够接受resolved和rejected传递过来的参数。

4、async/await优化了链式调用，相当于语法糖。await相当于promise的then。trycatch用来代替promise中的catch。

5、await后面的代码相当于回调。

12、事件轮询机制？

1、同步代码一行一行执行，遇到异步会“等待时机”，同步代码执行完成后，启动轮询。查找callbackqueue是否有程序，有则当成同步代码继续执行

13、微任务和宏任务分别有哪些？区别是什么？

微任务：promise/asyncawait。宏任务：setTimeout/setInterval/ajax。微任务执行早于宏任务

14、dom常见的操作有哪些？

1、dom元素的获取与添加删除。2、dom属性的获取(getAttibute/dataset)。3、domclass的添加与删除(addClass/removeClass)。4、dom的css获取（getComputedStyle）

15、dom如何做性能优化？

1、查询缓存。2、多个dom操作放到一个fragment里面执行。

16、常见的bom有哪些？

navigator/location。 前者获取user-agent等信息，后者获取路由访问信息及实现路由跳转

17、浏览器存储工具有哪些？

cookie/localstorage/sessionStorage。cookie请求和响应回携带此值，localStorage用于永久存储。sessionStorage用于当前会话内存储，浏览器关闭后会清空。

18、跨域的方式有哪些？

JSONP/cors/接口代理

19、数组reduce方法？

用来求累加值，字符串拼接、字符串反转。有两个参数，第一个为一个函数，第二个为初始值。函数内主要参数有累加值、当前值、当前索引

20、数组中哪些方法会改变原数组？

数组push/unshift pop/shift

21、数组中那些方法会返回一个新的函数

filter/map/reduce

22、如何把一个类数组变成一个数组

Array.prototype.slice.call(classArr)

23、map和set的理解？

如果object有排序、key值需要对象类型可以用map。

如果array不需要有序和去重，可以用set。

24、闭包的影响？

变量在内存中得不到释放，会导致内存溢出

25、ajax原理

(1)创建对象 var xhr = new XMLHttpRequest();

 (2)打开请求 xhr.open('GET', 'example.txt', true);

(3)发送请求 xhr.send(); 发送请求到服务器

(4)接收响应 xhr.onreadystatechange =function(){} (1)当readystate值从一个值变为另一个值时，都会触发readystatechange事件。 (2)当readystate==4时，表示已经接收到全部响应数据。 (3)当status ==200时，表示服务器成功返回页面和数据。

26、事件有哪些类型？

27、事件代理与事件冒泡分别是什么？

网络请求

1、http状态码有哪些？

2开头表示请求成功。

3开头表示重定向，常见的304表示可以从缓存中获取。

4开头表示请求失败，常见的404表示找不到资源。

5开头是服务端出了问题。常见的500 /504。500表示服务器内部错误，504表示网关或者代理服务器出了问题。

2、httpheader有哪些常见的属性？

cookie/useagent/last-midiried/e-tag/cache-control

3、http缓存策略？

强制缓存和协商缓存。强制缓存是服务端给个cache-control字段，定义超时时间，在一定时间不用在服务器端发送请求。协商缓存则是由资源生成的一个etag编码与服务器端的资源生成的编码对比，如果一致则返回304，表明不用从远程获取数据，否则返回最新的数据。

4、https原理？

1、服务器申请到含有publicKey Key的证书。
2、客户端发送请求到服务端。
3、服务端会返回证书和publickey
4、浏览器作证书验证，如果非法会提示用户。这里就避免了第三方劫持然后替换证书。
5、客户端用publickey加密数据，并以此数据作为对称加密的key，然后数据发送给服务端。
6、服务端解密数据，并把数据作为对称加密的key。
7、客户端正常对数据加密，服务端用同样的key解密数据。

5、https加密方式？

1、对称加密。

2、非对称加密。

6、浏览器从输入url发生了什么?

1、域名解析。2、建立TCP连接。三次握手就是说这。3、发送请求。4、服务器返回响应报文。5、生成dom树，解析css，生成rendertree，渲染页面

7、网页如何渲染？

1、解析html和css，生成各自的dom树，计算位置和大小，进行渲染。如果dom变化则重新计算位置大小并进行渲染，如果颜色等样式发生变化则只进行渲染。

8、https和http的区别？

https = http + 加密

9、什么是resfulAPI？

传统的API设计把url当成一个功能，通过？后面传参。RestfulAPI则把每个url当成唯一资源，通过POST/GET/DELETE来操作同一个url。

开发环境

1、前端为什么要进行构建和打包？

提高开发效率和优化代码输出

2、前端常见的loader和plugin？

file-loader/style-loader/html-loader/css-loder/babel-loader  definePlugin/splitChunk/ignore/

3、webpack中loader和plugin有什么区别？

一个注重文件转换，另一个功能扩展。

4、对nodejs的理解

1）在nodejs里面所有文件都是模块，相互之间是隔离的。变量通过exports或者module.export导出，通过require加载另外的模块。结合babel转换器也可以使用Import导入

2）模块分为内置模块、第三方模块、自定义模块。加载时如果写得是模块名，会优先从缓存里面加载其次是内置模块和第三方模块。第三方模块会依次往上查找上级目录的node_modules文件，直到根目录。

./../的写法会补全拓展名后加载。目录作为模块则会现在packge.json里面找，找不到会匹配目录下的index.js文件。

3）基于内置http模块，可以做本地服务。基于fs模块可以进行文件的编译和打包。

运行环境

1、前端如何性能优化？

1、减少代码体积。压缩代码、按需打包、剔除不用的函数。2、减少访问次数。文件合并、使用缓存。3、让渲染更快。css放到head里面，懒加载。尽可能早的执行js，比如在DOMCONTENTLOADED后执行。4、DOM查询缓存、多个DOM操作合并到一起执行。5、使用节流防抖

2、手写防抖节流？

节流：function throttle(callback,delay=300) {
  let timer = null
  return function() {
    if(timer){
      return
    }
    timer = setTimeout(()=>{
      callback.call(this)
      // clearTimeout(timer)
      timer = null
    },delay)
  }
}
防抖：
function debounce(callback,delay) {
  let timer = null
  return function() {
    if(timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(()=>{
    callback.call(this)
    },delay)
  }
}

3、什么是xss/xsrf攻击？

1、在浏览器输入框内输入一段可执行的script脚本，通过替换箭头来防止这种问题出现。2、xsrf，通过伪装请求让用户访问以为是正常访问。可以通过验证码来预防

4、hash路由与h5路由的区别？

两者前进后退都不会刷新页面
hash以#开头，hash变化会触发前进后退，前进后退也会触发hash变化。通过onhashchange来获取hash变化的值。
hash路由独立与服务端。
h5 history，通过history.pushState触发前进后退，通过onpopstate来获取变化的值。【只有知道路由的变化才能进行接下来的页面渲染】
h5 无论什么路由，后端都返回同一个页面，前端通过pushState来实现页面的跳转。

开发框架

jquery

1、Jquery库中的$()是什么？

用于包裹任何对象为jquery对象，可以调用jquery的属性。也可以传入一个字符串，用于查找相应的对象，并变成jquery对象。

2、网页上有5个

元素，应该如何选择它们？

$("div")

3、jquery里的ID选择器和class选择器有何不同？

$("#login")

$(".login")

4、如果点击一个按钮时使用jquery隐藏一个图片？

$(".btn").on("click",function(){ $(".image").hide() ])

5、$(document).ready() 是个什么函数？为什么要使用它？

在html dom 树构建完成后执行代码，尽早开始执行代码，提高性能。

6、window.load和jquery ready函数有什么不同？

要等待dom创建、文件图片加载完成后才执行。read则只需在dom创建完成后执行。

7、如何找到select标签的选中项

$('[name=NameOfSelectedTag]:selected') 可以按照需要使用id或者class而不是name来获取标签

8、jquery里面的each是什么函数？你是如何使用它？

遍历一个元素集合，并传入一个函数。

9、如何将一个HTML元素添加到DOM树中？

使用appendTo添加到DOM树中，可以是现存元素，也可以是新的元素。

10、$(this) 与 this 在jquery中有什么不同？

$('a').each(function(){ alert($(this).attr('href')) })

前者表示包裹的对象，可以调用jquery方法，后者当前表示上下文对象。

11、如何使用jquery来提取一个HTML标记的属性，例如.链接的href

$('#id').attr('href')

12、如何使用jquery设置一个属性值？

$('#id').attr('index',99)

13、jquery中detach()和remove方法有什么区别？

detach可以保持对过去被追踪元素的跟踪，remove则会保持过去被移除对象的引用。

14、如何添加和移除css类？

$('#id').addClass .removeClass

15、使用cdn加载jquery的主要优势是什么？

减少服务器带宽、提高下载速度、提供缓存

16、jquery get和ajax有什么区别？

ajax可以提供的配置更多

17、jquery中方法链是什么，好处有哪些？

调用方法后会返回当前对象，进而调用另一个方法

18、如果在jquery事件里面返回了false会怎样？

阻止事件向上冒泡

19、document.getElementbyId("myId") 与 $("#myId") 哪个高效？

前者，因为直接调用了javascript引擎。

框架

Vue

1、生命周期函数哪些？

created/mounted/updated/destoryed

2、有哪些常用的指令？

v-for/if/show v-model v-bind

3、介绍下v-model原理？

一个变量绑定到value上，同时监听value输入的变化赋值给这个变量。

4、v-for与v-if能在一起使用吗？为什么？

不能。v-for优先级比v-if高，每次渲染都要先循环后进行判断

5、v-if与v-show的区别？

v-if 是dom删除与创建，v-show是css样式的调整

6、组件间如何传值？

1、:属性名的方式父串子，子组件父组件事件，父组件监听事件并绑定函数。

2、provied/injected

3、事件bus

4、通过vuex传值

5、调用dom的方式

7、解释单项数据流与双向数据绑定？

父子组件的数据传递。Vue里面父组件通过:属性名的方式传递数据给子组件，子组件传递给父组件通过事件触发。这些都是单项的。v-model则双向数据绑定。

取决于父子组件是否需要同时维护一个状态，需要则可以用双向数据绑定，不需要则用单项数据绑定。

8、怎么理解MVVM？与MVC区别？

MVVM 数据修改后通过VM层更新视图，视图更新也可以通过VM更新数据。

MVC则是 view 层 只能通过 controller 层 操作 model ，然后返回数据。

9、Vue是单页面吗？与多页面有什么区别？

是单页面，即始终在一个index.html文件上操作。多页面是在多个html文件上操作。

10、单页面与多页面各自的优缺点？

优点：

性能好，页面切换快

缺点：

不利于SEO

首屏加载过慢，需要加载很多文件。解决方法：懒加载、缓存

11、响应式原理?

通过difineProperty监听数据的改变，进行更新页面。如果是数组则要重写里面的方法，新增对象属性则要单独配置。

Vue3通过proxy配合reflect解决了这个问题。

12、虚拟DOM与DIFF算法原理？

1、首先执行render函数会生成VNODE，输出一个对象有selector/text/children/key dom这些属性

2、调用patch函数，传入新旧vnode。如果第一个执行的话旧vnode是个空对象。这种情况直接进行渲染。

3、会调用sameNode判断，不同销毁重建，相同调用pathVnode。

4、这里面就会进行新旧vnode的 children 和text属性判断，判断后会清空旧的text或者children，给新的text或者chldren。有一种情况会往下继续调用。

5、新旧vnode都有children属性时，会调用updatechildren方法。这里就开始diff算法。dom上有些元素会被销毁，有些移动位置，有些添加text。其中一中情况sameNode方法执行为true时会递归调用patchVnode。

13、模板编译与模板渲染？

首次加载 vue-loader进行模板编译，生成render函数，获取变量启动监听，执行render函数，生成vnode，执行后面的dom更新。

当变量更新时，触发监听，重新生成render函数，执行render函数

14、自定义指令？

通过directive创建的指令。常用的生命周期有mounted/updated。

比如：按钮权限控制，传入一个按钮名，然后在vuex中比对，没有找到则移除当前dom。

数据更新后没有数据了，则追加上一个没有数据的提示。

15、nexttikcs是做什么的？

因为数据更新之后并不是第一时间更新dom。nexttiks相当于一个钩子，在数据更新之后触发。

比如：打开一个表单，要重置之前的校验信息并赋值，这时用nextticks时，才能够正常。

拿到数据后更新了dom，要拿到dom渲染后的高度。

16、computed与watch区别？

一个相当于计算属性，对多个变量进行操作生成的一个新变量。一个监听数据变化，通过数据变化做一些操作。

17、Vue中data为什么是函数？

可以实现组件间状态的隔离。

19、jquery与Vue有什么不同？

通过手动调用API来操作DOM，VUE只需要绑定变量，启动监听就能更新dom。

20、Vue的filter如何使用？

用vue.filter('yuan',function(val){return val + '元'}) 注册

在template中

amount | yuan

21、keep-alive的使用

tab组件频繁切换时，可以用。

22、Vue中key的使用

虚拟dom的diff算法有个函数需要通过seletor和key进行对比。

23、路由守卫的使用？

判断是否登录

24、Vue mixin运用？

共享变量方法，钩子。vue3使用hooks代替。