typeof 一个函数的返回值是function，如果把这个function赋给一个var，则typeof的返回值是object。

==和===的区别是什么？

javaScript has two sets of equality operators: === and !==, and their evil twins == and !=. The good ones work the way you would expect.

如果两个操作数有相同的类型，并具有相同的值 then === produces true and !== produces false.

The evil twins do the right thing when the operands are of the same type, but if they are of different types, they attempt to coerce the values. the rules by which they do that are complicated and unmemorable.

==和!=在两个操作数类型相同的时候，会根据值是否相等来判断。如果类型不相同，那就邪恶了。。

C: 对于不等于1的整数，为false；

DEF：A NaN按照定义永远不等于它自己。. 在任何语言中都是这样。. 在js中NaN是为一个一个不等于它自身的东东。

之所以Nan不等于它本身，是为了实现bool IsNaN(number) 函数:

1 function isNaN(x)
2 { 
3     return x != x; 
4 }

3 读代码，并写出代码的执行结果：

1 var t = true;
2 window.setTimeout(function (){
3     t = false;
4 },1000);
5 while (t){}
6 alert('end');

Output：没有输出，死循环。

分析：

确实是死循环导致setTimeout不执行，也导致alert不执行。
js是单线程是对的，所以会先执行while(t){}再alert，但这个循环体是死循环，所以永远不会执行alert。
至于说为什么不执行setTimeout，是因为js的工作机制是：当线程中没有执行任何同步代码的前提下才会执行异步代码，setTimeout是异步代码，所以setTimeout只能等js空闲才会执行，但死循环是永远不会空闲的，所以setTimeout也永远不会执行。

深入理解js单线程：

JavaScript引擎是单线程运行的,浏览器无论在什么时候都只且只有一个线程在运行JavaScript程序。

一、浏览器的内核是多线程的，它们在内核制控下相互配合以保持同步，一个浏览器至少实现三个常驻线程：javascript引擎线程，GUI渲染线程，浏览器事件触发线程。

1. javascript引擎是基于事件驱动单线程执行的，JS引擎一直等待着任务队列中任务的到来，然后加以处理，浏览器无论什么时候都只有一个JS线程在运行JS程序。

2. GUI渲染线程负责渲染浏览器界面，当界面需要重绘（Repaint）或由于某种操作引发回流(reflow)时,该线程就会执行。但需要注意 GUI渲染线程与JS引擎是互斥的，当JS引擎执行时GUI线程会被挂起，GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行。

3. 事件触发线程，当一个事件被触发时该线程会把事件添加到待处理队列的队尾，等待JS引擎的处理。这些事件可来自JavaScript引擎当前执行的代码块如setTimeOut、也可来自浏览器内核的其他线程如鼠标点击、AJAX异步请求等，但由于JS的单线程关系所有这些事件都得排队等待JS引擎处理。（当线程中没有执行任何同步代码的前提下才会执行异步代码）

什么是递归？ (递归是一个通用的概念。不仅限于js)

什么是闭包？

　　　在js中，如果你在一个function中使用了另外一个function关键字，你就创建了一个闭包。

1 function say667() {
2     // Local variable that ends up within closure
3     var num = 42;
4     var say = function() { console.log(num); }
5     num++;
6     return say;
7 } 8 var sayNumber = say667(); 9 sayNumber(); // logs 43

闭包(上述代码中的匿名函数)中，保存的是outter函数的local变量的一个引用。

Output：43

分析：闭包。1.函数嵌套函数2.函数内部可以访问到外部的变量或者对象3.避免了垃圾回收。

js在处理对象时，永远使用引用reference。比如说，你使用foo调用了一个对象，那么返回的闭包将引用那个原始的对象。

 1 function foo(x) {
 2   var tmp = 3;
 3 
 4   return function (y) {
 5     console.log(x + y + tmp);
 6     x.memb = x.memb ? x.memb + 1 : 1;
 7  console.log(x.memb); 8  } 9 } 10 11 var age = new Number(2); 12 var bar = foo(age); // bar is now a closure referencing age. 13 bar(10);

As expected, each call to bar(10) will increment x.memb. What might not be expected, is that xis simply referring to the same object as the age variable! After a couple of calls to bar, age.memb will be 2! This referencing is the basis for memory leaks with HTML objects.

http://stackoverflow.com/questions/111102/how-do-javascript-closures-work

Output：Hello Alice

分析：如果把sayAlice()();改为sayAlice()会怎么样？

Output：16

分析：闭包。

Output：10 6

分析：跟viriable hoisting 什么区别？这也是一个闭包吗？

When a JavaScript function is invoked, a new execution context is created. Together with the function arguments and the parent object, this execution context also receives all the variables declared outside of it (in the above example, both 'a' and 'b').

上述代码，如果使用c语言实现，会输出什么结果？？

上述代码，如果使用Java实现，

Output： 15 1

Output：undefined

问题：与不使用hi 函数什么区别？也形成了闭包，但是a不是在Outter space定义的。

1 function addTen(num) {
2     num += 10;
3     return num;
4 }
5 
6 var count = 20;
7 var result = addTen(count);
8 alert(count); 
9 alert(result);

output : 20 30 考察js的参数传递

js与java类似，本质上都是值传递，但是引用是地址，值传递时拷贝了引用值的副本，但两个引用指向的还是同一个内存地址。

1 function setName(obj) {
2     obj.name = "Nicholas";
3     obj = new Object();
4     obj.name = "Greg";
5 }
6 var person = new Object();
7 setName(person);
8 alert(person.name)

output：Nicholas

分析：主要考察引用传递。

JavaScript 是面向对象的语言，但 JavaScript 不使用类。

在 JavaScript 中，不会创建类，也不会通过类来创建对象（就像在其他面向对象的语言中那样）。

1 var city = "Rome"+function() {
2     console.log(city);
3     var city = "Paris";
4 }();

output： undefined

分析：为什么？

(variable hoisting) 在Js中，变量被移动到脚本的顶部，然后执行。但是这种说法并不准确。在下面的代码中:

1 console.log(a);
2 var a = 'Hello World!';

会输出 undefined, 并不是 'Hello World', 所以上述代码等效于下面的代码：

1 var a;
2 console.log(a);
3 a = 'Hello World!';

而不是下面的代码：

1 var a = 'Hello World!';
2 console.log(a);

实际上，js并没有移动任何代码，你需要理解js的执行上下文(context): context分为两个阶段：创建阶段和执行阶段。在创建阶段，为这些变量和函数创建内存空间，人们往往把这个阶段与variable hoisting混淆起来。对于变量的赋值，是在执行上下文的执行阶段进行的。当你对变量a赋值“Hello World”的时候，js引擎只有在执行阶段才知道a的值，在创建阶段，js只是把一个undefined的占位符放在那里，所以所有的变量都是被初始化为undefined的。所以建议永远把变量声明和函数放在你的代码的顶部。

 1 var name = "The Window";
 2 var object = {
 3     name: "My Object",
 4     getNameFunc: function () {
 5         return function () {
 6             return this.name;
 7         };
 8     }
 9 };
10 alert(object.getNameFunc()());

output: The Window

分析：闭包？

 1 var name = "The Window";
 2 var object = {
 3     name: "My Object",
 4     getNameFunc: function () {
 5         var that = this;
 6         return function () {
 7             return that.name;
 8         };
 9     }
10 };
11 alert(object.getNameFunc()());

output: My Object

分析：this指的是调用函数的那个对象

当点击button#2的时候，console中会打印什么？

1 var nodes = document.getElementsByTagName('button');
2 // assume there is totally 5 nodes
3 for (var i = 0; i < nodes.length; i++) {
4     nodes[i].addEventListener('click', function() {
5         console.log('You clicked element #' + i);
6     });
7 }

Output: you clicked element #5

分析：闭包？

1 element.addEventListener('click', function() { /* do stuff here*/ }, false);

最后一个参数决定这个linstener如何响应bubbling事件。

选做：

 1 function Mammal(name) {
 2     this.name = name;
 3     this.offspring = [];
 4 }
 5 Mammal.prototype.haveABaby = function () {
 6     var newBaby = new Mammal("Baby " + this.name);
 7     this.offspring.push(newBaby);
 8     return newBaby;
 9 }
10 
11 Mammal.prototype.toString = function () {
12     return '[Mammal "' + this.name + '"]';
13 };     // 到目前为止，这  是一个Mammal对象的实现。
14 
15  
16 
17 // 将Employee的原型指向Person的一个实例
18 
19 // 因为Person的实例可以调用Person原型中的方法, 所以Employee的实例也可以调用Person原型中的所有属性。
20 Cat.prototype = new Mammal();
21 
22 //修正constructor
23 Cat.prototype.constructor = Cat;
24 function Cat(name) {
25     this.name = name;
26 }
27 
28 Cat.prototype.toString = function () {
29     return '[Cat "' + this.name + '"]';
30 }  // 到目前为止，这是Mammal的一个子类Cat。
31 
32 
33 var someAnimal = new Mammal('Mr. Biggles');
34 var myPet = new Cat('Felix');
35 alert(someAnimal);   
36 alert(myPet);        
37 
38 myPet.haveABaby();
39 alert(myPet.offspring.length);      
40 alert(myPet.offspring[0]);

Output:

[Mammal “Mr. Biggles”]

[Cat, “Felix”]

[Mammal “Baby Felix”]

进一步问题：什么是prototype？什么是原型链?

1 console.log("New york");
2 setTimeout(function () {
3     console.log("Vienne");
4 }, 1000);
5 setTimeout(function () {
6     console.log("London");
7 });
8 console.log("Ottawa");

Output: New York， Ottawa，Landon，Vienne。

分析：setTimeout异步函数。

js写代码题

1 尝试实现下面的需求：

(1) 测试array numbers中是不是每一个元素都比2大

E.G.

1 var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
2 var everyResult = numbers.every(function (item, index, array) {
3     return (item > 2);
4 });
5 alert(everyResult); //false

分析：对数组中的每个元素都执行一次指定的函数（callback），直到此函数返回 false，如果发现这个元素，every 将返回 false，如果回调函数对每个元素执行后都返回 true ，every 将返回 true。

(2) 得到新的array，其中的元素是numbers中所有比2大的元素。

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];

(3) 一个新的array,其中的每一个元素都比numbers中的元素大1

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];

 1 //一个新的array,其中的每一个元素都比numbers中的元素大1
 2

2列出js中创建对象的方法，并写出一个js中的继承关系的实现。

应该知道4种常见创建对象的方法：

1 用{} ，对象字面量。

先创建再添加：

1 //创建一个简单对象字面量
2 var person = {};   
3 // 加入属性和方法
4 person.name = 'ifcode';
5 person.setName = function(theName) {
6    person.name = theName;
7 }

2 JS good parts中推荐这种写法:

1 var person = {
2     name: 'ifcode',
3     setName: function(theName) {
4         this.name = theName;
5     }
6 }

 1 var clock={
 2    hour:12,
 3    minute:10,
 4    second:10,
 5    showTime:function(){
 6       alert(this.hour+":"+this.minute+":"+this.second);
 7    }
 8 }
 9 clock.showTime();//调用
10 //var m = new myObj(); //不支持

上述两种方式只存在于一个实例的对象，也就是单例模式。

下面是可以创建多个实例的方式：

3 构造函数一般都符合factory pattern，根据默认的规则，构造函数应当首字母大写：

1 Person = function(defaultName) {
2     this.name = defaultName;
3     this.setName = function(theName) {
4         this.name = theName;
5     }
6 }
7 person = new Person('ifcode');  // new是调用构造函数

利用构造函数就可以方便地创建多个对象实例了。

4 利用 prototype的构造函数：

1 Person = function(defaultName) {
2     this.name = defaultName;
3 }
4  
5 
6 Person.prototype.setName = function(theName) {
7     this.name = theName;
8 }

所有创建在prototype上得属性和方法，都将被所有对象实例分享。

一般在创建单例的时候，用2 ，在创建多个对象的时候，使用4.；

----------------------------------

2.创建Object实例

1  var clock = new Object();
2  clock.hour=12;
3  clock.minute=10;
4  clock.showHour=function(){alert(clock.hour);};
5 
6  clock.showHour();//调用

由此可见属性是可以动态添加，修改的

3用 function 关键字模拟 class

上述两种。。。

http://www.cnblogs.com/lucas/archive/2009/03/17/1411656.html

http://www.jianshu.com/p/f9a1203e33d0

js中继承关系的实现：

JavaScript中要实现继承，其实就是实现三层含义：
1、子类的实例可以共享父类的方法；
2、子类可以覆盖父类的方法或者扩展新的方法；
3、子类和父类都是子类实例的“类型”。

什么是prototype？原型

什么是原型链?

JavaScript 是基于原型的语言。当我们调用一个对象的属性时，如果对象没有该属性，JavaScript 解释器就会从对象的原型对象上去找该属性，如果原型上也没有该属性，那就去找原型的原型。这种属性查找的方式被称为原型链（prototype chain）。

ES6 并没有改变 JavaScript 基于原型的本质，只是在此之上提供了一些语法糖。class 就是其中之一。其他的还有 extends，super 和 static 。它们大多数都可以转换成等价的 ES5 语法。

javascript是面向对象的，怎么体现javascript的继承关系？使用prototype来实现。

ES6中启用了class关键字，如何使用该关键字实现继承关系？

 1 // ES6 中启用了关键字 class
 2 class Person {
 3   constructor(name, gender, age) {
 4     this.name = name;
 5     this.gender = gender;
 6     this.age = age;
 7 } 8 tellAge() { 9 console.log(this.age); 10 } 11 } 12 13 var puya = new Person('PuYart', 'male', '21'); 14 puya.tellAge();

CLASS继承

 1 /*
 2 *class：ES6及ES6以上才有该方法。
 3 *class的出现将原型继承简化了很多，class的目的就是让定义类更简单。
 4 *extends来继承对象，中间的原型之类的就可以免去，就可以继承扩展class
 5 */
 6 //用class创建对象
 7 class Leader{
 8     constructor(name){//constructor构造函数
 9         this.name=name;
10     }
11     hello(){//定义在原型上的函数
12         alert('Hello, '+this.name+'!');
13     }
14 } 15 var liyi= new Leader('liyi'); 16 liyi.name;//输出'liyi' 17 liyi.hello();//输出'Hello, liyi!' 18 //用extends继承扩展 19 class extendLeader extends Leader{ 20 constructor(name,grade,skill){//若是不扩展Leader的构造函数，就可以将constructor这一步省去 21 super(name); 22 this.grade=grade; 23 　　　　 this.skill=skill; 24 　　} 25 　　run(){ 26 　　　　console.log(this.name+'职位：'+this.grade+' 技能：'+this.skill); 27 　　} 28 } 29 var liyi=new extendLeader('liyi','研发经理','精通各种技术'); 30 liyi.name;//'liyi' 31 liyi.grade;//'研发经理' 32 liyi.skill;//'精通各种技术' 33 liyi.hello;//'Hello, liyi!' 34 liyi.run();//'liyi职位：研发经理 技能：精通各种技术'

Two awesome javascript inheritance libraries that come to mind are klass and selfish.js (I've used both, they're amazing.)

http://www.cnblogs.com/sanshi/archive/2009/07/08/1519036.html

知不知道ES6 中的class和extends关键字，如何使用上述关键字实现一个继承关系。

 1 function Person(name) {
 2   this.name = name;
 3 }
 4 
 5 Person.prototype = {
 6   getName: function() {
 7     return this.name;
 8   }
 9 }
10 
11 function Employee(name, employeeID) {
12   this.name = name;
13   this.employeeID = employeeID;
14 }
15 
16 // 这是不好的。
17 Employee.prototype = new Person();
18 Employee.prototype.getEmployeeID = function() {
19   return this.employeeID;
20 };
21 
22 var zhang = new Employee("ZhangSan", "1234");
23 console.log(zhang.getName()); // "ZhangSan"

 1 function Employee(name, employeeID) {
 2   this.name = name;
 3   this.employeeID = employeeID;
 4 }
 5 // 创建Employee时实例化Person是不合适的
 6 Employee.prototype = new Person();
 7 Employee.prototype.constructor = Employee;
 8 Employee.prototype.getEmployeeID = function() {\
 9     return this.employeeID;
10 };
11 
12 var zhang = new Employee("ZhangSan", "1234");
13 console.log(zhang.constructor === Employee); // true
14 console.log(zhang.constructor === Object); // false

提供一个原型方法（比如init）来初始化数据。

 1 // 空的构造函数
 2 function Person() {
 3 }
 4 
 5 Person.prototype = {
 6   init: function(name) {
 7     this.name = name;
 8   },
 9 
10   getName: function() {
11     return this.name;
12   }
13 }
14 
15 // 空的构造函数
16 function Employee() {
17 }
18 
19 // 创建类的阶段不会初始化父类的数据，因为Person是一个空的构造函数
20 Employee.prototype = new Person();
21 Employee.prototype.constructor = Employee;
22 Employee.prototype.init = function(name, employeeID) {
23   this.name = name;
24   this.employeeID = employeeID;
25 };
26 
27 Employee.prototype.getEmployeeID = function() {
28   return this.employeeID;
29 };

这种方式下，必须在实例化一个对象后手工调用init函数，如下：

1 var zhang = new Employee();
2 zhang.init("ZhangSan", "1234");
3 console.log(zhang.getName()); // "ZhangSan"

必须达到两个效果，构造类时不要调用init函数和实例化对象时自动调用init函数。看来我们需要在调用空的构造函数时有一个状态标示。

可以用 call 来实现继承:

 1 function Class1() { 
 2     this.showTxt = function(txt) { 
 3         alert(txt); 
 4     } 
 5 } 
 6 function Class2() { 
 7     Class1.call(this); 
 8 } 
 9 var c2 = new Class2(); 
10 c2.showTxt("cc");

这样 Class2 就继承Class1了，Class1.call(this) 的意思就是使用 Class1 对象代替this对象，那么 Class2 中不就有Class1 的所有属性和方法了吗，c2 对象就能够直接调用Class1 的方法以及属性了，执行结果就是：alert（“cc”）;

Framework

1 如何使用JQuery选取一个ID为myDivId的元素？如何选取一组class为myCssClass的元素？写出代码。

1 $( "#myDivId" );
2 $( ".myDivId" );

3 简述你使用过的前端框架，并介绍其优缺点？

JQuery/Query Mobile

Dojo/Dojo Mobile

zepto.js是一个专为mobile WebKit浏览器(如：Safari和Chrome), 语法借鉴并兼容JQuery。

Node.js

angularJS

bootstrap 是一套html css和js的框架。

React.js（React）是 Facebook 推出的一个用来构建用户界面的 JavaScript 库.

Slider 滑动条控件。（不算一个框架）

(选做)如果熟悉angularJS, 请选择(1), 如果熟悉React, 请选择(2):

(1) 描述angular中的数据绑定(data-binding)，描述angular依赖注入(dependency injection)

在angular中，model和view组件之间的Data Binding是可以自动同步数据的。angular实现Data Binding的方法可以让你确信在你的应用中model是single-source-of-truth，view仅仅是model的投影。当model改变时，view跟着改变，反之亦然。

angular的模板系统则不同，template是被浏览器去编译的，编译这步会产生一个live的view。对view进行的任何更改会立即反映到model中，对model进行的更改也会立即反映到view中。model是应用程序的single-source-of-truth，极大地简化了开发人员的编程模型，你仅仅把view当成model的瞬间投影即可。

Angular JS框架与Spring类似，都实现了DI。

(2) virtual DOM的优势是什么？解释FLUX中的数据流

来人们使用了 MVC、MVP 的架构模式，希望能从代码组织方式来降低维护这种复杂应用程序的难度。但是 MVC 架构没办法减少你所维护的状态，也没有降低状态更新你需要对页面的更新操作（前端来说就是DOM操作），你需要操作的DOM还是需要操作，只是换了个地方。

相对于 DOM 对象，原生的 JavaScript 对象处理起来更快，而且更简单。DOM 树上的结构、属性信息我们都可以很容易地用 JavaScript 对象表示出来。

既然状态改变了要操作相应的DOM元素，为什么不做一个东西可以让视图和状态进行绑定，状态变更了视图自动变更，就不用手动更新页面了。这就是后来人们想出了 MVVM 模式。

React 标榜自己是 MVC 里面 V 的部分，那么 Flux 就相当于添加 M 和 C 的部分。

Flux 是 Facebook 使用的一套前端应用的架构模式。

一个 Flux 应用主要包含四个部分：

the dispatcher

处理动作分发，维护 Store 之间的依赖关系

the stores

数据和逻辑部分

the views

React 组件，这一层可以看作 controller-views，作为视图同时响应用户交互

the actions

提供给 dispatcher 传递数据给 store

Flux 的核心“单向数据流“怎么运作的：

Action -> Dispatcher -> Store -> View

更多时候 View 会通过用户交互触发 Action，所以一个简单完整的数据流类似这样：

(选做)什么是npm, 你可以如何使用它？

npm是Node.js 的包管理工具，用来安装各种 Node.js 的扩展。

test/build等杂项

请描述Git中merge和rebase的区别(选做)

git merge和git rebase从最终效果来看没有任何区别，都是将不同分支的代码融合在一起，但是生成的代码树就稍微有些不同。rebase操作不会生成新的节点，是将两个分支融合成一个线性的提交。而merge操作生成的代码树会显得比较乱。

什么是mock? (选做)

mock测试就是在测试过程中，对于某些不容易构造或者不容易获取的对象，用一个虚拟的对象来创建以便测试的测试方法。

延伸问题：什么是冒烟测试（smoke test）?

冒烟测试源自硬件行业，对一个硬件或者硬件组件改动后，直接给设备加电，看看设备会不会冒烟，没冒烟，就表示待测组件是通过了测试。在软件开发过程中，一直有高内聚，低耦合这样的说法，各个功能模块之间的耦合还是存在的，因此一个功能的改动，还是会影响到其他功能模块。因此在开发人员修复了先前测试中发现的bug后，想知道这个bug的修复是否会影响到其他功能模块，需要做的就是冒烟测试。

列出你知道的前端的build/test automation/unit test/的工具/框架，以及你知道的其他工具，并给出简要描述。(选做)

静态代码检查工具JSLint。 JSHint跟JSLint非常像，都是Javascript代码验证工具

前端的测试框架很多，像QUnit、jasmine、mocha、jest、intern等

QUnit诞生之初是为了jquery的单元测试

Bower 包管理包依赖

Yeoman 快速构建

Build工具：

Grunt能做什么：
1、合并，压缩JS，CSS。
2、单元测试(Qunit)。
3、验证(JSHint)。
4、初始化一个Project。

Build工具：

Gulp + Webpack

服务器端相关

HTTP

这一部分主要考察对网络协议，主要是HTTP协议的理解。

HTTP请求共有几种类型？给出你常用的类型，并结合你给出的类型描述HTTP请求的幂等性。

8 种类型： GET POST PUT DELETE OPTION HEAD等等。

列出常见的HTTP请求的返回状态(Status Code)，并简述其含义？

如何解决HTTP的无状态性所带来的问题？(选做)

如何理解HTTP是无连接的？ (选做)

TCP是有连接的，而HTTP是无连接的。无连接：服务器处理完客户的请求，并收到客户的应答后，即断开连接。

什么是长连接？

HTTP响应码 1 2 3 4 5 的各种含义

什么是RESTful风格？

常见HTTP报头的含义：

Via

Keep-alive

是否熟悉抓包工具，平时都使用什么抓包工具？比如Fiddler？

什么是Proxy？什么是反向代理？

杂项

简述什么是MVC ？(选做)

什么是websocket？什么是REST？什么样的需求(使用场景)会需要websocket和REST？(选做)

其他问题：

期望薪资；

如何看待加班，婚育情况，住址，何时到岗；

是否有问题需要提问？

备选题

计算机基础

快排的主要思想？时间复杂度？如何避免最差的时间复杂度？(选做)

6二叉树有哪些遍历算法？如何从递归算法构造非递归算法？使用什么辅助数据结构？(选做)

4 什么是平衡二叉树？常见的平衡二叉树有哪些？(选做)

HTML

如何选取特定的HTML元素？

5 javascript的方法可以分为哪几类？

类方法(静态方法)，对象方法(实例方法)，原型方法。

javascript的方法可以分为三类：

a 类方法

b 对象方法

c 原型方法

例子：

 1 function People(name)
 2 {
 3   this.name=name;
 4   //对象方法
 5   this.Introduce=function(){
 6     alert("My name is "+this.name);
 7  } 8 } 9 //类方法 10 People.Run=function(){ 11 alert("I can run"); 12 } 13 //原型方法 14 People.prototype.IntroduceChinese=function(){ 15 alert("我的名字是"+this.name); 16 } 17 18 19 20 //测试 21 22 var p1=new People("Windking"); 23 24 p1.Introduce(); 25 26 People.Run(); 27 28 p1.IntroduceChinese();

1 什么是document对象？如何通过Window对象访问document对象？

9 是否熟悉抓包工具，平时都使用什么抓包工具？

8 列出常见的HTTP报头的字段，并简述其含义？

Keep-alive什么是长连接？

10 什么是Proxy？什么是反向代理？

Output：2

什么是平衡二叉树？常见的平衡二叉树有哪些？()AVL 红黑。

算法：

快排的思想，时间复杂度？如何避免最差的时间复杂度？

二叉树的遍历算法？如何从递归算法构造非递归算法，使用什么辅助数据结构？

5. js中的3种弹出式消息提醒（警告窗口，确认窗口，信息输入窗口）的命令是什么？
alert
confirm
prompt

node.js前端面试题汇总，附答案

1、为什么用Nodejs，它有哪些缺点？答：事件驱动，通过闭包很容易实现客户端的生命活期。不用担心多线程，锁，并行计算的问题 V8引擎速度非常快对于游戏来说，写一遍游戏逻辑代

1、为什么用Nodejs，它有哪些缺点？

    答：事件驱动，通过闭包很容易实现客户端的生命活期。
    不用担心多线程，锁，并行计算的问题
    V8引擎速度非常快
    对于游戏来说，写一遍游戏逻辑代码，前端后端通用。

当然Nodejs也有一些缺点：

    nodejs更新很快，可能会出现版本联兼容
    nodejs还不算成熟，还没有大制作。
    nodejs不像其他的服务器，对于不同的连接，不支持进程和线程操作。

2、什么是error-first的回调方式？

答：Error-first回调方式用来同时传递error和data。将错误作为第一个参数，它就必须先检查看看有没有错误先。另外的参数就用来传递data了。

fs.readFile(filePath, function(err, data) {
if(err) {
    //处理错误，这里的return很重要，如果发生错误，在此处就会停止了。
    return console.log(err);
}
//传递data
console.log(data);
})

3、你是如何避免回调地狱的?

答：    模块化把回调函数分割成独立的函数

    使用控制流的库，比如async

    generators结合Promise

    async/await

4、Promise是什么?

答：概念不多说了，简单来说就是帮助你更好地处理异步操作的东西。

new Promise((resolve, reject) => {
setTimeout(() => {
    resolve('result');
}, 100)
})
.then(console.log)
.catch(console.error)

5、stub是什么? 举个例子?

stub是用来模拟组件/模块行为的东西，它在测试阶段为函数调用提供内部响应。

例子是写文件，但实际上并没有这么做

var fs = require('fs');

var writeFileStub = sinon.stub(fs, 'writeFile', function(path, data, cb) {
return cb(null)
})

expect(writeFileStub).to.be.called
writeFileStub.restore();

整理前端css和js以及http的相关面试题，附答案

自己整理了一些关于前端这个行业面试题，好多都不会好难过，I NEED AV....... HTMLCSS 1. 常用那几种浏览器测试？有哪些内核(Layout Engine)? (Q1)浏览器：IE，Chrome，FireFox，Safari，Opera。 (Q2)内

自己整理了一些关于前端这个行业面试题，好多都不会好难过，I NEED AV.......

HTML&CSS

1. 常用那几种浏览器测试？有哪些内核(Layout Engine)?
(Q1)浏览器：IE，Chrome，FireFox，Safari，Opera。
(Q2)内核：Trident，Gecko，Presto，Webkit。
2. 说下行内元素和块级元素的区别？行内块元素的兼容性使用？（IE8 以下）
(Q1)行内元素：会在水平方向排列，不能包含块级元素，设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。
块级元素：各占据一行，垂直方向排列。从新行开始结束接着一个断行。
(Q2)兼容性：display:inline-block;*display:inline;*zoom:1;
3.清除浮动有哪些方式？比较好的方式是哪一种？
(Q1)
（1）父级div定义height。
（2）结尾处加空div标签clear:both。
（3）父级div定义伪类:after和zoom。
（4）父级div定义overflow:hidden。
（5）父级div定义overflow:auto。
（6）父级div也浮动，需要定义宽度。
（7）父级div定义display:table。
（8）结尾处加br标签clear:both。
(Q2)比较好的是第3种方式，好多网站都这么用。
4.box-sizing常用的属性有哪些？分别有什么作用？
(Q1)box-sizing: content-box|border-box|inherit;
(Q2)content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。
border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
5.Doctype作用？标准模式与兼容模式各有什么区别?
(Q1)告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
(Q2)标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
6.HTML5 为什么只需要写？
HTML5不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）。
而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。
7.页面导入样式时，使用link和@import有什么区别？
（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;
（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
（3）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;
8.介绍一下你对浏览器内核的理解？
主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
JS引擎则：解析和执行javascript来实现网页的动态效果。
最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。
9.html5有哪些新特性？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
（Q1）
HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
(1)绘画 canvas;
(2)用于媒介回放的 video 和 audio 元素;
(3)本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;
(4)sessionStorage 的数据在浏览器关闭后自动删除;
(5)语意化更好的内容元素，比如 article、footer、header、nav、section;
(6)表单控件，calendar、date、time、email、url、search;
(7)新的技术webworker, websocket, Geolocation;
(Q2)
IE8/IE7/IE6支持通过document.createElement方法产生的标签，
可以利用这一特性让这些浏览器支持HTML5新标签，
浏览器支持新标签后，还需要添加标签默认的样式。
当然也可以直接使用成熟的框架、比如html5shim;

10.简述一下你对HTML语义化的理解？
用正确的标签做正确的事情。
html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;
搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

JavaScript

1.介绍js的基本数据类型
Undefined、Null、Boolean、Number、String
2.js有哪些内置对象？
数据封装类对象：Object、Array、Boolean、Number 和 String
其他对象：Function、Arguments、Math、Date、RegExp、Error
3.this对象的理解
this总是指向函数的直接调用者（而非间接调用者）；
如果有new关键字，this指向new出来的那个对象；
在事件中，this指向触发这个事件的对象，特殊的是，IE中的attachEvent中的this总是指向全局对象Window；
4.eval是做什么的？
它的功能是把对应的字符串解析成JS代码并运行；
应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。
由JSON字符串转换为JSON对象的时候可以用eval，var obj =eval('('+ str +')');
5.DOM怎样添加、移除、移动、复制、创建和查找节点

// 创建新节点
createDocumentFragment()    //创建一个DOM片段
createElement()   //创建一个具体的元素
createTextNode()   //创建一个文本节点
// 添加、移除、替换、插入
appendChild()
removeChild()
replaceChild()
insertBefore() //在已有的子节点前插入一个新的子节点
// 查找
getElementsByTagName()    //通过标签名称
getElementsByName()    //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)
getElementById()    //通过元素Id，唯一性

6.null和undefined的区别？
null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。
undefined：
（1）变量被声明了，但没有赋值时，就等于undefined。
（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。
（3）对象没有赋值的属性，该属性的值为undefined。
（4）函数没有返回值时，默认返回undefined。
null：
（1）作为函数的参数，表示该函数的参数不是对象。
（2）作为对象原型链的终点。
7.new操作符具体干了什么呢?
（1）创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
（2）属性和方法被加入到 this 引用的对象中。
（3）新创建的对象由 this 所引用，并且最后隐式的返回 this 。
8.JSON 的了解？
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小。
格式：采用键值对，例如：{'age':'12', 'name':'back'}
9.call() 和 apply() 的区别和作用？
apply()函数有两个参数：第一个参数是上下文，第二个参数是参数组成的数组。如果上下文是null，则使用全局对象代替。
如：function.apply(this,[1,2,3]);
call()的第一个参数是上下文，后续是实例传入的参数序列。
如：function.call(this,1,2,3);
10.如何获取UA？

function whatBrowser() { document.Browser.Name.value=navigator.appName; document.Browser.Version.value=navigator.appVersion; document.Browser.Code.value=navigator.appCodeName; document.Browser.Agent.value=navigator.userAgent; }

其他

1.HTTP状态码知道哪些？
100  Continue  继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息
200  OK 正常返回信息
201  Created  请求成功并且服务器创建了新的资源
202  Accepted  服务器已接受请求，但尚未处理
301  Moved Permanently  请求的网页已永久移动到新位置。
302 Found  临时性重定向。
303 See Other  临时性重定向，且总是使用 GET 请求新的 URI。
304  Not Modified  自从上次请求后，请求的网页未修改过。
400 Bad Request  服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
401 Unauthorized  请求未授权。
403 Forbidden  禁止访问。
404 Not Found  找不到如何与 URI 相匹配的资源。
500 Internal Server Error  最常见的服务器端错误。
503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。
2.你有哪些性能优化的方法？
（1）减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存，图片服务器。
（2）前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
（3）用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
（4）当需要设置的样式很多时设置className而不是直接操作style。
（5）少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
（6）避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
（7）图片预加载，将样式表放在顶部，将脚本放在底部  加上时间戳。
3.什么叫优雅降级和渐进增强？
优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效.
渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。
4.哪些常见操作会造成内存泄漏？
内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。
setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）
5.线程与进程的区别
一个程序至少有一个进程,一个进程至少有一个线程.
线程的划分尺度小于进程，使得多线程程序的并发性高。
另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。
线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。
从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。

整理前端面试题（2） - 笔记 - 前端网（QDFuns）

整理了一些关于前端的面试题HTMLCSS1.请描述一下cookies，sessionStorage和localStorage的区别？cookie是网站为了标示用户身份而储存在用户本地终端（...

HTML&CSS

1.请描述一下 cookies，sessionStorage 和 localStorage 的区别？
cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。
cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
存储大小：
cookie数据大小不能超过4k。
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
有期时间：
localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage  数据在当前浏览器窗口关闭后自动删除。
cookie       设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
2.iframe有那些缺点？
iframe会阻塞主页面的Onload事件；
搜索引擎的检索程序无法解读这种页面，不利于SEO;
iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题。
3.如何实现浏览器内多个标签页之间的通信?
WebSocket、SharedWorker
也可以调用localstorge、cookies等本地存储方式。
localstorge另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，我们通过监听事件，控制它的值来进行页面信息通信。
注意quirks：Safari 在无痕模式下设置localstorge值时会抛出 QuotaExceededError 的异常。
4.如何在页面上实现一个圆形的可点击区域？
（1）map+area或者svg
（2）border-radius
（3）纯js实现需要求一个点在不在圆上简单算法、获取鼠标坐标等等
5.介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？
（1）有两种， IE 盒子模型、W3C 盒子模型。
（2）盒模型：内容(content)、填充(padding)、边界(margin)、边框(border)。
（3）区  别： IE的content部分把 border 和 padding计算了进去。
6.CSS优先级算法如何计算？
优先级就近原则，同权重情况下样式定义最近者为准;
载入样式以最后载入的定位为准;
优先级为:
!important >  id > class > tag
important比内联优先级高(style)
7.为什么要使用CSS sprites
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background-position”的组合进行背景定位，这样可以减少很多图片请求的开销，因为请求耗时比较长；请求虽然可以并发，但是如果请求太多会给服务器增加很大的压力。
8.display:none和visibility:hidden的区别？
display:none  隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。
visibility:hidden  隐藏对应的元素，但是在文档布局中仍保留原来的空间。
9.position的absolute与fixed区别
absolute浮动定位是相对于父级中设置position为relative或者absolute最近的父级元素
fixed浮动定位是相对于浏览器视窗的
10.IE 8以下版本的浏览器中的盒模型有什么不同？
IE8以下浏览器的盒模型中定义的元素的宽高不包括内边距和边框

JavaScript

1.JS数组去重
Array.prototype.unique1 = function () {
var n = []; //一个新的临时数组
for (var i = 0; i < this.length; i++) //遍历当前数组
{
    //如果当前数组的第i已经保存进了临时数组，那么跳过，
    //否则把当前项push到临时数组里面
    if (n.indexOf(this[i]) == -1) n.push(this[i]);
}
return n;
}

Array.prototype.unique2 = function()
{
    var n = {},r=[]; //n为hash表，r为临时数组
    for(var i = 0; i < this.length; i++) //遍历当前数组
    {
        if (!n[this[i]]) //如果hash表中没有当前项
        {
            n[this[i]] = true; //存入hash表
            r.push(this[i]); //把当前数组的当前项push到临时数组里面
        }
    }
    return r;
}

Array.prototype.unique3 = function()
{
    var n = [this[0]]; //结果数组
    for(var i = 1; i < this.length; i++) //从第二项开始遍历
    {
        //如果当前数组的第i项在当前数组中第一次出现的位置不是i，
        //那么表示第i项是重复的，忽略掉。否则存入结果数组
        if (this.indexOf(this[i]) == i) n.push(this[i]);
    }
    return n;
}

2.js操作获取和设置cookie
//创建cookie
function setCookie(name, value, expires, path, domain, secure) {
    var cookieText = encodeURIComponent(name) + '=' + encodeURIComponent(value);
    if (expires instanceof Date) {
        cookieText += '; expires=' + expires;
    }
    if (path) {
        cookieText += '; expires=' + expires;
    }
    if (domain) {
        cookieText += '; domain=' + domain;
    }
    if (secure) {
        cookieText += '; secure';
    }
    document.cookie = cookieText;
}

//获取cookie
function getCookie(name) {
    var cookieName = encodeURIComponent(name) + '=';
    var cookieStart = document.cookie.indexOf(cookieName);
    var cookieValue = null;
    if (cookieStart > -1) {
        var cookieEnd = document.cookie.indexOf(';', cookieStart);
        if (cookieEnd == -1) {
            cookieEnd = document.cookie.length;
        }
        cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
    }
    return cookieValue;
}

//删除cookie
function unsetCookie(name) {
    document.cookie = name + "= ; expires=" + new Date(0);
}
3.ajax 有那些优缺点?如何解决跨域问题?
（Q1）
优点：
（1）通过异步模式，提升了用户体验.
（2）优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用.
（3）Ajax在客户端运行，承担了一部分本来由服务器承担的工作，减少了大用户量下的服务器负载。
（4）Ajax可以实现动态不刷新（局部刷新）
缺点：
（1）安全问题 AJAX暴露了与服务器交互的细节。
（2）对搜索引擎的支持比较弱。
（3）不容易调试。
（Q2）jsonp、 iframe、window.name、window.postMessage、服务器上设置代理页面。
4.JavaScript原型，原型链 ? 有什么特点？
（1）原型对象也是普通的对象，是对象一个自带隐式的 __proto__ 属性，原型也有可能有自己的原型，如果一个原型对象的原型不为null的话，我们就称之为原型链。
（2）原型链是由一些用来继承和共享属性的对象组成的（有限的）对象链。
5.GET和POST的区别，何时使用POST？
GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符
POST：一般用于修改服务器上的资源，对所发送的信息没有限制。
GET方式需要使用Request.QueryString来取得变量的值，而POST方式通过Request.Form来获取变量的值，
也就是说Get是通过地址栏来传值，而Post是通过提交表单来传值。
然而，在以下情况中，请使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
6.请解释一下 JavaScript 的同源策略
概念:同源策略是客户端脚本（尤其是Javascript）的重要的安全度量标准。它最早出自Netscape Navigator2.0，其目的是防止某个文档或脚本从多个不同源装载。
这里的同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议。
指一段脚本只能读取来自同一来源的窗口和文档的属性。
为什么要有同源限制？
我们举例说明：比如一个黑客程序，他利用Iframe把真正的银行登录页面嵌到他的页面上，当你使用真实的用户名，密码登录时，他的页面就可以通过Javascript读取到你的表单中input中的内容，这样用户名，密码就轻松到手了。
7.Flash、Ajax各自的优缺点，在使用中如何取舍？
Flash适合处理多媒体、矢量图形、访问机器；对CSS、处理文本上不足，不容易被搜索。
Ajax对CSS、文本支持很好，支持搜索；多媒体、矢量图形、机器访问不足。
共同点：与服务器的无刷新传递消息、用户离线和在线状态、操作DOM
8.什么是闭包？
闭包，官方对闭包的解释是：一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。闭包的特点：
（1）作为一个函数变量的一个引用，当函数返回时，其处于激活状态。
（2）一个闭包就是当一个函数返回时，一个没有释放资源的栈区。
简单的说，Javascript允许使用内部函数---即函数定义和函数表达式位于另一个函数的函数体内。而且，这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。当其中一个这样的内部函数在包含它们的外部函数之外被调用时，就会形成闭包。
9.javascript里面的继承怎么实现，如何避免原型链上面的对象共享
用构造函数和原型链的混合模式去实现继承，避免对象共享可以参考经典的extend()函数，很多前端框架都有封装的，就是用一个空函数当做中间变量
10.ajax过程
(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.
(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
(3)设置响应HTTP请求状态变化的函数.
(4)发送HTTP请求.
(5)获取异步调用返回的数据.
(6)使用JavaScript和DOM实现局部刷新.

其他

1.一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？
（1）查找浏览器缓存
（2）DNS解析、查找该域名对应的IP地址、重定向（301）、发出第二个GET请求
（3）进行HTTP协议会话
（4）客户端发送报头(请求报头)
（5）服务器回馈报头(响应报头)
（6）html文档开始下载
（7）文档树建立，根据标记请求所需指定MIME类型的文件
（8）文件显示
2.为什么换工作？
3.你常用的开发工具是什么，为什么？
4.对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？
5.加班的看法？
加班就像借钱，原则应当是------救急不救穷

整理总结的一些前端面试题 - WEB前端 - 伯乐在线

整理总结的一些前端面试题，包括了：HTML、JavaScript、CSS，以及一些开放题。

HTML面试题

1.XHTML和HTML有什么区别

HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言
最主要的不同：

XHTML 元素必须被正确地嵌套。

XHTML 元素必须被关闭。

标签名必须用小写字母。

XHTML 文档必须拥有根元素。

2.前端页面有哪三层构成，分别是什么?作用是什么?

结构层 Html 表示层 CSS 行为层 js;

3.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?

Ie(Ie内核) 火狐（Gecko）谷歌（webkit,Blink） opera(Presto),Safari(wbkit)

4.什么是语义化的HTML?

直观的认识标签对于搜索引擎的抓取有好处，用正确的标签做正确的事情！

html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。

使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

5.HTML5 为什么只需要写 !DOCTYPE HTML？

HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

6.Doctype作用？标准模式与兼容模式各有什么区别?

!DOCTYPE声明位于位于HTML文档中的第一行，处于html 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

7.html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和HTML5？

HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。

绘画 canvas

用于媒介回放的 video 和 audio 元素

本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；

sessionStorage 的数据在浏览器关闭后自动删除

语意化更好的内容元素，比如 article、footer、header、nav、section

表单控件，calendar、date、time、email、url、search

新的技术webworker, websockt, Geolocation
移除的元素

纯表现的元素：basefont，big，center，font, s，strike，tt，u；

对可用性产生负面影响的元素：frame，frameset，noframes；
支持HTML5新标签：

IE8/IE7/IE6支持通过document.createElement方法产生的标签，

可以利用这一特性让这些浏览器支持HTML5新标签，

浏览器支持新标签后，还需要添加标签默认的样式：

8.请描述一下 cookies，sessionStorage 和 localStorage 的区别？

cookie在浏览器和服务器间来回传递。 sessionStorage和localStorage不会

sessionStorage和localStorage的存储空间更大；

sessionStorage和localStorage有更多丰富易用的接口；

sessionStorage和localStorage各自独立的存储空间；

9.如何实现浏览器内多个标签页之间的通信?

调用localstorge、cookies等本地存储方式

CSS面试题

1.简要说一下CSS的元素分类

块级元素：div,p,h1,form,ul,li;

行内元素 : span>,a,label,input,img,strong,em;

2.CSS隐藏元素的几种方法（至少说出三种）

Opacity:元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互;

Visibility:与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏;

Display:display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在;

Position:不会影响布局，能让元素保持可以操作;

Clip-path:clip-path 属性还没有在 IE 或者 Edge 下被完全支持。如果要在你的 clip-path 中使用外部的 SVG 文件，浏览器支持度还要低;

3.CSS清除浮动的几种方法（至少两种）

使用带clear属性的空元素

使用CSS的overflow属性；

使用CSS的:after伪元素；

使用邻接元素处理；

4.CSS居中（包括水平居中和垂直居中）

内联元素居中方案

水平居中设置：
1.行内元素

设置 text-align:center；

2.Flex布局

设置display:flex;justify-content:center;(灵活运用,支持Chroime，Firefox，IE9+)

垂直居中设置：
1.父元素高度确定的单行文本（内联元素）

设置 height = line-height；

2.父元素高度确定的多行文本（内联元素）

a:插入 table （插入方法和水平居中一样），然后设置 vertical-align:middle；

b:先设置 display:table-cell 再设置 vertical-align:middle；

块级元素居中方案

水平居中设置：
1.定宽块状元素

设置左右 margin 值为 auto；

2.不定宽块状元素

a:在元素外加入 table 标签（完整的，包括 table、tbody、tr、td），该元素写在 td 内，然后设置 margin 的值为 auto；

b:给该元素设置 displa:inine 方法；

c:父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:50%；

垂直居中设置：

使用position:absolute（fixed）,设置left、top、margin-left、margin-top的属性;

利用position:fixed（absolute）属性，margin:auto这个必须不要忘记了;

利用display:table-cell属性使内容垂直居中;

使用css3的新属性transform:translate(x,y)属性;

使用:before元素;

5.写出几种IE6 BUG的解决方法

双边距BUG float引起的使用display

3像素问题使用float引起的使用dislpay:inline -3px

超链接hover 点击后失效使用正确的书写顺序 link visited hover active

Ie z-index问题给父级添加position:relative

Png 透明使用js代码改

Min-height 最小高度！Important 解决’

select 在ie6下遮盖使用iframe嵌套

为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）

6.对于SASS或是Less的了解程度？喜欢那个？

语法介绍

7.Bootstrap了解程度

特点，排版，插件的使用;

8.页面导入样式时，使用link和@import有什么区别？

link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;

页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;

9.介绍一下CSS的盒子模型？

有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和 pading;

盒模型：内容(content)、填充(padding)、边界(margin)、边框(border).

10.CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？

id选择器（ # myid）

类选择器（.myclassname）

标签选择器（div, h1, p）

相邻选择器（h1 + p）

子选择器（ul > li）

后代选择器（li a）

通配符选择器（ * ）

属性选择器（a[rel = “external”]）

伪类选择器（a: hover, li: nth – child）

可继承的样式： font-size font-family color, UL LI DL DD DT;

不可继承的样式：border padding margin width height ;

优先级就近原则，同权重情况下样式定义最近者为准;

优先级为:

JavaScript

1

2

! important > id > class > tag

important 比内联优先级高

11.CSS3有哪些新特性？

CSS3实现圆角（border-radius:8px），阴影（box-shadow:10px），
对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）

transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜
增加了更多的CSS选择器多背景 rgba

JavaScript面试题

1.javascript的typeof返回哪些数据类型

Ｏbject number function boolean underfind;

2.例举3种强制类型转换和2种隐式类型转换?

强制（parseInt,parseFloat,number）隐式（== – ===）；

3.数组方法pop() push() unshift() shift()

Push()尾部添加 pop()尾部删除

Unshift()头部添加 shift()头部删除

4.ajax请求的时候get 和post方式的区别?

一个在url后面一个放在虚拟载体里面
有大小限制

安全问题
应用不同一个是论坛等只需要请求的，一个是类似修改密码的;

5.call和apply的区别

Object.call(this,obj1,obj2,obj3)

Object.apply(this,arguments)

6.ajax请求时，如何解释json数据

使用eval parse,鉴于安全性考虑使用parse更靠谱;

7.事件委托是什么

让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！

8.闭包是什么，有什么特性，对页面有什么影响?简要介绍你理解的闭包

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

9.添加删除替换插入到某个接点的方法

obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild
10.说一下什么是javascript的同源策略？

一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合

11.编写一个b继承a的方法;

function A ( name ) {

this . name = name ;

this . sayHello = function ( ) { alert ( this . name +” say Hello !” ) ; } ;

}

function B ( name , id ) {

this . temp = A ;

this . temp ( name ) ; //相当于new A();

delete this . temp ;

this . id = id ;

this . checkId = function ( ID ) { alert ( this . id == ID ) } ;

}

12.如何阻止事件冒泡和默认事件

function stopBubble ( e )

{

if ( e && e . stopPropagation )

e . stopPropagation ( )

else

window . event . cancelBubble = true

}

return false

13.下面程序执行后弹出什么样的结果?

function fn ( ) {

this . a = 0 ;

this . b = function ( ) {

alert ( this . a )

}

fn . prototype = {

b : function ( ) {

this . a = 20 ;

alert ( this . a ) ;

} ,

c : function ( ) {

this . a = 30 ;

alert ( this . a ) ;

}

var myfn = new fn ( ) ;

myfn . b ( ) ;

myfn . c ( ) ;

14.谈谈This对象的理解。

this是js的一个关键字，随着函数使用场合不同，this的值会发生变化。
但是有一个总原则，那就是this指的是调用函数的那个对象。
this一般情况下：是全局对象Global。作为方法调用，那么this就是指这个对象

15.下面程序的结果

function fun ( n , o ) {

console . log ( o )

return {

fun : function ( m ) {

return fun ( m , n ) ;

}

} ;

}

var a = fun ( 0 ) ; a . fun ( 1 ) ; a . fun ( 2 ) ; a . fun ( 3 ) ;

var b = fun ( 0 ) . fun ( 1 ) . fun ( 2 ) . fun ( 3 ) ;

var c = fun ( 0 ) . fun ( 1 ) ; c . fun ( 2 ) ; c . fun ( 3 ) ;

//答案：

//a: undefined,0,0,0
//b: undefined,0,1,2
//c: undefined,0,1,1

16.下面程序的输出结果

var name = 'World!' ;

( function ( ) {

if ( typeof name === 'undefined' ) {

var name = 'Jack' ;

console . log ( 'Goodbye ' + name ) ;

} else {

console . log ( 'Hello ' + name ) ;

}

} ) ( ) ;

17.了解Node么？Node的使用场景都有哪些？

高并发、聊天、实时消息推送

18.介绍下你最常用的一款框架

jquery,rn,angular等;

19.对于前端自动化构建工具有了解吗？简单介绍一下

Gulp,Grunt等；

20.介绍一下你了解的后端语言以及掌握程度

其它

1.对Node的优点和缺点提出了自己的看法？

(优点）
因为Node是基于事件驱动和无阻塞的，所以非常适合处理并发请求，
因此构建在Node上的代理服务器相比其他技术实现（如Ruby）的服务器表现要好得多。
此外，与Node代理服务器交互的客户端代码是由javascript语言编写的，
因此客户端和服务器端都用同一种语言编写，这是非常美妙的事情。
（缺点）
Node是一个相对新的开源项目，所以不太稳定，它总是一直在变，
而且缺少足够多的第三方库支持。看起来，就像是Ruby/Rails当年的样子。

2.你有哪些性能优化的方法？

（1）减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存，图片服务器。
（2）前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
（3）用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
（4）当需要设置的样式很多时设置className而不是直接操作style。
（5）少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
（6）避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
（7）图片预加载，将样式表放在顶部，将脚本放在底部加上时间戳。
（8）避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示div+css布局慢。对普通的网站有一个统一的思路，就是尽量向前端优化、减少数据库操作、减少磁盘IO。向前端优化指的是，在不影响功能和体验的情况下，能在浏览器执行的不要在服务端执行，能在缓存服务器上直接返回的不要到应用服务器，程序能直接取得的结果不要到外部取得，本机内能取得的数据不要到远程取，内存能取到的不要到磁盘取，缓存中有的不要去数据库查询。减少数据库操作指减少更新次数、缓存结果减少查询次数、将数据库执行的操作尽可能的让你的程序完成（例如join查询），减少磁盘IO指尽量不使用文件系统作为缓存、减少读写文件次数等。程序优化永远要优化慢的部分，换语言是无法“优化”的。

3.http状态码有那些？分别代表是什么意思？
100-199 用于指定客户端应相应的某些动作。
200-299 用于表示请求成功。
300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。
400-499 用于指出客户端的错误。400 1、语义有误，当前请求无法被服务器理解。401 当前请求需要用户验证 403 服务器已经理解请求，但是拒绝执行它。
500-599 用于支持服务器错误。 503 – 服务不可用

4.一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）

查找浏览器缓存
DNS解析、查找该域名对应的IP地址、重定向（301）、发出第二个GET请求
进行HTTP协议会话
客户端发送报头(请求报头)
文档开始下载
文档树建立，根据标记请求所需指定MIME类型的文件
文件显示
浏览器这边做的工作大致分为以下几步：
加载：根据请求的URL进行域名解析，向服务器发起请求，接收文件（HTML、JS、CSS、图象等）。
解析：对加载到的资源（HTML、JS、CSS等）进行语法解析，建议相应的内部数据结构（比如HTML的DOM树，JS的（对象）属性表，CSS的样式规则等等）

5.你常用的开发工具是什么，为什么？

Sublime,Atom,Nodepad++;

6.说说最近最流行的一些东西吧？常去哪些网站？

Node.js、MVVM、React-native,Angular,Weex等

CSDN,Segmentfault,博客园,掘金,Stackoverflow,伯乐在线等

7.介绍下你的项目（如果有的话）？并说一下在做这个项目中运用的技术以及遇到的难题是如何解决的

vue.cli的webpack项目前端最新面试题，附答案 | 奔三

1、scss是什么？在vue.cli中的安装使用步骤是？有哪几大特性？答：css的预编译。使用步骤：第一步：用npm 下三个loader（sass-loader、css-loader、node-sass）第二步：在build目录找到webpack.base.

1、scss是什么？在vue.cli中的安装使用步骤是？有哪几大特性？

答：css的预编译。

使用步骤：

第一步：用npm 下三个loader（sass-loader、css-loader、node-sass）

第二步：在build目录找到webpack.base.config.js，在那个extends属性中加一个拓展.scss

第三步：还是在同一个文件，配置一个module属性

第四步：然后在组件的style标签加上lang属性，例如：lang=”scss”

有哪几大特性:

1、可以用变量，例如（$变量名称=值）；

2、可以用混合器，例如（）

3、可以嵌套

2、vue-loader是什么？使用它的用途有哪些？

答：解析.vue文件的一个加载器，跟template/js/style转换成js模块。

用途：js可以写es6、style样式可以scss或less、template可以加jade等

3、请说出vue.cli项目中src目录每个文件夹和文件的用法？

答：assets文件夹是放静态资源；

components是放组件；

router是定义路由相关的配置;

view视图；

app.vue是一个应用主组件；

main.js是入口文件

4、vue.cli中怎样使用自定义的组件？有遇到过哪些问题吗？

答：第一步：在components目录新建你的组件文件（smithButton.vue），script一定要export default {

第二步：在需要用的页面（组件）中导入：import smithButton from ‘../components/smithButton.vue’

第三步：注入到vue的子组件的components属性上面,components:{smithButton}

第四步：在template视图view中使用，
问题有：smithButton命名，使用的时候则smith-button。

前端js的ES6面试题汇总，附答案 | 奔三路学习网

1、把以下代码使用两种方法，来依次输出0到9？ var funcs = [] for (var i = 0; i 10; i++) { funcs.push(function() { console.log(i) }) } funcs.forEach(function(func) { …

1、把以下代码使用两种方法，来依次输出0到9？

 var funcs = []
    for (var i = 0; i < 10; i++) {
        funcs.push(function() { console.log(i) })
    }
    funcs.forEach(function(func) {
        func()
    })

答：分别使用es5的闭包和es6的let

    // ES5告诉我们可以利用闭包解决这个问题
    var funcs = []
    for (var i = 0; i < 10; i++) {
        func.push((function(value) {
            return function() {
                console.log(value)
            }
        }(i)))
    }
    // es6
    for (let i = 0; i < 10; i++) {
        func.push(function() {
            console.log(i)
        })
    }

2、ES6的模板字符串有哪些新特性？

答：

第一个用途，基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定。

    //es5 
    var name = 'lux'
    console.log('hello' + name)
    //es6
    const name = 'lux'
    console.log(`hello ${name}`) //hello lux

第二个用途，在ES5时我们通过反斜杠(\)来做多行字符串或者字符串一行行拼接。ES6反引号(``)直接搞定。

    // es5
    var msg = "Hi \
    man!
    "
    // es6
    const template = `
        hello world
    
`

对于字符串es6当然也提供了很多厉害的方法。说几个常用的。

    // 1.includes：判断是否包含然后直接返回布尔值
    let str = 'hahay'
    console.log(str.includes('y')) // true
    // 2.repeat: 获取字符串重复n次
    let s = 'he'
    console.log(s.repeat(3)) // 'hehehe'
    //如果你带入小数, Math.floor(num) 来处理

3、箭头有哪些新特点？

答：

不需要function关键字来创建函数
省略return关键字
继承当前上下文的 this 关键字

4、以下代码依次输出内容是？

答：

    setTimeout(function() {
      console.log(1)
    }, 0);
    new Promise(function executor(resolve) {
      console.log(2);
      for( var i=0 ; i<10000 ; i++ ) {
        i == 9999 && resolve();
      }
      console.log(3);
    }).then(function() {
      console.log(4);
    });
    console.log(5);

首先先碰到一个 setTimeout，于是会先设置一个定时，在定时结束后将传递这个函数放到任务队列里面，因此开始肯定不会输出 1 。然后是一个 Promise，里面的函数是直接执行的，因此应该直接输出 2 3 。然后，Promise 的 then 应当会放到当前 tick 的最后，但是还是在当前 tick 中。因此，应当先输出 5，然后再输出 4 。最后在到下一个 tick，就是 1 。 “2 3 5 4 1”

5、promise的原理？jquery的ajax返回的是promise对象吗？(百度面试)

答：jquery的ajax返回的是deferred对象，通过promise的resolve()方法将其转换为promise对象。

var jsPromise = Promise.resolve($.ajax('/whatever.json'));

6、promise 只有2个状态，成功和失败，怎么让一个函数无论成功和失败都能被调用？ Promise.all() 是干什么用的，怎么用？

答：promise.all()的使用：
Promise.all方法用于将多个Promise实例，包装成一个新的Promise实例。

Promise.all方法接受一个数组作为参数，数组里的元素都是Promise对象的实例，如果不是，就会先调用下面讲到的Promise.resolve方法，将参数转为Promise实例，再进一步处理。（Promise.all方法的参数可以不是数组，但必须具有Iterator接口，且返回的每个成员都是Promise实例。）

var p =Promise.all([p1,p2,p3]);

    1

p的状态由p1、p2、p3决定，分为两种情况。

    当该数组里的所有Promise实例都进入Fulfilled状态，Promise.all**返回的实例才会变成Fulfilled状态。并将Promise实例数组的所有返回值组成一个数组，传递给Promise.all返回实例的回调函数**。
    当该数组里的某个Promise实例都进入Rejected状态，Promise.all返回的实例会立即变成Rejected状态。并将第一个rejected的实例返回值传递给Promise.all返回实例的回调函数。

前端面试题（经典）

1、position的值， relative和absolute分别是相对于谁进行定位的？

2、如何解决跨域问题？