来，来，来！一起受虐啊~

总结一些很基础的面试题，如果你不会，那还是不要去面试了，要不太特么受虐了，怕你弱小的心灵接受不了现实。。。。哈哈，其实不要紧。

1、盒子模型

真是老掉牙的问题了。content+padding+border+margin ,平时我设置的width 其实是content 的宽度。box-sizing:boder-box;这样 width就是content+padding+border;

2、执行上下文，作用域，原型链

函数在执行之前都会做一些“准备工作”：1、变量的声明，而不是赋值！默认状态为undefined 2、this 赋值 3、函数声明赋值  这些准备工作我们称为“执行上下文环境”,函数每被调用一次，都会产生一个新的执行上下文环境。

var a=10;
function fn() {
console.log(a);
}
fn();
输出 10；

var a=10;
function fn() {
console.log(a);
var a=20;
}
fn();

输出 undefined;

每个函数在创建时都会产生自己的作用域，可以起到变量隔离的作用，不同作用域下的同名变量不会产生冲突。

作用域链：在fn函数创建的作用域中，变量a没有声明，那需要去创建fn的作用域中去找，还没有的话一直接着跨！一直跨到全局作用域为止。

原型链：每个函数都有一个原型prototype,每个对象都有一个__proto__，所谓的原型链就是：访问一个对象的属性时，__proto__属性中查找，如果没有，再沿着__proto__这条链向上找到prototype，这就是原型链。

3. ajax 请求返回的几种状态

     1xx - 信息提示：100 - Continue 初始的请求已经接受，客户应当继续发送请求的其余部分。

      2xx -成功 ：200 - OK 一切正常，对GET和POST请求的应答文档跟在后面。

      3xx -重定向： 304 - Not Modified 客户端有缓冲的文档并发出了一个条件性的请求，服务器告诉客户，原来缓冲的文档还可以继续使用。

      4xx - 客户端错误：404 找不到页面。

      5xx - 服务器错误： 500 - Internal Server Error 服务器遇到了意料不到的情况，不能完成客户的请求。

4. 用户输入url 后请求页面的过程：

1. 浏览器查找域名的 IP 地址。这一步包括 DNS 具体的查找过程，包括：浏览器缓存 -> 系统缓存 -> 路由器缓存……
2. 浏览器向 web 服务器发送一个 http 请求：三次握手、传送数据、四次挥手;
3. 发送HTTP请求
4. 服务器处理请求并返回HTTP报文
5. 浏览器显示 html 页面：解析 html 以构建 DOM 树 –> 构建渲染树 –> 布局渲染树 –> 绘制渲染树;
6. 浏览器发送请求，获取嵌入在 html 中的资源（如图片、音频、视频、CSS 、JS 等等）;
7. 浏览器发送异步请求。

5. 怎么获取ul 下li 的索引。

window.onload=function(){
  var ul=document.getElementById('test');
  var ul_lis=ul.getElementsByTagName('li');
    for (var i = 0;i < ul_lis.length; i++) {
      ul_lis[i].index = i;
      ul_lis[i].onclick=function(){
        var j=this.index+1;
        alert(j);
      }
    }
};

或者jq 中的 $(this).index()+1;也可以。

6 、1，1，2，3，5，8，13....数组输入位置，求值，求和

//第n项对应的数值。
function com(n) {
  if (n <= 0) return 0;
  if (n == 1) return 1;
  return com(n - 1) + com(n - 2);
}
//前n项之和。
function sum(n) {
  if (n == 1) return 1;
  if (n < 1) return 0;
  return com(n) + sum(n -1);
}

7、web前端如何进行优化？

(1、减少网络交互的次数（多次请求合并）

(2、减少网络传输数据量的大小(压缩)

(3、尽量减少编码（尽量提前将字符转化为字节，或者减少从字符到字节的转化过程。

(4、使用浏览器缓存

(5、减少Cookie传输

(6、合理布局页面

(7、使用页面压缩

(8、延迟加载页面

(9、CSS在最上面，JS在最下面

(10、CDN

(11、反向代理

(12、页面静态化

(13、异地部署

 8、call  和apply 的区别。

call：a.call(b，arg1，arg2)；将a 的方法应用到b上，其中b方法需要两个参数arg1和arg2。

         call 可以改变this 的指向。a.call(b)，那么this就指向b。可以理解为b继承了a 的属性和方法。

apply：它的第二个参数是个数组，将b方法需要的参数放在了一个数组中。

9、哪些操作会造成内存泄漏？   

什么叫内存泄漏呢？内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。 垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。 setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。 闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）。

 10、事件循环：

       http://www.ruanyifeng.com/blog/2014/10/event-loop.html 这里介绍的很好，自己可以研究一下。

 11、怎么能么有闭包

   闭包：读取函数内部变量，让这些变量始终存在内存中，应用情况无非两种，函数作为返回值，函数作为参数传递。

  第一种：函数作为返回值：

function fn(){
     var n=0;
     function inc (){
     console.log(n++);
     }
   return inc;
}
var c=new fn();
c(); //1
c(); //2

　　第二种，作为参数传递：

var max=10;
fn=function (x){
 if(x>max){
 console.log(x);
}
}

(function (f) {
 var max=100;
   f(15);
 })(fn);

12、new操作符具体干了什么呢?其实很简单，就干了三件事情。

var obj  = {}; obj.__proto__ = Base.prototype; Base.call(obj);

13、flex

flex 是三个属性的缩写：flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。都为1，则它们将等分剩余空间。

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

flex-basis: number|auto|initial|inherit;

number	一个长度单位或者一个百分比，规定灵活项目的初始长度。
auto	默认值。长度等于灵活项目的长度。如果该项目未指定长度，则长度将根据内容决定。
initial	设置该属性为它的默认值。请参阅 initial。
inherit	从父元素继承该属性

14、常用的操作DOM

 js:创建元素：CreateElement('p');   创建文本内容：createTextNode("这是新段落。");  追加内容或子元素：appendChild(); 从父元素中删除子元素：removeChild();

jq: parent() 返回直接父级；   parents() 返回所有父级元素；   parentsUntil() 返回父级直到  ; children() 后代元素； find('span') 发现所有后代为span元素. 还有好多，同胞元素：

• siblings()
• next()
• nextAll()
• nextUntil()
• prev()
• prevAll()
• prevUntil()

 15、前端鉴权

使用基于 Token 的身份验证方法，大概的流程是这样的：

  1. 客户端使用用户名跟密码请求登录
  2. 服务端收到请求，去验证用户名与密码
  3. 验证成功后，服务端会签发一个 Token，再把这个 Token 发送给客户端
  4. 客户端收到 Token 以后可以把它存储起来，比如放在 Cookie 里或者 Local Storage 里
  5. 客户端每次向服务端请求资源的时候需要带着服务端签发的 Token
  6. 服务端收到请求，然后去验证客户端请求里面带着的 Token，如果验证成功，就向客户端返回请求的数据