前端-网上收集到的

时间 2019-11-11

标签前端网上收集繁體版

原文原文链接

参考：
碰到的一些面试问题 - CSDN 博客javascript

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

absolute : 生成绝对定位的元素，相对于最近一级的定位不是 static 的父元素来进行定位。
fixed （老 IE 不支持）生成绝对定位的元素，一般相对于浏览器窗口或 frame 进行定位。
relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。
static 默认值。没有定位，元素出如今正常的流中
sticky 生成粘性定位的元素，容器的位置根据正常文档流计算得出

如何解决跨域问题

1.JSONP

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

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

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

Jsonp(JSON with Padding) 是 json 的一种 "使用模式"，可让网页从别的域名（网站）那获取资料，即跨域读取数据。html5

前端：java

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script>
    function callback(data){
      document.write('jsonp获取到的数据：'+JSON.stringify(data));
    }
  </script>
  <script type="text/javascript" src="http://localhost:8848"></script>
</body>
</html>

后端（Node.js）：mysql

const http = require('http')

http.createServer(function(request, response){  
  response.write('callback('+JSON.stringify({a:123,b:456})+')');
  response.end();
}).listen(8848);

2. 经过修改 document.domain 来跨域

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

eg：css3

www.domain.com
blog.domain.com
设置document.domain为domain.com  


qqq.www.domain.com
ppp.www.domain.com
设置document.domain为www.domain.com

3. 使用 window.name 来进行跨域

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

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

5.flash、在服务器上设置代理页面等跨域方式。

XML 和 JSON 的区别？

数据体积方面。
JSON 相对于 XML 来说，数据的体积小，传递的速度更快些。
数据交互方面。
JSON 与 JavaScript 的交互更加方便，更容易解析处理，更好的数据交互。
数据描述方面。
JSON 对数据的描述性比 XML 较差。
传输速度方面。
JSON 的速度要远远快于 XML。

说说你对做用域链的理解

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

建立 AJAX 过程

建立 XMLHttpRequest 对象, 也就是建立一个异步调用对象.
建立一个新的 HTTP 请求, 并指定该 HTTP 请求的方法、URL 及验证信息.
设置响应 HTTP 请求状态变化的函数.
发送 HTTP 请求.
获取异步调用返回的数据.
使用 JavaScript 和 DOM 实现局部刷新.

Node.js：

const http = require('http')
const url = require('url')

http.createServer(function(request, response){
  var params = url.parse(request.url, true).query;
  if(undefined == params.t){
var html = `
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script>
    var XHR = new XMLHttpRequest();
    XHR.open('get', 'http://localhost:8848?t=a');
    XHR.send(null);
    XHR.onreadystatechange = function () {
        if (XHR.readyState === 4) {
            if ( XHR.status === 200 ) {
              document.write('AJAX获取到的内容为：'+XHR.responseText);
            }
        }
    }
  </script>
</body>
</html>`;
    response.write(html);
    response.end();
  }
  if('a' == params.t){
    response.write('hello world');
    response.end();
  }
}).listen(8848);

HTTP 和 HTTPS

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

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

为何 HTTPS 安全

由于网络请求须要有不少的服务器路由器的转发。中间的节点均可能篡改信息，而若是使用 HTTPS，密钥在你和终点站才有。https 之因此比 http 安全，是由于他利用 SSL 或 TSL 协议传输。它包含证书，卸载，流量转发，负载均衡，页面适配，浏览器适配，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 硬件加速模式：
以下设置实际上是为了渲染 3D 样式，但咱们设置值为 0 后，并无真正使用 3D 效果，但浏览器却所以开启了 GPU 硬件加速模式。这种 GPU 硬件加速在当今 PC 机及移动设备上都已普及，在移动端的性能提高是至关显著地，因此建议你们在作动画时能够尝试一下开启 GPU 硬件加速。

-webkit-transform:transition3d(0,0,0)
// 或者
-webkit-transform:translateZ(0)

栈和队列的区别?

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

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

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

栈和堆的区别？

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

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

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

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

快速排序

肯定 low，high 和 pivotkey
从 high 向前找第一个小于 pivotkey 的进行交换
从 low 向后找第一个大于 pivotkey 的进行交换
直到 low==high
由 pivotkey 分红两半递归 1-4

你以为 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（用来遍历数据，例如数组中的值）https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of
arguments 对象可被不定参数和默认参数完美代替。
ES6 将 promise 对象归入规范，提供了原生的 Promise 对象
增长了 let 和 const 命令，用来声明变量
增长了块级做用域。let 命令实际上就增长了块级做用域
ES6 规定，var 命令和 function 命令声明的全局变量，属于全局对象的属性；let 命令、const 命令、class 命令声明的全局变量，不属于全局对象的属性
还有就是引入 module 模块的概念
Symbol 数据类型

js 继承方式及其优缺点

原型链继承的缺点

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

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

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

组合式继承

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

谈谈浮动和清除浮动

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

浮动产生缘由

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

清除方法（利用 clear，或建立新的 BFC）

clear:both 清除浮动（在父盒子后添加一个空标签，标签样式为 clear:both）
父级 div 定义 overflow:hidden
伪元素清除

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

用过哪些设计模式？

工厂模式

工厂模式（Factory Pattern）是 Java 中最经常使用的设计模式之一。这种类型的设计模式属于建立型模式，它提供了一种建立对象的最佳方式。

在工厂模式中，咱们在建立对象时不会对客户端暴露建立逻辑，而且是经过使用一个共同的接口来指向新建立的对象。

单例模式

单例模式（Singleton Pattern）是 Java 中最简单的设计模式之一。这种类型的设计模式属于建立型模式，它提供了一种建立对象的最佳方式。

这种模式涉及到一个单一的类，该类负责建立本身的对象，同时确保只有单个对象被建立。这个类提供了一种访问其惟一的对象的方式，能够直接访问，不须要实例化该类的对象。

注意：

1 单例类只能有一个实例。
1. 单例类必须本身建立本身的惟一实例。
1. 单例类必须给全部其余对象提供这一实例。

你对闭包的理解

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

闭包有三个特性：

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

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

弊端: 数量和长度的限制

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

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

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

浏览器本地存储

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

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

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

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

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 等

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

display:none 和 visibility:hidden 的区别？

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

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #d1{
      height: 100px;
      overflow: none;
      border: 3px solid black;
    }
    #d1 > div{
      height: 200px;
      background: pink;
    }
    #d2{
      height: 50px;
      overflow: hidden;
      border: 3px solid red;
    }
    #d2 > div{
      height: 200px;
      background: green;
    }
  </style>
</head>
<body>
<div id="d1">
  d1
  <div></div>
</div>

<div id="d2">
  d2
  <div></div>
</div>
</body>
</html>

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 新增伪类有那些？

id 选择器# myid
类选择器.myclassname
标签选择器div, h1, p
相邻选择器h1 + p
子选择器ul > li
后代选择器li a
通配符选择器\*
属性选择器a[rel = "external"]
伪类选择器a: hover, li:nth-child

优先级：!important > 内联 > id > class > tag

CSS3 新增伪类举例：

p:first-of-type 选择属于其父元素的首个
元素的每一个
元素。
p:last-of-type 选择属于其父元素的最后
元素的每一个
元素。
p:only-of-type 选择属于其父元素惟一的
元素的每一个
元素。
p:only-child 选择属于其父元素的惟一子元素的每一个
元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每一个
元素。
: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
新增伪元素：::selection（用户选中部分）
媒体查询，多栏布局
border-image

对 BFC 规范的理解？

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

说说你对语义化的理解？

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；

低版本 IE 支持 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。
1. 调用函数时，应该提供的参数没有提供，该参数等于 undefined。
1. 对象没有赋值的属性，该属性的值为 undefined。
1. 函数没有返回值时，默认返回 undefined。

做为函数的参数，表示该函数的参数不是对象。
1. 做为对象原型链的终点。

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 对象的几种建立方式

工厂模式
构造函数模式
原型模式
混合构造函数和原型模式
动态原型模式
寄生构造函数模式
稳妥构造函数模式

javascript 继承的 6 种方法

原型链继承
借用构造函数继承
组合继承 (原型 + 借用构造)
原型式继承
寄生式继承
寄生组合式继承

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

GET：通常用于信息获取，使用 URL 传递参数，对所发送信息的数量也有限制，通常在 2000 个字符
POST：通常用于修改服务器上的资源，对所发送的信息没有限制。

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

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

更新服务器上的文件或数据库（GET 的话 URL 同样会加载缓存）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

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

ajax 的缺点

1 ajax 不支持浏览器 back 按钮。
1. 安全问题 AJAX 暴露了与服务器交互的细节。
1. 对搜索引擎的支持比较弱。
1. 破坏了程序的异常机制。
1. 不容易调试。

说说你对 Promise 的理解

Promise 对象用于表示一个异步操做的最终状态（完成或失败），以及其返回的值。
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise

实现一个函数 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;
}
document.write(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，用户获得反馈

全部通讯都是单向的。

MVVM

MVVM 是 Model-View-ViewModel 的简写。它本质上就是 MVC 的改进版。MVVM 就是将其中的 View 的状态和行为抽象化，让咱们将视图 UI 和业务逻辑分开。

View：UI 界面
ViewModel：它是 View 的抽象，负责 View 与 Model 之间信息转换，将 View 的 Command 传送到 Model；
Model：数据访问层