前端面试题汇总.docxVIP

2017前端面试题总结

1：为何选择前端这个方向和对前端的理解

为什么：

第一的话就是对前端很感兴趣，之前也接触过其他的语言，但是直到接触到前端才发现真的有兴趣做下去，兴趣是一个人最好的老师，

第二的话前端很有前途，像现在nodejs，rn，微信小程序这类工具和框架可以让前端进行后端和移动开发，所以我觉得前端的前途会更多一点。

理解：

首先前端工程师最核心的技能还是：Html、CSS、JS。前端负责的是用户可以看到的部分，所以也是最接近用户的工程师。同时在产品研发流程中前端要同时与产品、设计、后端等很多人合作。

2：Vue双向数据绑定的实现

vue.js则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者（文本节点则是作为订阅者），在收到消息后执行相应的更新操作。

compile主要做的事情是解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图

MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化-视图更新；视图交互变化(input)-数据model变更的双向绑定效果。

AngularJS采用“脏值检测”的方式，数据发生变更后，对于所有的数据和视图的绑定关系进行一次检测，识别是否有数据发生了改变。

3：react和vue有哪些不同说说你对这两个框架的看法

都用了virtualdom的方式,性能都很好

ui上都是组件化的写法，开发效率很高

vue是双向数据绑定，react是单项数据绑定，当工程规模比较大时双向数据绑定会很难维护

vue适合不会持续的?小型的web应用，使用vue.js能带来短期内较高的开发效率.否则采用react

4：let和const的区别

let声明的变量可以改变，值和类型都可以改变，没有限制。

const声明的变量不得改变值

5：平时用了es6的哪些特性，体验如何和es5有什么不同

letconst关键字箭头函数字符串模板class类模块化promise

es5requirereact.createclass

6：浏览器原生支持module吗，如果支持，会带来哪些便利

不支持

7：介绍一下你对webpack的理解，和gulp有什么不同

Webpack是模块打包工具，他会分析模块间的依赖关系，然后使用loaders处理它们，最后生成一个优化并且合并后的静态资源。

gulp是前端自动化工具?能够优化前端工作流程，比如文件合并压缩

8:webpack打包速度慢，你觉得可能的原因是什么，该如何解决

模块太多

Webpack可以配置externals来将依赖的库指向全局变量，从而不再打包这个库

9：http响应中content-type包含哪些内容

请求中的消息主体是用何种方式编码

application/x-www-form-urlencoded

这是最常见的POST提交数据的方式?按照key1=val1key2=val2的方式进行编码

application/json

告诉服务端消息主体是序列化后的JSON字符串

10：浏览器缓存有哪些，通常缓存有哪几种方式

强缓存?强缓存如果命中，浏览器直接从自己的缓存中读取资源，不会发请求到服务器。

协商缓存?当强缓存没有命中的时候，浏览器一定会发送一个请求到服务器，通过服务器端依据资源的另外一些httpheader验证这个资源是否命中协商缓存，如果协商缓存命中，服务器会将这个请求返回（304），若未命中请求，则将资源返回客户端，并更新本地缓存数据（200）。

HTTP头信息控制缓存

Expires（强缓存）+过期时间??Expires是HTTP1.0提出的一个表示资源过期时间的header，它描述的是一个绝对时间

Cache-control（强缓存）?描述的是一个相对时间，在进行缓存命中的时候，都是利用客户端时间进行判断?管理更有效，安全一些?Cache-Control:max-age=3600

Last-Modified/If-Modified-Since（协商缓存）?标示这个响应资源的最后修改时间。Last-Modified是服务器相应给客户端的，If-Modified-Sinces是客户端发给服务器，服务器判断这个缓存时间是否是最新的，是的话拿缓存。

Etag/If-None-M