分享给大家三十道前端面试题

5、同步异步？宏任务微任务？async函数？

同步：同步任务指的是，在主线程上排队执行的任务，只有前一个任务完毕，才能执

行后一个任务；

关键词：主线程排队执行

异步：不进入主线程，而进入任务队列的任务，只有等主线任务执行完毕，任务队列开始通知主线程，请求执行任务，该任务才会进入主线程执行

异步操作都有什么：定时器、事件绑定、AJAX、回调函数可以理解成异步操作；

关键词：进入任务队列，主线程执行完毕该任务才进入主线程执行

而异步操作中也存在着执行的先后的顺序：在异步操作执行中，定时器、包括整体代码script都是属于宏任务。而Promise、process.nextTick属于微任务。在执行过程中，代码会从上到下执行，遇到宏任务的时候他会被放到了宏任务的eventqueue里面，然后代码继续往下执行，查看有没有微任务，检测到微任务就会把他放入了微任务序列，等到主线进程所有的代码执行结束后，先从微任务queue里拿回调函数，然后微任务queue空了再从宏任务的queue拿函数

关键词：代码从上到下，遇到宏任务，把宏任务放到宏任务的event queue里面，遇到微任务放到微任务的queue中，等到主线程都执行完毕后，再从微任务中的queue中取回调函数，然后再执行宏任务；

async函数：async 函数属于ES7的内容，async 函数就是 Generator 函数的语法糖，是Generator 函数的一个改进版，async函数返回的是一个Promise对象，可以使用then方法添加回调函数，当函数执行的时候，一旦遇到 await 就会先返回，等到触发的异步操作完成，再接着执行函数体内后面的语句。

关键词：ES7的内容，Generator函数的一个改进版，返回promise对象，可以使用then，遇到await会返回，触发异步操作完成后，再执行函数体内的语句

6、ES6语法？this的指向问题？

-声明变量：let：块级作用域、不能重复定义、没有变量的提升、全局变量不会附加到window上；const：ES5没有提供常量这个功能，就引入了const，定义的常量不能做改变、初始化就要给初值；

关键词：let：块级作用域、不能重复定义、没有变量提升；const：不能做改变，初始化给初值；因为es5没有常量这个功能，引入的const

-解构赋值：ES6允许按照一定的模式，从数据和对象中提取，对变量进行赋值；

关键词：从数据和对象提取，对变量赋值

-箭头函数：函数的写法更简洁，箭头函数中没有自己的this对象，而是全部继承外面的所以this就是外层代码块的this；

关键词：箭头函数中没有自身的this对象，而是继承外面的this；

-this的指向问题：在普通函数中，this的指向是window；在构造函数中，this指向的是实例对象；在对象方法中调用，this指向的是方法所属对象；在事件绑定方法，this指向绑定事件对象；在定时器中使用，this指向的window；在立即执行的函数中，this指向window

-字符串模版：ES6中允许使用反引号`来创建字符串，此方法创建的字符串里面可以包含有美元符号包裹的变量；----字符串扩展

关键词：es6用反引号创建字符串，用美元符号加大括号在模板中添加变量；

-展开运算符：用‘...’表示是ES6的新概念，它的作用是把数组中的元素一

项项地展开：把一个整体的数组拆开成单个的元素；

关键词：...把剩余值放到一个数组中，可以默认转化成一个数组；

7、Vue中watch、methods、computed区别？

watch：是用来监听某个数据的，当数据发生改变时，watch就会自动触发，然后，我们就可以进行一些任务；

关键词：数据量较大，监听data数据，数据改变watch自动触发跟着改变，有异步操作

computed：是为了暴露一个全局变量，这个变量是经由一定逻辑产生的；

关键词：逻辑处理，暴露一个类似的全局变量

methods：事件处理程序，用户交互；

关键词：事件处理程序

8、Js原型链？原型链的作用？

javaScript是面向对象的，每一个实例对象都会有一个_proto_属性，该属性指向他的原型对象，这个实例对象的构造函数有一个原型属性prototype，与实例对象的_proto_属性指向同一个对象，当一个对象查找一个属性时，自身没有，就会根据_proto_向他的原型进行查找，如果都没有，则像他的原型的原型继续查找，知道查找到object.prototype._proto_为null为止，这样就形成了原型链；

关键词：js是面向对象的，每一个是对象都会有一个_proto_属性，他会指向原型对象，每一个实例构造函数都会有一个prototype属性，与实例对象的_proto_指向同一个对象，当一个对象查找属性时，自身没有就会根据_proto_向他的原型进行查找，直到查到object.prototype._proto_为null为止。

原型链的作用：原型链是实现继承的主要方法

9、跨域？解决方式？

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。

关键词：同源策略（域名，端口号，协议），安全限制

-解决方式：jsonp跨域；CORS：核心思想，在服务端通过检查请求头部的origin，从而决定请求应该成功还是失败，具体的方法是在服务端设置Response Header 响应头中的Access-Control-Allow-Origin为对应的域名，实现了CORS（跨域资源共享），这里出于在安全性方面的考虑就是尽量不要用，但对于一些不重要的数据则随意。

关键词：jsonp跨域、CORS，设置响应头

10、PC端常见的兼容问题？

-IE8下面的png图片无法正常显示，IE8把PNG格式的img解析成了span标签，导致图片无法显示。解决方案：在样式里面对span设置宽高和display：inline-block；

-rgba不支持IE8。解决方案：可以用opacity，但是注意的是opacity会影响元素里面的透明度；

-const问题：在IE中不能使用const关键字。解决方案：以var代替

-事件中兼容问题：var e = e || event

-事件监听问题：addEventListener removeEventListener

11、new操作具体干了什么？

-1、创建了一个新对象；

-2、返回一个新对象；

-3、将this修改为这个对象

-4、执行构造函数中的代码

关键词：创建对象、返回对象，将this修改成这个对象，执行构造函数中的代码

12、CSS3新特性？

文字阴影：text-shadow;

圆角边框：border-radius;

边框阴影：box-shadow;

盒子模型：box-sizing;

背景尺寸：background-size

设置图片的原点：background-origin;

渐变：linear-gradient;

过渡：transition；

自定义动画：animate;

2D转换：transform:translate(x,y)rotate(x,y)scale(x,y);

弹性布局：flex;

13、深拷贝浅拷贝？

浅拷贝：只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存；

深拷贝：会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象；

深拷贝方法：

-1、递归函数

-2、使用Object.create( )方法

-3、jquery有提供一个$extend也可以实现

-4、函数库lodash，也有提供cloneDeep用来实现

14、require和import的区别？

require使用的是Common.js规范，import使用的是Es6模块；所以两者的最大的区别就是两种规范的区别；

关键词：require：Common.js规范；import：Es6模块

Common.js:

-对于基本的数据类型，属于复制。即会被模块缓存；同时，在另一个模块可以对该模块输出的变量重新赋值。

-对于复杂数据类型，属于浅拷贝。由于两个模块引用的对象指向用一个内存空间，因此对该模块的值做修改时会影响另一个模块。

-当使用require命令加载某个模块时，就会运行该模块的代码。

-当使用require命令加载同一个模块时，不会再执行该模块，而是取到缓存之中的值。也就是说：Common.js模块无论加载对少次，都只会在第一次加载时运行一次，以后在加载，就会返回第一次运行的结果，除非手动清除系统缓存。

-循环加载时，属于加载时执行。即脚本代码在require的时候，就会全部执行。一但出现摸个模块被‘循环加载’，就只输出已经执行的部分，还未执行的部分不会输出。

关键词：对于简单数据类型：属于复制；对于复杂类型：属于浅拷贝；require哪个模块就会加载运行该模块的代码；加载同一块模块时不会加载第二次，而是从缓存中提取；循环加载时 ，只输出已经执行的部分，还未执行的部分不会输出；

Es6模块:

-Es6模块中的值属于【动态只读引用】

-对于只读来说不允许修改引入变量的值，import的变量是只读的，不论是基本数据还是复杂数据类型。当模块遇到import命令时，就会生成一个只读引用。等到脚本真正执行时，再根据这个只读引用，到被加载的那个模块里面取值；

-对于动态来说，原始值发生改变，import加载的值也会发生改变。不论是基本数据类型还是复杂数据类型；

-循环加载时。Es6模块是动态引用的，只要两个模块之间存在某个引用，代码就能够执行。

关键词：Es6模块中的值属于：动态只读引用

只读引用：不允许修改引入变量的值，import的变量是只读的，不论是基本数据还是简单数据类型，当遇到import命令时，都只会生成一个只读引用；

动态：原始值发生改变，import加载的值也会发生改变；

循环加载时，只要两个模块存在某个引用，代码就能够执行；

-注意：最后，require/exports 是必要通用且必须的；因为事实上，目前你编写的 import/export 最终都是编译为 require/exports 来执行的。

15、Ajax的交互原理？缺点？

原理：Ajax的原理简单的来说通过XmlHttpRequest对象来向服务器发送异步操作请求，从服务器上获取数据，然后用Javascript来操作DOM更新页面。

-1、创建XmlHttpRequest对象；

-2、建立连接，open，设置请求类型，链接地址

-3、发送数据，send

-4、执行回调函数；

关键词：通过xmlhttprequest对象向服务器发送请求

步骤：创建xmlhttprequest实例对象 -- 通过open创立连接（请求类型，地址） ---send发送数据 --- 执行回调函数：onreadystatechange 回调函数 -- readystate 状态

缺点：

-1、ajax不支持浏览器的back按钮

-2、安全问题：ajax暴露了与服务器交互的细节

-3、对搜索引擎的支持比较弱

-4、破坏了程序异常机制

-5、不容易调试

关键词：ajax不容易调试；安全问题，暴露与服务器的交互细节；对搜索引擎的支持较弱；破坏了程序异常机制；

16、作用域？作用域链？

作用域：作用域就是代码执行环境，全局执行环境就是全局作用域，函数的执行环境就是私有作用域，他们都是栈内存；

关键词：代码执行环境；全局作用域、局部作用域；都是栈内存

执行环境：定义了变量或函数有权访问的其他数据，决定了他们各自的行为。

全局执行环境：是最外围的一个执行环境。根据ECMAScript实现所有所在的宿主环境不同，表示的执行环境的对象也不一样；

-在web浏览器，全局环境顶级对象是window

-在node中全局执行环境是global

关键词：执行环境：局部作用域，定义了变量或函数有权访问的其他数据，决定了他们各自的行为；

全局执行环境：全局变量：最外层的一个执行环境；顶级对象是window

node中的执行环境是global

作用域链：当代码在一个环境中执行时，会创建变量对象的一个作用域链（作用域链条）

特点：

-作用域链的前端，始终都是当前执行的代码所在环境的变量对象

-作用域中的下一个对象来自外部环境，而在下一个变量对象则来自下一个外部环境，一直到全局执行环境

-全局执行环境的变量对象始终都是作用域链上的最后一个对象

关键词：作用域链条，作用域链的前端始终是执行代码所在环境的变量对象，最后执行的始终都是全局执行的变量对象

17、cookie和sessionStorage和localStorage区别？

-cookie：存储大小：4K；生命周期：可设置失效时间（expires），默认是关闭浏览器失效；作用域：所有同源窗口都是共享的；通信：每次都会携带在HTTP头中，如果使用cookie保存过多，数据会带来性能问题

-sessionStorage：存储大小：5M；生命周期：仅在当前会话下有效，关闭浏览器被清除；作用域：不在不同的浏览器窗口中共享；通信：仅在客户端（即浏览器）中保存，不参与与服务器的通信；

-localStorage：存储大小：20M；生命周期：持久数据，除非被清除否则永久保存；作用域：所有同源窗口都是共享的；通信：仅在客户端（即浏览器）中保存，不参与与服务器的通信

18、前端开发优化问题？

-1、减少http请求次数

-2、代码压缩，图片大小控制合适；

-3、前端模板 JS+数据，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数；

-4、当需要设置样式很多时，设置classname而不是在style中直接操作；

-5、少用全局变量、缓存DOM节点查找的结果。减少IO读取操作；

-6、图片加载，将样式表放在顶部，将脚本放在底部；

-7、避免在页面的主体布局中使用table；

19、readyonly和disabled的区别？

Readyonly和Disabled的作用是使用户不能更改表单域中的内容

区别：

-1、readyonly只针对input（text/password）和textarea有效，而disabled对于所有的表单元素都有效，包括select，radio，checkbox，button等；

关键词：readyonly只针对input和textarea；而diabled对所有表单元素有效；

-2、在表单元素使用了disabled后，我们将表单以POST或者GET的方式提交的话，这个元素的值不会被传递出去，而readyonly会将该值传递出去；

关键词：disabled不能通过post和get请求传递出去；而readyonly是可以传递出去的；

20、如何优化自己的代码？

-1、代码重用；

-2、避免使用过多的全局变量；

-3、拆分函数，避免函数过于臃肿：单一职责原则；

-4、将面向过程的编程方式改为使用面向对象编程；

-5、适当的注释；

-6、内存管理，尤其是闭包中的变量释放；

关键词：代码重用；避免过多的全局变量；函数单一职责；注释；面向对象的编程；内存管理

21、什么是内存泄漏？哪些操作会造成内存泄漏？

内存泄漏是指一块被分配的内存既不能使用又不能回收，直到浏览器进程结束；浏览器采用了自动垃圾回收方式管理内存，但由于浏览器回收垃圾的方法有bug，会产生内存泄漏。

操作：

-1、全局变量引起的内存泄漏；

-2、闭包引起的内存泄漏；

闭包函数：可以从外界操作私有变量的函数称为闭包函数；

-3、DOM清空或删除时，事件未清除导致的内存泄漏；

22、SPA单页面处理？优缺点？

SPA（single-page-application）仅在页面初始化时加载相应的HTML、Javascript和css，一旦页面加载完毕完成，SPA不会因为用户的操作而进行页面的重新加载；取而代之的是利用路由机制实现HTML内容的变换，UI与用户的交互，避免页面的重新加载。

关键词：在页面初始化一次性加载完html、js、css，不会因用户的操作重新加载

优点：用户体验好，快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；基于上面一点，SPA先哪个队服务器压力小；前后端职责分离，架构清晰，前端进行交互逻辑，后端进行逻辑处理；

关键词：用户体验好，快，内容的改变不需要重新加载整个页面；避免了不必要的跳转和重复渲染

缺点：初次加载耗时多：为实现单页web应用功能及显示效果，需要在加载页面的时候将javascript、css统一加载，部分页面按需加载；前进后退路由管理：由于单页面应用在一个页面中显示所有内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理；SEO难度较大：由于所有的内容都在一个页面中动态替换显示，所以在SEO上其有着天然的弱势；

关键词：初次加载耗时多，由于单页面应用在一个页面显示所有内容，所以不能使用浏览器的前进后退功能；所有页面的而切换需要自己建立堆栈管理；SEO难度较大；

23、SPA单页面？MPA多页面？

• MPA多页面：
• 应用构成：由多个完整页面构成的；
• 跳转方式：页面之间的跳转式从一个页面到另一个页面；
• 跳转后的公共资源是否重新加载：是；
• 用户体验：页面切换加载，不流畅，用户体验差，尤其是移动端；
• 页面间传递数据：依赖URL、cookie或者localstorage，实现麻烦；
• 搜索引擎优化（SEO）：可以直接做；
• 维护成本：相对容易；

关键词：MPA多页面由多个完整的页面组成，每一回的跳转都会刷新页面重新加载数据，用户体验差，不流畅，页面之间数据的传递依赖URL、cookie或者localstorage，实现很麻烦；但是他的搜索引擎的优化可以直接做，维护成本相对容易；

• SPA单页面：
• 应用构成：一个外壳页面和多个页面片段构成；
• 跳转方式：一个页面片段删除或隐藏，加载另一个页面片段并显示。片段间的模拟跳转，没有开壳页面；
• 跳转后公共资源是否重新加载：否；
• 用户体验：页面片段间切换快，用户体验好，包括移动设备；
• 页面间传递数据：页面传递数据容易（Vuex或Vue中的父子组件通讯props对象）；
• 搜索引擎优化（SEO）：需要单独方案、实现较为困难、不利于SEO检索可利用服务器端渲染（SSR）优化；
• 维护成本：相对复杂

关键词：SPA单页面处理程序，由一个外壳页面和多个页面片段构成，他的跳转方式就是一个页面片段的删除或隐藏，并没有脱离最外层的外壳页面，每一回的跳转页面不会重新加载页面数据，因为第一次加载的时候加载完成了，所以他最大的缺点就是因为第一次加载数据量大，造成的加载缓慢；页面之间数据的传递比较简单，通过props父子传递方式直接就能办到，但是对于搜索引擎来说的话，实现比较困难，不利于SEO的优化，维护成本：相对复杂；

24、px，em,rem的区别？

px像素，绝对单位，相对于显示屏分辨率而言，是一个虚拟的长度单位；

em：相对长度单位，相对于当前对象内的字体尺寸；

rem：是css3新增的一个相对单位，使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML；

25、prop传值？

props：props是单向绑定的，子组件的props选项能够接受来自父组件的数据，没错，仅仅只能接收，即子组件只能接收父组件传过来的值，不能反向传递，传递的值分为两种方式：

-静态传递：子组件通过props选项来声明一个自定义的属性，然后通过父组件就可以在嵌套标签的时候，通过这个属性往子组件传递数据了；

-动态传递：可以用v-bind来实现，通过绑定，传递过去的值就可以是表达式，布尔值，字符串，对象等任何数据；

关键词：props：单向绑定，只能被动接收父组件传递的值，不能反向传递；

26、css中sprites的优缺点？

优点：

-1、减少了网页的http请求，从而加快了网页的加载速度，提高了用户体验；

-2、减少了图片的体积，因为每个图片都有一个头部信息，把多个图片放到一个图片里，就会共用同一个头信息，从而减少了字节数；

-3、解决了网页设计师子图片命名上的困扰，只需对一张集合的图片命名就可以了，不需要对每一个小元素进行命名；

-4、更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变；

关键词：减少http请求，加快加载速度，提供用户体验；减少了图片的体积，共用一个头部信息，减少了字节数；减少了命名的困扰；更换风格方便；

缺点：

-1、在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂；

-2、css sprites在开发的时候，要通过shotoshop或其他工具测量计算每一个背景单元的精确位置；

-3、在维护比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片；

-4、精灵图不能随意改变大小和颜色，改变大小会失贞模糊，降低用户体验，css3新属性可以改变精灵图的颜色，但是比较麻烦，并且新属性有兼容问题，现在一般用字体图标代替精灵图；

关键词：宽屏，高分辨率的屏幕自适应页面，宽不够会出现断裂；开发要计算每一个背景单元的精确位置；维护麻烦；不能随意改变大小和颜色，会出现失贞，现在一般使用字体图标；

27、字体图标的优缺点？

优点：

-1.轻量性：一个图标字体比一系列的图像（特别是在Retina屏中使用双倍图像）要小。一旦图标字体加载了，图标就会马上渲染出来，不需要下载一个图像。可以减少HTTP请求，还可以配合HTML5离线存储做性能优化。

-2.灵活性：图标字体可以用过font-size属性设置其任何大小，还可以加各种文字效果，包括颜色、Hover状态、透明度、阴影和翻转等效果。可以在任何背景下显示。使用位图的话，必须得为每个不同大小和不同效果的图像输出一个不同文件。

-3.兼容性：网页字体支持所有现代浏览器，包括IE低版本。

关键词：轻量性好，字体图标比一系列的图像要小，可以减少http请求，可以配合html5离线存储做性能优化；灵活性好，可以做任何的改变；兼容性好，支持所有现代浏览器；

缺点：

-1.图标字体只能被渲染成单色或者CSS3的渐变色，由于此限制使得它不能广泛使用。

-2.使用版权上有限制，有好多字体是收费的。当然也有很多免费开源的精美字体图标供下载使用。

-3.创作自已的字体图标很费时间，重构人员后期维护的成本偏高

关键词：只能被渲染成单色或c3渐变色；使用版本有限制；创作自己的字体图标浪费时间，维护较高；

28、安装依赖出现问题怎么办？

- 先删除 当前 文件夹下面的 依赖包

- 用户下 APPData npm_cache 删除缓存

- 在当前文件夹下 执行 npm cahce clean -f

- 再执行npm i

29、BFC（块级格式化上下文）？

BFC直译为‘块级格式化上下文’，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用；一个环境中的元素不会影响到其他环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。

关键词：块级格式化上下文，一个环境中的元素不会影响其他环境中的布局；

30、Vue数据劫持？双向绑定的原理？

-数据劫持：当我们访问或设置对象的属性的时候，都会触发相应的函数，然后在这个函数里返回或设置属性的值，既然如此，我们可以在触发函数的时候动一些手脚做点自己想做的事，这也就是‘劫持’操作，在Vue中其实就是通过Object.defineProperty来劫持对象属性的setter和getter，并‘种下’一个监听器，当数据发生改变的时候发出通知；

关键词：访问设置对象的属性---》触发相应的函数---》返回或设置属性的值---》劫持

-原理：vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter和getter，在数据变动时发布消息给订阅者，触发相应的监听回调；

关键词：采用数据劫持+发布者-订阅者模式---》Object.defineProperty()劫持各个属性的setter和getter---》中下监听器---》数据变动发布消息给订阅者---》触发相应的监听回调

（先整理这些下期在更新，大佬给个赞吧......）