前几天在豪情大大的前端群里，有个朋友发了几道前端的面试题，闲来无事，自己答了下。
css3动画和JS动画优劣？
1. css3动画只兼容Ie10+，js动画几乎兼容所有浏览器；
2.js动画更灵活，css3动画更简单
3.js动画复用性高
4.时间尺度上，css动画粒度比较粗，js动画可以更精细；
5.帧速不好的浏览器CSS动画可以做到优雅降级，js代码还需要写额外的代码
6.在某些条件下，css动画性能优于JS动画；（webkit内核的浏览器，js执行昂贵的任务，不引起layout和repaint情况下）
7.css3有天然的时间支持如（animationENd和transitionEnd）
假若你有 5 个不同的样式文件 (stylesheets), 整合进网站的最好方式是?
根据class命名规则写样式，这样样式不会冲突，提取公共的样式，进行合并，非公共的单独拎出来。然后打包压缩一下就行了，若每个文件都很大，就需要分模块加载。
请说出三种减少页面加载时间的方法。(加载时间指感知的时间或者实际加载时间)
1.减少HTTP请求；
2.合并压缩Js/css文件；
3.使用缓存manifest；
4.服务器端开启gzip；
5.使用CDN，用户可以就近获取所需要的资源，访问速度有保障，稳定性也有保障
6.外部JS和CSS放底下
7.尽可能少的操作DOM，某些需要重复操作的DOM可以放变量里
请描述伪元素 (pseudo-elements) 及其用途。
伪类用于选择那些DOM树中不存在的不容易被常规选择器找到的信息 :hover :active :focus :link
伪元素用于将某些特殊效果添加到选择器上； 如::before ::after
伪元素用于表现非正文、装饰性的东西，利于HTML语义化；
你有兼容 retina 屏幕的经历吗？如果有，在什么地方使用了何种技术？
淘宝的lib-flexible库;
请问为何要使用 translate() 而非 absolute position，或反之的理由？为什么？
从动画来讲，transform可以让GPU参与运算，FPS更高；absolute最小动画单位是1px，而transform可以更小，使动画更平滑，
从其他角度来讲，就是absolute必须有relative的父盒子；
你是如何组织自己的代码？是使用模块模式，还是使用经典继承的方法？（这个是百度后的答案）
对内：模块模式；
对外：继承
如何实现下列代码：
[1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5]
Array.prototype.duplicator = function (){
return this.concat(this)
}
var aaa = [1,2,3];
var aaa= aaa.duplicator();
console.log(aaa); //[1,2,3,1,2,3]
解释 function foo() {} 与 var foo = function() {} 用法的区别
1.函数声明必须有函数名字，2.可以在任何地方调用，即存在变量提升
3.函数表达式前后两个名称可以相同也可以不同；4.函数表达式后边那个名字可以省略；
5.表达式后面的名字只能在函数内部使用；6.函数只能在声明后才能调用
问题：如何实现以下函数？
add(2)(5); // 7
function add(a){
var c = function (b){
return a+b;
}
return c;
}
console.log(add(1)(2)); //3
请解释 JSONP 的工作原理，以及它为什么不是真正的 Ajax。
json是一种数据格式；jsonp是一种数据调用的方法；
1.利用script标签没有跨域限制的特性，在脚本里创建一个script标签，地址指向第三方API，如
<script src="http://www.example.net/api?param1=1¶m2=2"></script> （src属性皆不受跨域限制）
2.提供一个回调函数来接收数据；第三方产生的数据为json数据的包装，形如callback({"name":"hax","gender":"Male"}) ，回调函数可通过URL参数传递callback=fn
3.这样浏览器会调用callback函数，并传递解析后的json对象作为参数。本站脚本可在callback函数里处理传入的数据；
ajax本质是通过XmlHttpRequest获取服务器信息，而JSONP核心则是动态添加script标签来调用服务器提供的JS脚本；