前端面试题合集（持续更新中......）

HTML、CSS

1、元素水平垂直居中

•  定位偏移 top，left为50%，margin-left，margin-top自身的-50%
•  定位平移 top，left，bottom，right为0，margin为auto
•  定位平移 top，left为50%，transform：translate(自身的50%)
•  弹性盒 主轴与交叉轴居中
•  表格 父block，子table-cell

2、C3新特性

1 圆角边框：border-radius
2 多背景图：background
3 颜色和透明度：background: rgba(0,0,0,.5)
4 多列布局和弹性盒：display: flex
5 盒子的变幻（2D、3D）transform: translate(50px,100px);//移动 transform: rotate();             //旋转 transform: scale();              //缩放transform: skew();              //倾斜
6 过渡 transition: width 1s linear 2s; 动画：animation: myfirst 5s;@keyframes myfirst { 0% {background: block;} 25% {background: red;} 50% {background: yellow;} 100% {background: green;} }
7 引入web字体（在服务器端存储）
8 媒体查询
9 文字阴影 text-shadow
10 盒子阴影 box-shadow

3、H5新特性

•  语义化标签 header，footer，nav，section，article，aside等
•  媒体标签 audio，video
•  功能性标签 svg，canvas
•  智能表单 一些input的type类型，和新的input属性
•  本地存储 localstorage和sessionstorage
•  api websocket, fetch(浏览器自带的数据请求方式)和requestAnimationFrame（动画定时器）等等
•  新事件 onrisize, ondrag, onscroll, onmousewheel, onerror, onplay, onpause等

4、移动端适配

•  使用手机淘宝之前的方案 flexible.js
•  使用媒体查询 + less或者sass等css预编译的mixin混合功能，带参数进行自动计算
•  使用最新的postcss的postcss-pxtorem插件和lib-flexible插件

5、BFC

•  BFC: block formatting context(块状格式化上下文) bfc是一个独立的空间，只有块状元素参与， 它规定了里面的块状元素如何布局，它和外部的坏境毫不相干
•  触发条件1. 根元素（html）本身就是一个BFC2. float不能none的时候3. position为absolute或者fixed的时候4. display为inline-block, table-cell, flex, inline-flex等5. overflow不为visible的时候
•  特点1. 内部的元素是从上往下排的2. 垂直方向的距离有margin来决定的，属于同一个BFC的两个元素的上下margin会重叠3. 每个元素的margin-left会和父元素的border-left相接触4. bfc的区域不会和浮动的区域相重叠5. bfc的区域和外部空间毫不相干6. 在计算bfc高度的时候，浮动元素也会参与计算

6、H5离线存储

原理：HTML5的离线存储是基于一个新建的 .appcache 文件的缓存机制（不是存储技术），通过这个文件上的解析清单离线存储资源，这些资源会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示
使用：•  页面头部像下面一样加入一个 manifest 的属性；•  在 cache.manifest文件的编写离线存储的资源•  在离线状态时，操作window.applicationCache进行需求实现

JavaScript

1、js数据类型

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol引用数据类型：对象(Object)、数组(Array)、函数(Function)。注意：Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值

2、js值的类型

•  基本数据类型存储在栈中，引用数据类型（对象）存储在堆中，指针放在栈中。
•  两种类型的区别是：o  存储位置不同：原始数据类型直接存储在栈中的简单数据段，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储；引用数据类型存储在堆中的对象,占据空间大、大小不固定,如果存储在栈中，将会影响程序运行的性能o  引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体

3、闭包

•  闭包指的是一个函数可以访问另一个函数作用域中变量。常见的构造方法，是在一个函数内部定义另外一个函数。内部函数可以引用外层的变量；外层变量不会被垃圾回收机制回收。
•  注意，闭包的原理是作用域链，所以闭包访问的上级作用域中的变量是个对象，其值为其运算结束后的最后一个值
•  优点：避免全局变量污染。缺点：容易造成内存泄漏
•  使用场景：o  1、通过循环给页面上多个dom节点绑定事件o  2、封装私有变量(计数器)    o  3、延续局部变量的寿命o  4、高阶组件  o  5、函数防抖

4、回流与重绘

•  当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。
•  在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树。完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘

5、常见DOM操作

•  （1）创建新节点o  createDocumentFragment() //创建一个DOM片段o  createElement() //创建一个具体的元素o  createTextNode() //创建一个文本节点
•  （2）添加、移除、替换、插入o  appendChild()o  removeChild()o  replaceChild()o  insertBefore() //在已有的子节点前插入一个新的子节点
•  （3）查找o  getElementsByTagName() //通过标签名称o  getElementsByName() //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)o  getElementById() //通过元素Id，唯一性

6、数组对象的原生方法

•  pop、push、shift、unshift、splice、reverse、sort、concat、join、slice
•  toString、indexOf、lastIndexOf、reduce、reduceRight
•  forEach、map、filter、every、some

7、渐进增强与优雅降级

•  渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进，达到更好的用户体验。
•  优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容

8、webworker和websocket

•  web socket：在一个单独的持久连接上提供全双工、双向的通信。使用自定义的协议（ws://、wss://），同源策略对web socket不适用。
•  web worker：运行在后台的JavaScript，不影响页面的性能。o  创建worker：var worker = new Worker(url);o  向worker发送数据：worker.postMessage(data);o  接收worker返回的数据：worker.onmessageo  终止一个worker的执行：worker.terminate();

9、深浅拷贝

•  浅拷贝o  数组方法: slice截取, concat拼接, filter过滤, mapo  对象方法: Object.assign({},obj), Object.create(obj)               o  扩展运算符: {...obj},[...arr]
•  深拷贝o  JSON序列化JSON.parse(JSON.stringify(obj))对象-->字符串-->对象o  原生实现递归+浅拷贝o  工具实现【第三方封装库】Loadsh

10、作用域链

•  因为函数的嵌套形成作用域的层级关系。当函数执行时，从当前作用域开始搜索，没有找到的变量，会向上层作用域查找，直至全局函数，这就是作用域链o  在JavaScript 中，作用域为 function(){}内的区域，称为函数作用域o  全局函数无法查看局部函数的内部细节，但局部函数可以查看其上层的函数细节，直至全局细节

11、原型与原型链（常问）

•  每个对象都有一个__proto__，它指向它的prototype原型对象，而prototype原型对象又具有一个自己的prototype原型对象，就这样层层往上直到一个对象的原型prototype为null；这个查询的路径就是原型链o  prototype原型对象里的constructor指向构造函数本身

12、继承

•  构造函数绑定：使用 call 或 apply 方法，将父对象的构造函数绑定在子对象上
•  实例继承：将子对象的 prototype 指向父对象的一个实例
•  拷贝继承：如果把父对象的所有属性和方法，拷贝进子对象
•  原型继承：将子对象的 prototype 指向父对象的 prototype
•  ES6 语法糖 extends继承

13、new关键字

•  首先是创建实例对象{}
•  this 变量引用该对象，同时还继承了构造函数的原型
•  其次属性和方法被加入到 this 引用的对象中
•  并且新创建的对象由 this 所引用，最后隐式的返回 this

14、this指向

•  this 总是指向函数的直接调用者
•  如果有 new 关键字，this 指向 new 出来的实例对象
•  在事件中，this 指向触发这个事件的对象
•  IE 下 attachEvent 中的 this 总是指向全局对象 Window
•  箭头函数中，函数体内的this对象，就是定义时所在作用域的对象，而不是使用时所在的作用域的对象

15、apply、call、bind

•  call、apply和bind是Function对象自带的三个方法，都是为了改变函数体内部 this 的指向。
•  apply 、 call 、bind 三者第一个参数都是 this 要指向的对象，也就是想指定的上下文；
•  apply 、 call 、bind 三者都可以利用后续参数传参；
•  bind 是返回对应 函数，便于稍后调用；apply 、call 则是立即调用

16、浏览器渲染过程

•  1.浏览器解析html源码，然后创建一个 DOM树。并行请求 css/image/js在DOM树中，每一个HTML标签都有一个对应的节点，并且每一个文本也都会有一个对应的文本节点。DOM树的根节点就是 documentElement，对应的是html标签。
•  2.浏览器解析CSS代码，计算出最终的样式数据。构建CSSOM树。对CSS代码中非法的语法它会直接忽略掉。解析CSS的时候会按照如下顺序来定义优先级：浏览器默认设置 < 用户设置 < 外链样式 < 内联样式 < html中的style。
•  3.DOM Tree + CSSOM --> 渲染树（rendering tree）。渲染树和DOM树有点像，但是是有区别的。DOM树完全和html标签一一对应，但是渲染树会忽略掉不需要渲染的元素，比如head、display:none的元素等。而且一大段文本中的每一个行在渲染树中都是独立的一个节点。渲染树中的每一个节点都存储有对应的css属性。
•  4.一旦渲染树创建好了，浏览器就可以根据渲染树直接把页面绘制到屏幕上

17、垃圾回收机制

•  JS的垃圾回收机制是为了以防内存泄漏，内存泄漏的含义就是当已经不需要某块内存时这块内存还存在着，垃圾回收机制就是间歇的不定期的寻找到不再使用的变量，并释放掉它们所指向的内存。
•  JS垃圾回收方式有两种：标记清除（mark and sweep）、引用计数(reference counting)
•  标记清除（mark and sweep）o  大部分浏览器以此方式进行垃圾回收，当变量进入执行环境（函数中声明变量）的时候，垃圾回收器将其标记为“进入环境”，当变量离开环境的时候（函数执行结束）将其标记为“离开环境”，在离开环境之后还有的变量则是需要被删除的变量。标记方式不定，可以是某个特殊位的反转或维护一个列表等。垃圾收集器给内存中的所有变量都加上标记，然后去掉环境中的变量以及被环境中的变量引用的变量的标记。在此之后再被加上的标记的变量即为需要回收的变量，因为环境中的变量已经无法访问到这些变量。
•  引用计数(reference counting)o  这种方式常常会引起内存泄漏，低版本的IE使用这种方式。机制就是跟踪一个值的引用次数，当声明一个变量并将一个引用类型赋值给该变量时该值引用次数加1，当这个变量指向其他一个时该值的引用次数便减一。当该值引用次数为0时就会被回收。

18、前端性能优化

•  图片处理o  雪碧图、base64、字体图标代替图片、在安卓下可以使用webp格式的图片
•  减小大小资源o  HTML压缩、CSS压缩、JS压缩、图片压缩
•  优化网络连接o  CDN(内容分发网络) 它能够实时地根据网络流量和各节点的连接、负载状
•  优化资源加载o  资源加载位置（CSS、JS文件放置位置）o  资源加载时机（异步script标签、模块按需加载、资源懒加载与资源预加载）
•  减少重绘与回流
•  DOM优化o  缓存DOM、减少DOM深度及DOM数量、及时清理环境、防抖和节流

19、Promise

•  Promise 是异步编程的一种解决方案
•  promise有三种状态：pending(等待态)，fulfiled(成功态)，rejected(失败态)；状态一旦改变，就不会再变。创造promise实例后，它会立即执行
•  promise是用来解决两个问题的：o  回调地狱，代码难以维护，常常第一个的函数的输出是第二个函数的输入这种现象o  promise可以支持多个并发的请求，获取并发请求中的数据
•  链式调用方法：o  1.then：两个参数，当promise的状态是成功时，执行第一个参数里的回调函数，如果状态是失败，执行第二个参数中的回调；o  2.catch：第二个参数往往用catch代替；o  3.finally：ES9引入的，用于不管状态如何都执行的操作o  promise.all()：将多个promise实例包装成一个新的实例，参数为数组，只有当数组里的所有状态都是resolved新的状态才是resolved，返回值在全部成功时是一个结果数组，数组顺序和接收的顺序一致，失败时是第一个失败状态的值；o  promise.race()：将参数里第一个执行完成的promise对象的结果通过then传出•  promise构造函数是同步执行的，then方法是异步执行的

20、cookie、localStorage、sessionStorage

•  cookie在浏览器和服务器之间传递，通常要加密，另两个不会；
•  sessionStorage和localStorage的存储空间更大、接口更多、有各自的存储空间；
•  cookie不超过50条，4kb大小，另两个可以达到5M；
•  localStorage不主动删除会永久存储，sessionStorage关闭浏览器就会自动删除，cookie存储时间由自己定义，和是否关闭浏览器无关

21、判断对象是否为空

•  根据for...in遍历对象，如果存在则返回true，否则返回false
•  利用JSON自带的JSON.stringify()方法来判断；大概思路就是转化为字符串’{}'来进行判断
•  利用ES6中Object.keys()来进行判断；Object.keys()方法会返回一个由一个给定对象的自身可枚举属性组成的数组。如果我们的对象为空，它会返回一个空数组

22、var、let、const区别

•  var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。
•  let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。
•  const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改

23、防抖、节流

•  节流（鼠标在方块中滑动）：连续触发的事件在n秒内只执行一次，稀释频率；（类似游戏中的技能冷却）
•  防抖（搜索框打字搜索）：事件触发后n秒内只能有一次，在n秒内如有触发，则会刷新执行时间（类似游戏中的回城）

24、async、await

•  async异步是用来装饰函数的，是函数异步执行，经async修饰的函数就是一个promise对象，async修饰过的函数也有then和catch方法，await只能放在async中，只能修饰promise对象，await在async函数里，会阻塞当前执行直到await里的完成，async返回reject的方法，抛出的异常等同于reject
•  promise是为了简化函数嵌套调用流程，使用时多半使用的是promise的api，也便于后续维护
•  async/await定义了异步函数，并在其内部通过await等待promise对象，阻塞后续执行，实现更简洁和语义化
•  async/await优势：o  1.简洁，不用匿名函数，不需要多余data避免嵌套o  2.catch能处理JSON.parse错误 o  3.可以使用条件语句

25、es6新增特性

•  块作域、类、箭头函数、模板字符串、对象解构、扩展运算符
•  Promise、模块、Symbol、代理（proxy）Set、函数默认参数、rest、数组和对象的扩展

26、http与https

•  HTTP是超文本传输协议，信息是明文传输的，HTTPS是具有ssl/tls加密传输协议
•  默认端口不同，前者是80，后者是443
•  HTTPS比HTTP安全
•  HTTPS协议需要到CA申请证书，需要一定费用

27、浏览器渲染原理

•  浏览器将获取的HTML文档解析成DOM Tree（DOM树）
•  将Css样式表，解析成CSSOM Tree（CSS树）
•  将DOM和CSSOM合并为渲染树（rendering tree），这个过程称之为attachment
•  渲染树的每个元素经过精确的计算后，给出坐标，这个过程称之为layout
•  将渲染树的各个节点绘制到屏幕上，这个过程称之为painting

28、地址栏输入url发生了什么

•  浏览器根据请求的URL交给DNS域名解析，找到真实IP，向服务器发起请求；
•  服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图象等）；
•  浏览器对加载到的资源（HTML、JS、CSS等）进行语法解析，建立相应的内部数据结构（如HTML的DOM）；
•  载入解析到的资源文件，渲染页面，完成

29、回调函数

•  回调函数就是一个通过函数指针调用的函数 如果把函数的指针（地址）作为 参数传递给另 个函数，当这个指针用来调用其所指向的函 时，我们就说这是回调函数
•  回调函数不是由该函数的执行方直接调用的 而是在特定的事件或条件发生时由另一方调用的，用于对该事件或条件进行响应

30、cookie、session

•  ( 1 ) cookie 数据存放在客户的浏览器上， session 数据存放在服务
•  ( 2) cookie 不是很安全，别人可以分析存放在本地的 cookie 并进行 cookie 欺骗，所以考虑到安全问题 应当使用 session
•  ( 3 ) session 会在一定时间内保存在服务器上，当访问增多会影响服务器的性能 因此为了减轻服务器的负担 ，应当使 cookie
•  ( 4 )一个 cookie 保存的数据不能超过 4KB ，很多浏览器都限制一个站点最多保存 20 个cookie
•  ( 5 ）对于用户信息来说 应该将与登录相关的重要信息存放在 session 中，而对于其他信息来说，如果需要保留 ，可以存放在 cookie

31、跨域

原因：由于浏览器的同源策略，即属于不同域的⻚面之间不能相互访问各自的⻚面内容。哪些情况下产生跨域1、域名不同2、端口号不同3、协议不同(http/https)4、域名和域名对应ip5、主域名相同(127.0.01 和 localhost) 多域名匹配一个ip地址6、子域名不同（一级和二级域名）解决方法
1、后端代理 后端不存在跨域（后端代码脱离浏览器，后端是服务器端）利用后端(自己公司的后端)去获取接口数据，将数据传给前端
2、jsonp原理:利用浏览器的"漏洞" src不受同源策略的影响，可以请求任何链接 。动态创建script标签，将事先写好的函数名传给服务器，供服务器使用（1）script标签src属性不存在跨域（2）get方式--传递函数名 --弊端（3）callback回调函数(传递函数名)
3、反向代理  proxy  webpack配置"proxy": {"/index.php": {"target": "http://qinqin.net","changeOrigin": true}}
4、CORS解决跨域(xhr2)(后端)CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源(协议 + 域名 + 端口)服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。需要服务器(提供接口的源码里面)添加下面两句话。header('Access-Control-Allow-Origin:*');header('Access-Control-Allow-Method:POST,GET');jsonp是一种非正式传输协议，用于解决跨域问题流程： 1、创建一个全局函数 2、创建一个script标签 3、给script添加src 4、给src添加回调函数test(callback=test) callback是传给后端的一个参数5、将script放到⻚面上 6、script请求完成，将自己从⻚面上删除

32、set与map

map在JS中的默认对象的表示方式为{}，即一组键值对，但是键必须是字符串。为了使用Number或者其他数据类型作为键，ES6规范引入了新的数据类型Map。Map是一组键值对的结构，具有极快的查找速度。初始化Map需要一个二维数组，或者直接初始化一个空MapMap具有以下方法：var m = new Map(); // 空Mapm.set('Adam', 67); // 添加新的key-valuem.set('Bob', 59);m.has('Adam'); // 是否存在key 'Adam': truem.get('Adam'); // 67m.delete('Adam'); // 删除key 'Adam'm.get('Adam'); // undefined
setset也是一组key的集合，与Map类似。但是区别是Set不存储value，并且它的key不能重复。创建一个Set，需要提供一个Array作为输入，或者直接创建一个空Set
set具有以下方法：//通过add(key)方法可以添加元素到Set中，可以重复添加，但不会有效果s.add(4);s; // Set {1, 2, 3, 4}s.add(4);s; // 仍然是 Set {1, 2, 3, 4}//通过delete(key)方法可以删除元素var s = new Set([1, 2, 3]);s; // Set {1, 2, 3}s.delete(3);s; // Set {1, 2}add(value)：添加某个值，返回Set结构本身。 delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。 has(value)：返回一个布尔值，表示该值是否为Set的成员。 clear()：清除所有成员，没有返回值。1、map 对象是键值对集合，和 JSON 对象类似，但是 key 不仅可以是字符串还可以是其他各种类型的值包括对象都可以成为Map的键2、set 对象类似于数组，且成员的值都是唯一的

33、instanceof原理

instanceof 可以正确的判断对象的类型，因为内部机制是通过判断对象的原型链中是不是能找到类型的 prototype。
实现 instanceof：
- 首先获取类型的原型
- 然后获得对象的原型
- 然后一直循环判断对象的原型是否等于类型的原型，直到对象原型为 null，因为原型链最终为 nullfunction myInstanceof(left, right) {let prototype = right.prototypeleft = left.__proto__while (true) {if (left === null || left === undefined)return falseif (prototype === left)return trueleft = left.__proto__}
}

34、监测数据类型

检测方法4种1、Object.prototype.toString.call()作用: 所有数据类型都可以检测,而且非常正确语法: Object.prototype.toString.call( 'xxx'/11/[ ] )返回值: [object Xxx], Xxx 就是对象的类型2、constructor作用: 可以检测基本数据类型和引用数据类型弊端: 把类的原型进行重写, 很有可能把之前的constructor覆盖 检测出来的结果就会不准确语法: ("xx")/([])/(function(){}).constructor === String/Array/Function 返回值: true/false
3、instanceOf原理: 判断对象类型，基于原型链去判断(obj instanceof Object)左边对象的原型链proto上是否有右边构造函数的proptotype属性作用: 判断左边的对象是否是右边构造函数的实例弊端: 用于引用类型的检测, 对于基本数据类型不生效语法: " "/[ ]/true instanceOf String/Array/Boolean返回值: true/false
4、typeOf作用: 用于检测基本数据类型和函数弊端: 引用数据类型(Arrary/function/object)只会返回Object, 不起作用语法: typeOf " "/[ ]/xx返回值: "string"/"boolean"/"object" (无法区分)

35、构造函数与普通函数

1. 返回值类型的区别：构造函数是没有返回值类型的，普通函数是有返回值类型的，即使函数没有返回值，返回值类型也要写上void。
2. 函数名的区别：构造函数的函数名必须要与类名一致，普通函数的函数名只要符合标识符的命名规则即可。
3. 调用方式的区别：构造函数是在创建对象的时候由jvm调用的。普通函数是由我们使用对象调用的，一个对象可以对象多次普通的函数，
4. 作用上的区别：构造函数的作用用于初始化一个对象。普通函数是用于描述一类事物的公共行为的。

36、默认事件与冒泡事件

阻止冒泡：w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true
取消默认事件：w3c的方法是e.preventDefault()，IE则是使用e.returnValue = false;

37、window对象与document对象的区别

window对象代表浏览器中的一个打开的窗口或者框架，window对象会在或者每次出现时被自动创建，在客户端JavaScript中，Window对象是全局对象global，所有的表达式都在当前的环境中计算，要引用当前的窗口不需要特殊的语法，可以把那个窗口属性作为全局变量使用，例如：可以只写document，而不必写window.document。同样可以把窗口的对象方法当做函数来使用，如：只写alert()，而不必写window.alert.window对象实现了核心JavaScript所定义的全局属性和方法。
document对象代表整个HTML文档，可以用来访问页面中的所有元素 。每一个载入浏览器的HTML文档都会成为document对象。document对象使我们可以使用脚本(js)中对HTML页面中的所有元素进行访问。document对象是window对象的一部分可以通过window.document属性对其进行访问HTMLDocument接口进行了扩展，定义HTML专用的属性和方法，很多属性和方法都是HTMLCollection对象，其中保存了对锚、表单、链接以及其他可脚本元素的引用

38、事件循环

首先js 是单线程执行的，js中的任务按顺序一个一个的执行，但是有时一个任务耗时太长；那么后面的任务就需要等待，为了解决这种情况，将任务分为了同步任务和异步任务；而异步任务又可以分为微任务和宏任务1）、同步和异步任务分别进入不同的执行"场所"，同步的进入主线程，异步的进入Event Table并注册函数2）、当指定的事情完成时，Event Table会将这个函数移入Event Queue。3）、主线程内的任务执行完毕为空，会去Event Queue读取对应的函数，进入主线程执行。4）、上述过程会不断重复，也就是常说的Event Loop(事件循环)。那么主线程内的任务执行为空的判定？在js引擎中，存在一个叫monitoring process的进程，这个进程会不断的检查主线程的执行情况，一旦为空，就会去Event Quene检查有哪些待执行的函数。宏任务和微任务的分类
宏任务：setTimeoutsetIntervaljs主代码setImmediate(Node)requestAnimationFrame(浏览器)微任务：process.nextTickPromise的then方法其中微任务的优先级高于宏任务

39、js中import与require

import 和 require 是JS模块化编程使用的， 模块化是一种将系统分离成独立功能部分的方法，一个模块是为完成一个功能的一段程序或子程序。"模块"是系统中功能单一且可替换的部分
区别：require/exports 是 CommonJS/AMD 中为了解决模块化语法而引入的import/export 是ES6引入的新规范，因为浏览器引擎兼容问题，需要在node中用babel将ES6语法编译成ES5语法require 是运行时调用，所以理论上可以运作在代码的任何地方import 是编译时调用，所以必须放在文件的开头require 是赋值过程，其实require的结果就是对象、数字、字符串、函数等，再把结果赋值给某个变量。它是普通的值拷贝传递。import 是解构过程。使用import导入模块的属性或者方法是引用传递。且import是read-only的，值是单向传递的。default是ES6 模块化所独有的关键字，export default {} 输出默认的接口对象，如果没有命名，则在import时可以自定义一个名称用来关联这个对象

Vue

1、MVC与MVVM

•  都是软件架构思想
•  mvc (react)o  model: 数据保存o  view: 用户界面o  Controller: 业务逻辑 o  所有通信都是单向的. view -> controller -> model -> view
•  mvvm（vue）o  model: 数据层o  view: 视图层o  viewmodel: 视图模型层o  view和viewmodel是同步更改的，viewmodel再和model层进行通信
•  数据流向o  mvc: view -> controller -> model -> viewo  mvvm: view <-> viewmodel -><- model

2、vue生命周期

•  beforeCreate：o  初始化事件，生命周期
•  cteated：o  注入数据，初始化响应式数据
•  beforeMount：o  是否有el和template选项
•  mounted：o  将数据挂载到模板中，将虚拟DOM转成真实DOM
•  beforeUpdate、updated：o  数据改变时触发，dom的更新前后
•  beforeDestroy、destroyed：o  组件销毁的时候触发o  何时需要使用beforeDestroy    websocket常连接，消除定时器，监听事件
•  activated：o  缓存组件被激活时调用
•  deactivated：o  缓存组件被停用时调用
•  errorCaptured：o  子孙组件出错时调用

3、组件间传值

•  父子传值o  父传子的实现方式就是通过props属性，子组件通过props属性接收从父组件传过来的值，而父组件传值的时候使用 v-bind 将子组件中预留的变量名绑定为data里面的数据
•  子父传值o  需要使用自定义事件，在子组件中使用this.$emit(‘myEvent’) 触发，然后在父组件中使用@myEvent监听
•  非父子组件传值o  运用自定义事件emit的触发和监听能力，定义一个公共的事件总线eventBus，通过它作为中间桥梁，我们就可以传值给任意组件了

4、定义嵌套路由

•  在 VueRouter 的参数中使用 children 配置，这样就可以很好的实现路由嵌套

5、路由跳转

•  声明式（标签跳转）  <router-link :to="/index/page1"></router-link>
•  编程式（ js 跳转） router.push('index')

6、路由懒加载

vue异步组件技术 ==== 异步加载
vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 ；但是,这种情况下一个组件生成一个js文件
/* vue异步组件技术 */
{path: '/home',name: 'home',component: resolve => require(['@/components/home'],resolve)
},{path: '/index',name: 'Index',component: resolve => require(['@/components/index'],resolve)
},{path: '/about',name: 'about',component: resolve => require(['@/components/about'],resolve)
} // 路由懒加载(使用import)
const Home =  () => import('@/components/home')
const Index = () => import('@/components/index')
const About = () => import('@/components/about')
{path: '/about',component: About
}, {path: '/index',component: Index
}, {path: '/home',component: Home
}// webpack提供的require.ensure()
// vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。
// 这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。
/* 组件懒加载方案三: webpack提供的require.ensure() */
{path: '/home',name: 'home',component: r => require.ensure([], () => r(require('@/components/home')), 'demo')
}, {path: '/index',name: 'Index',component: r => require.ensure([], () => r(require('@/components/index')), 'demo')
}, {path: '/about',name: 'about',component: r => require.ensure([], () => r(require('@/components/about')), 'demo-01')
}

7、vuex

•  Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能
•  在 main.js 引入 store，注入。新建了一个目录 store，….. export 。场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车
•  核心属性：o  state 唯一数据源,Vue 实例中的 data 遵循相同的规则o  getters 可以认为是 store 的计算属性,就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。Getter 会暴露为 store.getters 对象，你可以以属性的形式访问这些值.o  mutation 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation,非常类似于事件,通过store.commit 方法触发o  Action 类似于 mutation，不同在于Action 提交的是 mutation，而不是直接变更状态，Action 可以包含任意异步操作o  module 由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）

8、vue-router钩子

•  全局导航钩子o  router.beforeEach(to, from, next),o  router.beforeResolve(to, from, next),o  router.afterEach(to, from ,next)
•  组件内钩子o  beforeRouteEnter,o  beforeRouteUpdate,o  beforeRouteLeave
•  单独路由独享组件o  beforeEnter

9、数据双向绑定原理

•  vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调
•  具体步骤：o  第一步：需要 observe 的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter 和 getter 这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化o  第二步：compile 解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图o  第三步：Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁，主要做的事情是:在自身实例化时往属性订阅器(dep)里面添加自己自身必须有一个 update()方法待属性变动 dep.notice()通知时，能调用自身的 update() 方法，并触发 Compile 中绑定的回调，则功成身退。o  第四步：MVVM 作为数据绑定的入口，整合 Observer、Compile 和 Watcher 三者，通过 Observer 来监听自己的 model 数据变化，通过 Compile 来解析编译模板指令，最终利用 Watcher 搭起 Observer 和 Compile 之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据 model 变更的双向绑定效果

10、axios

•  axios 是请求后台资源的模块
•  安装：npm i axios -S
•  如果发送的是跨域请求，需在配置文件中 config/index.js 进行配置引用：方式一：直接script标签引用方式二：ES6  import引用
因为axios不是vue的插件，所以不能直接用use方法，需要将其加载到原型上。
如果要全局使用axios就需要在main.js中设置成全局的，然后再组件中通过this调用在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等
https://zhuanlan.zhihu.com/p/262665309

11、vue中key的作用

•  元素的唯一性，diff方法中提高了匹配元素index的性能。有key时遍历key-index对象（快），无key时遍历旧Vnode（慢）。
•  在元素list一直变化的情况下，key值设置唯一时，能很精确找到/找不到变更元素，key不唯一时，不能精确找到要匹配的元素。

12、$nextTick

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

13、vue组件封装过程

•  首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率低、难维护、复用性等问题。
•  然后，使用Vue.extend方法创建一个组件，然后使用Vue.component方法注册组件。子组件需要数据，可以在props中接受定义。而子组件修改好数据后，想把数据传递给父组件。可以采用emit方法

14、vue严格模式

•  在严格模式下，无论何时发生了状态变更且不是由mutation函数引起的，将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到。
•  在Vuex.Store 构造器选项中开启,如下const store = new Vuex.Store({strict:true,})

15、router与route区别

•  route为当前router跳转对象里面可以获取name、path、query、params等
•  router为VueRouter实例，想要导航到不同URL，则使用router.push方法

16、webpack中常见loader

•  file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件
•  url-loader：和 file-loader 类似，但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去
•  source-map-loader：加载额外的 Source Map 文件，以方便断点调试
•  image-loader：加载并且压缩图片文件
•  babel-loader：把 ES6 转换成 ES5
•  css-loader：加载 CSS，支持模块化、压缩、文件导入等特性
•  style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS。
•  eslint-loader：通过 ESLint 检查 JavaScript 代码

17、hash模式与history模式

•  Hash模式：o  原理: 在 url 中的 # 之后对应的是 hash 值, 其原理是通过hashChange() 事件监听hash值的变化, 根据路由表对应的hash值来判断加载对应的路由加载对应的组件o  优点:只需要前端配置路由表, 不需要后端的参与兼容性好, 浏览器都能支持hash值改变不会向后端发送请求, 完全属于前端路由o  缺点:hash值前面需要加#, 不符合url规范,也不美观
•  History模式：o  利用了HTML5新增的pushState()和replaceState()两个api, 通过这两个api完成URL跳转不会重新加载页面o  优点:符合url地址规范, 不需要#, 使用起来比较美观o  缺点:在用户手动输入地址或刷新页面时会发起url请求, 后端需要配置index.html页面用户匹配不到静态资源的情况, 否则会出现404错误兼容性比较差, 是利用了 HTML5 History对象中新增的 pushState() 和 replaceState() 方法,需要特定浏览器的支持.

18、虚拟dom和diff算法

•  虚拟dom原理：利用object当做dom节点，我理解为他是一个虚拟的节点，叫vnode然后，数据如果发生改变，会生成一个新的vnode然后新老对比，产生结果然后渲染到真实domo  或回答：数据发生变化时，Vue是怎么更新节点的 我们先根据真实DOM生成一颗virtual DOM，当virtual DOM某个节点的数据改变后会生成一个新的Vnode，然后Vnode和oldVnode作对比，发现有不一样的地方就直接修改在真实的DOM上，然后使oldVnode的值为Vnode
•  diff算法：diff算法 同级比较 根据dom节点层级对比，对比有没有删除或增加 最先比的是key值o  或回答：diff的过程就是调用名为patch的函数，比较新旧节点，一边比较一边给真实的DOM打补丁。比较新旧节点，只会在同级比较 列表对比的时候，使用key进行对比，这样才能复用老的DOM树上的节点

19、v-if与v-for

在vue实际开发中，我们避免不了会使用v-for和v-if来操作数据，但是v-for和v-if同时使用时，有一个先后运行的优先级，v-for比v-if的优先级更高，这就说明在v-for的每次循环运行中每一次都会调用v-if的判断，所以不推荐v-if和v-for在同一个标签内同时使用

20、v-if与v-show

区别：手段：v-if是通过控制dom节点的存在与否来控制元素的显隐；v-show是通过设置DOM元素的display样式，block为显示，none为隐藏；编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载); v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；
场景如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好

21、动态路由

1.前端在本地写好路由表，以及每个路由对应的角色，也就是哪些角色可以看到这个菜单/路由；
2.登录的时候，向后端请求得到登录用户的角色(管理者、普通用户)；
3.利用路由拦截，根据取到的用户角色,跟本地的路由表进行对比，过滤出用户对应的路由，并利用路由进行左侧菜单渲染

https://segmentfault.com/a/1190000018727683

22、全局导航钩子的使用

1. 在A组件里调用离开守卫。 A组件中的beforeRouterLeave
2. 调用全局的beforeEach守卫。 router.beforeEach
3. 再执行B路由配置里调用beforeEnter。
4. 再执行B组件的进入守卫。 B组件中beforeRouterEnter
5. 调用全局的beforeResolve守卫(2.5+)。 router.beforeResolve
6. 导航被确认。
7. 调用全局的afterEach钩子。 router.afterEach
8. 触发DOM更新。

23、计算属性、侦听属性、方法的区别

•  计算属性 (computed properties)： 就是不存在于原始数据中，而是在运行时实时计算出来的属性
•  计算属性默认只有 getter ，当然在需要时我们也可以提供一个 setter 。计算属性被设计出来的目的在于：getter 是干净无副作用的。计算属性的最终结果依赖于其所依赖的值的变化
•  计算属性和 Methods的区别：o  计算属性是有缓存的，所以多次用到计算属性，那么只需要计算一次o  方法没有缓存，用到几次就计算几次o  如果都能用，推荐使用计算属性，开销更小
•  计算属性和监听属性：o  计算属性通过其他的响应式的数据的改变，来改变自己o  侦听器是通过监听自己的改变，去改变其他的响应式数据o  如果我们要用到的值，依赖多个响应式数据的时候，计算属性更方便

24、vue中防止抖动

针对在vue项目中，我们进行防抖，请求频繁时取消上一次的操作，可以通过两种方式。
第一种通过clearTimeout()和setTimeout()定时器进行解决，
第二种可以通过axios进行防抖解决
也可以使用lodash 来做节流：要对事件进行节流处理方法非常简单，只需将要调用的函数包装在lodash的_.throttle函数中即可
防抖：防抖实质上将我们的事件分组在一起，并防止它们被频繁触发。 要在Vue组件中使用节流，只需将要调用的函数包装在lodash的_.debounce函数中。

25、vue核心

数据驱动、组件系统数据驱动：ViewModel，保证数据和视图的一致性。组件系统：应用类UI可以看作全部是由组件树构成的

前端面试题合集（持续更新中......）相关推荐

2022前端面试题汇总（持续更新中~）
目录 1. 防抖和节流 2. js闭包 vue中的data为什么是一个函数?(面试常问) 3. ES6面试题 3.1 var let const 区别 3.2 解构 3.3 如何利用es6快速的去重? ...
前端面试题集合，持续更新中（附答案，简单易懂）
最近面试遇到的一些问题以及平时的一些积累,如有错误,欢迎指正O(∩_∩)O~~. http和https的区别 HTTP协议:超文本传输协议,英文是Hyper Text Transfer Protoco ...
2019年3月-4月前端面试题汇总（持续更新中...）
小编推荐:Fundebug提供JS错误监控.微信小程序错误监控.微信小游戏错误监控,Node.j错误监控和Java错误监控.真的是一个很好用的错误监控费服务,众多大佬公司都在使用. 搜罗了最近看机会的 ...
2020中高级前端面试题合集
2020中高级前端面试题合集 "全方位总结一下所遇到的面试题目,与大家共同学习,也是对自己的一次总结" 文章同步到我的公众号<前端小时>,欢迎大家关注! 01 前言 2 ...
详细前端面试题javascript篇--持续更新
最新前端面试题汇总大全(超详细含vue,react,css,js,webpack,性能优化等)–持续更新点击查看前端HTML篇前端CSS篇前端面试题js篇--持续更新 1. JS 数据类型 ?存 ...
前端面试题总结【持续更新···】
前端面试题总结 1.说说你对react的理解?有哪些特性? 2.说说React diff算法是怎么运作的? 3.说说React生命周期有哪些不同的阶段?每个阶段对应的方法是? 4.说说你对React中 ...
2022年前端面试题整理，持续更新中
端面试题整理已同步到掘金.CSDN 掘金地址: https://juejin.cn/post/7075332630417244173 CSDN 地址:https://blog.csdn.net/z1 ...
Web前端面试题整合，持续更新【可以收藏】
饭后闲来无事,把这几年带学生用的一些面试题整合一下,供上!拿走,不客气!应付一般公司的二面基本上是够用了.祝你早日拿到心仪的offer. css相关 1. 万能居中 1.margin: 0 auto; ...
中高级前端面试题合集
2020是不平凡的一年,这一年里发生许多事情,大家也都知道.对于互联网行业来说也是一次重大的打击,也有一些企业在这次疫情中倒闭了,所以可能对于今年2020年毕业的同学来说是一次很大的考验,也关乎我们的 ...

前端面试题合集（持续更新中......）

HTML、CSS

1、元素水平垂直居中

2、C3新特性

3、H5新特性

4、移动端适配

5、BFC

6、H5离线存储

JavaScript

1、js数据类型

2、js值的类型

3、闭包

4、回流与重绘

5、常见DOM操作

6、数组对象的原生方法

7、渐进增强与优雅降级

8、webworker和websocket

9、深浅拷贝

10、作用域链

11、原型与原型链（常问）

12、继承

13、new关键字

14、this指向

15、apply、call、bind

16、浏览器渲染过程

17、垃圾回收机制

18、前端性能优化

19、Promise

20、cookie、localStorage、sessionStorage

21、判断对象是否为空

22、var、let、const区别

23、防抖、节流

24、async、await

25、es6新增特性

26、http与https

27、浏览器渲染原理

28、地址栏输入url发生了什么

29、回调函数

30、cookie、session

31、跨域

32、set与map

33、instanceof原理

34、监测数据类型

35、构造函数与普通函数

36、默认事件与冒泡事件

37、window对象与document对象的区别

38、事件循环

39、js中import与require

Vue

1、MVC与MVVM

2、vue生命周期

3、组件间传值

4、定义嵌套路由

5、路由跳转

6、路由懒加载

7、vuex

8、vue-router钩子

9、数据双向绑定原理

10、axios

11、vue中key的作用

12、$nextTick

13、vue组件封装过程

14、vue严格模式

15、router与route区别

16、webpack中常见loader

17、hash模式与history模式

18、虚拟dom和diff算法

19、v-if与v-for

20、v-if与v-show

21、动态路由

22、全局导航钩子的使用

23、计算属性、侦听属性、方法的区别

24、vue中防止抖动

25、vue核心

前端面试题合集（持续更新中......）相关推荐

最新文章

热门文章