面试问题总结
HTML5兼容性问题
为了使HTML5兼容IE8及更早的IE版本浏览器，加入一段注释，读取html5shiv来解决兼容性问题。
<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
HTML5新特性
绘画 canvas;
用于媒介回放的 video 和 audio 元素;
本地离线存储，localStorage 长期存储数据，浏览器关闭后数据不丢失; sessionStorage 的数据在浏览器关闭后自动删除;
语义化更好的内容元素，比如 article、footer、header、nav、section;
表单控件，calendar、date、time、email、url、search;
新的技术，Web Worker, Web Socket
Canvas
moveTo(x,y)：起点，(x, y)为指定点
lineTo(x,y)：从上一个指定点画到另一个点，指定点变成这个点
closePath()：从上一个指定点画回到起点
stroke()：真正画的动作（必须有它）
fillStyle：填充颜色
fillRect(x, y, width, height)：矩形填充方式，x y为填充的矩形的左上角坐标，后两个参数为填充的矩形的大小
HTML5拖放
1. 首先为了使元素可拖动，把draggable属性设置为true
<img id="drag1" src="img_logo.gif" draggable="true">
2. 然后规定当元素被拖动时发生的动作：ondragstart事件
ev.dataTransfer.setData()方法设置被拖动元素的数据类型和值（这里把它的id存到Text中）
var item = document.getElementById("drag1"); item.ondragstart = function(ev) { ev.dataTransfer.setData("Text",ev.target.id); }
3. 接收的元素设置允许放置：ondragover事件
receiver.ondragover = function(ev) { ev.preventDefault(); }
4. 进行放置：ondrop事件
receiver.ondrop = function(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); }
调用ev.preventDefault来避免浏览器对数据的默认处理（ondrop事件默认是以链接形式打开）
通过ev.dataTransfer.getData(“Text”)重新拿回之前设置的值，即前边item的id
将被拖元素追加到接收元素中（receiver）
模块化
(function(){ var Widget = function(){....}; // AMD && CMD if(typeof define === 'function'){ define(function(){ return Widget; }); // CommonJS }else if(typeof module !== "undefined" && module !== null){ module.exports = Widget; // window }else{ window.Widget = Widget; } })(); 作者：Treri 链接：https://www.zhihu.com/question/23321329/answer/24199265 来源：知乎 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
CommonJs
CommonJs 是服务器端模块的规范，Node.js采用了这个规范。
CommonJS中的require是同步的。模块系统需要同步读取模块文件内容，并编译执行以得到模块接口。但在浏览器端，加载 JavaScript 最佳、最容易的方式是在 document 中插入<script> 标签。但脚本标签天生异步，传统 CommonJS 模块在浏览器环境中无法正常加载。
像Node.js主要用于服务器的编程，加载的模块文件一般都已经存在本地硬盘，所以加载起来比较快，不用考虑异步加载的方式，所以CommonJS规范比较适用。
AMD
异步模块定义规范（Asynchronous Module Definition）制定了定义模块的规则，这样模块和模块的依赖可以被异步加载。这和浏览器的异步加载模块的环境刚好适应（浏览器同步加载模块会导致性能、可用性、调试和跨域访问等问题）。
AMD推崇依赖前置，换句话说，在解析和执行当前模块之前，模块作者必须指明当前模块所依赖的模块。
define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好 a.doSomething() // ... b.doSomething() // ... });
代表：requireJS
参考：AMD规范
CMD
CMD（Common Module Definition）可以说是AMD的一种变体。它和AMD的主要区别是CMD推崇依赖就近（按需加载），可以把依赖写进你的代码中的任意一行。
define(function(require, exports, module) { var a = require('./a') a.doSomething() var b = require('./b') b.doSomething() })
代码在运行时，首先是不知道依赖的，需要遍历所有的require关键字，找出后面的依赖。具体做法是将function toString后，用正则匹配出require关键字后面的依赖。显然，这是一种牺牲性能来换取更多开发便利的方法。
参考：CMD规范 AMD和CMD的区别
CSS3
圆角：boader-radius
盒阴影：box-shadow
边界图片：boarder-image
背景图像大小：background-size
背景图像定位：background-image
线性渐变：linear-gradient 默认从上到下，0deg指从下到上，rgba(255,0,0,0)的最后一个0代表透明度，另外可以在颜色后面加上百分数代表渐变结点位置。
径向渐变：radial-gradient
变换：transform
- transform: translate(50px, 100px) ：右移50px，下移100px
- transform: rotate(30deg)：顺时针旋转30度
- transform: scale(2, 4)：宽变为2倍，高变为4倍
过渡：transition: property, duration, timing, delay 属性，持续时间（不可省），快进慢出之类（可省），延迟（可省）
动画：
- @keyframes：定义动画的名字、from和to
- animation：哪个动画（上面定义的名字），持续时间
盒模型：
- box-sizing: border-box：使宽高包括内边距和边框
- box-sizing: content-box：默认值
圣杯布局和双飞翼布局
原生Ajax
1. 创建XHR对象
var xmlhttp; if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }
2. 向服务器发送请求
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
open的第三个参数：true——异步，false——同步
3. 服务器响应
- onreadystatechange 事件：当 readyState 属性改变时，就会触发该事件
- xmlhttp.readyState：XMLHttpRequest 的状态，从0到4发生变化（4代表全部数据接收完成）
- xmlhttp.status：响应的HTTP状态（200表示成功）
- xmlhttp.responseText：响应返回的文本
xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.getElementById("myDiv").innerHTML = xmlhttp.responseText; } }
4. 取消请求：xmlhttp.abort()
跨域
性能优化
