1.html 元素分类（块状元素）

7492130_1474549902464_6B9B91926E886B2EDB5B6ADA09C33137.png

在标准文档流里面，块级元素具有以下特点：

①总是在新行上开始，占据一整行；
②高度，宽度以及外边距和内边距都可控制；
③宽带始终是与浏览器宽度一样，与内容无关；
④它可以容纳内联元素和其他块元素。

行内元素的特点：

①和其他元素都在一行上；
②高，行高及外边距和内边距底边不可改变；
③宽度只与内容有关；
④行内元素只能容纳文本或者其他行内元素。
不可以设置宽高，其宽度随着内容增加，高度随字体大小而改变，内联元素可以设置外边界，但是外边界不对上下起作用，只能对左右起作用，也可以设置内边界，但是内边界在ie6中不对上下起作用，只能对左右起作用

2.js 基本数据类型：number、string、boolean、undefined、null

   复杂数据类型：Object

3.防抖与节流

3.1.函数防抖

定义：多次触发事件后，事件处理函数只执行一次，并且是在触发操作结束时执行。
原理：对处理函数进行延时操作，若设定的延时到来之前，再次触发事件，则清除上一次的延时操作定时器，重新定时。

function debunce（handler，delay）{ 
   //handler是要传入的进行防抖的函数，delay是等待时间。
    var timer = null;
    return function（）{
        var _self = this，args = arguments; 
        clearTimeout（timer）;        //每次都要清除这个定时器 
        timer = setTimeout（function（）{    //重新开启定时器 
            handler.apply（_self，args）; 
        }，delay）; 
    } 
}

函数防抖的适用性：
比如，我们在监听滚动条位置，控制是否显示返回顶部按钮时，就可以将防抖函数应用其中。但依然有些功能并不适用：
当我们做图片懒加载（lazyload）时，需要通过滚动位置，实时显示图片时，如果使用防抖函数，懒加载（lazyload）函数将会不断被延时，
只有停下来的时候才会被执行，对于这种需要实时触发事件的情况，就显得不是很友好了。
下面开始介绍函数节流，通过设定时间片，控制事件函数间断性的触发。

3.2.函数节流

定义：触发函数事件后，短时间间隔内无法连续调用，只有上一次函数执行后，过了规定的时间间隔，才能进行下一次的函数调用。
原理：对处理函数进行延时操作，若设定的延时到来之前，再次触发事件，则清除上一次的延时操作定时器，重新定时。

    function throttle（handler，wait）{  //handler是要进行节流的函数，wait是等待时间
        var lastTime = 0;
        return function（）{
            var nowTime = new Date（).getTime（）;????//获取当前时间
            if（nowTime - lastTime> wait）{
                handler.apply（this，arguments）;
                lastTime = nowTime;??????//更新最后时间
            }
        }
    }

4.深拷贝与浅拷贝

假设B复制了A，修改A的时候，看B是否发生变化：
如果B跟着也变了，说明是浅拷贝，拿人手短！（修改堆内存中的同一个值）
如果B没有改变，说明是深拷贝，自食其力！（修改堆内存中的不同的值）
浅拷贝（shallowCopy）只是增加了一个指针指向已存在的内存地址，

深拷贝（deepCopy）是增加了一个指针并且申请了一个新的内存，使这个增加的指针指向这个新的内存，

使用深拷贝的情况下，释放内存的时候不会因为出现浅拷贝时释放同一个内存的错误。

递归深拷贝

function deepClone(obj){
    let objClone = Array.isArray(obj)?[]:{};
    if(obj && typeof obj==="object"){
        for(key in obj){
            if(obj.hasOwnProperty(key)){
                //判断ojb子元素是否为对象，如果是，递归复制
                if(obj[key]&&typeof obj[key] ==="object"){
                    objClone[key] = deepClone(obj[key]);
                }else{
                    //如果不是，简单复制
                    objClone[key] = obj[key];
                }
            }
        }
    }
    return objClone;
} 

5.内联样式 > id 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器。

6.跨域

广义的跨域：

1.) 资源跳转： A链接、重定向、表单提交
2.) 资源嵌入： <link>、<script>、<img>、<frame>等dom标签，还有样式中background:url()、@font-face()等文件外链
3.) 脚本请求： js发起的ajax请求、dom和js对象的跨域操作等
其实我们通常所说的跨域是狭义的，是由浏览器同源策略限制的一类请求场景。
同源策略也最基本的安全功能，保护用户安全，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。
跨域解决方案：

• 通过jsonp跨域
• nginx代理跨域
• nodejs中间件代理跨域
• WebSocket协议跨域
• CORS跨域资源共享
  JSONP（json with padding 填充式json），利用了使用src引用静态资源时不受跨域限制的机制。主要在客户端搞一个回调做一些数据接收与操作的处理，并把这个回调函数名告知服务端，而服务端需要做的是按照javascript的语法把数据放到约定好的回调函数之中即可。jQuery很早之前就已经吧JSONP语法糖化了，使用起来会更加方便。
  CORS（Cross-origin resource sharing 跨域资源共享），依附于AJAX，通过添加HTTP Hearder部分字段请求与获取有权限访问的资源。CORS对开发者是透明的，因为浏览器会自动根据请求的情况（简单和复杂）做出不同的处理。CORS的关键是服务端的配置支持。由于CORS是W3C中一项较“新”的方案，以至于各大网页解析引擎还没有对其进行严格规格的实现，所以不同引擎下可能会有一些不一致。
  两者优点与缺点大致互补，放在一块介绍：
  JSONP的主要优势在于对浏览器的支持较好；虽然目前主流浏览器支持CORS，但IE10以下不支持CORS。JSONP只能用于获取资源（即只读，类似于GET请求）；CORS支持所有类型的HTTP请求，功能完善。（这点JSONP被玩虐，但大部分情况下GET已经能满足需求了）JSONP的错误处理机制并不完善，我们没办法进行错误处理；而CORS可以通过onerror事件监听错误，并且浏览器控制台会看到报错信息，利于排查。JSONP只会发一次请求；而对于复杂请求，CORS会发两次请求。始终觉得安全性这个东西是相对的，没有绝对的安全，也做不到绝对的安全。毕竟JSONP并不是跨域规范，它存在很明显的安全问题：callback参数注入和资源访问授权设置。CORS好歹也算是个跨域规范，在资源访问授权方面进行了限制（Access-Control-Allow-Origin），而且标准浏览器都做了安全限制，比如拒绝手动设置origin字段，相对来说是安全了一点。但是回过头来看一下，就算是不安全的JSONP，我们依然可以在服务端端进行一些权限的限制，服务端和客户端也都依然可以做一些注入的安全处理，哪怕被攻克，它也只能读一些东西。就算是比较安全的CORS，同样可以在服务端设置出现漏洞或者不在浏览器的跨域限制环境下进行攻击，而且它不仅可以读，还可以写。

jsonp跨域：其本质是利用了标签具有可跨域的特性，由服务端返回预先定义好的javascript函数的调用，并且将服务端数据以该函数参数的形式传递过来。

<script>
    var script = document.createElement('script');
    script.type = 'text/javascript';
    // 传参并指定回调执行函数为onBack
    script.src = 'http://www.domain2.com:8080/login?user=admin&callback=onBack';
    document.head.appendChild(script);
    // 回调执行函数
    function onBack(res) {
        alert(JSON.stringify(res));
    }
 </script>
服务端返回如下（返回时即执行全局函数）：
onBack({"status": true, "user": "admin"})

后端node.js代码示例：

var querystring = require('querystring');
var http = require('http');
var server = http.createServer();

server.on('request', function(req, res) {
    var params = qs.parse(req.url.split('?')[1]);
    var fn = params.callback;

    // jsonp返回设置
    res.writeHead(200, { 'Content-Type': 'text/javascript' });
    res.write(fn + '(' + JSON.stringify(params) + ')');

    res.end();
});

server.listen('8080');
console.log('Server is running at port 8080...');

7.在JavaScript 中，call、apply 和 bind 是 Function 对象自带的三个方法，这三个方法的主要作用是改变函数中的 this 指向。

1).

var a = {
 
    name:'onepixel',//定义a的属性
 
    say:function(){//定义a的方法
        console.log("Hi,I'm function a!");
    }
};
 
function b(name){
    console.log("Post params: "+ name);
    console.log("I'm "+this.name);
    this.say();
}
 
b.call(a,'test');

当执行b.call 时，字符串test作为参数传递给了函数b,由于call的作用，函数b中的this指向了对象a, 因此相当于调用了对象a上的函数b,而实际上a中没有定义b

2).

function Animal(name,weight){
   this.name = name;
   this.weight = weight;
} 
function Cat(){
    Animal.call(this,'cat','50');
  //Animal.apply(this,['cat','50']);
   this.say = function(){
      console.log("I am " +this.name+",my weight is " +this.weight);
   }
}
var cat =new Cat();
cat.say();//I am cat,my weight is 50

当通过new 运算符产生了cat 时，Cat中的 this 就指向了cat对象，而继承的关键是在于Cat中执行了Animal.call(this,'cat','50') 这句话，在call中将this作为thisArgs参数传递，于是Animal 方法中的 this 就指向了Cat中的 this，而 cat 中的 this 指向的是 cat 对象，所以Animal 中的 this 指向的就是 cat 对象，在 Animal 中定义了name 和 weight 属性，就相当于在 cat 中定义了这些属性，因此 cat 对象便拥有了Animal 中定义的属性，从而达到了继承的目的。

3).

image.png

obj.myFun.call(db,'成都','上海')；

8.常用的本地存储

1） cookie

是客户端用来存储数据的一种选项，它既可以在客户端设置也可以在服务器端设置。cookie会跟随任意HTTP请求一起发送。
优点：兼容性好
缺点：一是增加了网络流量，二是数据容量有限，最多只能存储4kb的数据，浏览器之间各有不同，三是不安全。

2）userData

是微软通过一个自定义行为引入的持久化用户数据的概念。用户数据允许每个文档最多128kb的数据，每个域名最多1MB的数据。
缺点：不是web标准的一部分，只有ie支持。

3）web存储机制

web Stroage，包括：Session Stroage和Local Stroage，
前者严格用于一个浏览器会话中存储数据，因为数据在浏览器关闭后会立即删除；后者则用于跨会话的持久化地存储数据。
缺点：ie不支持Session Stroage，低版本的ie（ie6、7）不支持Local Stroage，并且不支持查询语言。

4）IndexedDB

Indexed Database api的简称，是在浏览器保存结构化数据的一种「数据库」。类似SQL数据库的结构化数据存储机制，代替了废弃已久的web SQL Database api。
优点：能够在客户端存储大量的结构化数据，并且使用索引高效检索的api。
缺点：兼容性不好，未得到大部分浏览器的支持。

9.cookie的根本用途

cookie 将信息存储于用户硬盘，因此可以作为全局变量，这是它最大的一个优点。它最根本的用途是 Cookie 能够帮助 Web 站点保存有关访问者的信息。
列举cookie的几种小用途

• 保存用户登录信息。这应该是最常用的了。当您访问一个需要登录的界面，例如微博、百度及一些论坛，在登录过后一般都会有类似"下次自动登录"的选项，勾选过后下次就不需要重复验证。这种就可以通过cookie保存用户的id。
• 创建购物车。购物网站通常把已选物品保存在cookie中，这样可以实现不同页面之间数据的同步(同一个域名下是可以共享cookie的)，同时在提交订单的时候又会把这些cookie传到后台。
• 跟踪用户行为。例如百度联盟会通过cookie记录用户的偏好信息，然后向用户推荐个性化推广信息，所以浏览其他网页的时候经常会发现旁边的小广告都是自己最近百度搜过的东西。这是可以禁用的，这也是cookie的缺点之一。
  cookie是怎么起作用的呢？
  在上一节中我们知道 cookie 是存在用户硬盘中，用户每次访问站点时，Web应用程序都可以读取 Cookie 包含的信息。当用户再次访问这个站点时，浏览器就会在本地硬盘上查找与该 URL 相关联的 Cookie。如果该 Cookie 存在，浏览器就将它添加到request header的Cookie字段中，与http请求一起发送到该站点。

domain设置顶级域名
document.cookie="name=value;Path=/;domain=.XXX.com";

Session:

在计算机中，尤其是在网络应用中，称为“会话控制”。Session 对象存储特定用户会话所需的属性及配置信息。这样，当用户在应用程序的 Web 页之间跳转时，存储在 Session 对象中的变量将不会丢失，而是在整个用户会话中一直存在下去。当用户请求来自应用程序的 Web 页时，如果该用户还没有会话，则 Web 服务器将自动创建一个 Session 对象。当会话过期或被放弃后，服务器将终止该会话。Session 对象最常见的一个用法就是存储用户的首选项。例如，如果用户指明不喜欢查看图形，就可以将该信息存储在 Session 对象中。

cookie 和session 的区别：

• cookie数据存放在客户的浏览器上，session数据放在服务器上。
• cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗
  考虑到安全应当使用session
• session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能
  考虑到减轻服务器性能方面，应当使用COOKIE
• 单个cookie在客户端的限制是3K，就是说一个站点在客户端存放的COOKIE不能3K。
• 所以个人建议：
  将登陆信息等重要信息存放为SESSION
  其他信息如果需要保留，可以放在COOKIE中

sessionStorage和localStorage。

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。个人的理解是你在打开一个页面时记录sessionStorage,当你把页面关闭时session中的数据即销毁.
而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
由于sessionStorage - 针对一个 session 的数据存储，所以我们一般利用localStorage储存js文件，只有在第一次访问该页面的时候加载js文件，以后在访问的时候加载本地localStorage执行

sessionStorage和localStorage和cookie三者共同点：都是保存在浏览器端，且同源的。

区别:

• cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存
• 存储大小限制也不同，cookie数据不能超过4k，sessionStorage和localStorage 但比cookie大得多，可以达到5M
• 数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
• 作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面(即数据不共享)；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的( 即数据共享 )。

10.http连接与3+4次握手

从用户输入浏览器输入url到页面最后呈现 有哪些过程？

一道很常规的题目，考的是基本网络原理，和浏览器加载css，js过程。
答案大致如下：

• 用户输入URL地址
• 浏览器解析URL解析出主机名
• 浏览器将主机名转换成服务器ip地址（浏览器先查找本地DNS缓存列表 没有的话 再向浏览器默认的DNS服--务器发送查询请求 同时缓存）
• 浏览器将端口号从URL中解析出来
• 浏览器建立一条与目标Web服务器的TCP连接（三次握手）
• 浏览器向服务器发送一条HTTP请求报文
• 服务器向浏览器返回一条HTTP响应报文
• 关闭连接 浏览器解析文档
• 如果文档中有资源 重复6 7 8 动作 直至资源全部加载完毕

在Http工作之前，Web浏览器通过网络和Web服务器建立链连接，该连接是通过Tcp来完成的，该协议和Ip共同组成了Internet，即著名的Tcp/Ip协议族，因此Internet也被称为Tcp/Ip网络，Http是比Tcp更高的应用层协议，一般Tcp接口的端口好是80。

Web浏览器想Web服务器发送请求命令，这个命令中包含：

image.png

Web服务器发送响应数据给Web浏览器，这个包含：

image.png

然后Web服务器关闭连接。

以上就是基本的http请求。

tcp三次握手

在这个过程中，http建立连接，Tcp经过了3次握手，下面我们来讲讲具体的3次握手的过程，首先我们来看一张图：

image.png

1）：客户端发送了一个带有SYN的Tcp报文到服务器，这个三次握手中的开始。表示客户端想要和服务端建立连接。
2）：服务端接收到客户端的请求，返回客户端报文，这个报文带有SYN和ACK标志，询问客户端是否准备好。
3）：客户端再次响应服务端一个ACK，表示我已经准备好。

那么为什么要三次握手呢，有人说两次握手就好了。的确，为什么呢，这个可以从计算机网络中得到答案，举一个例子：已失效的连接请求报文段，
client发送了第一个连接的请求报文，但是由于网络不好，这个请求没有立即到达服务端，而是在某个网络节点中滞留了，知道某个时间才到达server，本来这已经是一个失效的报文，但是server端接收到这个请求报文后，还是会想client发出确认的报文，表示同意连接。假如不采用三次握手，那么只要server发出确认，新的建立就连接了，但其实这个请求是失效的请求，client是不会理睬server的确认信息，也不会向服务端发送确认的请求，但是server认为新的连接已经建立起来了，并一直等待client发来数据，这样，server的很多资源就没白白浪费掉了，采用三次握手就是为了防止这种情况的发生，server会因为收不到确认的报文，就知道client并没有建立连接。这就是三次握手的作用。

tcp四次握手

当终止协议的时候，tcp进行了4次握手，那这4次握手有是怎么回事呢？

image.png

由于Tcp连接是进行全双工工作的，因此每个方向都必须单独进行关闭，这个原则是当一方完成他的数据发送的时候就发送一个FIN来终止这个方向的连接，收到这个FIN意味着这个方向上没有数据的流动，一个TCP连接在收到这个FIN之后还能发送消息，首先执行关闭的一方进行主动的关闭，而另一方进行被动的关闭。
1）：TCP发送一个FIN，用来关闭客户到服务端的连接。
2）：服务端收到这个FIN，他发回一个ACK，确认收到序号为收到序号+1，和SYN一样，一个FIN将占用一个序号。
3）：服务端发送一个FIN到客户端，服务端关闭客户端的连接。
4）：客户端发送ACK报文确认，并将确认的序号+1，这样关闭完成。

那么为什么是4次挥手呢？
可能有人会有疑问，tcp我握手的时候为何ACK和SYN是一起发送。挥手的时候为什么是分开的时候发送呢，原因是TCP的全双工模式，接收到FIN意味着没有数据发送过来了，但是还可以继续发送数据。

11.浏览器渲染页面过程与页面优化

1）浏览器渲染页面过程https://segmentfault.com/a/1190000010298038

• 浏览器会将HTML解析成一个DOM树，DOM 树的构建过程是一个深度遍历过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。

• 将CSS解析成 CSS Rule Tree 。

• 根据DOM树和CSSOM来构造 Rendering Tree。注意：Rendering Tree 渲染树并不等同于 DOM 树，因为一些像Header或display:none的东西就没必要放在渲染树中了。

• 有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。下一步操作称之为layout，通过渲染树中渲染对象的信息，计算出每一个渲染对象的位置和尺寸，将其安置在浏览器窗口的正确位置

• 再下一步就是绘制，即遍历render树，并使用UI后端层绘制每个节点。

注意：上述这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容。

当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。

当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。
注意：回流必将引起重绘，而重绘不一定会引起回流。
如何减少回流、重绘

减少回流、重绘其实就是需要减少对render tree的操作（合并多次多DOM和样式的修改），并减少对一些style信息的请求，尽量利用好浏览器的优化策略。具体方法有：

• 直接改变className，如果动态改变样式，则使用cssText（考虑没有优化的浏览器）
• 让要操作的元素进行”离线处理”，处理完后一起更新
• 不要经常访问会引起浏览器flush队列的属性，如果你确实要访问，利用缓存
• 让元素脱离动画流，减少回流的Render Tree的规模

2）页面渲染优化

浏览器对上文介绍的关键渲染路径进行了很多优化，针对每一次变化产生尽量少的操作，还有优化判断重新绘制或布局的方式等等。
在改变文档根元素的字体颜色等视觉性信息时，会触发整个文档的重绘，而改变某元素的字体颜色则只触发特定元素的重绘；改变元素的位置信息会同时触发此元素（可能还包括其兄弟元素或子级元素）的布局和重绘。某些重大改变，如更改文档根元素的字体尺寸，则会触发整个文档的重新布局和重绘，据此及上文所述，推荐以下优化和实践：

• HTML文档结构层次尽量少，最好不深于六层；
• 脚本尽量后放，放在前即可；
• 少量首屏样式内联放在标签内；
• 样式结构层次尽量简单；
• 在脚本中尽量减少DOM操作，尽量缓存访问DOM的样式信息，避免过度触发回流；
• 减少通过JavaScript代码修改元素样式，尽量使用修改class名方式操作样式或动画；
• 动画尽量使用在绝对定位或固定定位的元素上；
• 隐藏在屏幕外，或在页面滚动时，尽量停止动画；
• 尽量缓存DOM查找，查找器尽量简洁；
• 涉及多域名的网站，可以开启域名预解析

12、首屏优化

缩小首屏载时间是一个重要的优化项，总结来主要有以下几种方式：

1）尽可能的缩小webpack或者其他打包工具生成的包的大小

为了做到这一点，需要做到尽可能的减少生产环境下依赖的库数量，尽可能的按需引用，减少无用代码占的空间。
我刚开始优化的时候，就不知道从何处优化起，而且根本不知道生成的包中哪个依赖占据着空间，我还一度挨个删去库引用，来看哪个库占用的空间最多。 后来才知道有名叫：webpack-bundle-analyzer的分析工具，接下来我顺带总结一下这个包的使用姿势。

2）使用服务端渲染的方式

这个服务端渲染不同于后端渲染，服务端渲染只是把当前的前端框架中的一部分js代码放到服务器上渲染，加载到浏览器上的html就不是一个空页面，这样可以减少首页的白屏时间，同时提高被搜索引擎检索的机会。

3）使用预渲染的方式

这个预渲染的方式简单来说就是在正常打包时，会预先运行一次js代码，将一部分静态的页面直接渲染成html写在生成的index.html中，这种方式在加载完index.html后，就会有界面展示出来，无需等待加载js代码后再去渲染，所以这种方式也可以显著的减少首屏加载时间，也可以提高被搜索引擎检索的机会，同时预渲染的配置很简单，容易上手。

4）使用gzip减小网络传输的流量大小

gzip是GNUzip的缩写，最早用于UNIX系统的文件压缩。HTTP协议上的gzip编码是一种用来改进web应用程序性能的技术，web服务器和客户端（浏览器）必须共同支持gzip。目前主流的浏览器，Chrome,firefox,IE等都支持该协议。常见的服务器如Apache，Nginx，IIS同样支持gzip。使用gzip可以将原静态文件压缩到30%，效果很明显，对于优化首屏加载时间非常适合。

5）按照页面或者组件分块懒加载

这种优化，就是将每个组件的js代码独立出来，在使用到这个组件时，才向服务器请求文件，并且请求过一次后就会缓存下来，再次使用到这个组件时，就会使用缓存，不再发送请求。

13.loader 和 plugin

主要区别

• loader 用于加载某些资源文件。 因为webpack 本身只能打包commonjs规范的js文件，对于其他资源例如 css，图片，或者其他的语法集，比如 jsx， coffee，是没有办法加载的。 这就需要对应的loader将资源转化，加载进来。从字面意思也能看出，loader是用于加载的，它作用于一个个文件上。

• plugin 用于扩展webpack的功能。它直接作用于 webpack，扩展了它的功能。当然loader也时变相的扩展了 webpack ，但是它只专注于转化文件（transform）这一个领域。而plugin的功能更加的丰富，而不仅局限于资源的加载。

14. MVC与MVVM

MVC :

MVC是一种架构模式，M表示Model，V表示视图View，C表示控制器Controller：

Model负责存储、定义、操作数据；
View用来展示给用户，并且和用户进行交互；
Controller是Model和View的协调者，Controller把Model中的数据拿过来给View使用。Controller可以直接与Model和View进行通信，而View不能与Controller直接通信。，当有数据更新时，Model也要与Controller进行通信，这个时候就要用Notification和KVO，这个方式就像发广播一样，Model发信号，Controller设置接收监听信号，当有数据更新是就发信号给Controller，Model和View不能直接通信，这样违背MVC设计原则。View与Controller通信需要利用代理协议的方式，Controller可以直接根据Model决定View的展示。View如果接受响应事件则通过delegate，target-action，block等方式告诉Controller的状态变化。Controller进行业务的处理，然后再控制View的展示。
那这样Model和View就是相互独立的。View只负责页面的展示，Model只是数据的存储，那么也就达到了解耦和重用的目的。
想必我们用着已经非常习惯,但是他有存在一些问题,这是笔者想通过此文告诉大家的:

• 模型的代码少

• 控制器的代码却是越写越多

• 由于写的代码较多,故不好进行性能测试

MVVM :

全称:Model-View-ViewModel ，MVVM 模式和 MVC 模式一样，主要目的也是分离视图（View）和模型（Model）
MVVM就是帮忙分担一下controller里面的部分业务逻辑。 用户更新view,model的数据也更新
这个时候，controller将不再直接和真实的model进行绑定了，而通过ViewModel,viewModel进而持有真实的Model。
概念:

• 在MVVM中,view与viewController正式联系在一起,我们可以把他们视为一个组件

• 在MVVM架构中,view与viewController均不能直接引用model,而是通过引用viewModel来间接引用model

• 很多人会问,viewModel是一个什么样的架构呢?里面应该放些什么样的东西呢?我们可以在viewModel中放置用户输入逻辑,视图显示逻辑及发送网络请求和其他一些代码

那么作为一种新型的架构模式,在使用时应该有哪些地方值得我们注意呢?

• view 可以引用viewModel,但反过来却是不行

• viewModel 可以引用model,但是反过来也不行

关于MVVM的优点：

• 方便测试

在MVC下，Controller基本是无法测试的，里面混杂了个各种逻辑，而且分散在不同的地方。有了MVVM我们就可以测试里面的viewModel，来验证我们的处理结果对不对（Xcode7的测试已经越来越完善了）。

• 便于代码的移植

比如iOS里面有iPhone版本和iPad版本，除了交互展示不一样外，业务逻辑的model是一致的。这样，我们就可以以很小的代价去开发另一个app。

• 兼容MVC

MVVM是MVC的一个升级版，目前的MVC也可以很快的转换到MVVM这个模式。VC可以省去一大部分展示逻辑。

缺点：

• 类会增多

每个VC都附带一个viewModel，类的数量*2

• viewModel会越来越庞大

我们把逻辑给了viewModel，那势必Model也会变得很复杂，里面的属性和方法越来越多。可能重写的方法比较多，因为涉及到一些数据的转换以及和controller之间的通信。

• 调用复杂度增加

由于数据都是从viewModel来，想想突然来了一个新人，一看代码，不知道真实的模型是谁。比如常用tableview的数据源，一般都是一个数组，如果不断的通过viewModel去取，沟通上没有那么直接。况且每封一层，意味着要写很多代码去融合他们的转换。

15.nginx

Nginx (engine x) 是一个高性能的HTTP和反向代理服务，也是一个IMAP/POP3/SMTP服务。Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru站点（俄文：Рамблер）开发的，第一个公开版本0.1.0发布于2004年10月4日。

其将源代码以类BSD许可证的形式发布，因它的稳定性、丰富的功能集、示例配置文件和低系统资源的消耗而闻名。2011年6月1日，nginx 1.0.4发布。

Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器，并在一个BSD-like 协议下发行。其特点是占有内存少，并发能力强，事实上nginx的并发能力确实在同类型的网页服务器中表现较好，中国大陆使用nginx网站用户有：百度、[京东][新浪][网易][腾讯][淘宝]

16.ASP.NET

ASP.NET又称为ASP+，不仅仅是ASP的简单升级，而是微软公司推出的新一代脚本语言。ASP.NET基于.NET Framework的Web开发平台，不但吸收了ASP以前版本的最大优点并参照Java、VB语言的开发优势加入了许多新的特色，同时也修正了以前的ASP版本的运行错误。 ^[1-2]

ASP.NET具备开发网站应用程序的一切解决方案，包括验证、缓存、状态管理、调试和部署等全部功能。在代码撰写方面特色是将页面逻辑和业务逻辑分开，它分离程序代码与显示的内容，让丰富多彩的网页更容易撰写。同时使程序代码看起来更洁净、更简单。

17. HTTP和HTTPS的基本概念

HTTP：是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准（TCP），用于从WWW服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少。
HTTPS：是以安全为目标的HTTP通道，简单讲是HTTP的安全版，即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。

HTTPS协议的主要作用可以分为两种：一种是建立一个信息安全通道，来保证数据传输的安全；另一种就是确认网站的真实性。

HTTP与HTTPS有什么区别？

HTTP协议传输的数据都是未加密的，也就是明文的，因此使用HTTP协议传输隐私信息非常不安全，为了保证这些隐私数据能加密传输，于是网景公司设计了SSL（Secure Sockets Layer）协议用于对HTTP协议传输的数据进行加密，从而就诞生了HTTPS。简单来说，HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比http协议安全。
HTTPS和HTTP的区别主要如下：

• https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。
• http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。
• http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
• http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

HTTPS的工作原理
　　我们都知道HTTPS能够加密信息，以免敏感信息被第三方获取，所以很多银行网站或电子邮箱等等安全级别较高的服务都会采用HTTPS协议。
使用两把密钥的公开密钥加密

公开密钥加密使用一对非对称的密钥。一把叫做私钥，另一把叫做公钥。私钥不能让其他任何人知道，而公钥则可以随意发布，任何人都可以获得。使用公钥加密方式，发送密文的一方使用对方的公钥进行加密处理，对方收到被加密的信息后，再使用自己的私钥进行解密。利用这种方式，不需要发送用来解密的私钥，也不必担心密钥被攻击者窃听而盗走。

HTTP与HTTPS的区别-马海祥博客

客户端在使用HTTPS方式与Web服务器通信时有以下几个步骤，如图所示。

（1）客户使用https的URL访问Web服务器，要求与Web服务器建立SSL连接。

（2）Web服务器收到客户端请求后，会将网站的证书信息（证书中包含公钥）传送一份给客户端。

（3）客户端的浏览器与Web服务器开始协商SSL连接的安全等级，也就是信息加密的等级。

（4）客户端的浏览器根据双方同意的安全等级，建立会话密钥，然后利用网站的公钥将会话密钥加密，并传送给网站。

（5）Web服务器利用自己的私钥解密出会话密钥。

（6）Web服务器利用会话密钥加密与客户端之间的通信。

image

HTTPS的优点

尽管HTTPS并非绝对安全，掌握根证书的机构、掌握加密算法的组织同样可以进行中间人形式的攻击，但HTTPS仍是现行架构下最安全的解决方案，主要有以下几个好处：

（1）使用HTTPS协议可认证用户和服务器，确保数据发送到正确的客户机和服务器；

（2）HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比http协议安全，可防止数据在传输过程中不被窃取、改变，确保数据的完整性。

（3）HTTPS是现行架构下最安全的解决方案，虽然不是绝对安全，但它大幅增加了中间人攻击的成本。

（4）谷歌曾在2014年8月份调整搜索引擎算法，并称“比起同等HTTP网站，采用HTTPS加密的网站在搜索结果中的排名将会更高”。

HTTPS的缺点

虽然说HTTPS有很大的优势，但其相对来说，还是存在不足之处的：

（1）HTTPS协议握手阶段比较费时，会使页面的加载时间延长近50%，增加10%到20%的耗电；

（2）HTTPS连接缓存不如HTTP高效，会增加数据开销和功耗，甚至已有的安全措施也会因此而受到影响；

（3）SSL证书需要钱，功能越强大的证书费用越高，个人网站、小网站没有必要一般不会用。

（4）SSL证书通常需要绑定IP，不能在同一IP上绑定多个域名，IPv4资源不可能支撑这个消耗。

（5）HTTPS协议的加密范围也比较有限，在黑客攻击、拒绝服务攻击、服务器劫持等方面几乎起不到什么作用。最关键的，SSL证书的信用链体系并不安全，特别是在某些国家可以控制CA根证书的情况下，中间人攻击一样可行。

16.ajax

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发送异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理，我们必须对XmlHttpRequest有所了解。
XmlHttpRequest是Ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是javascript可以及时向服务器提出请求和处理相应，而不阻塞用户。达到无刷新的效果。

同步的概念

同步，我的理解是一种线性执行的方式，执行的流程不能跨越。一般用于流程性比较强的程序，我们做的用户登录功能也是同步处理的，必须用户通过用户名和密码验证后才能进入系统的操作。

异步的概念

异步，是一种并行处理的方式，不必等待一个程序执行完，可以执行其它的任务。在程序中异步处理的结果通常使用回调函数来处理结果。在JavaScript中实现异步的方式主要有Ajax和H5新增的Web Worker。

异步javascript和XML，是指一种创建交互式网页应用的网页开发技术。通过后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

js原生

function loadXMLDoc()
{
    var xmlhttp;
    if (window.XMLHttpRequest)
    {
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        // IE6, IE5 浏览器执行代码
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
    xmlhttp.send();
}

Jquery

$.ajax({
        type: "get",
        async: true,
        url: "/recharge",
        data:{
            phone : phone,          
            startTime : starttime,
            endTime : endtime,
            startTimeByRecharge:startTimeByRecharge,
            endTimeByRecharge:endTimeByRecharge
        },
        dataType: "json",
        success: function (data) {
            //console.log(data);
            if(data.success==true){
                CreateChargeTable(data,info);
            }else{
                alert("后台数据处理中，请稍后！");
            }
            //console.log( Object.keys(data.data[0].level).length);
        }
    });
}

17.设计模式

1. 工厂模式
2. 构造函数模式
3. 原型模式
4. 混合构造函数和原型模式
5. 动态原型模式
6. 寄生构造函数模式
7. 稳妥构造函数模式

程序的设计模式?工厂模式?发布订阅?
1）设计模式并不是某种语言的某块代码，设计模式是一种思想，提供给在编码时候遇到的各种问题是可以采取的解决方案，更倾向于一种逻辑思维，而不是万能代码块。
设计模式主要分三个类型:创建型、结构型和行为型。
创建型模式：单例模式，抽象工厂模式，建造者模式，工厂模式与原型模式。
结构型模式：适配器模式，桥接模式，装饰者模式，组合模式，外观模式，享元模式以及代理模式。
行为型模式：模板方法模式，命令模式，迭代器模式，观察者模式，中介者模式，备忘录模式，解释器模式，状态模式，策略模式，职责链模式和访问者模式。

2）与创建型模式类似，工厂模式创建对象（视为工厂里的产品）是无需指定创建对象的具体类。
工厂模式定义一个用于创建对象的接口，这个接口由子类决定实例化哪一个类。该模式使一个类的实例化延迟到了子类。而子类可以重写接口方法以便创建的时候指定自己的对象类型。

3）观察者模式又叫做发布订阅模式，它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生改变时就会通知所有观察着对象。它是由两类对象组成，主题和观察者，主题负责发布事件，同时观察者通过订阅这些事件来观察该主体，发布者和订阅者是完全解耦的，彼此不知道对方的存在，两者仅仅共享一个自定义事件的名称。
( 设计模式实在是太高深了，小伙伴门结合网上实例自行学习，我实在是无能为力啊 )