前端面试题整理

请你谈谈 Cookie 的弊端？
缺点： 
1.Cookie数量和长度的限制。每个 domain 最多只能有 20 条 cookie，
每个 cookie 长度不 
能超过 4KB，否则会被截掉。

2.安全性问题。如果 cookie 被人拦截了，那人就可以取得所有的 session 信息。
即使加密 
也于事无补，因为拦截者并不需要知道 cookie 的意义，
他只要原样转发 cookie 就可以达到 
目的了。

3.有些状态不可能保存在客户端。例如，为了防止重复提交表单，
我们需要在服务器端保存 
一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。

js 延迟加载的方式有哪些？
defer 和 async
动态创建 DOM 方式（创建 script，插入到 DOM 中，加载完毕后 callBack）
按需异步载入 js

documen.write 和 innerHTML 的区别？
1、write是DOM方法,向文档写入HTML表达式或JavaScript代码，
可列出多个参数，参数被顺序添加到文档中 ； 
innerHTML是DOM属性,设置或返回调用元素开始结束标签之间的HTML元素。

2、两者都可向页面输出内容,innerHTML比document.write更灵活。

当文档加载时调用document.write直接向页面输出内容，
文档加载结束后调用document.write输出内容会重写整个页面。 
通常按照两种的方式使用 write() 方法：一是在使用该方在文档中输出 HTML，
二是在调用该方法的的窗口之外的窗口、框架中产生新文档（务必使用close关闭文档）。

在读模式下，innerHTML属性返回与调用元素的所有子节点对应的HTML标记，
在写模式下，innerHTML会根据指定的值创建新的DOM树替换调用元素原先的所有子节点。

3、两者都可动态包含外部资源如JavaScript文件 
通过document.write插入<script>元素会自动执行其中的脚本； 
大多数浏览器中，通过innerHTML插入<script>元素并不会执行其中的脚本。

哪些操作会造成内存泄漏？
内存泄漏指任何对象在你不再拥有或需要它之后仍然存在。

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

setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
闭包
控制台日志
循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

字符串反转，如将 ‘12345678’ 变成 ‘87654321’
//大牛做法； 
//思路：先将字符串转换为数组 split()，
利用数组的反序函数 reverse()颠倒数组，再利用 join() 
为字符串

var str = '12345678';
str = str.split('').reverse().join('');

window.location.search 返回的是什么

你如何优化自己的代码？

代码重用
避免全局变量（命名空间，封闭空间，模块化 mvc..）
拆分函数避免函数过于臃肿：单一职责原则
适当的注释，尤其是一些复杂的业务逻辑或者是计算逻辑，
都应该写出这个业务逻辑的具体过程
内存管理，尤其是闭包中的变量释放
变量的命名规范：尤其是在实际项目中

$div：代表一个jquery对象

dom：代表一个原生的dom对象

希望一个函数是构造函数：函数的首字母都要大写

变量一定要语义化

前端页面有哪三层构成，分别是什么？作用是什么

前端页面有行为层，结构层，渲染层构成

结构层主要是由html或xhtml之类的标记语言负责创建

渲染层是由css负责创建

行为层是由javascript负责完成

html是搭建文档的结构，css是设置文档的呈现效果，行为层是用来完成用户交互

请简要描述web前端性能需要考虑哪方面，你的优化思路是什么？
//0、减少http请求：

//1、小图弄成大图（雪碧图、精灵图），

//2、合理的设置缓存 localStorage cookie

//3、资源合并、压缩 html代码的最小化，压缩体积：就是减少带宽

//4、一些小的js文件合并成大的js文件

//5、将外部的js文件置底

举例说明你如何对网站的文件和资源进行优化？

1：文件合并，常用的比如css sprites

2:文件压缩，目的是直接减少文件下载的体积

3：使用缓存

HTTP 状态消息 200 302 304 403 404 500 分别表示什么
200：请求已成功，请求所希望的响应头或数据体将随此响应返回。

302：请求的资源临时从不同的 URI 响应请求。
由于这样的重定向是临时的，
客户端应当 继续向原有地址发送以后的请求。
只有在Cache-Control或Expires中进行了指定的情况下， 这个响应才是可缓存的

304：如果客户端发送了一个带条件的 GET 请求且该请求已被允许，
而文档的内容（自上 次访问以来或者根据请求的条件）并没有改变，
则服务器应当返回这个状态码。304 响应禁 止包含消息体，
因此始终以消息头后的第一个空行结尾。

403：服务器已经理解请求，但是拒绝执行它。

404：请求失败，请求所希望得到的资源未被在服务器上发现。

500：服务器遇到了一个未曾预料的状况，
导致了它无法完成对请求的处理。
一般来说，这 个问题都会在服务器端的源代码出现错误时出现。

请列举 js 数组类型中的常用方法

”==”和“===”的不同
前者会自动转换类型 
后者不会 
1==”1” 
null==undefined 
===先判断左右两边的数据类型，如果数据类型不一致，直接返回 false 
之后才会进行两边值的判断

闭包是什么，有什么特性，对页面有什么影响
闭包就是能够读取其他函数内部变量的函数。 
闭包的缺点：滥用闭包函数会造成内存泄露，因为闭包中引用到的包裹函数中定义的变量 
永远不会被释放，所以我们应该在必要的时候，及时释放这个闭包函数。

JavaScript this 指针、闭包、作用域
this：指向调用上下文 
闭包：内层作用域可以访问外层作用域的变量 
作用域：定义一个函数就开辟了一个局部作用域，整个 js 执行环境有一个全局作用域

js继承有5种实现方式：
1、继承第一种方式：对象冒充

 function Parent(username){
    this.username = username;
    this.hello = function(){
      alert(this.username);
    }
  }
  function Child(username,password){
    //通过以下3行实现将Parent的属性和方法追加到Child中，从而实现继承
    //第一步：this.method是作为一个临时的属性，并且指向Parent所指向的对象，
    //第二步：执行this.method方法，即执行Parent所指向的对象函数
    //第三步：销毁this.method属性，即此时Child就已经拥有了Parent的所有属性和方法
    this.method = Parent;
    this.method(username);//最关键的一行
    delete this.method;

    this.password = password;
    this.world = function(){
      alert(this.password);
    }
  }
  var parent = new Parent("zhangsan");
  var child = new Child("lisi","123456");
  parent.hello(); //zhangsan
  child.hello();  //lisi
  child.world();  //123456

2、继承第二种方式：call()方法方式

call方法是Function类中的方法 
call方法的第一个参数的值赋值给类(即方法)中出现的this 
call方法的第二个参数开始依次赋值给类(即方法)所接受的参数

   function test(str){
                 alert(this.name + " " + str);
     }
    var object = new Object();
    object.name = "zhangsan";
    // 此时，第一个参数值object传递给了test类(即方法)中出现的this，而第二个参数"langsin"则赋值给了test类(即方法)的str
    test.call(object,"langsin"); //zhangsan langsin

    function Parent(username){
        this.username = username;
        this.hello = function(){
            document.write(this.username + "<br>");
    }
  }
  function Child(username,password){
    Parent.call(this,username);

    this.password = password;
    this.world = function(){
      document.write(this.password+ "<br>");
    }
  }
  var parent = new Parent("zhangsan");
  var child = new Child("lisi","123456");
  parent.hello(); //zhangsan
  child.hello();  //lisi
  child.world();  //123456

3、继承的第三种方式：apply()方法方式

apply方法接受2个参数， 
A、第一个参数与call方法的第一个参数一样，即赋值给类(即方法)中出现的this 
B、第二个参数为数组类型，这个数组中的每个元素依次赋值给类(即方法)所接受的参数

  function Parent(username){
    this.username = username;
    this.hello = function(){
      alert(this.username);
    }
  }
  function Child(username,password){
    Parent.apply(this,new Array(username));

    this.password = password;
    this.world = function(){
      alert(this.password);
    }
  }
  var parent = new Parent("zhangsan"); 
  var child = new Child("lisi","123456");
  parent.hello(); //zhangsan
  child.hello();  //lisi
  child.world();  //123456

4、继承的第四种方式：原型链方式

即子类通过prototype将所有在父类中通过prototype追加的属性和方法都追加到Child，
从而实现了继承

function Person(){
  }
  Person.prototype.hello = "hello";
  Person.prototype.sayHello = function(){
    alert(this.hello);
  }

  function Child(){
  }
  Child.prototype = new Person();//这行的作用是：
  将Parent中将所有通过prototype追加的属性和方法都追加到Child，从而实现了继承
  Child.prototype.world = "world";
  Child.prototype.sayWorld = function(){
    alert(this.world);
  }

  var c = new Child();
  c.sayHello();
  c.sayWorld();

5、继承的第五种方式：混合方式

混合了call方式、原型链方式

 function Parent(hello){
    this.hello = hello;
  }
  Parent.prototype.sayHello = function(){
    alert(this.hello);
  }

  function Child(hello,world){
    Parent.call(this,hello);//将父类的属性继承过来
    this.world = world;//新增一些属性
  }

  Child.prototype = new Parent();//将父类的方法继承过来

  Child.prototype.sayWorld = function(){//新增一些方法
    alert(this.world);
  }

  var c = new Child("zhangsan","lisi");
  c.sayHello();
  c.sayWorld();

例举 3 种强制类型转换和 2 种隐式类型转换?
强制（parseInt(),parseFloat(),Number()）
隐式（==）
1==”1”//true
null==undefined//true

split()和 join() 的区别
前者是切割成数组的形式，
后者是将数组转换成字符串
split是按照指定的分隔符对字符串进行分割，并以数组的形式返回结果
join跟split相反，是以指定的符号将数组的元素进行拼接，并以字符串返回。

数组方法 pop() push() unshift() shift()
Push()尾部添加 
pop()尾部删除 
Unshift()头部添加 
shift()头部删除

截取字符串 abcdefg 的 efg
alert('abcdefg'.substring(4));

声明提升类问题 （考察频率：高）

变量声明和函数声明都会提升，但函数会提升到变量前。

js存储方式（考察频率：中）

cookie
sessionStorage
localStorage
indexedDB

什么情况下会遇到跨域，怎么解决？（考察频率：高）

同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，
不能读写对方资源。若地址里面的协议、域名和端口号均相同则属于同源。
jsonp跨域、nginx反向代理、node.js中间件代理跨域、后端设置http header、
后端在服务器上设置cors。

什么是跨域，产生跨域的原因以及如何解决跨域

跨域产生的原因是由于浏览器的同源策略，发送的请求地址的协议，域名，端口号三者有一个跟当前请求页面的地址不同就会产生跨域问题。

常见的解决跨域问题的方法有三种

1：CORS
2：porxy代理

 定义和用法：proxy代理用于将请求发送给后台服务器，通过服务器来发送请求，然后将请求的结果传递给前端。

实现方法：通过nginx代理；

注意点：1、如果你代理的是https协议的请求，那么你的proxy首先需要信任该证书（尤其是自定义证书）或者忽略证书检查，否则你的请求无法成功

3：jsonp

这个好像很多前端都会回答的一个答案，但是好像很多人并不是很清楚具体原因，而且个人觉得这个方法并不好用。

闭包的作用（考察频率：中）

闭包的目的是外部函数可以访问内部函数的作用域（局部作用域）。

原型的理解

所有的引用类型（数组、对象、函数），都具有对象特性，即可自由扩展属性（null除外）
所有的引用类型（数组、对象、函数），都有一个__proto__属性，属性值是一个普通的对象
所有的函数，都有一个prototype属性，属性值也是一个普通的对象
所有的引用类型（数组、对象、函数），__proto__属性值指向它的构造函数的prototype属性值

重绘和回流（考察频率：中）

重绘：当页面中元素样式的改变并不影响它在文档流中的位置时
（例如：color、background-color、visibility等），
浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。
回流：当Render Tree（DOM）中部分或全部元素的尺寸、结构、或某些属性发生改变时，
浏览器重新渲染部分或全部文档的过程称为回流。
回流要比重绘消耗性能开支更大。
回流
必将引起重绘，重绘不一定会引起回流。

浏览器从加载到渲染的过程，比如输入一个网址到显示页面的过程。（考察频率:高）

加载过程：

浏览器根据 DNS 服务器解析得到域名的 IP 地址
向这个 IP 的机器发送 HTTP 请求
服务器收到、处理并返回 HTTP 请求
浏览器得到返回内容
渲染过程：

根据 HTML 结构生成 DOM 树
根据 CSS 生成 CSSOM
将 DOM 和 CSSOM 整合形成 RenderTree
根据 RenderTree 开始渲染和展示
遇到<script>时，会执行并阻塞渲染

性能优化
优化的方向有两个：

减少页面体积，提升网络加载
优化页面渲染
减少页面体积，提升网络加载
静态资源的压缩合并（JS 代码压缩合并、CSS 代码压缩合并、雪碧图）
静态资源缓存（资源名称加 MD5 戳）
使用 CDN 让资源加载更快

优化页面渲染
CSS 放前面，JS 放后面
懒加载（图片懒加载、下拉加载更多）
减少DOM 查询，对 DOM 查询做缓存
减少DOM 操作，多个操作尽量合并在一起执行（DocumentFragment）
事件节流
尽早执行操作（DOMContentLoaded）
使用 SSR 后端渲染，数据直接输出到 HTML 中，
减少浏览器使用 JS - 模板渲染页面 HTML 的时间

Vue部分

组件通信方式 （考察频率：高）

1)父->子

props(v-bind)

$refs

2)子->父

events(v-on)

$parent $root

3)非父子组件

event bus

vuex

路由导航钩子（导航守卫）（考察频率：中）

全局钩子
路由独享钩子
组件内钩子
参考vue官网
https://router.vuejs.org/zh/guide/advanced/navigation-guards.html

介绍一下你对浏览器内核的理解 
主要分成两部分：渲染引擎和JS引擎 
渲染引擎：负责取得网页的内容（HTML，XML，图像等等）
，整理讯息（例如加入CSS等），以及计算网页的显示方式，
然后会输出至显示器或者打印机。
浏览器的内核的不同对于网页的语法解释会有不同 ，所以渲染的效果也会不同。
所有网页浏览器，
电子邮件客户端以及其它需要编辑，
显示网络内容的应用程序都需要内核。 
JS引擎：解析和执行JS来实现网页的动态效果。 
最开始渲染引擎和JS引擎并没有区分的很明确，
后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

CSS

介绍一下标准的css的盒子模型？低版本的IE的盒子模型有什么不同？

1）有两种：IE盒子模型，W3C盒子模型 
2）盒模型：内容（content），填充（padding），边界（margin），边框（border） 
3）区别：IE的content部分把border和padding计算了进去

行内元素有哪些？块级元素有哪些

行内元素：span,a,b,img,input,strong,select,label,em,button

块级元素：div,ul,li,dl,dt,dd,p,h1-h6

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

解释下浮动和它的工作原理？清除浮动的技巧

浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。
 
 
1.使用空标签清除浮动。
 
   这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。
 
2.使用overflow。
 
   给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。
 
3.使用after伪对象清除浮动。
 
   该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素；

如何实现浏览器内多个标签页之间的通信？ 
WebSocket,SharedWorker，也可以调用localStorage，cookie等本地存储方式 
localStorage另一个浏览上下文里被添加，修改或者删除时，它都会触发一个事件，
我们通过监听事件，控制它的值来进行页面信息通信。

清除浮动的几种方法：
1，额外标签法，<div style="clear:both;"></div>（缺点：不过这个办法会增加额外的标签使HTML结构看起来不够简洁。）

    2，使用after伪类

    #parent:after{

        content:".";

        height:0;

        visibility:hidden;

        display:block;

        clear:both;

        }


    3,浮动外部元素

    4,设置overflow为hidden或者auto

请描述一下cookies,sessionStorage和localStorage的区别？

cookie是网站为了标示用户身份而储存在用户本地终端(client side)上的数据（通常经过加密） 
cookie数据始终在同源的http请求中携带（即使不需要），也会在浏览器和服务器之间来回传递 
sessionStorage和localStorage不会自动把数据发给服务器，尽在本地保存 
存储大小： 
sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大 
有效时间： 
localStorage存储池旧数据，浏览器关闭后数据不丢失除非主动删除数据 
sessionStorage数据在当前浏览器窗口关闭后自动删除 
cookie设置的cookie过期事件之前一直有效，即使窗口或浏览器关闭

es6中的let和var的区别是什么？

用过bind函数吗？作用是什么？

call和apply的区别是什么？有没有想过call是怎么实现的？能用代码写出来吗？

JavaScript类的继承有哪几种实现方式？你能列举出来吗？

所说你对JavaScript中的prototype的理解

说说你是怎么理解闭包的？作用是什么？

知道跨域吗？你一般用什么方式进行跨域？说说jsonp的实现原理？

说说浏览器的缓存机制？

说说redux的实现方式是什么？知道原理吗？

css bfc模型是什么？

CSS样式中的层叠问题？

介绍一下你对浏览器内核的理解 
主要分成两部分：渲染引擎和JS引擎 
渲染引擎：负责取得网页的内容（HTML，XML，图像等等），整理讯息（例如加入CSS等），
以及计算网页的显示方式，然后会输出至显示器或者打印机。
浏览器的内核的不同对于网页的语法解释会有不同 ，
所以渲染的效果也会不同。所有网页浏览器，电子邮件客户端以及其它需要编辑，
显示网络内容的应用程序都需要内核。 
JS引擎：解析和执行JS来实现网页的动态效果。 
最开始渲染引擎和JS引擎并没有区分的很明确，
后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

在写一遍关于闭包的问题

六、闭包
1、个人理解为闭包就是能够读取其它函数内部变量的函数，即一个函数内部的函数，
可以说闭包是将函数内部和函数外部连接起来的一座桥梁
2、闭包用处：可以读取函数内部的变量；可以将函数内部变量的值一直保存在内存中
3、使用闭包的缺点：
1）由于闭包会使得函数中的变量都被保存在内存中，
内存消耗很大，
所以不能滥用闭包，
否则会造成网页的性能问题，
在IE中可能导致内存泄露。
解决方法是，在退出函数之前，将不使用的局部变量全部删除。

2）闭包会在父函数外部，
改变父函数内部变量的值。
所以，如果你把父函数当作对象（object）使用，
把闭包当作它的公用方法（Public Method），
把内部变量当作它的私有属性（private value），
这时一定要小心，不要随便改变父函数内部变量的值。

js中作用域分两种，全局变量和函数内声明的局部变量，
当然如果在函数内没有用var声明变量的话就是全局变量，
那么问题来了，如果出了声明局部变量的代码块想使用该局部变量怎么办呢
，这时候就需要用到闭包了

所以，简单的说，闭包就是为了能跟读取函数内声明的局部变量。

闭包的形式是一个函数返回另一个函数，
而返回的函数使用了该函数内部的变量，
然后把外层函数的执行结果赋值给一个变量，再执行该变量。

js 闭包的作用

闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中

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

闭包有三个特性：

1.函数嵌套函数

2.函数内部可以引用外部的参数和变量

3.参数和变量不会被垃圾回收机制回收

请你谈谈Cookie的弊端
cookie 虽然在持久保存客户端数据提供了方便，分担了服务器存储的负担，但还是有很多局限性的。

第一：每个特定的域名下最多生成20个 cookie

1.IE6或更低版本最多20个cookie
 
2.IE7和之后的版本最后可以有50个cookie。
 
3.Firefox最多50个cookie
 
4.chrome和Safari没有做硬性限制

优点：极高的扩展性和可用性

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

1.`Cookie`数量和长度的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉.
 
 
2.安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。
 
3.有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如

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总是办好事，例如IE7、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个cookie。
 
 5、所以个人建议：
 
    将登陆信息等重要信息存放为SESSION
 
    其他信息如果需要保留，可以放在COOKIE中

谈谈你对webpack的看法
WebPack 是一个模块打包工具，你可以使用 WebPack 管理你的模块依赖，并编绎输出模块们所需的静态文件。它能够很好地管理、打包Web开发中所用到的 HTML、Javascript、CSS 以及各种静态文件（图片、字体等），让开发过程更加高效。对于不同类型的资源， webpack 有对应的模块加载器。 webpack 模块打包器会分析模块间的依赖关系，最后 生成了优化且合并后的静态资源。

webpack 的两大特色：

1.code splitting（可以自动完成）
 
2.loader 可以处理各种类型的静态文件，并且支持串联操作
webpack 是以 commonJS 的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。

webpack 具有 requireJs 和 browserify 的功能，但仍有很多自己的新特性：

1. 对 CommonJS 、 AMD 、ES6的语法做了兼容
 
2. 对js、css、图片等资源文件都支持打包
 
3. 串联式模块加载器以及插件机制，让其具有更好的灵活性和扩展性，例如提供对CoffeeScript、ES6的支持
 
4. 有独立的配置文件webpack.config.js
 
5. 可以将代码切割成不同的chunk，实现按需加载，降低了初始化时间
 
6. 支持 SourceUrls 和 SourceMaps，易于调试
 
7. 具有强大的Plugin接口，大多是内部插件，使用起来比较灵活
 
8.webpack 使用异步 IO 并具有多级缓存。这使得 webpack 很快且在增量编译上更加快

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

创建ajax过程
(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.

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

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

(4)发送HTTP请求.

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

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

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

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

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

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

CMD模块方式

define(function(require, exports, module) {
 
      // 模块代码
 
    });

Ajax的原理

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得

数据，然后用javascript来操作DOM而更新页面。

jsonp原理

JSONP (json with padding) 通过javascript callback 实现跨域访问的一种机制

由于同源策略的机制，XMLhttpRequest只允许访问同域名 同协议 同端口下的资源，所

以使用 带有src 属性的标签 能够使浏览器返回数据，从而解决跨域请求问题

http请求流程

1、web服务器和浏览器服务器 建立连接

2、web服务器向浏览器服务器 发送命令

3、web服务器向浏览器服务器 发送请求头

4、浏览器服务器向web服务器 应答

5、浏览器服务器向web服务器 发送应答头

6、web服务器向浏览器服务器 发送数据

7、web服务器向浏览器服务器 断开连接

TCP（Transmission Control Protocol）

    TCP传输控制协议，是一种面向连接的、可靠的、基于字节流的传输层通信协议。通讯双方建立一次tcp连接，需要经过三次步骤1、客户端发送syn包（syn=j）到服务器，并入SYN_SEND状态，等待服务器确认。2、服务器收入syn包，必须确认客户的SYN（ack=j+1），同时自己也发送一个SYN包（syn=k），既SYN+ACK包，此时服务器进入SYN_RECV状态。3、客户端收到服务器的SYN+ACK包，向服务器发送确认包ACK（ack=k+1），此包发送完毕，客户端和服务器进入ESTABLISHED状态，完成三次握手。（tcp在握手过程中并不携带数据，而是在三次握手完成之后才会进行数据传送）

SYN：synchronous 建立联机

ACK：acknowledgement 确认

SYN_SENT 请求连接

SYN_RECV 服务端被动打开后，接收到了客户端的SYN并且发送了ACK时的状态，再进一步接收到客户端的ACK就进入ESTABISHED状态。

UDP（User Datagram Protocol ）用户数据报协议

UDP是非面向连接协议，使用udp协议通讯并不需要建立连接，它只负责把数据尽可能发送出去，并不可靠，在接收端，UDP把每个消息断放入队列中，接收端程序从队列中读取数据。

TCP/IP是位于传输层上的一种协议，用于在网络中传输数据；

栈和堆的区别？
栈区（stack）—   由编译器自动分配释放   ，存放函数的参数值，局部变量的值等。
 
堆区（heap）   —   一般由程序员分配释放，   若程序员不释放，程序结束时可能由OS回收。
 
堆（数据结构）：堆可以被看成是一棵树，如：堆排序；
 
栈（数据结构）：一种先进后出的数据结构。

快速 排序的思想并实现一个快排？
"快速排序"的思想很简单，整个排序过程只需要三步：

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

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

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

<script type="text/javascript">

        function quickSort(arr){
            if(arr.length<=1){
                return arr;//如果数组只有一个数，就直接返回；
            }

            var num = Math.floor(arr.length/2);//找到中间数的索引值，如果是浮点数，则向下取整

            var numValue = arr.splice(num,1);//找到中间数的值
            var left = [];
            var 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));//递归不断重复比较
        }

        alert(quickSort([32,45,37,16,2,87]));//弹出“2,16,32,37,45,87”

    </script>

如何创建一个节点，增加一个节点，删除一个节点，替换一个节点

创建节点：createElement(),该方法的参数是节点名称，比如button就是创建一个按钮，a就是创建一个超链接，以此类推

创建文本节点：createTextNode()

添加节点：appendChild()

删除节点：removeChild()

替换节点：repalceChild()

插入节点：insertBefore()

这里呢，我习惯上使用jquery方法，下面我随手写了几个例子，是关于节点的增删插入节点以及移动节点的

<ul id="list">
			<li>11</li>
			<li>22</li>
			<li>33</li>
		</ul>
		<button οnclick="add()">点我添加子元素</button>
		<button οnclick="deletes()">点我删除子元素</button>
		<button οnclick="move()">点我上移节点</button>
		<script src="js/jquery-1.11.3.js"></script>
		<script>
		
		function add(){
			var li='<li>44</li>';
			$("#list").append(li)//在list的后面插入一个子元素
			$("#list").prepend(li);//在list的前面插入一个子元素
		}
		function deletes(){
		$("#list li:last-child").remove()
		}
		function move(){
			var node=$("#list li:last-child").prev();
			$("#list li:last-child").insertBefore(node);//向上移动
			$("#list li:last-child").insertAfter(node);//向下移动
			
		}

清除浮动的几种方法：
1，额外标签法，<div style="clear:both;"></div>（缺点：不过这个办法会增加额外的标签使HTML结构看起来不够简洁。）

    2，使用after伪类

    #parent:after{

        content:".";

        height:0;

        visibility:hidden;

        display:block;

        clear:both;

        }


    3,浮动外部元素

    4,设置overflow为hidden或者auto

编写一个数组去重的方法
1：自己写的一个方法
<script type="text/javascript">
		var array=[1,3,4,5,6,3,4,1,8]
			function quchong(arr){
				for(var i=0;i<arr.length;i++){
					for(var j=(i+1);j<arr.length;j++){
						if(arr[i]==arr[j]){
							var newArr=arr.splice(j,1)
						}
					}
				}
				console.log(arr)
			}
			quchong(array)
		</script>

2：借鉴的别人的我觉得很棒的方法

var arr = [2,3,4,4,5,2,3,6],
   arr2 = [];
for(var i = 0;i< arr.length;i++){
    if(arr2.indexOf(arr[i]) < 0){
        arr2.push(arr[i]);
    }
}
console.log(arr2);

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

DOM操作——怎样添加、移除、移动、复制、创建和查找节点。
1）创建新节点

      createDocumentFragment()    //创建一个DOM片段
 
      createElement()   //创建一个具体的元素
 
      createTextNode()   //创建一个文本节点
2）添加、移除、替换、插入

      appendChild()
 
      removeChild()
 
      replaceChild()
 
      insertBefore() //并没有insertAfter()
3）查找

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

如何实现浏览器内多个标签页之间的通信?
调用localstorge、cookies等本地存储方式

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

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

null 用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。

undefined 表示"缺少值"，就是此处应该有一个值，但是还没有定义。典型用法是：

（1）变量被声明了，但没有赋值时，就等于undefined。
 
 
（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。
 
 
（3）对象没有赋值的属性，该属性的值为undefined。
 
 
（4）函数没有返回值时，默认返回undefined。
null 表示"没有对象"，即该处不应该有值。典型用法是：

（1） 作为函数的参数，表示该函数的参数不是对象。
 
（2） 作为对象原型链的终点。

js延迟加载的方式有哪些？
defer和async、动态创建DOM方式（创建script，插入到DOM中，加载完毕后callBack）、按需异步载入js

哪些操作会造成内存泄漏？
内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
 
垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。
 
 
 
setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
 
闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？
    分为4个步骤：
 
    （1），当发送一个URL请求时，不管这个URL是Web页面的URL还是Web页面上每个资源的URL，浏览器都会开启一个线程来处理这个请求，同时在远程DNS服务器上启动一个DNS查询。这能使浏览器获得请求对应的IP地址。
 
    （2）， 浏览器与远程`Web`服务器通过`TCP`三次握手协商来建立一个`TCP/IP`连接。该握手包括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在 浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。
 
    （3），一旦`TCP/IP`连接建立，浏览器会通过该连接向远程服务器发送`HTTP`的`GET`请求。远程服务器找到资源并使用HTTP响应返回该资源，值为200的HTTP响应状态表示一个正确的响应。
 
    （4），此时，`Web`服务器提供资源服务，客户端开始下载资源。
 
 
 
请求返回后，便进入了我们关注的前端模块
 
简单来说，浏览器会解析`HTML`生成`DOM Tree`，其次会根据CSS生成CSS Rule Tree，而`javascript`又可以根据`DOM API`操作`DOM`

javascript继承的6种方法
1，原型链继承
 
2，借用构造函数继承
 
3，组合继承(原型+借用构造)
 
4，原型式继承
 
5，寄生式继承
 
6，寄生组合式继承

创建ajax的过程
(1)创建`XMLHttpRequest`对象,也就是创建一个异步调用对象.

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

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

    (4)发送`HTTP`请求.

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

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


    var xmlHttp = new XMLHttpRequest();

    xmlHttp.open('GET','demo.php','true');

    xmlHttp.send()

    xmlHttp.onreadystatechange = function(){

        if(xmlHttp.readyState === 4 & xmlHttp.status === 200){

        }

    }

异步加载和延迟加载
1.异步加载的方案： 动态插入script标签
 
2.通过ajax去获取js代码，然后通过eval执行
 
3.script标签上添加defer或者async属性
 
4.创建并插入iframe，让它异步执行js
 
5.延迟加载：有些 js 代码并不是页面初始化的时候就立刻需要的，而稍后的某些情况才需要的。

GET和POST的区别，何时使用POST？
    GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符
 
    POST：一般用于修改服务器上的资源，对所发送的信息没有限制。
 
 
    GET方式需要使用Request.QueryString来取得变量的值，而POST方式通过Request.Form来获取变量的值，
 
    也就是说Get是通过地址栏来传值，而Post是通过提交表单来传值。
 
 
 
然而，在以下情况中，请使用 POST 请求：
 
无法使用缓存文件（更新服务器上的文件或数据库）
 
向服务器发送大量数据（POST 没有数据量限制）
 
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

HTTP状态码
100  Continue  继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息
 
    200  OK   正常返回信息
 
    201  Created  请求成功并且服务器创建了新的资源
 
    202  Accepted  服务器已接受请求，但尚未处理
 
    301  Moved Permanently  请求的网页已永久移动到新位置。
 
    302 Found  临时性重定向。
 
    303 See Other  临时性重定向，且总是使用 GET 请求新的 URI。
 
    304  Not Modified  自从上次请求后，请求的网页未修改过。
 
 
    400 Bad Request  服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
 
    401 Unauthorized  请求未授权。
 
    403 Forbidden  禁止访问。
 
    404 Not Found  找不到如何与 URI 相匹配的资源。
 
    500 Internal Server Error  最常见的服务器端错误。
 
    503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。

说说你对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 。

说说网络分层里七层模型是哪七层
应用层：应用层、表示层、会话层（从上往下）（ HTTP、FTP、SMTP、DNS ）

传输层（ TCP 和 UDP ）

网络层（ IP ）

物理和数据链路层（以太网）

每一层的作用如下：

物理层：通过媒介传输比特,确定机械及电气规范（比特Bit）
数据链路层：将比特组装成帧和点到点的传递（帧Frame）
网络层：负责数据包从源到宿的传递和网际互连（包PackeT）
传输层：提供端到端的可靠报文传递和错误恢复（段Segment）
会话层：建立、管理和终止会话（会话协议数据单元SPDU）
表示层：对数据进行翻译、加密和压缩（表示协议数据单元PPDU）
应用层：允许访问OSI环境的手段（应用协议数据单元APDU）

说说mongoDB和MySQL的区别
MySQL 是传统的关系型数据库， MongoDB 则是非关系型数据库

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

对比传统关系型数据库,NoSQL有着非常显著的性能和扩展性优势，与关系型数据库相比，MongoDB的优点有： ①弱一致性（最终一致），更能保证用户的访问速度： ②文档结构的存储方式，能够更便捷的获取数据。