2022年前端面试宝典【1万字带答案】

前言

  每个知识点都是老师自己整理，会有一些遗漏的地方、不足之处，敬请谅解，回答问题的思路：先正面叙述一些基本的核心知识，然后描述一些特殊的东西，最后再来一些锦上添花的东西。此文整理61个前端面试题，供大家参考，只有自己做的笔记自己最清晰哦，大家也要学会自己总结、做笔记。

1.标签上title与alt属性的区别是什么？

  alt是给搜索引擎识别，在图像无法显示时的替代文本；title是关于元素的注释信息，主要是给用户解读。当鼠标放到文字或是图片上时有title文字显示。（因为IE不标准）在IE浏览器中alt起到了title的作用，变成文字提示。在定义img对象时，将alt和title属性写全，可以保证在各种浏览器中都能正常使用。&和&&的区别。

2.DIV+CSS布局较table有什么优势？

  1、速率更快，页面体积变小，浏览速度变快，这就使得对于某些控制主机流量的网站来说是最大的优势了；
  2、更好地被搜索引擎收录，大部分html页面的样式写入了CSS文件中，便于被搜索引擎采集收录；
  3、对浏览者和浏览器更具优势，由于CSS富含丰富的样式，使页面更加灵活性，它可以根据不同的浏览器，而达到显示效果的统一和不变形；
  4、修改更有效率，由于使用了DIV+CSS制作方法，在修改页面的时候更加容易省时，提高工作效率；

3.介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

  （1）有两种， IE 盒子模型、W3C 盒子模型；
  （2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；
  （3）区 别： IE的content部分把 border 和 padding计算了进去;

4.CSS选择符有哪些？

  1.id选择器（ # myid）
  2.类选择器（.myclassname）
  3.标签选择器（div, h1, p）
  4.相邻选择器（h1 + p）
  5.子选择器（ul > li）
  6.后代选择器（li a）
  7.通配符选择器（ * ）
  8.属性选择器（a[rel = “external”]）
  9.伪类选择器（a:hover, li:nth-child）

5.JS的数据类型有哪些？

  数据类型主要包括两部分：
  基本数据类型： Undefined、Null、Boolean、Number和String
  引用数据类型： Array 、Object

6.null，undefined 的区别?

  null 表示一个对象被定义了，值为“空值”；
  undefined 表示不存在这个值。

7.描述下JSON对象的两个很重要的方法

  JSON.parse() //JSON字符串转换为JSON对象
  JSON.stringify() //JSON对象转化为字符串

8.eval是做什么的？

  它的功能是把对应的字符串解析成JS代码并运行；
  应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。
  由JSON字符串转换为JSON对象的时候可以用eval，var obj =eval(’(’+ str +’)’);

9.简述下为何通过ajax发送的请求会出现乱码问题，如何解决？

  乱码的问题就是编码格式冲突，我们需要传输中文数据前面加一个encodeURI()编码，例如：encodeURI(j$("#fk_info").val())；在接受参数的页面对传过来的编码过后的内容用后端语言进行解码

10.HTML5、CSS3里面都新增了那些新特性？

  新的语义标签
  本地存储
  离线存储
  Websocket
  2d，3d变换
  Transition,animation
  媒体查询
  新的单位（rem,vw，vh等）

11.什么是响应式设计？

  它是关于网站的制作或网页制作的工作。不同的设备有不同的尺寸和不同的功能。响应式设计是让所有的人能在这些设备上让网站运行正常。一部分是媒体查询和不同的视觉效果。一部分是不同的资源（如不同的Javascript来处理触摸与点击自动适应屏幕的对比）。

12.为什么我们要弃用table标签

  table的缺点在于服务器把代码加载到本地服务器的过程中，本来是加载一行执行一行，但是table标签是里面的东西全都下载完之后才会显示出来，那么如果图片很多的话就会导致网页一直加载不出来，除非所有的图片和内容都加载完。如果要等到所有的图片全部加载完之后才显示出来会影响网页的性能，所以table标签现在我们基本放弃使用了

13.iframe 有哪些缺点

  iframe 会阻塞主页面的Onload事件
  搜索引擎的检索程序无法解读这种页面，不利于SEO
  iframe和主页面共享连接池，而浏览器对相同域的链接有限制，所以会影响页面的并行加载
  使用iframe 之前需要考虑这两个缺点，如果需要使用 iframe，最好是通过JavaScript
  动态给iframe添加src属性值，这样可以绕开以上两个问题。

14.meta viewport 是做什么用的，怎么写？

  控制页面在移动端不要缩小显示。

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

15.json和xml数据的区别

  1，数据体积方面：xml是重量级的，json是轻量级的，传递的速度更快些。。
  2，数据传输方面：xml在传输过程中比较占带宽，json占带宽少，易于压缩。
  3，数据交互方面：json与javascript的交互更加方便，更容易解析处理，更好的进行数据交互
  4，数据描述方面：json对数据的描述性比xml较差
  5，xml和json都用在项目交互下，xml多用于做配置文件，json用于数据交互。

16.document.write和innerHTML的区别

  document.write是直接写入到页面的内容流，会导致页面被重写。
  innerHTML将内容写入某个DOM节点，不会导致页面全部重绘；

17.jQuery 库中的 $() 是什么？

  () 函数用于将任何对象包裹成 jQuery 对象，接着你就被允许调用定义在 jQuery 对象上的多个不同方法。你可以将一个选择器字符串传入 $() 函数，它会返回一个包含所有匹配的 DOM 元素数组的 jQuery 对象。

18.$(document).ready()方法和window.onload有什么区别？

  (1)、window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行的。
  (2)、$(document).ready() 方法可以在DOM载入就绪时就对其进行操纵，并调用执行绑定的函数。

19.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

  行内元素：a、b、span、img、input、strong、select、label、em、button、textarea
  块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote
  空元素：即系没有内容的HTML元素，例如：br、meta、hr、link、input、img

20.你为什么要使用jquery？

  因为jQuery是轻量级的框架，大小不到30kb,它有强大的选择器，出色的DOM操作的封装，有可靠的事件处理机制(jQuery在处理事件绑定的时候相当的可靠)，完善的ajax(它的ajax封装的非常的好，不需要考虑复杂浏览器的兼容性和XMLHttpRequest对象的创建和使用的问题。) 出色的浏览器的兼容性。 而且支持链式操作，隐式迭代。行为层和结构层的分离，还支持丰富的插件，jquery的文档也非常的丰富。

21.jquery中的选择器 和 css中的选择器有区别吗？

  jQuery选择器支持CSS里的选择器，jQuery选择器可用来添加样式和添加相应的行为
CSS 中的选择器是只能添加相应的样式

22.web前端开发，如何提高页面性能优化？

  内容方面：
  1.减少 HTTP 请求 (Make Fewer HTTP Requests)
  2.减少 DOM 元素数量 (Reduce the Number of DOM Elements)
  3.使得 Ajax 可缓存 (Make Ajax Cacheable)
  针对CSS：
  1.把 CSS 放到代码页上端 (Put Stylesheets at the Top)
  2.从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External)
  3.精简 JavaScript 与 CSS (Minify JavaScript and CSS)
  4.避免 CSS 表达式 (Avoid CSS Expressions)
  针对JavaScript ：
  1. 脚本放到 HTML 代码页底部 (Put Scripts at the Bottom)
  2. 从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External)
  3. 精简 JavaScript 与 CSS (Minify JavaScript and CSS)
  4. 移除重复脚本 (Remove Duplicate Scripts)
  面向图片(Image)：
  1.优化图片
  2 不要在 HTML 中使用缩放图片
  3 使用恰当的图片格式
  4 使用 CSS Sprites 技巧对图片优化

23.什么是Bootstrap？以及为什么要使用Bootstrap？

  Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
  Bootstrap具有移动设备优先、浏览器支持良好、容易上手、响应式设计等优点，所以Bootstrap被广泛应用。

24.对于各类尺寸的设备，Bootstrap设置的class前缀分别是什么？

  超小设备手机（<768px）：.col-xs-
  小型设备平板电脑（>=768px）：.col-sm-
  中型设备台式电脑（>=992px）：.col-md-
  大型设备台式电脑（>=1200px）：.col-lg-

25.什么是Bootstrap网格系统（Grid System）？

  Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。
  响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

26.Bootstrap 网格系统列与列之间的间隙宽度是多少？

  间隙宽度为30px（一个列的每边分别是15px）。

27.介绍一下easyui的布局

  分为上，中，下，左，右面板 一般在工作中使用上（企业logo,登录,退出） 左（菜单）中（展示数据）

28.Easyui如何实现表单验证

  提供了一个validatebox插件来验证一个表单 input表单根据validType属性来应用验证 validType="email"邮箱验证 required="true"必填项

29.Easyui常用的组件有哪些？

  datagrid：数据表格
  window：窗口
  form：表单
  layout：布局
  tabs：选项卡
  according：折叠面板
  combobox：下拉列表

30.Vue.js介绍

  Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API；
  Vue.js是一个构建数据驱动的Web界面的库。
  Vue.js是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和 Vue生态系统支持的库开发的复杂单页应用。数据驱动+组件化的前端开发。
  简而言之：Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API实现响应的数据绑定和组合的视图组件。核心是一个响应的数据绑定系统。

31.使用Vue的好处

  vue两大特点：响应式编程、组件化
  vue的优势：轻量级框架、简单易学、双向数据绑定、组件化、视图、数据和结构的分离、虚拟DOM、运行速度快

32.MVVM定义

  MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心，它是连接view和model的桥梁。它有两个方向：一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定。总结：在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信

33.Vue的生命周期

  beforeCreate（创建前） 在数据观测和初始化事件还未开始
  created（创建后） 完成数据观测，属性和方法的运算，初始化事件，KaTeX parse error: Expected 'EOF', got '&' at position 13: el属性还没有显示出来 &̲emsp; befo…el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。
  beforeUpdate（更新前） 在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。
  updated（更新后） 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
  beforeDestroy（销毁前） 在实例销毁之前调用。实例仍然完全可用。
  destroyed（销毁后） 在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

34.Vue的响应式原理

  当一个Vue实例创建时，vue会遍历data选项的属性，用 Object.defineProperty 将它们转为 getter/setter并且在内部追踪相关依赖，在属性被访问和修改时通知变化。 每个组件实例都有相应的 watcher 程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。

35.第一次页面加载会触发哪几个钩子？

  触发 下面这几个beforeCreate, created, beforeMount, mounted ，并在mounted的时候DOM渲染完成

36.vue中data必须是一个函数

  对象为引用类型，当重用组件时，由于数据对象都指向同一个data对象，当在一个组件中修改data时，其他重用的组件中的data会同时被修改；而使用返回对象的函数，由于每次返回的都是一个新对象（Object的实例），引用地址不同，则不会出现这个问题。

37.vue中做数据渲染的时候如何保证将数据原样输出？

  v-text：将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出
  v-html：将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染
   {{}}：插值表达式，可以直接获取Vue实例中定义的数据或函数，使用插值表达式的时候，值可能闪烁；而使用v-html、v-text不会闪烁，有值就显示，没值就隐藏

38.active-class是哪个组件的属性？

  vue-router模块的router-link组件。

39.vue-router有哪几种导航钩子？

  三种。
  一种是全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。
  第二种：组件内的钩子；
  第三种：单独路由独享组件

40.$route和$router的区别

  $route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。而$router是“路由实例”对象包括了路由的跳转方法，钩子函数等

41.vue几种常用的指令

  v-for 、 v-if 、v-bind、v-on、v-show、v-else

42.v-if 和 v-show 区别

  v-if按照条件是否渲染，v-show是display的block或none

43.vue常用的修饰符？

  .prevent: 提交事件不再重载页面；.stop: 阻止单击事件冒泡；.self: 当事件发生在该元素本身而不是子元素的时候会触发；.capture: 事件侦听，事件发生的时候会调用

44.vue-loader是什么？使用它的用途有哪些？

  解析.vue文件的一个加载器，跟template/js/style转换成js模块。
  用途：js可以写es6、style样式可以scss或less、template可以加jade等

45.computed、watch、methods的区别

  computed计算属性是用来声明式的描述一个值依赖了其它的值。当你在模板里把数据绑定到一个计算属性上时，Vue 会在其依赖的任何值导致该计算属性改变时更新 DOM。这个功能非常强大，它可以让你的代码更加声明式、数据驱动并且易于维护。
  watch监听的是你定义的变量,当你定义的变量的值发生变化时，调用对应的方法。就好在div写一个表达式name，data里写入num和lastname,firstname,在watch里当num的值发生变化时，就会调用num的方法，方法里面的形参对应的是num的新值和旧值，而计算属性computed,计算的是Name依赖的值,它不能计算在data中已经定义过的变量。
  methods方法，函数，绑定事件调用；不会使用缓存

46.什么是js的冒泡？Vue中如何阻止冒泡事件？

  js冒泡概念：当父元素内多级子元素绑定了同一个事件，js会依次从内往外或者从外往内（？）执行每个元素的该事件，从而引发冒泡
   js解决冒泡：event.stopPropagation()
  vue解决冒泡： 事件.stop,例如：@click.stop="" ,@mouseover.stop=""

47.vue 组件通信

  1.父组件与子组件传值
  父组件传给子组件：子组件通过props方法接受数据;
  子组件传给父组件：$emit方法传递参数
  2.非父子组件间的数据传递，兄弟组件传值
  eventBus，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。也可使用vuex

48.的作用是什么？

  包裹动态组件时，会缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染。 大白话: 比如有一个列表和一个详情，那么用户就会经常执行打开详情=>返回列表=>打开详情…这样的话列表和详情都是一个频率很高的页面，那么就可以对列表组件使用进行缓存，这样用户每次返回列表的时候，都能从缓存中快速渲染，而不是重新渲染

49.$nextTick是什么？

  vue实现响应式并不是数据发生变化后dom立即变化，而是按照一定的策略来进行dom更新。
  $nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用$nextTick，则可以在回调中获取更新后的 DOM

50.Vue子组件调用父组件的方法

第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法第二种方法是在子组件里用$emit向父组件触发一个事件，父组件监听这个事件就行了。

51.Promise对象是什么？

  1.Promise是异步编程的一种解决方案，它是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。promise对象是一个构造函数，用来生成Promise实例；
  2.promise的两个特点 对象状态不受外界影响 && 一旦状态改变，就不会再变，任何时候都可以得到结果（pending状态–>fulfilled || pending–>rejected）

52.axios的特点有哪些？

  1、axios是一个基于promise的HTTP库，支持promise的所有API；
  2、它可以拦截请求和响应；
  3、它可以转换请求数据和响应数据，并对响应回来的内容自动转换为json类型的数据；
  4、它安全性更高，客户端支持防御XSRF；

53.vue中的 ref 是什么？

  ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。

54.vue如何兼容ie

  babel-polyfill插件

55.页面刷新vuex被清空解决办法？

  1.localStorage 存储到本地再回去
  2.重新获取接口获取数据

56.Vue与Angular以及React的区别？

  1.与AngularJS的区别
  相同点：
  都支持指令：内置指令和自定义指令；都支持过滤器：内置过滤器和自定义过滤器；都支持双向数据绑定；都不支持低端浏览器。
  不同点：
  AngularJS的学习成本高，比如增加了Dependency Injection特性，而Vue.js本身提供的API都比较简单、直观；在性能上，AngularJS依赖对数据做脏检查，所以Watcher越多越慢；Vue.js使用基于依赖追踪的观察并且使用异步队列更新，所有的数据都是独立触发的。

2.与React的区别

  相同点：
  React采用特殊的JSX语法，Vue.js在组件开发中也推崇编写.vue特殊文件格式，对文件内容都有一些约定，两者都需要编译后使用；中心思想相同：一切都是组件，组件实例之间可以嵌套；都提供合理的钩子函数，可以让开发者定制化地去处理需求；都不内置列数AJAX，Route等功能到核心包，而是以插件的方式加载；在组件开发中都支持mixins的特性。
  不同点：
  React采用的Virtual DOM会对渲染出来的结果做脏检查；Vue.js在模板中提供了指令，过滤器等，可以非常方便，快捷地操作Virtual DOM。

57.localstorage和sessionstorage是什么?区别是什么?

  localstorage和sessionstorage一样都是用来存储客户端临时信息的对象，他们均只能存储字符串类型对象
  localstorage生命周期是永久的，这意味着除非用户在浏览器提供的UI上清除localstorage信息，否则这些信息将永远存在。
  sessionstorage生命周期为当前窗口或标签，一旦窗口或标签被永久关闭了，那么所有通过sessionstorage存储的数据也将被清空。
  不同浏览器无法共享localstorage或sessionstorage中的信息。相同浏览器的不同页面可以共享相同的localstorage（页面属于相同的域名和端口），但是不同页面或标签间无法共享sessionstorage。这里需要注意的是，页面及标签仅指顶级窗口，如果一个标签页包含多个iframe标签他们属于同源页面，那么他们之间是可以共享sessionstorage的。

58.为什么要进行前后端分离？前后端分离的优势在哪里？劣势在哪里？

  优点：前端专门负责前端页面和特效的编写，后端专门负责后端业务逻辑的处理，前端追求的是页面美观、页面流畅、页面兼容等。后端追求的是三高（高并发、高可用、高性能）让他们各自负责各自的领域，让专业的人负责处理专业的事情，提高开发效率
  缺点：1 、当接口发生改变的时候，前后端都需要改变
  2、 当发生异常的时候，前后端需要联调–联调是非常浪费时间的

59.ElementUI的计数器组件怎么使用？

  首先引入ui框架，然后放的vue里面写

60.ElementUI的表单组件怎么使用？它有哪些属性？

   先写el-form组件，里面写el-form-item用来放输入框，例如用户名和密码那些。
属性：
  一、el-from属性有ref、rules、绑定:model
  二、el-form-item属性有prop用来定义一个该输入框对应的验证规则

61.ElementUI的表单验证怎么实现？

  表单验证：
  一、在一开始el-form中绑定:model=“a”，遵守一个规则:rules=“规则名b”，然后:ref跟之前的a一样值，要遵守规则的数据名。
  二、在data中定义a，里面放表单的所有数据。
  三、在data属性中定义rules规则，例如：必须填写就是required:true，最小最大就是min和max。
  四、里面放el-form-item，上面定义prop取一个名字等于什么，rules中用这个prop里面定义的名字作为规则属性。
  五、若要自定义规则，首先在rules的规则中定义validata属性，它的值就是自定义规则的名称，然后在data里写 var 自定义规则名称 = (rule,value,callback)=> 如果校验正确就返回callback()，校验错误就返回callback(ne Error(’***有误！’))

62.ElementUI的表格组件怎么使用？它有哪些属性？

  用一个< /el-table>这个是最外面的上面，里面用。
  属性：
  一、el-table组件的data是用来获取数据；
  二、每一行el-table-row的数据通过prop属性。