前端菜鸟的春招实习面经第一弹（附答案）

前言

介绍下我自己的情况，本科**类专业，反正和计算机八竿子打不着！对计算机的认识停留在自以为很牛X的office技巧！19年9月开始转行入坑计算机！之前在项目中初次接触前端，后面确定前端作为职业发展方向！经过寒假的浮躁之后，二月底开始准备接受现实的毒打（事实上也确实被毒打了......）。

时间太短，很多东西没有细看，面试官的问题也都很基础，差不多都能扯扯，但是一深挖就原形毕露，被问得面红耳赤......

但是毒打归毒打，学习还是要继续不是！！！那句话叫啥来着？

What does not kill me, makes me stronger.
任何杀不死我的，都将使我更强大 ———尼采

我还会回来的..... ———伟大的沃wo兹zi基ji说的

面经是我在春招（20年暑期实习求职）期间遇到的所有公司及问题，当做自己总结的笔记，也许也对你有一定用处。包含以下公司：

某滴
某帽
某安科技
某东
某点资讯
*ETV

还没写完，持续更新~~

某滴

HR

效率超级高，在实习僧上投递简历5分钟之后就打电话来了：

简单确认实习时间？
基础熟悉程度？会哪些框架？
学校相关细节？

挂完电话一小会儿发邮件确认技术一面时间及需要准备的细节，给人印象超正规，高效！

一面

终于迎来了滴滴一面，激动加紧张。一开始没弄好，面试老师笑了，说没啥紧张的，然后就很快活的进行整场面试。全程采用zoom会议分享IDE界面，不会的老师提醒，直到自己不会就下一题。

1. 自我介绍？
2. 说一下项目？项目中你做了啥？
3. 写水平垂直居中代码？

写好了绝对定位加位移方法，加问其中的position有哪些值，absolut是参考系是谁，有哪几种情况？还有没有其他方案？

写了flex布局，加问现在里面两个盒子，宽度3:7，高度充满父盒子,怎么做？

flex布局  
    justify-content：对其方式，水平主轴对齐方式 align-items：对齐方式，竖直轴线方向

用百分比形式写完，加问现在两个子盒子是怎么排列的？上下，请实现并排？设置float。

总结

4. js数据类型有哪几种？

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。
引用数据类型：对象(Object)、数组(Array)、函数(Function)、日期（Date）、正则（Rexg）。

注：Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。

5. js怎么判断数据类型？

typeOf:typeOf XXX | typeOf(XXX)

typeOf对于基本数据类型的判断有效（会把NULL判定为Object除外），而对于引用类型返回的基本上都是object,虽然所有对象的原型链最终都指向了Object,Object是在原型链上是所有对象的类型。但当我们需要知道某个对象的具体类型时，typeof无法帮助我们完成这样的任务。
instanceof：A instanceof B

instanceof检测的是原型，内部原理相当于判断A.__proto__===B.prototype 由于该方法的顺着原型链向上查找的机制，instanceof会把ARRAY、DAT类似的引用类型直接判断为Object，如下：
```
    [] instanceof Array;//ture
    [] instanceof Object;//ture
```
由上可知，instanceof 只能用来判断两个对象是否属于原型链的关系，而不能获取对象的具体类型。
constructor

当一个函数F被定义时，JS引擎会为F添加prototype原型，然后再在prototype上添加一个constructor属性，并让其指向F的引用。

null和undefined是无效的对象，因此是不会有constructor存在的，这两种类型的数据需要通过typeof来判断。

JS对象的constructor是不稳定的，这个主要体现在自定义对象上，当开发者重写prototype后，原有的constructor会丢失，constructor会默认为Object。
Object.prototype.toString.call (XXX)

toString是Object原型对象上的一个方法，该方法默认返回其调用者的具体类型，更严格的讲，是 toString运行时this指向的对象类型, 返回的类型格式为[object xxx],xxx是具体的数据类型，其中包括String,Number,Boolean,Undefined,Null,Function,Date,Array,RegExp,Error,HTMLDocument...

将此方法强制性运用于call里面的对象，从原型链返回数据类型，返回值为字符串格式，可以判断所有的数据类型。（null显示Null）

6. 节流和防抖了解吗？

我回答听说过但是没掌握，老师就没问了。附一篇优质解答链接

7. call,apply,bind区别，用apply实现call，再用call实现apply？

都是用于改变This的指向对象，其中call,apply调用之后会立即执行，bind不会立即执行。call传递的参数是一个个的分开，而apply传递的参数是一个数组。

function applyToCall(target, arr) {
  return this.call(target, ...arr)
}

function callToApply( target, ...args) {
  arr = [].slice.call(arguments,2)
  return this.apply(target, arr)
}

一个对象包含Number String Array Object四种类型，其中Array Object还可能包含上述四种类型，请实现一个方法，实现打印出上面对象中的所有Number String？

function print(obj) {
  let res = ''
  for (const key in obj) {
    if (typeof key == Number || typeof key == String) {
      res += key
    }
    else {
      print(key)
    }
  }
  return res
}

能实习的时间？

某帽

HR

HR小姐姐很nice,全程聊天形式进行，结束后加微信等待下一步通知。

转行如何学习？
实习时间怎么安排？
以后发展方向？

某安科技

一面

面完直接凉凉，原因在于自己很多东西都还是只了解，并没有深入掌握每个东西的原理。面试老师都提示了很多，我还是写不出严谨的代码，而且问道安全相关的细节时候，直接一脸懵！还是需要进一步学习，不然真的太菜了@@&@……@&

1. 手写登录框，实现登录逻辑！保存一周逻辑？

这个问题问了很久？包括替代方案，传输过程安全问题、方案比对、后端实现逻辑......

<form action="/admin/login" method="post" id="loginForm">
    <div class="form-group">
        <label>邮件</label>
        <input name="email" type="email" class="form-control" placeholder="请输入邮件地址">
    </div>
    <div class="form-group">
        <label>密码</label>
        <input name="password" type="password" class="form-control" placeholder="请输入密码">
    </div>
    <button type="submit" class="btn btn-primary">登录</button>
</form>

// 导入用户集合构造函数
const {
  User
} = require('../../model/user');

const bcrypt = require('bcrypt');

module.exports =
  async (req, res) => {
    // 接收请求参数
    const {
      email,
      password
    } = req.body;

    if (email.trim().length == 0 || password.trim().length == 0) {
      return res.status(400).render('admin/error', {
        msg: 'Email or password wrong!'
      });
    };

    // 根据邮箱地址查询用户信息  查询到为对象类型  否则为空
    let user = await User.findOne({
      email
    });

    if (user) {
      //将客户端传递过来的密码和用户信息的密码比对
      // if (password == user.password) {
      let isValid = await bcrypt.compare(password, user.password);

      //如果密码比对成功
      if (isValid) {
        //将用户名存储在请求对象中
        req.session.username = user.username;
        // res.send('success')
        // 重定向到用户列表页
        req.app.locals.userInfo = user;

        res.redirect('/admin/user');

        // res.render('admin/user')
      } else {
        res.status(400).render('admin/error', {
          msg: 'Email or password wrong!'
        })
      }
    } else {
      res.status(400).render('admin/error', {
        msg: 'Email or password wrong!'
      })
    }
  };

2. get和post区别？分别在什么场景下使用？

GET和POST本质上就是TCP链接，并无差别。但是由于HTTP的规定和浏览器/服务器的限制，导致他们在应用过程中体现出一些不同。

区别	GET	POST
作用	从指定的资源请求数据	向指定的资源提交要被处理的数据
请求方式	浏览器会把http header和data一并发送出去，服务器响应200（返回数据）	浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）
参数传递	url传递（长度有限制）	放在request body中（长度不限）
安全	参数直接暴露在url中，所以不能用来传递敏感信息	相对安全
编码方式	只能进行url编码 ASCII数据类型会浏览器主动cache	支持多种编码方式允许二进制数据
参数保留	请求参数会被完整保留在浏览历史记录里	参数不会被保留
数据包	一个TCP数据包	两个TCP数据包

2. 如何确保页面全部加载之后再执行JS？

把js文件放在html的最后面。这个方法简单粗暴，但是代码看上去显得有点凌乱，一般我们习惯在head中加载所需的全部js、css等。所以建议用后者方法。
在js中的把需要最后执行的代码套一个window.onload = function () {...}
如果你用的是jQuery的话，那就是$(document).ready(function(){...})
使用<script defer="defer" language="javascript"></script>模式，但是这种方式只有IE浏览器能识别。

3. BootStrap怎么用？

下载->引入->按模板方式编写前端代码

4. 不同浏览器兼容CSS怎么实现？

通过判断IE版本实现

<!--[if lte IE 6 ]> <html class="ie ie6 lte_ie7 lte_ie8 lte_ie9" lang="zh-CN"> <![endif]-->
<!--[if IE 7 ]> <html class="ie ie7 lte_ie7 lte_ie8 lte_ie9" lang="zh-CN"> <![endif]-->
<!--[if IE 8 ]> <html class="ie ie8 lte_ie8 lte_ie9" lang="zh-CN"> <![endif]-->
<!--[if IE 9 ]> <html class="ie ie9 lte_ie9" lang="zh-CN"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="zh-CN"> <!--<![endif]-->

5. 移动端怎么适配？

感觉这是一个很大很系统的问题，需要考虑到各种情况，我当时也没答完整，以下是我收集的部分（原文链接）：

1、允许网页宽度自动调整

首先，在网页代码的头部，加入一行viewport元标签，viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度(width=device-width)，原始缩放比例(initial-scale=1)为1.0，即网页初始大小占屏幕面积的100%。所有主流浏览器都支持这个设置，包括IE9，对于那些老式浏览器(主要是IE6、7、8)，需要使用css3-mediaqueries.js。
2、不使用绝对宽度

由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素，这一条非常重要。具体说，CSS代码不能指定像素宽度：width:xxxpx; 只能指定百分比宽度：width:xx%;或者width:auto;
3、相对大小的字体

字体也不能使用绝对大小(px)，而只能使用相对大小(em)。
4、流动布局(fluidgrid)

“流动布局”的含义是，各个区块的位置都是浮动的，不是固定不变的。

float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow(溢出)，避免了水平滚动条的出现。另外，绝对定位(position:absolute)的使用，也要非常小心。
5、选择加载CSS

“自适应网页设计”的核心就是CSS3引入的MediaQuery模块，它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。

media=”screenand(max-device-width:400px)” href=”tinyScreen.css”/> 上面的代码意思是，如果屏幕宽度小于400像素(max-device-width:400px)，就加载tinyScreen.css文件。
6、CSS的@media规则

同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则。
```
@mediascreenand(max-device-width:400px){
    .column{
        float:none;
        width:auto;
    }
    #sidebar{
        display:none;
    }
}
```
上面的代码意思是，如果屏幕宽度小于400像素，则column块取消浮动(float:none)、宽度自动调节(width:auto)，sidebar块不显示(display:none)。
7、图片的自适应(fluidimage)

除了布局和文本，自适应网页设计还必须实现图片的自动缩放。

这只要一行CSS代码： img{max-width:100%;}这行代码对于大多数嵌入网页的视频也有效，所以可以写成：img,object{max-width:100%;} 老版本的IE不支持max-width，所以只好写成：img{width:100%;}此外，windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的专有命令： img{-ms-interpolation-mode:bicubic;} 或者，
```
EthanMarcotte的imgSizer.js。

addLoadEvent(function(){
&emsp;&emsp;varimgs=document.getElementById(“content”).getElementsByTagName(“img”);
&emsp;&emsp;imgSizer.collate(imgs);
&emsp;&emsp;});
```
最好还是做适配分辨率的图片，有很多方法可以做到同样效果，服务器端和客户端都可以实现。

6.请讲一下什么是闭包?闭包有什么作用？

（1）什么是闭包?

由于JS的链式作用域结构，内层函数可以向上读取父级变量，但是外层无法访问内层变量。所以闭包是指有权访问另外一个函数作用域中的变量的函数。
闭包就是函数的局部变量集合，只是这些局部变量在函数返回后会继续存在。闭包就是就是函数的“堆栈”在函数返回后并不释放，我们也可以理解为这些函数堆栈并不在栈上分配而是在堆上分配。当在一个函数内定义另外一个函数就会产生闭包。
（2）为什么要用?

匿名自执行函数
我们知道所有的变量，如果不加上var关键字，则默认的会添加到全局对象的属性上去，这样的临时变量加入全局对象有很多坏处，比如：别的函数可能误用这些变量；造成全局对象过于庞大，影响访问速度(因为变量的取值是需要从原型链上遍历的)。除了每次使用变量都是用var关键字外，我们在实际情况下经常遇到这样一种情况，即有的函数只需要执行一次，其内部变量无需维护，可以用闭包。

结果缓存
我们开发中会碰到很多情况，设想我们有一个处理过程很耗时的函数对象，每次调用都会花费很长时间，那么我们就需要将计算出来的值存储起来，当调用这个函数的时候，首先在缓存中查找，如果找不到，则进行计算，然后更新缓存并返回值，如果找到了，直接返回查找到的值即可。闭包正是可以做到这一点，因为它不会释放外部的引用，从而函数内部的值可以得以保留。

封装
实现类和继承等。

某东

一面

应该是简历过了之后，直接突击电面，很尴尬，一开始直接让自我介绍，完全没准备，支支吾吾说完了。全程通话效果也不是很好，好几个问题问了面试官才确认问的啥！主要自己还太菜，面试官老师很好，不为难的提示也还不会。继续加油吧！希望下次不会凉凉。

1. 前端基础学了哪些？框架接触了哪些？

根据自己实际情况，我回答前端三件套，框架学习了VUE。

2. CSS盒模型知道吗？解释下你的理解？

简介： 就是用来装页面上的元素的矩形区域。CSS中的盒子模型包括IE盒子模型和标准的W3C盒子模型。 box-sizing(有3个值哦)：border-box,padding-box,content-box.

区别： 这两种盒子模型最主要的区别就是width的包含范围，在标准的盒子模型中，width指content部分的宽度，在IE盒子模型中，width表示content+padding+border这三个部分的宽度，故这使得在计算整个盒子的宽度时存在着差异：

标准盒子模型的盒子宽度：左右border+左右padding+width
IE盒子模型的盒子宽度：width

在CSS3中引入了box-sizing属性，box-sizing:content-box;表示标准的盒子模型，box-sizing:border-box表示的是IE盒子模型

3. HTTP请求过程解释下？

解析URL->DNS查询->TCP封包传输->服务器接收并响应->浏览器渲染

（1）建立TCP连接（TCP三次握手）

在HTTP工作开始之前，Web浏览器首先要通过网络与Web服务器建立连接，该连接是通过TCP来完成的，该协议与IP协议共同构建Internet，即著名的TCP/IP协议族，因此Internet又被称作是TCP/IP网络。HTTP是比TCP更高层次的应用层协议，根据规则，只有低层协议建立之后才能，才能进行更高层协议的连接，因此，在HTTP工作开始之前首先要建立TCP连接。
（2）Web浏览器向Web服务器发送请求命令

一旦建立了TCP连接，Web浏览器就会向Web服务器发送请求命令例如：GET/sample/hello.jsp HTTP/1.1
（3）Web浏览器发送请求头信息

浏览器发送其请求命令之后，还要以头信息的形式向Web服务器发送一些别的信息，之后浏览器发送了一空白行来通知服务器，它已经结束了该头信息的发送。
（4） Web服务器应答

客户机向服务器发出请求后，服务器会客户机回送应答， HTTP/1.1 200 OK 应答的第一部分是协议的版本号和应答状态码
（5） Web服务器发送应答头信息

正如客户端会随同请求发送关于自身的信息一样，服务器也会随同应答向用户发送关于它自己的数据及被请求的文档。
（6） Web服务器向浏览器发送数据

Web服务器向浏览器发送头信息后，它会发送一个空白行来表示头信息的发送到此为结束，接着，它就以Content-Type应答头信息所描述的格式发送用户所请求的实际数据
（7） Web服务器关闭TCP连接(TCP四次挥手)

一般情况下，一旦Web服务器向浏览器发送了请求数据，它就要关闭TCP连接，然后如果浏览器或者服务器在其头信息加入了这行代码 Connection:keep-alive. TCP连接在发送后将仍然保持打开状态，于是，浏览器可以继续通过相同的连接发送请求。保持连接节省了为每个请求建立新连接所需的时间，还节约了网络带宽。

4. 常用的布局方式有哪些？

静态布局(Static Layout)
- 最传统、原始的Web布局设计。网页最外层容器(outer)有固定的大小,所有的内容以该容器为标准,超出宽高的部分用滚动条(overflow:scroll)来实现滚动查阅。
- 优点：采用的是css2之前的写法,不存在浏览器兼容性。布局简单。
- 缺点：移动端不可以使用pc端的页面,两个页面的布局不一致,移动端需要自己另外设计一个布局并使用不同域名呈现。
流式布局(Liquid Layout)
- 流式布局也叫百分比布局
  流式布局的特点是随着屏幕的改变，页面的布局没有发生大的变化，可以进行适配调整，这个正好与自适应布局相补。 流式布局常用的设计模板:
  左侧固定+右侧自适应
  左右固定宽度+中间自适应
  页面元素的宽度按照屏幕进行适配调整，主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。
  你看到的页面，元素的大小会变化而位置不会变化——这就导致如果屏幕太大或者太小都会导致元素无法正常显示。
- 优点： 元素的宽高用百分比做单位，元素宽高按屏幕分辨率调整，布局不发生变化
- 缺点： 屏幕尺度跨度过大的情况下，页面不能正常显示。
弹性布局(Flex Layout)
- 弹性布局是CSS3引入的强大的布局方式，用来替代以前Web开发人员使的一些复杂易错的hacks方法(如float实现流式布局)。
- 优点简单、方便、快速
- 缺点CSS3新特性,浏览器兼容性非常头疼。而且手机浏览器对flex的支持也不是很理想。
响应式布局(Responsive layout)
- 采用自适应布局和流式布局的综合方式，为不同屏幕分辨率范围创建流式布局
- 现在优秀的页面都追求一套代码可以实现三端的浏览;
- 从概念可以看出来,自适应布局的诞生是为了实现不同屏幕分辨率的终端上浏览网页的不同展示方式。
- 通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。屏幕尺寸不一样展示给用户的网页内容也不一样.
- 利用媒体查询可以检测到屏幕的尺寸(主要检测宽度)，并设置不同的CSS样式，就可以实现响应式的布局。

5.H5了不了解，有哪些新特性？

项目	新增或改变
实践web语义化	增加了header，footer，nav,aside,section等语义化标签
增强表单	为input增加了color，emial,data,range等类型
存储方面	提供了sessionStorage，localStorage,和离线存储，方便数据在客户端的存储和获取
多媒体方面	规定了音频和视频元素audio和vedio
其他	还有地理定位，canvas画布，拖放，多线程编程的web worker和websocket协议

6. js的作用域解释下？请举例说明？

作用域是可访问变量的集合。在 JavaScript 中, 对象和函数同样也是变量。所以在 JavaScript 中, 作用域为可访问变量、对象、函数的集合。

7. 数组常用的方法？答了之后加问数组和字符串之间的转换方式？

常用方法：push()，pop()，shift()，unshift()，splice()，sort()，reverse()，map()等
数组和字符串之间的转换：
ARRAY.join('转为字符串后两个值之间的元素')
ARRAY.split（'字符串转数组值区分依据'）
数组去重
- 法一：indexOf循环去重
- 法二：ES6 Set去重；Array.from(new Set(array))
- 法三：Object 键值对去重；把数组的值存成 Object 的 key 值，比如 Object[value1] = true，在判断另一个值的时候，如果 Object[value2]存在的话，就说明该值是重复的。

8. 其他数据结构你还熟悉哪些？请解释下二叉树？

二叉树是一个连通的无环图，并且每一个顶点的度不大于3。有根二叉树还要满足根结点的度不大于2。有了根结点之后，每个顶点定义了唯一的父结点，和最多2个子结点。然而，没有足够的信息来区分左结点和右结点。如果不考虑连通性，允许图中有多个连通分量，这样的结构叫做森林。

9. 浏览器储存方式你知道哪几种？用过哪几种？区别是啥？

Cookie、sessionStorage、localStorage的区别
- 共同点：都是保存在浏览器端，并且是同源的
- Cookie：cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下,存储的大小很小只有4K左右。 （key：可以在浏览器和服务器端来回传递，存储容量小，只有大约4K左右）
- sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持，localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。 （key：本身就是一个回话过程，关闭浏览器后消失，session为一个回话，当页面不同即使是同一页面打开两次，也被视为同一次回话）
- localStorage：localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。 （key：同源窗口都会共享，并且不会失效，不管窗口或者浏览器关闭与否都会始终生效）
- 补充说明一下cookie的作用：保存用户登录状态。例如将用户id存储于一个cookie内，这样当用户下次访问该页面时就不需要重新登录了，现在很多论坛和社区都提供这样的功能。 cookie还可以设置过期时间，当超过时间期限后，cookie就会自动消失。因此，系统往往可以提示用户保持登录状态的时间：常见选项有一个月、三个月、一年等。跟踪用户行为。例如一个天气预报网站，能够根据用户选择的地区显示当地的天气情况。如果每次都需要选择所在地是烦琐的，当利用了cookie后就会显得很人性化了，系统能够记住上一次访问的地区，当下次再打开该页面时，它就会自动显示上次用户所在地区的天气情况。因为一切都是在后台完成，所以这样的页面就像为某个用户所定制的一样，使用起来非常方便定制页面。如果网站提供了换肤或更换布局的功能，那么可以使用cookie来记录用户的选项，例如：背景色、分辨率等。当用户下次访问时，仍然可以保存上一次访问的界面风格。

10. 你用过VUE，解释下你是怎么理解渐进式框架？

对于渐进式框架最简单的解释如下

渐进式框架是弱化主张的框架，不需要强行适用他的所有东西。在使用过程中，你可以根据需要引入我的部分，而不需要必须使用我的所有部分。

11. Vue里面的双向绑定原理？

vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。原文链接

我们已经知道实现数据的双向绑定，首先要对数据进行劫持监听，所以我们需要设置一个监听器Observer，用来监听所有属性。如果属性发上变化了，就需要告诉订阅者Watcher看是否需要更新。因为订阅者是有很多个，所以我们需要有一个消息订阅器Dep来专门收集这些订阅者，然后在监听器Observer和订阅者Watcher之间进行统一管理的。接着，我们还需要有一个指令解析器Compile，对每个节点元素进行扫描和解析，将相关指令（如v-model，v-on）对应初始化成一个订阅者Watcher，并替换模板数据或者绑定相应的函数，此时当订阅者Watcher接收到相应属性的变化，就会执行对应的更新函数，从而更新视图。因此接下去我们执行以下3个步骤，实现数据的双向绑定：

1.实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。

2.实现一个订阅者Watcher，每一个Watcher都绑定一个更新函数，watcher可以收到属性的变化通知并执行相应的函数，从而更新视图。

3.实现一个解析器Compile，可以扫描和解析每个节点的相关指令（v-model，v-on等指令），如果节点存在v-model，v-on等指令，则解析器Compile初始化这类节点的模板数据，使之可以显示在视图上，然后初始化相应的订阅者（Watcher）。

12. 开始问项目？你在项目中做了什么？用了哪些前端框架？

这部分我没有答好，说得太啰嗦！所以自己也总结以下，下次面试的时候希望自己能抓住重点...

13. 确定能够实习的时间？ ...

13. 问我是不是去年10月才接触计算机相关的东西？ ...

某点资讯

HR

一面

自我介绍？
学习时间这么短，你目前学到啥程度了？接触了哪些东西？

3. 说一下CSS中的LESS和SASS有啥区别？

回答这个问题，我不是得先弄懂啥是LESS？啥是SASS？

4. VUE中的样式穿透怎么做？比如修改elementUI的组件样式？

我回答的是我平时的做法，即把elementUI的标签当做类名做样式修改。如果出现级别不够改不掉的情况，那就加上！important提升级别。但是面试官说不是这样的方法，而是deep，让我回去学一下！！好的，下面是学习结果-_-||

Vue引用第三方组件时候，有时我们需要在组件中修改第三方组件如elementUI的样式，但是又不想全局修改，导致不同组件的样式都被修改，也就是破坏组件样式当中的scoped属性。所以我们就采用了样式穿透的方式：

 .out >>> .el-table{
  ***
}

.out /deep/ .el-table{
  ***
}

5. 讲讲GET和POST的区别？

GET和POST本质上就是TCP链接，并无差别。但是由于HTTP的规定和浏览器/服务器的限制，导致他们在应用过程中体现出一些不同。

区别	GET	POST
作用	从指定的资源请求数据	向指定的资源提交要被处理的数据
请求方式	浏览器会把http header和data一并发送出去，服务器响应200（返回数据）	浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）
参数传递	url传递（长度有限制）	放在request body中（长度不限）
安全	参数直接暴露在url中，所以不能用来传递敏感信息	相对安全
编码方式	只能进行url编码 ASCII数据类型会浏览器主动cache	支持多种编码方式允许二进制数据
参数保留	请求参数会被完整保留在浏览历史记录里	参数不会被保留
数据包	一个TCP数据包	两个TCP数据包

6. 讲讲VUE里面的双向绑定原理？

7. 现在要自己实现双向绑定,你怎么实现？

var obj = {}
obj.hello = ''

Object.defineProperty(obj, 'hello', {
  set: function(val) {
    document.getElementById('bb').innerHTML = val
    document.getElementById('aa').value = val
  }
})

document.getElementById('aa').onkeyup = function(e) {
  obj.hello = e.target.value
}

8. 我现在有一个数组和一个对象，请问怎么判断他们的类型？

Array.prototype.toString.call( XXX )

9.ES6有哪些新特性？你熟悉哪些？

10.闭包函数的使用场景？

11.VAR的弊端？let，const和他的区别？

首先var定义变量会产生变量提升、过度共享的概念不用再说。
let
- 拥有块级作用域
- 所生声明的全局变量不是全局对象的属性
- 在for循环中，每次都会为i绑定新的值
- 同一个变量重定义会产生语法错误
const
- 和JAVA当中的final类似，一般用于定义常量，即是定义之后，不能再改变。

12.箭头函数有什么特点？为什么要用箭头函数？

传送一篇文章

13. 事件委托机制请解释下？为什么要有事件委托？

二面

问项目？项目当中用了哪些东西？
怎么学习的前端？

记得聊得时间很短，以为没过，但却过了！

三面

前端负责人面，不关注业务层面的东西，更多的是问项目架构以及一些宏观的东西。人生规划，对实习的目标及期待。

最后让描述一遍浏览器从请求到渲染过程的细节

*ETV

自我介绍？
介绍项目？根据项目来问？
项目为什么选择VUE？VUE和其他的区别？
VUE的优势有哪些？和其他框架的区别？
VUE目前用到什么程度？双向绑定的原理是什么？
VUE的渲染过程？

本次直接从VUE开始问，但是我的VUE其实掌握的还不是很好，这里推荐一篇我看过的文章连接

闭包？闭包有啥缺点？
别人的项目拿过来，我怎么知道他的代码当中的内存泄漏问题？
事件生命周期问题，怎么阻止事件冒泡？
设置的定时器一定会执行吗？
CSS当中常用布局？三个水平盒子怎么实现？如何清除浮动？
HTTP与HTTPS的区别？
哈希路由与历史路由的区别？

hash 路由模式的实现主要是基于下面几个特性：

URL 中 hash 值只是客户端的一种状态，也就是说当向服务器端发出请求时，hash 部分不会被发送；
hash 值的改变，都会在浏览器的访问历史中增加一个记录。因此我们能通过浏览器的回退、前进按钮控制hash 的切换；
可以通过 a 标签，并设置 href 属性，当用户点击这个标签后，URL 的 hash 值会发生改变；或者使用 JavaScript 来对 loaction.hash 进行赋值，改变 URL 的 hash 值；
我们可以使用 hashchange 事件来监听 hash 值的变化，从而对页面进行跳转（渲染）。

HTML5 提供了 History API 来实现 URL 的变化。其中做最主要的 API 有以下两个：history.pushState() 和 history.repalceState()。这两个 API 可以在不进行刷新的情况下，操作浏览器的历史纪录。

history 路由模式的实现主要基于存在下面几个特性：

pushState 和 repalceState 两个 API 来操作实现 URL 的变化；
我们可以使用 popstate 事件来监听 url 的变化，从而对页面进行跳转（渲染）；
history.pushState() 或 history.replaceState() 不会触发 popstate 事件，这时我们需要手动触发页面跳转（渲染）。

怎么学习新技术？平时解决问题的思路？

~~ ~未完待续~ ~~