收集的前端面试题和答案

HTML CSS

CSS hack原理及常用hack技巧
原理：利用不同浏览器对CSS的支持和解析结果不一样编写针对特定浏览器样式。常见的hack有1）属性hack。2）选择器hack。3）IE条件注释

• IE条件注释：适用于[IE5, IE9]常见格式如下

<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->

• 选择器hack：不同浏览器对选择器的支持不一样

/***** Selector Hacks ******/
/* IE6 and below */
 * html #uno  { color: red }
/* IE7 */
*:first-child+html #dos { color: red } 
/* IE7, FF, Saf, Opera  */
html>body #tres { color: red }
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }
/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }
/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {  color: red }
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 #diez  { color: red  }
}
/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
 #veintiseis { color: red  }
}
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece  { color: red  }
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red  }
/* Everything but IE6-8 */
:root *> #quince { color: red  }
/* IE7 */
 *+html #dieciocho {  color: red }
/* Firefox only. 1+ */
#veinticuatro,  x:-moz-any-link  { color: red }
/* Firefox 3.0+ */
#veinticinco,  x:-moz-any-link, x:default  { color: red  }

• 属性hack：不同浏览器解析bug或方法

/* IE6 */
#once { _color: blue }
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
/* Everything but IE6 */
#diecisiete { color/**/: blue }
/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */

JavaScript

Cookie, LocalStorage 与 SessionStorage异同

HTTP Cookie（也叫Web cookie或者浏览器Cookie）是服务器发送到用户浏览器并保存在浏览器上的一块数据，它会在浏览器下一次发起请求时被携带并发送到服务器上。比较经典的，可以它用来确定两次请求是否来自于同一个浏览器，从而能够确认和保持用户的登录状态。Cookie的使用使得基于无状态的HTTP协议上记录稳定的状态信息成为了可能

不同

1. cookie由服务端生成，用于标识用户身份；而两个storage用于浏览器端缓存数据
2. 一般情况下浏览器端不会修改 cookie，但会频繁操作两个storage
   cookie有path概念，子路径可以访问父路径 cookie，父路径不能访问子路径 cookie
3. 有效期： cookie在设置的有效期内有效，默认为浏览器关闭；sessionStorage在窗口关闭前有效，localStorage长期有效，直到用户删除
4. 浏览器不能保存超过300个 cookie，单个服务器不能超过20个，每个 cookie不能超过4k。web storage大小支持能达到5M
5. 共享：sessionStorage不能共享，localStorage在同源文档之间共享， cookie在同源且符合path规则的文档之间共享
   如果保存了 cookie的话，http请求中一定会带上；而两个storage可以由脚本选择性的提交
6. 安全性方面， cookie中最好不要放置任何明文的东西。两个storage的数据提交后在服务端一定要校验

相同
三者都是键值对的集合
都会在浏览器端保存，有大小限制，同源限制

什么闭包,闭包有什么用

• 1.闭包是在某个作用域内定义的函数，它可以访问这个作用域内的变量。2.闭包是指可以访问另一个函数作用域中变量的函数
  闭包作用域链通常包括三个部分：
  函数本身作用域。
  闭包定义时的作用域。
  全局作用域。
• 闭包常见用途：
  创建特权方法用于访问控制
  事件处理程序及回调
  创建私有变量,避免变量的全局污染,让一个变量驻扎在内存中,私有成员的存在 可以读取函数内部的变量

!function(){
   var lives = 50
   window.奖励一条命 = function(){
      lives += 1
   }
   window.死一条命 = function(){
    lives -= 1
   }
}();
function a(){
    var a=1;
    a++;
    console.log(a); //2 2 2
}
!function aa(){
     var a=1;
     return function(){
       a++;
      console.log(a); //2 3 4
     }
}();
var c=(function(){
    var a=1;
    function bb(){
        a++;
        console.log(a);
    }
    function cc(){
      a++;
      console.log(a);
  }
    return {
      bb:bb,
      cc:cc
    }
})();