碰到的一些面试问题

position的值， relative和absolute分别是相对于谁进行定位的？

• absolute :生成绝对定位的元素， 相对于最近一级的 定位不是 static 的父元素来进行定位。

• fixed （老IE不支持）生成绝对定位的元素，一般相对于浏览器窗口或 frame 进行定位。

• relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。

• static 默认值。没有定位，元素出如今正常的流中

• sticky 生成粘性定位的元素，容器的位置根据正常文档流计算得出

如何解决跨域问题

JSONP

原理是：动态插入script标签，经过script标签引入一个js文件，这个js文件载入成功后会执行咱们在url参数中指定的函数，而且会把咱们须要的json数据做为参数传入。

因为同源策略的限制，XmlHttpRequest只容许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，能够经过script标签实现跨域请求，而后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。

优势是兼容性好，简单易用，支持浏览器与服务器双向通讯。缺点是只支持GET请求。

JSONP：json+padding（内填充），顾名思义，就是把JSON填充到一个盒子里

<script>
    function createJs(sUrl){

        var oScript = document.createElement('script');
        oScript.type = 'text/javascript';
        oScript.src = sUrl;
        document.getElementsByTagName('head')[0].appendChild(oScript);
    }

    createJs('jsonp.js');

    box({
       'name': 'test'
    });

    function box(json){
        alert(json.name);
    }
<script>

经过修改document.domain来跨子域

将子域和主域的document.domain设为同一个主域.前提条件：这两个域名必须属于同一个基础域名!并且所用的协议，端口都要一致，不然没法利用document.domain进行跨域

主域相同的使用document.domain

使用window.name来进行跨域

window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的全部的页面都是共享一个window.name的，每一个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的全部页面中的

使用HTML5中新引进的window.postMessage方法来跨域传送数据

还有flash、在服务器上设置代理页面等跨域方式。我的认为window.name的方法既不复杂，也能兼容到几乎全部浏览器，这真是极好的一种跨域方法。

XML和JSON的区别？

(1).数据体积方面。

JSON相对于XML来说，数据的体积小，传递的速度更快些。

(2).数据交互方面。

JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互。

(3).数据描述方面。

JSON对数据的描述性比XML较差。

(4).传输速度方面。

JSON的速度要远远快于XML。

说说你对做用域链的理解

做用域链的做用是保证执行环境里有权访问的变量和函数是有序的，做用域链的变量只能向上访问，变量访问到window对象即被终止，做用域链向下访问变量是不被容许的。

建立ajax过程

(1)建立XMLHttpRequest对象,也就是建立一个异步调用对象.

(2)建立一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.

(3)设置响应HTTP请求状态变化的函数.

(4)发送HTTP请求.

(5)获取异步调用返回的数据.

(6)使用JavaScript和DOM实现局部刷新.

<script type="text/javascript" >
        var XHR = new XMLHttpRequest();
        XHR.open( 'get', './a.php');
        XHR.send(null);
        XHR.onreadystatechange = function () {
          if ( XHR.readyState === 4 ) {
            if ( XHR.status === 200 ) {
              alert(XHR.responseText);
            }
          }
        }
<script>

HTTP和HTTPS

HTTP协议一般承载于TCP协议之上，在HTTP和TCP之间添加一个安全协议层（SSL或TSL），这个时候，就成了咱们常说的HTTPS。

默认HTTP的端口号为80，HTTPS的端口号为443。

为何HTTPS安全

由于网络请求须要中间有不少的服务器路由器的转发。中间的节点均可能篡改信息，而若是使用HTTPS，密钥在你和终点站才有。https之因此比http安全，是由于他利用ssl/tls协议传输。它包含证书，卸载，流量转发，负载均衡，页面适配，浏览器适配，refer传递等。保障了传输过程的安全性

对前端模块化的认识

AMD 是 RequireJS 在推广过程当中对模块定义的规范化产出。

CMD 是 SeaJS 在推广过程当中对模块定义的规范化产出。

AMD 是提早执行，CMD 是延迟执行。

AMD推荐的风格经过返回一个对象作为模块对象，CommonJS的风格经过对module.exports或exports的属性赋值来达到暴露模块对象的目的。

CMD模块方式

define(function(require, exports, module) {

      // 模块代码

    });

谈谈性能优化问题

• 代码层面：避免使用css表达式，避免使用高级选择器，通配选择器。

• 缓存利用：缓存Ajax，使用CDN，使用外部js和css文件以便缓存，添加Expires头，服务端配置Etag，减小DNS查找等

• 请求数量：合并样式和脚本，使用css图片精灵，初始首屏以外的图片资源按需加载，静态资源延迟加载。

• 请求带宽：压缩文件，开启GZIP，

开启GPU加速
-webkit-transform:transition3d(0,0,0)

或者

-webkit-transform:translateZ(0);，

实际上是为了渲染3D样式，但咱们设置值为0后，并无真正使用3D效果，但浏览器却所以开启了GPU硬件加速模式。这种GPU硬件加速在当今PC机及移动设备上都已普及，在移动端的性能提高是至关显著地，因此建议你们在作动画时能够尝试一下开启GPU硬件加速。

栈和队列的区别?

栈的插入和删除操做都是在一端进行的，而队列的操做倒是在两端进行的。

队列先进先出，栈先进后出。

栈只容许在表尾一端进行插入和删除，而队列只容许在表尾一端进行插入，在表头一端进行删除

栈和堆的区别？

栈区（stack）— 由编译器自动分配释放 ，存放函数的参数值，局部变量的值等。

堆区（heap） — 通常由程序员分配释放， 若程序员不释放，程序结束时可能由OS回收。

堆（数据结构）：堆能够被当作是一棵树，如：堆排序；

栈（数据结构）：一种先进后出的数据结构。

快速排序

"快速排序"的思想很简单，整个排序过程只须要三步：

　　（1）在数据集之中，找一个基准点

　　（2）创建两个数组，分别存储左边和右边的数组

　　（3）利用递归进行下次比较

var arr = [1,4,7,8,5,2,6];
        function quickSort(arr) {
            if(arr.length <= 1) {
                return arr;
            }
            var num = Math.floor(arr.length / 2);
            var numValue = arr.splice(num, 1);
            var left = [],
                right = [];
            for (var i = 0; i < arr.length; i++) {
                if(arr[i] < numValue) {
                    left.push(arr[i])
                } else {
                    right.push(arr[i])
                }
            }
             return quickSort(left).concat(numValue,quickSort(right));//递归不断重复比较
        }
        console.log(quickSort(arr));

你以为jQuery或zepto源码有哪些写的好的地方

jquery源码封装在一个匿名函数的自执行环境中，有助于防止变量的全局污染，而后经过传入window对象参数，可使window对象做为局部变量使用，好处是当jquery中访问window对象的时候，就不用将做用域链退回到顶层做用域了，从而能够更快的访问window对象。一样，传入undefined参数，能够缩短查找undefined时的做用域链。

(function( window, undefined ) {

         //用一个函数域包起来，就是所谓的沙箱

         //在这里边var定义的变量，属于这个函数域内的局部变量，避免污染全局

         //把当前沙箱须要的外部变量经过函数参数引入进来

         //只要保证参数对内提供的接口的一致性，你还能够随意替换传进来的这个参数

        window.jQuery = window.$ = jQuery;

    })( window );

jquery将一些原型属性和方法封装在了jquery.prototype中，为了缩短名称，又赋值给了jquery.fn，这是很形象的写法。

有一些数组或对象的方法常常能使用到，jQuery将其保存为局部变量以提升访问速度。

jquery实现的链式调用能够节约代码，所返回的都是同一个对象，能够提升代码效率。

ES6的了解

• 新增模板字符串（为JavaScript提供了简单的字符串插值功能）、
• 箭头函数（操做符左边为输入的参数，而右边则是进行的操做以及返回的值Inputs=>outputs。）、
• for-of（用来遍历数据—例如数组中的值。）
• arguments对象可被不定参数和默认参数完美代替。
• ES6将promise对象归入规范，提供了原生的Promise对象。
• 增长了let和const命令，用来声明变量。
• 增长了块级做用域。let命令实际上就增长了块级做用域。
• ES6规定，var命令和function命令声明的全局变量，属于全局对象的属性；let命令、const命令、class命令声明的全局变量，不属于全局对象的属性。。
• 还有就是引入module模块的概念
• Symbol数据类型

js继承方式及其优缺点

原型链继承的缺点

一是字面量重写原型会中断关系，使用引用类型的原型，而且子类型还没法给超类型传递参数。

借用构造函数（类式继承）

借用构造函数虽然解决了刚才两种问题，但没有原型，则复用无从谈起。因此咱们须要原型链+借用构造函数的模式，这种模式称为组合继承

组合式继承

组合式继承是比较经常使用的一种继承方法，其背后的思路是 使用原型链实现对原型属性和方法的继承，而经过借用构造函数来实现对实例属性的继承。这样，既经过在原型上定义方法实现了函数复用，又保证每一个实例都有它本身的属性。

谈谈浮动和清除浮动

浮动的框能够向左或向右移动，直到他的外边缘碰到包含框或另外一个浮动框的边框为止。因为浮动框不在文档的普通流中，因此文档的普通流的块框表现得就像浮动框不存在同样。浮动的块框会漂浮在文档普通流的块框上。

浮动产生缘由

通常是一个盒子里使用了CSS float浮动属性，致使父级对象盒子不能被撑开，这样CSS float浮动就产生了

清除方法

1. 对父级设置适合CSS高度
2. clear:both清除浮动, 增长标签,不推荐使用. 在父盒子后添加一个空标签,标签样式为clear:both;
3. 父级div定义 overflow:hidden
4. 最高大上的伪元素清除

.clearfix { 
zoom:1;  //兼容ie 6 7
}
.clearfix:after { 
content:".";
display:block;
height:0;
clear:both; 
visibility:hidden;
}

用过哪些设计模式？

工厂模式：

主要好处就是能够消除对象间的耦合，经过使用工程方法而不是new关键字。将全部实例化的代码集中在一个位置防止代码重复。

工厂模式解决了重复实例化的问题 ，但还有一个问题,那就是识别问题，由于根本没法 搞清楚他们究竟是哪一个对象的实例。

function createObject(name,age,profession){//集中实例化的函数var obj = new Object();
    obj.name = name;
    obj.age = age;
    obj.profession = profession;
    obj.move = function () {
        return this.name + ' at ' + this.age + ' engaged in ' + this.profession;
    };
    return obj;
}
var test1 = createObject('trigkit4',22,'programmer');//第一个实例var test2 = createObject('mike',25,'engineer');//第二个实例

构造函数模式

使用构造函数的方法 ，即解决了重复实例化的问题 ，又解决了对象识别的问题，该模式与工厂模式的不一样之处在于：

1.构造函数方法没有显示的建立对象 (new Object());

2.直接将属性和方法赋值给 this 对象;

3.没有 renturn 语句。

你对闭包的理解

使用闭包主要是为了设计私有的方法和变量。闭包的优势是能够避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易形成内存泄露。在js中，函数即闭包，只有函数才会产生做用域的概念

闭包有三个特性：

1. 函数嵌套函数
2. 函数内部能够引用外部的参数和变量
3. 参数和变量不会被垃圾回收机制回收

Cookie的弊端

cookie虽然在持久保存客户端数据提供了方便，分担了服务器存储的负担，但仍是有不少局限性的。

弊端: 数量和长度的限制

1. IE6或更低版本最多20个cookie
2. IE7和以后的版本最后能够有50个cookie。
3. Firefox最多50个cookie
4. chrome和Safari没有作硬性限制
5. cookie的最大大约为4096字节，为了兼容性，通常不能超过4095字节。
6. 安全性问题。若是cookie被人拦截了，那人就能够取得全部的session信息。即便加密也与事无补，由于拦截者并不须要知道cookie的意义，他只要原样转发cookie就能够达到目的了。
7. 有些状态不可能保存在客户端。例如，为了防止重复提交表单，咱们须要在服务器端保存一个计数器。若是咱们把这个计数器保存在客户端，那么它起不到任何做用。

优势: 极高的扩展性和可用性

1. 经过良好的编程，控制保存在cookie中的session对象的大小。
2. 经过加密和安全传输技术（SSL），减小cookie被破解的可能性。
3. 只在cookie中存放不敏感数据，即便被盗也不会有重大损失。
4. 控制cookie的生命期，使之不会永远有效。偷盗者极可能拿到一个过时的cookie。

浏览器本地存储

在较高版本的浏览器中，js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage来取代globalStorage。

html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问而且当会话结束后数据也随之销毁。所以sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

而localStorage用于持久化的本地存储，除非主动删除数据，不然数据是永远不会过时的。

web storage和cookie的区别

Web Storage的概念和cookie类似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，而且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还须要指定做用域，不能够跨域调用。

除此以外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie须要前端开发者本身封装setCookie，getCookie。

可是cookie也是不能够或缺的：cookie的做用是与服务器进行交互，做为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生

浏览器的支持除了IE７及如下不支持外，其余标准浏览器都彻底支持(ie及FF需在web服务器里运行)，值得一提的是IE老是办好事，例如IE七、IE6中的userData其实就是javascript本地存储的解决方案。经过简单的代码封装能够统一到全部的浏览器都支持web storage。

localStorage和sessionStorage都具备相同的操做方法，例如setItem、getItem和removeItem等

　cookie 和session 的区别：

1.　cookie数据存放在客户的浏览器上，session数据放在服务器上。
2.　cookie不是很安全，别人能够分析存放在本地的COOKIE并进行COOKIE欺骗
考虑到安全应当使用session。
3.　session会在必定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能
考虑到减轻服务器性能方面，应当使用COOKIE。
4.　个cookie保存的数据不能超过4K，不少浏览器都限制一个站点最多保存20个cooki。
5.　因此我的建议：

将登录信息等重要信息存放为SESSION

其余信息若是须要保留，能够放在COOKIE中

　display:none和visibility:hidden的区别？

display:none 隐藏对应的元素，在文档布局中再也不给它分配空间，它各边的元素会合拢，就当他历来不存在。

visibility:hidden 隐藏对应的元素，可是在文档布局中仍保留原来的空间。

　position:absolute和float属性的异同

共同点：对内联元素设置float和absolute属性，可让元素脱离文档流，而且能够设置其宽高。

不一样点：float仍会占据位置，absolute会覆盖文档流中的其余元素。

　介绍一下box-sizing属性？

box-sizing属性主要用来控制元素的盒模型的解析模式。默认值是content-box。

-　content-box：让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content的宽度/高度决定，设置width/height属性指的是content部分的宽/高

-　border-box：让元素维持IE传统盒模型（IE6如下版本和IE6~7的怪异模式）。设置width/height属性指的是border + padding + content

标准浏览器下，按照W3C规范对盒模型解析，一旦修改了元素的边框或内距，就会影响元素的盒子尺寸，就不得不从新计算元素的盒子尺寸，从而影响整个页面的布局。

　CSS 选择符有哪些？哪些属性能够继承？优先级算法如何计算？ CSS3新增伪类有那些？

1. id选择器（ # myid）
2. 类选择器（.myclassname）
3. 标签选择器（div, h1, p）
4. 相邻选择器（h1 + p）
5. 子选择器（ul > li）
6. 后代选择器（li a）
7. 通配符选择器（ * ）
8. 属性选择器（a[rel = "external"]）
9. 伪类选择器（a: hover, li:nth-child）

优先级

!important > 内联 > id > class > tag

important 比 内联优先级高,但内联比 id 要高

CSS3新增伪类举例：

p:first-of-type 选择属于其父元素的首个 <p> 元素的每一个 <p> 元素。
p:last-of-type  选择属于其父元素的最后 <p> 元素的每一个 <p> 元素。
p:only-of-type  选择属于其父元素惟一的 <p> 元素的每一个 <p> 元素。
p:only-child    选择属于其父元素的惟一子元素的每一个 <p> 元素。
p:nth-child(2)  选择属于其父元素的第二个子元素的每一个 <p> 元素。
:enabled  :disabled 控制表单控件的禁用状态。
:checked        单选框或复选框被选中。

CSS3有哪些新特性？

CSS3实现圆角（border-radius），阴影（box-shadow），

对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）

transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜

增长了更多的CSS选择器  多背景 rgba

在CSS3中惟一引入的伪元素是::selection.

媒体查询，多栏布局

border-image

CSS3中新增了一种盒模型计算方式：box-sizing。盒模型默认的值是content-box, 新增的值是padding-box和border-box，几种盒模型计算元素宽高的区别以下：

content-box（默认）

布局所占宽度Width：

Width = width + padding-left + padding-right + border-left + border-right

布局所占高度Height:

Height = height + padding-top + padding-bottom + border-top + border-bottom

padding-box

布局所占宽度Width：

Width = width(包含padding-left + padding-right) + border-top + border-bottom

布局所占高度Height:

Height = height(包含padding-top + padding-bottom) + border-top + border-bottom

border-box

布局所占宽度Width：

Width = width(包含padding-left + padding-right + border-left + border-right)

布局所占高度Height:

Height = height(包含padding-top + padding-bottom + border-top + border-bottom)

对BFC规范的理解？

BFC，块级格式化上下文，一个建立了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个BFC中的两个毗邻的块级盒在垂直方向（和布局方向有关系）的margin会发生折叠。

（W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行布局，以及与其余元素的关系和相互做用。

说说你对语义化的理解？

1，去掉或者丢失样式的时候可以让页面呈现出清晰的结构

2，有利于SEO：和搜索引擎创建良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来肯定上下文和各个关键字的权重；

3，方便其余设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；

4，便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，能够减小差别化。

DOM操做——怎样添加、移除、移动、复制、建立和查找节点。

建立新节点

createDocumentFragment()    //建立一个DOM片断
  createElement()   //建立一个具体的元素
  createTextNode()   //建立一个文本节点

添加、移除、替换、插入

appendChild()
  removeChild()
  replaceChild()
  insertBefore() //并无insertAfter()

查找

getElementsByTagName()    //经过标签名称
  getElementsByName()    //经过元素的Name属性的值(IE容错能力较强，
  会获得一个数组，其中包括id等于name值的)
  getElementById()    //经过元素Id，惟一性.

html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

HTML5 如今已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增长。

拖拽释放(Drag and drop) API

语义化更好的内容标签（header,nav,footer,aside,article,section）

音频、视频API(audio,video)

画布(Canvas) API

地理(Geolocation) API

本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；

sessionStorage 的数据在浏览器关闭后自动删除

表单控件，calendar、date、time、email、url、search

新的技术webworker, websocket, Geolocation

移除的元素

纯表现的元素：basefont，big，center，font, s，strike，tt，u；

对可用性产生负面影响的元素：frame，frameset，noframes；

支持HTML5新标签：

IE8/IE7/IE6支持经过document.createElement方法产生的标签，
能够利用这一特性让这些浏览器支持HTML5新标签，
固然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
   <!--[if lt IE 9]>
   <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
   <![endif]-->
如何区分： DOCTYPE声明\新增的结构元素\功能元素

null和undefined的区别？

null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。

当声明的变量还未被初始化时，变量的默认值为undefined。

null用来表示还没有存在的对象，经常使用来表示函数企图返回一个不存在的对象。

undefined表示"缺乏值"，就是此处应该有一个值，可是尚未定义。典型用法是：

（1）变量被声明了，但没有赋值时，就等于undefined。

（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。

（3）对象没有赋值的属性，该属性的值为undefined。

（4）函数没有返回值时，默认返回undefined。
null表示"没有对象"，即该处不该该有值。典型用法是：

（1） 做为函数的参数，表示该函数的参数不是对象。

（2） 做为对象原型链的终点。

new操做符具体干了什么呢?

一、建立一个空对象，而且 this 变量引用该对象，同时还继承了该函数的原型。

二、属性和方法被加入到 this 引用的对象中。

三、新建立的对象由 this 所引用，而且最后隐式的返回 this 。

js延迟加载的方式有哪些？

defer和async、动态建立DOM方式（建立script，插入到DOM中，加载完毕后callBack）、按需异步载入js

　哪些操做会形成内存泄漏？

内存泄漏指任何对象在您再也不拥有或须要它以后仍然存在。

垃圾回收器按期扫描对象，并计算引用了每一个对象的其余对象的数量。若是一个对象的引用数量为 0（没有其余对象引用过该对象），或对该对象的唯一引用是循环的，那么该对象的内存便可回收。

setTimeout 的第一个参数使用字符串而非函数的话，会引起内存泄漏。

闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

　列举IE 与其余浏览器不同的特性？

• IE支持currentStyle，FIrefox使用getComputStyle
• IE 使用innerText，Firefox使用textContent
• 滤镜方面：IE:filter:alpha(opacity= num)；Firefox：-moz-opacity:num
• 事件方面：IE：attachEvent：火狐是addEventListener
• 鼠标位置：IE是event.clientX；火狐是event.pageX
• IE使用event.srcElement；Firefox使用event.target
• IE中消除list的原点仅需margin:0便可达到最终效果；FIrefox须要设置margin:0;padding:0以及list-style:none
• CSS圆角：ie7如下不支持圆角

javascript对象的几种建立方式

1，工厂模式

2，构造函数模式

3，原型模式

4，混合构造函数和原型模式

5，动态原型模式

6，寄生构造函数模式

7，稳妥构造函数模式

javascript继承的6种方法

1，原型链继承

2，借用构造函数继承

3，组合继承(原型+借用构造)

4，原型式继承

5，寄生式继承

6，寄生组合式继承

GET和POST的区别，什么时候使用POST？

GET：通常用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，通常在2000个字符

POST：通常用于修改服务器上的资源，对所发送的信息没有限制。


GET方式须要使用Request.QueryString来取得变量的值，而POST方式经过Request.Form来获取变量的值，

也就是说Get是经过地址栏来传值，而Post是经过提交表单来传值。

然而，在如下状况中，请使用 POST 请求：

没法使用缓存文件（更新服务器上的文件或数据库）

向服务器发送大量数据（POST 没有数据量限制）

发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

ajax的缺点和在IE下的问题？

ajax的缺点

一、ajax不支持浏览器back按钮。

二、安全问题 AJAX暴露了与服务器交互的细节。

三、对搜索引擎的支持比较弱。

四、破坏了程序的异常机制。

五、不容易调试。

说说你对Promise的理解

依照 Promise/A+ 的定义，Promise 有四种状态：

pending: 初始状态, 非 fulfilled 或 rejected.

fulfilled: 成功的操做.

rejected: 失败的操做.

settled: Promise已被fulfilled或rejected，且不是pending

另外， fulfilled 与 rejected 一块儿合称 settled。

Promise 对象用来进行延迟(deferred) 和异步(asynchronous ) 计算。

Promise 的构造函数

构造一个 Promise，最基本的用法以下：

var promise = new Promise(function(resolve, reject) {

    if (...) {  // succeed

        resolve(result);

    } else {   // fails

        reject(Error(errMessage));

    }
});

Promise 实例拥有 then 方法（具备 then 方法的对象，一般被称为 thenable）。它的使用方法以下：

promise.then(onFulfilled, onRejected)

接收两个函数做为参数，一个在 fulfilled 的时候被调用，一个在 rejected 的时候被调用，接收参数就是 future，onFulfilled 对应 resolve, onRejected 对应 reject。

实现一个函数clone，能够对JavaScript中的5种主要的数据类型（包括Number、String、Object、Array、Boolean）进行值复制

Object.prototype.clone = function(){

            var o = this.constructor === Array ? [] : {};

            for(var e in this){

                    o[e] = typeof this[e] === "object" ? this[e].clone() : this[e];

            }

            return o;
    }

编写一个方法 求一个字符串的字节长度

假设：一个英文字符占用一个字节，一个中文字符占用两个字节

function GetBytes(str){
        var len = str.length;
        var bytes = len;
        for(var i=0; i<len; i++){
            if (str.charCodeAt(i) > 255) bytes++;
        }
        return bytes;
    }

alert(GetBytes("你好,as"));

说说mongoDB和MySQL的区别

MySQL是传统的关系型数据库，MongoDB则是非关系型数据库

mongodb以BSON结构（二进制）进行存储，对海量数据存储有着很明显的优点。

对比传统关系型数据库,NoSQL有着很是显著的性能和扩展性优点，与关系型数据库相比，MongoDB的优势有：

• 弱一致性（最终一致），更能保证用户的访问速度：
• 文档结构的存储方式，可以更便捷的获取数据。

attribute和property的区别是什么？

attribute是dom元素在文档中做为html标签拥有的属性；

property就是dom元素在js中做为对象拥有的属性。

因此：

对于html的标准属性来讲，attribute和property是同步的，是会自动更新的，

可是对于自定义的属性来讲，他们是不一样步的

请解释什么是事件代理(事件委托)

事件代理（Event Delegation），又称之为事件委托。是 JavaScript 中经常使用绑定事件的经常使用技巧。顾名思义，“事件代理”便是把本来须要绑定的事件委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好处是能够提升性能。

说说你对MVC和MVVM的理解

MVC

View 传送指令到 Controller

Controller 完成业务逻辑后，要求 Model 改变状态

Model 将新的数据发送到 View，用户获得反馈
全部通讯都是单向的。

Angular它采用双向绑定（data-binding）：View的变更，自动反映在 ViewModel，反之亦然。

组成部分Model、View、ViewModel

View：UI界面

ViewModel：它是View的抽象，负责View与Model之间信息转换，将View的Command传送到Model；

Model：数据访问层