来自百度的面试总结

百度面试机会难得，如果你有，请尽自己最大努力抓住，不然别怪人家不给你机会，姐只能帮你到这儿了。。。

1、三列布局，两边宽度固定，中间宽度自适应(假设是200px)

这道题博主给出了四种办法，回来自测了一下也都是可行的。但是面试官一直在追问还有吗？如果你还有更优的方法，欢迎留言。

 <div id = "left">我是左边</div>  
 <div id = "right">我是右边</div>  
 <div id = "center">我是中间</div>

1）两边绝对定位，左边left:0,右边right:0,中间margin左右为200px;

#left,#right{width: 200px;height: 200px; background-color: #ffe6b8;position: absolute;

top:2px;

}  
#left{left:0px;}  
#right{right: 0px;}  
#center{margin:2px 200px ;background-color: #eee;height: 200px; }  

问题,中间div和两侧div有空隙,是因为默认body有margin,样式初始化body{margin:0}即可;当屏幕小于200px时会出现压缩。

2）利用float,左侧float:left;右侧float:right;定宽,中间用margin。

#left,#right{ width: 200px;height: 200px; background-color: #ffe6b8 }  
#left{float: left;}  
#right{float: right;}  
#center{margin: 0 200px;height: 200px; background-color: #a0b3d6} 

注意：center一定要放在 最下面。

3)第三种方法网上又叫"圣杯布局",原理是margin负值法。需要在center元素外部包含一个div。wrap,left ,right 都要float:left;wrap要设置宽度,并且这个宽度要和left块的margin负值进行配合。

<div id = "wrap">
<div id = "center">我是中间</div>
</div>
<div id = "left">我是左面</div>
<div id = "right">我是右面</div>

#wrap{ width: 100%;height: 200px; background-color: #fff;float: left;}  
#wrap #center{ margin:0 200px; height: 200px;background-color: #ffe6b8; }  
#left,#right{ float: left;width: 200px;height: 200px;background-color: darkorange }  
#left {margin-left: -100%; background-color: lightpink}  
#right{margin-left: -200px;} 

注意：center要写在最前面。

4）最后可以采用css3新特性,display:flex;感觉这真的是一个很牛的属性。它的出现也正是为了解决多列布局的问题。　

 <div id = "box">  
         <div id = "left">我是左面</div>  
         <div id = "center">我是中间</div>  
         <div id = "right">我是右面</div>  
    </div> 

body{ margin: 0;padding: 0;}
#box{width:100%;display: flex; height: 400px;}  
#left,#right{width: 200px;height: 400px; background-color: blue}  
#center{ flex:1; height: 400px; background-color: red} 

注意：center一定要放中间。flex是所占的比例,如果left,right 也加上flex:1;则三列等分。

2、清除浮动的方法

1）添加新的元素 应用 clear：both;

2)  父级div定义 overflow: auto;

3)  伪元素:after 方法（注意：作用于浮动元素的父亲）;

#content :after {clear:both;content:'  ';display:block;width: 0;height: 0;visibility:hidden;} 

3、事件委托

利用了冒泡的原理，从点击的元素开始，递归方式的向父元素传播事件，这样做的好处是对于大量要处理的元素，不必为每个元素都绑定事件，只需要在他们的父元素上绑定一次即可，提高性能。还有一个好处就是可以处理动态插入dom中的元素，直接绑定的方式是不行的。

4、如何防止xss攻击/sql注入

 1)HttpOnly:JavaEE给Cookie添加HttpOnly的代码：

response.setHeader("Set-Cookie","cookiename=value; Path=/;Domain=domainvalue;Max-Age=seconds;HTTPOnly");

2)　输入检查,对客户输入的信息进行校验检测。

3）编码转义：对于（&、<、>、"、'、/）这类字符，进行编码转义。

还有一些算法的问题，下一篇统一归类写算法好了。

5、怎么让一个div 水平居中 

　父级text-align:center;该div margin:0 auto;即可。

body{ text-align:center;border:1px solid red;} 
.div{ margin:0 auto; width:400px; height:100px; border:1px solid #000}

6、怎么让一个div 水平垂直居中

http://www.cnblogs.com/dushao/p/5999239.html 介绍的很详细。

 

7、深度克隆

 第二部分：

1、盒子模型

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

扩展：解决margin塌陷的问题，①并列的div 加{border:1px solid}，②父子元素加{overflow:只要不为visible}

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);
      }
    }
};
let 用法
for(let i = 0; i <lis.length; i++) { 

　　lis[i].addEventListener('click', function () { 

　　console.log(i); }, false); 
}

或者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 这里介绍的很好，自己可以研究一下.js 是单线程的，所有任务执行需要排队，同步任务在主线程上形成一个执行栈，除了主线程外，还有一个任务队列，当主线程的任务执行完毕后就会执行任务队列里面的任务，这个过程不断循环，click，load ，done都会产生异步任务事件，还有定时器。

 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);

扩展：原生js 实现New 方法

//通过分析原生的new方法可以看出，在new一个函数的时候，
// 会返回一个func同时在这个func里面会返回一个对象Object，
// 这个对象包含父类func的属性以及隐藏的__proto__
function New(f) {
    //返回一个func
    return function () {
        var o = {"__proto__": f.prototype};
        f.apply(o, arguments);//继承父类的属性

        return o; //返回一个Object
    }
}

js 的继承方式：　

原型链继承（子实例有属性共享的问题）

Child.prototype = new Parent();

var child = new Child();

借用构造函数

   // 儿子类
      function Child() {
          Parent.call(this);
         // 定义自己的属性
         this.value = 'test';
     }
     var child1 = new Child();
     var child2 = new Child();　　

　组合继承

参考：https://www.cnblogs.com/diligentYe/p/6413450.html

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，如果验证成功，就向客户端返回请求的数据

16. css 设置图片自适应

（1）background-size:100% 100%;

<div class="imgBox">
</div>

.imgBox{
  height: 400px;
  width: 400px;
  border: 1px solid #ccc;
  background: url("../../assets/logo.png") center no-repeat;
  background-size: 100% 100%;
}

（2）设置图片的宽，高100%

<div class="img-box">
     <img src="../../assets/logo.png" alt="">
  </div>

.img-box{
  height: 200px;
  width: 400px;
  border: 1px solid #ccc;
  img{
    width:100%;
    height:100%;
  }
}

17. BFC 是什么？

块级格式化上下文，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。也可以说BFC就是一个作用范围。可以把它理解成是一个独立的容器，并且这个容器的里box的布局，与这个容器外的毫不相干。