---

自己整理出来的一些前端工程师必备的面试题，面试中出场率很高，相信小伙伴在找工作或者跳槽中能够顺利找到自己想要的工作。

1、DOCTYPE有什么作用？标准模式与混杂模式如何区分？它们有何意义？

DOCTYPE的作用是告诉浏览器使用哪种版本的HTML规范来渲染文档。当DOCTYPE不存在或者形式不正确时会导致HTML文档以混杂模式解析文档。标准模式以浏览器支持的最高标准运行，混杂模式中的页面会以一种比较宽松的向后兼容的方式显示。

H5不基于SGML因此不需要对DTD进行引用，但是需要通过DOCTYPE来规范浏览器行为。 和 适用于该方式。   只需要给页面添加 ’ 表示二级域名都相同就可以实现跨域

原理：hash改变页面不刷新,可以通过改变hash值来执行回调操作从而实现数据的传递

这种方式通常用于获取嵌入页面中的第三方页面数据。一个页面发送消息，另一个页面判断来源并接收消息，通过postMessage方法和window.onmessage方法实现

原理：不受同源策略的限制

原理：通过服务器做第三方代理，来传递请求和接受返回的数据并进行传递过去。

7、性能优化的方案有哪些？

借一张图片来看，大家如果想看的话也可以去看看这本小册

8、HTTP协议的主要特点？

简单快速：每个资源URI是固定的，在HTTP协议中处理比较简单

灵活：HTTP中头部分数据类型，通过一个HTTP协议可以完成不同数据类型的传输

无连接：连接依次就会断掉不会保持连接

无状态：客户端与服务端是两种身份，HTTP帮忙建立连接，依次任务完成就断开，下次传输还是需要确立连接

9、HTTP报文的组成部分？

请求报文：请求行、请求头、空行、请求体

响应报文：状态行、响应头、空行、响应体

GET在浏览器回退时是无害的，而POST会再次提交

GET产生的URL地址可以被收藏，而POST不可以

GET请求会被浏览器主动缓存，而POST不会除非主动设置

GET只能进行url编码，而POST支持多种编码

GET请求参数会被完整的保留在浏览器历史记录中而POST的参数不会

GET请求在URL传送的参数的长度有限，而POST没有限制

GET比POST更不安全，因为参数直接暴露在URL上，所以不安全

11、常见的HTTP状态码？

1XX：指示信息–表示信息已被接受，继续处理

2XX：成功 --表示信息已经成功返回

200 OK客户端请求成功

3XX： 重定向 --表示资源地址已经变更

301 永久重定向 所有请求的页面已经转移之新的URL
302 所请求的页面已经临时转移至新的URL
304请求已经发出，但是为满足要求而不需要进行请求即可完成

4XX：请求错误–表示客户端请求出错

401 用户未登录或者为授权

5XX：服务器端出错 --表示服务器正在维修或者已坏

500：服务器发生不可预期的错误原来缓冲的文档还可以继续使用
503：请求未完成，服务器临时过载或当机，一段时间内可恢复正常

12、http的缓存机制是怎么样的？

HTTP 缓存是我们日常开发中最为熟悉的一种缓存机制。它又分为强缓存和协商缓存。优先级较高的是强缓存，在命中强缓存失败的情况下，才会走协商缓存。

1、expires，这个的实现机制是expires是一个时间戳，接下来如果我们试图再次向服务器请求资源，浏览器就会先对比本地时间和 expires 的时间戳，如果本地时间小于 expires 设定的过期时间，那么就直接去缓存中取这个资源。

那么问题就很明显了，这个非常依赖本地时间，如果用户修改了本地时间那么缓存机制也就失效了。

2、cache-control,在 Cache-Control 中，我们通常通过 max-age 来控制资源的有效期。max-age 不是一个时间戳，而是一个时间长度，如max-age=;这样的话只有这个请求在这个时间段内都是有效的。并且cache-control优先级也更高，也向下兼容。

工作：服务器接收到请求过来的If-Modified-Since时会对比这个时间与服务器文件修改的最后时间，如果发生变化则会返回一个完整的响应，否则会返回304，并且响应头中不会有Last-Modified字段。

1、我们如果对资源进行了编辑，但是内容并未修改，而修改时间却改变了，那么下一次请求时需要重新响应，但是返回的数据却并未改变。
2、如果我们修改文件的时间很短（s以内），由于 If-Modified-Since 只能检查到以秒为最小计量单位的时间差，那么这个他的Last-modified并未修改，导致请求的资源反而出错。

2、Etag 是由服务器为每个资源生成的唯一的标识符，这个标识符是基于文件内容生成的，只要文件内容不同，它们对应的 Etag 就是不同的。

因此每次请求只需要对比Etag是否改变即可。Etag的优先级更高，并且两者同时存在是优先使用Etag。

13、谈谈你对原型链的理解？

原型的constructor属性指向构造函数，构造函数又通过prototype属性指回原型

那么原型链是怎么回事呢？

原型链就是多个对象通过__ proto __ 的方式连接了起来。当当前元素中没有某一个函数或者方法时会沿着原型链一直往上查找，直到最顶部为止。

大家可以理解下这张图片

原理：本质上通过原型链来判断的

15、new运算符工作原理？

1、生成一个obj对象

可以思考下这道题：new关键字的问题（return 1后会是什么情况）？

16、继承的方法你知道几种？

1、借助构造函数实现继承

原理：将父类构造函数的this指向子类构造函数的实例上去

缺点：继承的子类上没有继承到父元素原型上的属性和方法，并没有实现真正的继承，只是实现了部分继承。

2、借助原型链实现继承（解决了继承到父元素到方法问题）

原理：子类构造函数的prototype链接到父类实例对象上实现原型链的继承

缺点：原型对象是共用的，子类构造函数构造出来的实例对象改变原型对象的属性时会导致另一个继承子类的实例对象的属性随之改变。原因是因为子类构造出来的子类执行的原型对象共用同一个地址。

3、组合方式 上面两种方式结合 （解决了公用地址问题）

缺点：子类构造函数的原型对象没有自己的constructor，所以会网上找到父类原型对象的构造函数，所以子类的constructor会指向父类的构造函数,并且父类的构造函数被调用了两次

4、组合继承优化 （解决以上两个问题）

相同：都是改变this指向

不同点：传参列表不同，call是变量传入，apply是数组方式传入

1、对于函数直接调用的方式，不管在何处被执行，this一定指向window。

2、函数的执行时有调用者，那么谁调用this就指向谁

3、通过 new 的方式，this 永远被绑定在新创建的对象上，任何方式都改变不了 this 的指向。

4、通过call，apply改变this指向的时候，this指向传入的第一个参数值。

5、箭头函数执行时，this是包裹箭头函数最近的一个普通函数内的this

19、闭包是什么原理？优缺点？

函数A里面包含了函数B，而函数B里面引用了函数A的变量，那么函数B被称为闭包。

或者：闭包就是能够读取其他函数内部变量的函数。

闭包存在的意义就是让我们可以间接访问函数内部的变量

一个是可以读取函数内部的变量，并且这个变量不会被回收

另一个是封装对象的私有属性和私有方法

消耗内存，可能会造成内存溢出的情况。

由于setTimeouts是个异步函数，所以会先把循环全部执行完毕,最后才会打印输出6个6

第一种方法 使用立即执行函数解决

第二种方法 使用let的块级作用域解决

第三种方法 使用setTimeout的第三个参数，这个参数会被当成 timer 函数的参数传入

20、服务器如何与客户端实现长连接（如何识别客户端）？

HTTP协议采用‘请求-应答’模式，当采用普通模式，即非keep-alive模式时，每个请求/应答客户端和服务器端都要重新建立一个连接，完成之后立即断开连接（HTTP是无连接的协议）

持久连接时当使用keep-alive模式时，keep-alive功能使客户端到服务器端的连接持久有效，当出现对服务器的后继请求时，keep-alive公告避免了建立或者重新建立连接。

21、事件的冒泡与捕获机制？

一个完整的事件流分三个阶段，第一阶段时捕获，第二阶段是目标阶段-即事件通过捕获到达目标阶段，第三阶段是冒泡阶段即从目标元素上传到window对象。

1、生命周期钩子函数（在特定时刻运行的函数）

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子函数。

created中适合发送请求。

mounted阶段dom元素已经挂载，可以操作dom元素

updated函数可以根据更新后执行一系列操作

beforeDestroy可以用于移除事件、定时器等等，否则可能会引起内存泄露的问题。

destroyed进行组件的销毁操作，如果有子组件也会递归销毁，最后销毁父组件。

v-show是切换display属性来达到显示与隐藏的效果的。这也就是说v-show刚开始一定会加载，有比较高的初始渲染开销，但是一旦渲染后就不需要销毁组件，所以更适合切换场景频率高的。

v-if是惰性的，如果刚开始为false的话那么就不会挂载组件，直到条件为true是才会去挂载渲染组件。并且在切换是会触发销毁/挂载组件，切换开销比较大，适合不经常切换的场景。当然这种惰性渲染也可以减少页面初始渲染开销。

computed常用于计算值的场景
计算属性是基于它们的响应式依赖进行缓存的，所以当值没发生改变时时不会执行的
还可以使用setter函数来处理一些逻辑

watch用来观察和响应 Vue 实例上的数据变动，实时对数据监听并处理一些复杂的逻辑操作
无缓存性，页面重新渲染时值不变化也会执行

// 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深 // 该回调将会在侦听开始之后被立即调用

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。以便于在diff是可以快速查找到某个元素。

如果你在组件切换的时候，需要保存一些组件的状态防止多次渲染，就可以使用 keep-alive 组件包裹需要保存的组件。

用 keep-alive 包裹的组件在切换时不会进行销毁，而是缓存到内存中并执行 deactivated 钩子函数，命中缓存渲染后会执行 actived 钩子函数。

7、组件通信的方式有多少种？

1、使用props向子组件传递数据，子组件通过emit触发事件向父组件传递数据

2、父组件通过ref调用子组件的方法

3、通过.sync语法实现数据的父子组件的通信

1、provide 选项允许我们指定我们想要提供给后代组件的数据/方法，使用provide注入，子组件中通过inject接受即可使用

3、使用vuex来实现跨组件通信。

8、组件中 data 为什么是个函数而根组件中却是对象？

组件复用时所有组件实例都会共享一个 data，如果 data 是对象的话，就会造成一个组件修改 data 以后会影响到其他所有组件，所以需要将 data 写成函数，每次用到就调用一次函数获得新的数据。而new Vue的实例，是不会被复用的，因此不存在对象引用问题。

9、Vue双向绑定的实现？

mixin 用于全局混入，会影响到每个组件实例，通常插件都是这样做初始化的。

mixins应该是来分发 Vue 组件中的可复用功能。如果多个组件中有相同的业务逻辑，就可以将这些相同的逻辑剥离出来，通过 mixins 混入代码，但是要注意合并的一些规则等。

nextTick可以让我们在下次 DOM 更新循环结束之后执行延迟回调，用于获得更新后的 DOM。

12、单页面与多页面的优缺点？

13、对于Vue的优化方案？

3、v-for的使用时必须加上key值。 4、事件，定时器的销毁操作 5、图片资源的懒加载（vue插件） 7、第三方插件的按需引入如Echarts 10、使用alias来简化路径查找

Virtual DOM 其实就是一棵以 JavaScript 对象（VNode 节点）作为基础的树，用对象属性来描述节点，实际上它只是一层对真实 DOM 的抽象。最终可以通过一系列操作使这棵树映射到真实环境上。

15、Vue中的服务器代理如何设置？

vue-cli3.0以后都是在根目录下新建vue.config.js来配置对应需要修改的配置的。

git fetch是将远程主机的最新内容拉到本地，用户在检查了以后决定是否合并到工作本机分支中。

而git pull 则是将远程主机的最新内容拉下来后直接合并，即：git pull = git fetch + git merge，这样可能会产生冲突，需要手动解决。

git merge是git会自动根据两个分支的共同祖先的这个 commit 和两个分支的最新提交 进行一个三方合并，然后将合并中修改的内容生成一个新的 commit。并且合并最新的commit是在合并的分支上。

git rebase，衍合在当前分支上重演另一个分支的历史，提交历史是线性的。 本质上，这是线性化的自动的 cherry-pick，会将两个分支合并为一个分支。

个人觉得写的不错的文章

git commit -m '描述’提交之后，发现-m的说明文字写的有问题，想要重新写一次，也就是想撤销上次的提交动作，重新提交一次，则可以使用这个操作。

reset命令把当前分支指向另一个位置，并且有选择的变动工作目录和索引。也用来在从历史仓库中复制文件到索引，而不动工作目录。

如果不给选项，那么当前分支指向到那个提交。如果用–hard选项，那么工作目录也更新，如果用–soft选项，那么都不变。

5、查看git的提交历史？

git log 命令可以显示所有提交过的版本信息。

git reflog 可以查看所有分支的所有操作记录（包括已经被删除的 commit 记录和 reset 的操作）

1、当本地文件修改后使用git add file将文件放入暂存区

2、git commit 给暂存区域生成快照并提交到仓库中。

3、git push将本地仓库的代码同步的远程仓库中去。

5、git checkout – files 把文件从暂存区域复制到工作目录，用来丢弃本地修改。

mv还具备文件移动功能

mv b sm/ 将文件（夹）b 移动到当前目录下的sm目录下
mv (-f如果目标存在直接强行覆盖 -b移动时为目标创建一个备份 -i目标存在会交互提醒是否要覆盖) 源文件 目标文件
mv b sm/c 将文件（夹）b移动到当前目录下的sm目录下并重命名为c

6、ps (-e选择所以进程 -f列出完整列表 -a显示由同一个TTY -x选择进程且不含控制的TTY)

这些问题也是我比较常见问到的。嗯，答案我也没有标准的，只能将问题给大家参考。

1、为什么选择我们公司？

2、你觉得你比别人的优势在哪？

3、你职业规划是怎样的呢 ？

4、你平时的怎么学习的？

6、你对前端工程师这个职位是怎么样理解的？

1、目前前端部门常用的技术栈是什么？

2、公司是否会有技术分享交流活动？

3、公司技术团队的架构和人员组成？

4、公司的业务方向是怎么样的呢？

5、你认为你们公司的优势是什么？

---

各位觉得文章还行的可以点个赞激励我继续前行，另外有任何问题也可以评论区交流。有错误也欢迎大家指正。