我的面试过程

发表于

作为半路出家转前端开发零基础的我，在经历了几年工作后再次面试前端所获得的一些经验，我想在这给大家分享一下（也是写给多年后的自己），
面试之前的小故事
精心准备的我，不停刷面试题，整夜整夜的看着HTML/JS/CSS知识点，还有那些最新的、时髦的技术，看看到时候能不能唬住面试官；而有些人对自己胸有成竹，这么多年的前端经验了，啥项目没有经历过，不就一个面试，怕啥呢。

很快或者很慢的来到那天。我打扮的清清爽爽漂漂亮亮的，打扮的好会有加分不，没错，第一印象也是挺重要的。途中有些人可能会还一直想着面试官会问啥题目呢，那啥**属性是什么来着呢，再次拿出手机默默的看起资料；有些人可能就会想着公司不知道环境和福利不知道咋样，最好别碰到傻逼一样的面试官哎，不然这以后咋相处好呢。

来到公司，大小公司大家都见多了嘛，也是得看发展是吧，我也不是肤浅的人，见到前台妹妹，领进会议室里，让稍等一下，她去通知面试官，过了一会儿，不是面试官进来，而是前台妹妹给我送来一杯水。面试官踱步向前，咦~，我是继续坐着呢，还是站着呢，还是站起来显礼貌一些嗯。

给面试的一般会是Team Leader或者非常资深的工程师。首先会让你自我介绍下，然后巴拉巴拉介绍自己，途中或者聊到面试官喜欢的部分那就会中断问几个问题吧，介绍完自己，就进入正式的战斗了吧，一般会有2-3轮的回合。

普通型
面试中问题会比较的零碎，html/js/css肯定都会有涉及。知识点不会有太大的规律，可能几个公司面试下来你遇到的问题一个都不带重复的。哎，前端的知识点就是乍一看深似海，仔细一看深似黑洞啊。问题好的话，一方面考察了面试人对前端接触的广度，深度的话也可以从中接触到一些。因为面试的时间有限，其实也非常考验面试官对一个人的洞察能力。

进阶型
除了基本的问题，面试中会有一些明显设计过的题目。针对某几个知识点，或让你手写代码，或让你提供算法或思路。如果之前没有遇到过这类问题的话其实一下子真的挺难回答，或者直接懵逼了，或者回答不出面试官满意的答案。这其实对工程师的要求也是比较的高，不能只是单纯的切切页面，用用插件，需要对某一类问题或者模式或者算法有深入的了解，对问题的解决思路有很好的把握。

算法可能不是前端工程师的长项，但作为优秀的工程师，对算法的了解应该会只深不浅。

依稀记得的面试题

1、实现一个左右两栏的布局，左边宽度固定为220px，右边宽带为自使用，使用三种以上的方式来实现。
2、设计一个dialog组件，列出设计思路。
3、设计一个页面全局的进度条，谈谈你的思路。
4、在浏览器里输入一个url，一直到页面呈现出来，这之间都发生了一些什么事？
5、实现浏览器的缓存有哪些方式？
6、js的闭包和模块化有什么关系？模块化如何管理？ 它的优势是什么？
7、webpack的工作原理？
8、你熟悉的一种流行web框架是什么？他的有什么特点以及工作原理？
9、前端都有哪些攻击方式以及如何防范？
10、js构造函数的原型和原型链之间有什么区别？
11、es6的新语法有哪些？并说出他们的作用。
12、如何实现前后端分离？
13、node.js的多进程之间如何通信？底层是基于什么来实现数据传递？
14、使用nodejs如何做mysql的查询处理？
15、 gulp webpack的区别以及原理？
16、diff算法原理？
17、v8引擎？
18、写一段同步休眠的代码？
19、git flow的工作原理？
20、作者写h5的思想是什么？
21、node.js与浏览器环境javascript有那些区别
22、node.js作为web服务中间层可以做那些事情
23、redux原理
24、对作用域 原型的了解

Babel是如何读懂JS代码的

Babel的功能：以字符串的形式将源代码传给编译器，编译器就会返回一段新的代码字符串，输入语言是ES6+，编译目标语言是ES5。
分为三个阶段：
1、解析：将代码字符串解析成抽象语法树
2、变换：对抽象语法树进行变换操作
3、再建：根据变换后的抽象语法树再生成代码字符串

webpack承担了哪些工作？原理？功能？

1、依赖管理：方便引用第三方模块、让模块更容易复用、避免全局注入导致的冲突、避免重复加载或加载不需要的模块。
2、合并代码：把各个分散的模块集中打包成大文件，减少HTTP的请求链接数，配合UglifyJS可以减少、优化代码的体积。
3、各路插件：babel把ES6+转译成ES5-，eslint可以检查编译期的错误……

原理：最简单地说，就是分析代码，找到require、exports、define等“关键词”，并替换成对应模块的“引用”……

webpack主要就是模块化、处理依赖 和 打包-

举例来说。。我有个index.html
上面要引用一大堆JS/CSS文件，main.css、other.css、entry.js、a.js、b.js、c.js…

1
2
3
4
5
现在没有webpack,
a.js要调用b.js里的一个函数，所以a.js要放在b.js的后面
c.js又要调用b.js里的一个变量，c又要放b后面
b.js又要使用某个js里的数据。。。
有上百个js的时候，你要手动处理它们的关系你会立马死翘翘...搞错一个就完蛋

1
2
现在我有了webpack
webpack的理念就是一切皆模块，把那一大堆css,js在我的一个总入口文件require引入，剩下的事情？webpack会自动处理，包括所有模块的前后依赖关系打包压缩合并成一个js、公共代码抽离另外成为js、某些你指定的js单独打包...这些模块可以是css/JS/图片/字体。。等等等等

webpack与gulp

webpack是一个打包工具
gulp是构建工具

MVC

  1. View 传送指令到 Controller
  2. Controller 完成业务逻辑后，要求 Model 改变状态
  3. Model 将新的数据发送到 View，用户得到反馈

MVVM (model - View - ViewModle)分离视图和模型

  • ViewModel，注意这里的“Model”指的是View的Model，跟上面那个Model不是一回事。所谓View的Model就是包含View的一些数据属性和操作的这么一个东东，这种模式的关键技术就是数据绑定（data binding），View的变化会直接影响ViewModel，ViewModel的变化或者内容也会直接体现在View上。这种模式实际上是框架替应用开发者做了一些工作，开发者只需要较少的代码就能实现比较复杂的交互。

布局less

1
2
3
4
5
6
7
8
9
10
11
12
13
14
- 变量是@
- .class()作为mixin
- &:entend(.class); 直接引入
-  直接申明函数
.mixin(@x: 200px) {
  text-align: center;
  width: @x;
}
- when 代替if
-   // 循环
.loop(@counter) when (@counter > 0) {
  .loop((@counter - 1));    // next iteration
  width: (10px * @counter); // code for each iteration
}

SASS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
- 变量 $fontSize: 12px;  也可以以数组。map形式出现， ！global。！default
- 变量作为属性或在某些特殊情况下等则必须要以#{$variables}
-     @each遍历
      $headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
      @each $header, $size in $headings {
        #{$header} {
          font-size: $size;
        }
      }
-     // mixin
      @mixin center($aa: 100px) {
        width: $aa;
      }
      .demo {
        @include center(80px)
      }
- 继承 @extend .class;

安全问题

1
2
3
4
5
XSS（cross-site-srcipting）
js注入
- 将前端输出数据都进行转义encodeURI
- cookie 加上HttPOnly
CSRF攻击—跨站请求伪造 -- 第三方请求调用

es6 新特性

箭头操作符

1
2
3
4
5
var arr = [1, 2, 3];
arr.forEach(function(i, v, a) {
  console.log(v);
});
arr.forEach(v = > console.log(v));

类的支持

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//类的定义
class baseModel {
  //ES6中新型构造器
  constructor(options, data) { // class constructor，node.js 5.6暂时不支持options = {}, data = []这样传参
    this.name = 'Base';
    this.url = 'http://azat.co/api';
    this.data = data;
    this.options = options;
  }
  //实例方法
   getName() { // class method
      console.log(`Class name: ${this.name}`);
    }
}
//测试我们的类
var animal=new Animal('dummy'),
wayou=new Programmer('wayou');
animal.sayName(); //输出 ‘My name is dummy’
wayou.sayName(); //输出 ‘My name is wayou’
wayou.program(); //输出 ‘I'm coding...’

字符串模板

1
2
3
4
// 产生一个随机数
var num = Math.random();
// 将这个数字输出到console
console.log(`your num is ${num}`);

解构

1
2
3
4
5
6
7
8
9
var [x,y]=getVal(),//函数返回值的解构
    [name,,age]=['wayou','male','secrect'];//数组解构
function getVal() {
    return [ 1, 2 ];
}
console.log('x:'+x+', y:'+y);//输出：x:1, y:2 
console.log('name:'+name+', age:'+age);//输出： name:wayou, age:secrect

let与const 关键字

1
2
for (let i=0;i<2;i++)console.log(i);//输出: 0,1
console.log(i);//输出：undefined,严格模式下会报错

Promises

Promises是处理异步操作的一种模式，之前在很多三方库中有实现，比如jQuery的deferred 对象。当你发起一个异步请求，并绑定了.when(), .done()等事件处理程序时，其实就是在应用promise模式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//创建promise
var promise = new Promise(function(resolve, reject) {
    // 进行一些异步或耗时操作
    if ( /*如果成功 */ ) {
        resolve("Stuff worked!");
    } else {
        reject(Error("It broke"));
    }
});
//绑定处理程序
promise.then(function(result) {
  //promise成功的话会执行这里
    console.log(result); // "Stuff worked!"
}, function(err) {
  //promise失败会执行这里
    console.log(err); // Error: "It broke"
});

1、js的数据类型？

基本数据类型：String、boolean、Number、undefined、null
引用数据类型：Object、Array、Date、RegExp、Function

拓展：如何判断数组数据类型？
1、通过专有方法判断如：push(),pop(); //可自己给变量定义该方法，有时失效
2、obj instanceof Array 返回值判断；
3、es5和jquery都有方法Array.isArray()。
4、toString.call(param) 判断；返回格式 [object Undefined]
5、obj.constructor === Function 返回值判断

2、获取所有的checkbox？

1
2
3
4
5
6
7
8
9
var domlist = document.getElementsByTagName("input");
var checkboxlist = [];
var len = domlist.length;
for (var i = 0; i < len; i++) {
	if(domlist[i].type == "checkbox"){
	    checkboxlist.push(domlist[i])
	}
}

//(for效率更高)在测试五百多个不同input中，while：for = 3~2ms：1~0ms，显然for效率更高

3、数组：

1
2
3
4
5
6
7
var numberArray = [3,6,2,4,1,5];
倒序：numberArray.reverse();
numberArray.prototype.map.call(str, function(x) {   //同时利用了call()方法
  return x;
}).reverse().join('');
降序：numberArray.sort(function(a-b){return b-a})
a.concat(b,c,d)

4、随机取10个10-100数？

1
2
3
4
5
6
7
function getNumArr(n){
	var arr = [];
	for(var i = 0;i <n;i++){
	    arr.push(parseInt(Math.random()*90+10))
	}
	return arr;
}

5、闭包的使用？闭包可以简单理解成“定义在一个函数内部的函数“。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
for(var i = 0,len=domlist.length;i<len;i++){
    domlist[i].onclick = function(){
        console.log(i);
    }
}
都输出domlist.length；
onclick 是一个异步函数；当onclick执行的时候i此时变成了domlist.length；
解决：（闭包）
```bash
for(var i=0,len=domlist.length;i<len;i++){
	domlist[i].onclick = (function(a){
        return function(){
            console.log(a)
        }
	})(i);
}

//也可以设置私有属性；

6、双等号的类型转换？

1
2
3
4
5
6
7
8
9
10
11
12
13
var undefined;
undefined == null; // true
1 == true;  // true
2 == true;  // false
0 == false; // true
0 == '';   // true
NaN == NaN; // false
[] == false; // true
[] == ![];  // true
// alert(!![])        //true
// alert(![])        //false
// alert([] == 0)        //true
// alert(false == 0)        //true

分析：undefined与null 但不全等（===）
当为number与string时，会将string转换为number；
number和boolean时，会将boolean转换为number
number或string与Object，会将Object转换成number或string
（附：js中的数据类型转换？）
函数转换：parseInt()、parseFloat()、toString()
强类型转换：Boolean()、Number()、String()
弱类型转换：“==”、“-”、“+”、if（）

（拓展：for循环中的效率问题？）

1
2
3
1.for(var i=0;i<arr.length;i++)
2.for(var i in arr)
3.for(var i=0,len=arr.length;i<len;i++)

第三种效率更高！
在大数据下：
第三种方式比第一种执行速度快3~4倍；
至于第三种比第三种快100多倍开外（详细数据：http://www.111cn.net/wy/js-ajax/39368.htm）

前端开发中会遇到哪些问题需要考虑

1
2
3
4
5
1. 组建化 模块化
2. 开发效率
3. 运行效率
4. 可维护性
5. 体验优化

在浏览器中输入域名 按下回车键后会发生哪些事情？

步骤1：需要查找域名的IP地址，DNS查找过程：
（1）浏览器缓存 – 浏览器的缓存DNS记录一段时间。
（2）系统缓存 – 如果在浏览器缓存里没有找到需要的记录，浏览器会做一个系统调用（windows里是gethostbyname）这样便可获得系统缓存中的记录。
（3）路由器缓存 – 接着，前面的查询请求发向路由器，它一般会有自己的DNS缓存。
（4）ISP DNS 缓存 – 接下来要check的就是ISP缓存DNS的服务器。在这一般都能找到相应的缓存记录。
（5）递归搜索 – 你的ISP的DNS服务器从跟域名服务器开始进行递归搜索，从.com顶级域名服务器到Facebook的域名服务器。一般DNS服务器的缓存中会有.com域名服务器中的域名，所以到顶级服务器的匹配过程不是那么必要了。
步骤2：浏览器给web服务器发送一个HTTP请求。请求中也包含浏览器存储的该域名的cookies。可能你已经知道，在不同页面请求当中，cookies是与跟踪一个网站状态相匹配的键值。这样cookies会存储登录用户名，服务器分配的密码和一些用户设置等。Cookies会以文本文档形式存储在客户机里，每次请求时发送给服务器。
步骤3：服务的永久重定向响应
步骤4：浏览器跟踪重定向地址
步骤5：服务器“处理”请求
步骤6：服务器发回一个HTML响应
步骤7：浏览器开始显示HTML
步骤8：浏览器发送获取嵌入在HTML中的对象

1
2
3
4
5
6
7
data.map((item) => (
)) 与
data.map((item) => {
})
的区别（something） ==  return { something }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
["1", "2", "3"].map(parseInt);  //结果  [1, NaN, NaN]　如果想得到[1, 2,3]应该这么做
function returnInt(element){
  return parseInt(element, 10);
}
["1", "2", "3"].map(returnInt);
```　　
#### cookie、 sessionStorage 、localStorage之间的区别和使用
```bash
1.cookie:存储在用户本地终端上的数据
2.localStorage - 没有时间限制的数据存储
3.sessionStorage - 针对一个 session 的数据存储,当用户关闭浏览器窗口后，数据会被删除。
```　
sessionStorage 、localStorage 和 cookie 之间的区别
共同点：都是保存在浏览器端，且同源的.
区别：cookie数据始终在同源的http请求中携带，cookie在浏览器和服务器间来回传递；cookie数据不能超过4k，
而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的
#### HTML语义化
语义化的标签 像标题（H1~H6）、列表（li）、强调（strong em）等等
好处：便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析
#### CommonJS规范
1、CommonJs规范的出发点：JS没有模块系统、标准库较少、缺乏包管理工具；为了让JS可以在任何地方运行，以达到Java、C#、PHP这些后台语言具备开发大型应用的能力；
2、在CommonJs规范中：
一个文件就是一个模块，拥有单独的作用域；
普通方式定义的变量、函数、对象都属于该模块内；
通过require来加载模块；
通过exports和modul.exports来暴露模块中的内容；
3、所有代码都运行在模块作用域，不会污染全局作用域；模块可以多次加载，但只会在第一次加载的时候运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果；模块的加载顺序，按照代码的出现顺序是同步加载的;
<!-- #### react-router 按需加载
程序应当只加载当前渲染页所需的 JavaScript，也就是大家说的“代码拆分" — 将所有的代码分拆成多个小包，在用户浏览过程中按需加载。
#### Webpack 配置
首先在 webpack.config.js 的 output 内加上 chunkFilename
```bash
output: {
    path: path.join(__dirname, '/../dist/assets'),
    filename: 'app.js',
    publicPath: defaultSettings.publicPath,
    // 添加 chunkFilename
    chunkFilename: '[name].[chunkhash:5].chunk.js',
},

chunkhash 是文件的 hash 码，这里只使用前五位。

添加首页

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
ReactDOM.render(
  (
    <Router history={browserHistory}>
      {/* 主页 */}
      <Route path="/" component={App}>
        {/* 默认 */}
        <IndexRoute component={HomePage} />
        {/* baidu */}
        <Route path="/baidu" component={BaiduPage}>
          <Route path="result" component={BaiduResultPage} />
          <Route path="frequency" component={BaiduFrequencyPage} />
        </Route>
        {/* 404 */}
        <Route path='/404' component={NotFoundPage} />
        
        {/* 其他重定向到 404 */}
        <Redirect from='*' to='/404' />
      </Route>
    </Router>
  ), document.getElementById('app')
);

按需加载之后，我们需要让路由动态加载组件，需要将 component 换成 getComponent。首先将路由拆出来（因为路由庞大之后全部写在一起会很难看），创建一个根路由 rootRoute：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
const rootRoute = {
  path: '/',
  indexRoute: {
    getComponent(nextState, cb) {
      require.ensure([], (require) => {
        cb(null, require('components/layer/HomePage'))
      }, 'HomePage')
    },
  },
  getComponent(nextState, cb) {
    require.ensure([], (require) => {
      cb(null, require('components/Main'))
    }, 'Main')
  },
  childRoutes: [
    require('./routes/baidu'),
    require('./routes/404'),
    require('./routes/redirect')
  ]
}
ReactDOM.render(
  (
    <Router
      history={browserHistory}
      routes={rootRoute}
      />
  ), document.getElementById('app')
);

history 不变，在 Router 中添加 routes 属性，将创建的路由传递进去。

这里有四个属性：

1. path

将匹配的路由，也就是以前的 path。

2. getComponent

对应于以前的 component 属性，但是这个方法是异步的，也就是当路由匹配时，才会调用这个方法。
这里面有个 require.ensure 方法

1
require.ensure(dependencies, callback, chunkName)

这是 webpack 提供的方法，这也是按需加载的核心方法。第一个参数是依赖，第二个是回调函数，第三个就是上面提到的 chunkName，用来指定这个 chunk file 的 name。

3.indexRoute

用来设置主页，对应于以前的 。

4.childRoutes

这里面放置的就是子路由的配置，对应于以前的子路由们。我们将以前的 /baidu、/404 和 * 都拆了出来，接下来将分别为他们创建路由配置。

路由控制 上面的childRoutes 里面，我们 require 了三个子路由，在目录下创建 routes 目录，将这三个路由放置进去。

1
2
3
4
5
6
7
8
9
10
11
12
routes/
├── 404
│   └── index.js
├── baidu
│   ├── index.js
│   └── routes
│       ├── frequency
│       │   └── index.js
│       └── result
│           └── index.js
└── redirect
    └── index.js

和 rootRoute 类似，里面的每个 index.js 都是一个路由对象：

/404/index.js

1
2
3
4
5
6
7
8
module.exports = {
  path: '404',
  getComponent(nextState, cb) {
    require.ensure([], (require) => {
      cb(null, require('components/layer/NotFoundPage'))
    }, 'NotFoundPage')
  }
}

/baidu/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
module.exports = {
  path: 'baidu',
  getChildRoutes(partialNextState, cb) {
    require.ensure([], (require) => {
      cb(null, [
        require('./routes/result'),
        require('./routes/frequency')
      ])
    })
  },
  getComponent(nextState, cb) {
    require.ensure([], (require) => {
      cb(null, require('components/layer/BaiduPage'))
    }, 'BaiduPage')
  }
}
``` -->
#### 浏览器缓存
1. http缓存是基于HTTP协议的浏览器文件级缓存机制。
2. websql这种方式只有较新的chrome浏览器支持.
3. IndexedDB 是一个为了能够在客户端存储可观数量的结构化数据, IndexedDB 分别为同步和异步访问提供了单独的 API ,另外浏览器可能对indexDB有50M大小的限制，
4.cookie
5.localstorage
6.sessionstorage
#### apply、call、bind区别、用法
apply和call都是为了改变某个函数运行时的上下文而存在的（就是为了改变函数内部this的指向）；
如果使用apply或call方法，那么this指向他们的第一个参数，apply的第二个参数是一个数组，call的第二个及其以后的参数都是数组里面的元素，就是说要全部列举出来；
他们的常用用法：
1.数组之间的追加；
2.获取数组中的最大值和最小值，利用他们扩充作用域拥有Math的min和max方法；
由于没有什么对象调用这个方法，所以第一个参数可以写作null或者本身；
```bash
var numbers = [5, 458 , 120 , -215 ]; 
var maxInNumbers = Math.max.apply(Math, numbers),   //458
    maxInNumbers = Math.max.call(Math,5, 458 , 120 , -215); //458

bind（）–也是改变函数体内this的指向;
bind会创建一个新函数，当调用这个函数的时候，绑定函数会以创建它时传入bind（）方法的第一个参数作为this，传入bind（）方法的第二个及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数

bind与apply、call最大的区别就是：bind不会立即调用，其他两个会立即调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var fn = {
	_int: 2, 
	fun: function () {
		document.getElementById('box').onclick = (function () {
			console.log(this._int);
		}).bind <!-- call applay -->(this);
		<!-- 
		这里的this是fn,所以正确的访问_int，
		使用bind,会在点击之后打印出来
		call || applay 在网页刷新之后就会打印出来 
		-->
	}
}
fn.fu();

都是用来改变函数的this对象的指向的；
第一个参数都是this要指向的对象；
都可以利用后续参数传参；
bind是返回对应函数，便于稍后调用，apply、call是立即调用；

JavaScript模块化：使用requireJS按需加载

通过模块加载器可以有效的解决这些问题：
JS文件的依赖关系。
通过异步加载优化script标签引起的阻塞问题
可以简单的以文件为单位将功能模块化并实现复用