前端面试总结七

- 日理万妓 2023-05-29 11:38 29阅读 0赞

1.JS的事件冒泡和事件捕获  
**事件**  
事件是文档和浏览器窗口中发生的特定的交互瞬间。事件是javascript应用跳动的心脏，也是把所有东西黏在一起的胶水，当我们与浏览器中web页面进行某些类型的交互时，事件就发生了。  
事件可能是用户在某些内容上的点击，鼠标经过某个特定元素或按下键盘上的某些按键，事件还可能是web浏览器中发生的事情，比如说某个web页面加载完成，或者是用户滚动窗口或改变窗口大小。

**事件流：**  
事件流描述的是从页面中接受事件的顺序，但有意思的是，微软（IE）和网景（Netscape）开发团队居然提出了两个截然相反的事件流概念，IE的事件流是事件冒泡流(event bubbling)，而Netscape的事件流是事件捕获流(event capturing)。

**事件冒泡**  
IE提出的事件流叫做事件冒泡，即事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点，看一下以下示例：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body onclick="bodyClick()">
    
        <div onclick="divClick()">
            <button onclick="btn()">
                <p onclick="p()">点击冒泡</p>
            </button>
        </div>
        <script>
           
           function p(){
         
              console.log('p标签被点击')
           }
            function btn(){
         
                console.log("button被点击")
            }
             function divClick(event){
         
                 console.log('div被点击');
             }
            function bodyClick(){
         
                console.log('body被点击')
            }
    
        </script>
    
    </body>
    </html>

接下来我们点击一下页面上的p元素，看看会发生什么：  
![在这里插入图片描述][20191101111318218.png]  
正如上面我们所说的，它会从一个最具体的的元素接收，然后逐级向上传播， p=>button=>div=>body…事件冒泡可以形象地比喻为把一颗石头投入水中，泡泡会一直从水底冒出水面。

**事件捕获**  
网景公司提出的事件流叫事件捕获流。  
事件捕获流的思想是不太具体的DOM节点应该更早接收到事件，而最具体的节点应该最后接收到事件，针对上面同样的例子，点击按钮，那么此时click事件会按照这样传播：（下面我们就借用addEventListener的第三个参数来模拟事件捕获流）。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    <div>
        <button>
            <p>点击捕获</p>
        </button>
    </div>
    <script>
        var oP=document.querySelector('p');
        var oB=document.querySelector('button');
        var oD=document.querySelector('div');
        var oBody=document.querySelector('body');
    
        oP.addEventListener('click',function(){
         
            console.log('p标签被点击')
        },true);
    
        oB.addEventListener('click',function(){
         
            console.log("button被点击")
        },true);
    
        oD.addEventListener('click',  function(){
         
            console.log('div被点击')
        },true);
    
        oBody.addEventListener('click',function(){
         
            console.log('body被点击')
        },true);
    
    </script>
    
    
    
    </body>
    </html>

同样我们看一下后台的打印结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70]  
正如我们看到的，和冒泡流万全相反，从最不具体的元素接收到最具体的元素接收事件 body=>div=>button=>p

**DOM事件流：**  
‘DOM2级事件’规定的事件流包含3个阶段，事件捕获阶段、处于目标阶段、事件冒泡阶段。首先发生的事件捕获为截获事件提供机会，然后是实际的目标接收事件，最后一个阶段是事件冒泡阶段，可以在这个阶段对事件做出响应。  
　　　在DOM事件流中，事件的目标在捕获阶段不会接收到事件，这意味着在捕获阶段事件从document到

就停止了，下个阶段是处于目标阶段，于是事件在

上发生，并在事件处理中被看成冒泡阶段的一部分，然后，冒泡阶段发生，事件又传播回document。  
下面是我们模拟它的示例：

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    </head>
    <body>
    <button id="btn">DOM事件流</button>
    <script>
    var btn=document.getElementById("btn");
    btn.onclick=function(event){
         
    console.log("div 处于目标阶段");
    };
    document.body.addEventListener("click",function(event){
         
    console.log("event bubble 事件冒泡");
    },false);
    document.body.addEventListener("click",function(event){
         
    console.log("event catch 事件捕获");
    },true);
    </script>
    
    
    </body>
    </html>

看看后台给出什么结果：  
![在这里插入图片描述][20191101111641415.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70 1]  
就是这样一个流程，先捕获，然后处理，然后再冒泡出去。

2.JavaScript中var、let和const的区别  
在ES6（ES2015）出现之前，JavaScript中声明变量就只有通过 var 关键字，函数声明是通过 function 关键字，而在ES6之后，声明的方式有 var 、 let 、 const 、 function 、 class ，本文主要讨论 var 、 let 和 const 之间的区别。

**var**  
如果使用关键字 var 声明一个变量，那么这个变量就属于当前的函数作用域，如果声明是发生在任何函数外的顶层声明，那么这个变量就属于全局作用域。举例说明：

var a = 1; //此处声明的变量a为全局变量
    function foo(){
        
       var a = 2;//此处声明的变量a为函数foo的局部变量
       console.log(a);//2
    }
    foo();
    console.log(a);//1

如果在声明变量时，省略 var 的话，该变量就会变成全局变量，如全局作用域中存在该变量，就会更新其值。如：

var a = 1; //此处声明的变量a为全局变量
    function foo(){
        
       a = 2;//此处的变量a也是全局变量
       console.log(a);//2
    }
    foo();
    console.log(a);//2

注意：var 声明的变量存在提升（hoisting）。  
提升是指无论 var 出现在一个作用域的哪个位置，这个声明都属于当前的整个作用域，在其中到处都可以访问到。注意只有变量声明才会提升，对变量赋值并不会提升。如下例所示：

console.log(a);//undefined
    var a = 1;

该代码段跟下列代码段是一样的逻辑：

var a;
    console.log(a);//undefined
    a = 1;

而如果对未声明过的变量进行操作，就会报错

console.log(b);//假设b未声明过，Uncaught ReferenceError: b is not defined

**let**  
let 声明的变量，具有如下几个特点：  
（1）let 声明的变量具有块作用域的特征。  
（2）在同一个块级作用域，不能重复声明变量。  
（3）let 声明的变量不存在变量提升，换一种说法，就是 let 声明存在暂时性死区（TDZ）。  
如下面几个例子所示

let a = 1;
    console.log(a);//1
    console.log(b);//Uncaught ReferenceError: b is not defined
    let b = 2;

function foo(){
        
        let a = 1;
        let a = 2;//Uncaught SyntaxError: Identifier 'a' has already been declared
    }

以下是一个经典的关于 var 和 let 的一个例子：

for (var i = 0; i < 10; i++) {
        
        setTimeout(function(){
        
            console.log(i);
        },100)
    };

该代码运行后，会在控制台打印出10个10.若修改为：

for (let i = 0; i < 10; i++) {
        
        setTimeout(function(){
        
            console.log(i);
        },100)
    };

则该代码运行后，就会在控制台打印出0-9.

**const**  
const 声明方式，除了具有 let 的上述特点外，其还具备一个特点，即 const 定义的变量，一旦定义后，就不能修改，即 const 声明的为常量。  
例如：

const a = 1;
    console.log(a);//1
    a = 2;
    console.log(a);//Uncaught TypeError: Assignment to constant variable.

但是，并不是说 const 声明的变量其内部内容不可变，如：

const obj = {
        a:1,b:2};
    console.log(obj.a);//1
    obj.a = 3;
    console.log(obj.a);//3

所以准确的说，是 const 声明创建一个值的只读引用。但这并不意味着它所持有的值是不可变的，只是变量标识符不能重新分配。

总结  
（1）var 声明的变量属于函数作用域，let 和 const 声明的变量属于块级作用域；  
（2）var 存在变量提升现象，而 let 和 const 没有此类现象；  
（3）var 变量可以重复声明，而在同一个块级作用域，let 变量不能重新声明，const 变量不能修改。

3.线程和进程  
**线程是什么？进程是什么？二者有什么区别和联系？**  
（1）线程是CPU独立运行和独立调度的基本单位；  
（2）进程是资源分配的基本单位；  
两者的联系：进程和线程都是操作系统所运行的程序运行的基本单元。  
区别：  
（1）进程具有独立的空间地址，一个进程崩溃后，在保护模式下不会对其它进程产生影响。  
（2）线程只是一个进程的不同执行路径，线程有自己的堆栈和局部变量，但线程之间没有单独的地址空间，一个线程死掉就等于整个进程死掉。

**什么是堆栈？有什么区别？**  
堆栈都是一种数据项按序排列的数据结构，只能在一端对数据项进行插入和删除。在单片机应用中，堆栈是个特殊的存储区，主要功能是暂时存放数据和地址，通常用来保护断点和现场。要点：堆，队列优先,先进先出（FIFO—first in first out）。栈，先进后出(FILO—First-In/Last-Out)。

内存的分区：常量区，静态区（全局区），堆，栈，代码区  
（1）管理方式：对于栈来讲，是由编译器自动管理，无需我们手工控制；对于堆来说，释放工作由程序员控制，容易产生内存泄露。  
（2）申请大小：如果栈申请的空间超过栈的剩余空间时，将提示内存溢出（8M）。因此，能从栈获得的空间较小。堆是由于系统是用链表来存储的空闲内存地址的，不是连续的堆获的空间比较灵活，也比较大。  
（3）碎片问题：对于堆来讲，频繁的new/delete势必会造成内存空间的不连续，从而造成大量的碎 片，使程序效率降低对于栈来讲，则不会存在这个问题，因为栈是先进后出的队列，他们是如此的一一对应，以至于永远都不可能有一个内存块从栈中间弹出  
（4）分配方式：堆都是动态分配的，没有静态分配的堆。栈有2种分配方式：静态分配和动态分配。静态分配是编译器完成的，比如局部变量的分配。动态分配由alloca函数进行分配，但是栈的动态分配和堆是不同的，他的动态分配是由编译器进行释放，无需我们手工实现。  
（5）分配效率：栈是机器系统提供的数据结构，计算机会在底层对栈提供支持：分配专门的寄存器存放栈的地址，压栈出栈都有专门的指令执行，这就决定了栈的效率比较高。堆则是C/C++函数库提供的，它的机制是很复杂的

多进程的程序要比多线程的程序健壮，但在进程切换时，耗费资源较大，效率要差写，对于一些要求同时进行并且又要共享某些变量的并发操作，只能用线程，不能用进程。

**什么是多线程？**  
多线程：是指从软件或者硬件上实现多个线程的并发技术。  
多线程的好处：  
（1）使用多线程可以把程序中占据时间长的任务放到后台去处理，如图片、视屏的下载  
（2）发挥多核处理器的优势，并发执行让系统运行的更快、更流畅，用户体验更好  
多线程的缺点：  
（1）大量的线程降低代码的可读性；  
（2）更多的线程需要更多的内存空间  
（3）当多个线程对同一个资源出现争夺时候要注意线程安全的问题。  
IOS中实现多线程的方法  
常用的：NSThread NSOperationQueue GCD

4.移动端适配方案  
目前为止出现的一些关于移动端适配的技术方案：  
（1）通过媒体查询的方式即CSS3的meida queries  
（2）以天猫首页为代表的 flex 弹性布局  
（3）以淘宝首页为代表的 rem+viewport缩放  
（4）rem 方式

**Media Queries**  
它主要是通过查询设备的宽度来执行不同的 css 代码，最终达到界面的配置。核心语法是：

@media screen and (max-width: 600px) {
         /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
      /*你的css代码*/
    }

优点：

*  media query可以做到设备像素比的判断，方法简单，成本低，特别是对移动和PC维护同一套代码的时候。目前像Bootstrap等框架使用这种方式布局
 *  图片便于修改，只需修改css文件
 *  调整屏幕宽度的时候不用刷新页面即可响应式展示

缺点：

*  代码量比较大，维护不方便
 *  为了兼顾大屏幕或高清设备，会造成其他设备资源浪费，特别是加载图片资源
 *  为了兼顾移动端和PC端各自响应式的展示效果，难免会损失各自特有的交互方式

\*\*Flex弹性布局 \*\*  
以天猫的实现方式进行说明：  
它的viewport是固定的：`<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70 2]  
**高度定死，宽度自适应，元素都采用px做单位。**  
随着屏幕宽度变化，页面也会跟着变化，效果就和PC页面的流体布局差不多，在哪个宽度需要调整的时候使用响应式布局调调就行（比如网易新闻），这样就实现了『适配』。

**rem + viewport 缩放 \*\*  
\*\* 这也是淘宝使用的方案，根据屏幕宽度设定 rem 值，需要适配的元素都使用 rem 为单位，不需要适配的元素还是使用 px 为单位（1em = 16px）。**  
实现原理 ：  
根据rem将页面放大dpr倍, 然后viewport设置为1/dpr.  
如iphone6 plus的dpr为3, 则页面整体放大3倍, 1px(css单位)在plus下默认为3px(物理像素)  
然后viewport设置为1/3, 这样页面整体缩回原始大小. 从而实现高清。  
![在这里插入图片描述][20191101113646588.png]  
这样整个网页在设备内显示时的页面宽度就会等于设备逻辑像素大小，也就是device-width。  
这个device-width的计算公式为：设备的物理分辨率/(devicePixelRatio \* scale)，在scale为1的情况下，device-width = 设备的物理分辨率/devicePixelRatio 。

\*\*rem实现 \*\*  
比如说“魅族”移动端的实现方式，viewport也是固定的：  
`<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">`。  
通过以下代码来控制rem基准值(设计稿以720px宽度量取实际尺寸)

css通过sass预编译，设置量取的px值转化rem的变量$px: (1/100)+rem;  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70 3]

5.单页应用和多页应用  
**单页面应用（SinglePage Web Application，SPA）**  
只有一张Web页面的应用，是一种从Web服务器加载的富客户端，单页面跳转仅刷新局部资源 ，公共资源(js、css等)仅需加载一次，常用于PC端官网、购物等网站  
如图:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70 4]  
第一次进入页面的时候会请求一个html文件，刷新清除一下。切换到其他组件，此时路径也相应变化，但是并没有新的html文件请求，页面内容也变化了。  
原理是：JS会感知到url的变化，通过这一点，可以用js动态的将当前页面的内容清除掉，然后将下一个页面的内容挂载到当前页面上，这个时候的路由不是后端来做了，而是前端来做，判断页面到底是显示哪个组件，清除不需要的，显示需要的组件。这种过程就是单页应用，每次跳转的时候不需要再请求html文件了。

（1）为什么页面切换快？  
页面每次切换跳转时，并不需要做html文件的请求，这样就节约了很多http发送时延，我们在切换页面的时候速度很快。  
（2）缺点：首屏时间慢，SEO差  
单页应用的首屏时间慢，首屏时需要请求一次html，同时还要发送一次js请求，两次请求回来了，首屏才会展示出来。相对于多页应用，首屏时间慢。  
SEO效果差，因为搜索引擎只认识html里的内容，不认识js的内容，而单页应用的内容都是靠js渲染生成出来的，搜索引擎不识别这部分内容，也就不会给一个好的排名，会导致单页应用做出来的网页在百度和谷歌上的排名差。

**多页面应用（MultiPage Application，MPA）**  
多页面跳转刷新所有资源，每个公共资源(js、css等)需选择性重新加载，常用于 app 或 客户端等  
如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70 5]  
（1）为什么多页应用的首屏时间快？  
首屏时间叫做页面首个屏幕的内容展现的时间，当我们访问页面的时候，服务器返回一个html，页面就会展示出来，这个过程只经历了一个HTTP请求，所以页面展示的速度非常快。  
（2）为什么搜索引擎优化效果好（SEO）？  
搜索引擎在做网页排名的时候，要根据网页内容才能给网页权重，来进行网页的排名。搜索引擎是可以识别html内容的，而我们每个页面所有的内容都放在Html中，所以这种多页应用，seo排名效果好。  
（3）但是它也有缺点，就是切换慢  
因为每次跳转都需要发出一个http请求，如果网络比较慢，在页面之间来回跳转时，就会发现明显的卡顿。

具体对比分析：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70 6]

6.setTimeout时间设置为0  
setTimeout(fn,millisec) 方法用于在指定的毫秒数后调用函数或计算表达式。  
很简单，setTimeout() 只执行 fn 一次，到底什么时候执行取决于第二个参数millisec设定的毫秒数，所以很多人习惯上称之为延迟，无非就是延迟一段时间后再执行里面的代码。

setTimeout(function(){
        
     console.log('我是setTimeout');
    }, 1000);

正常情况下，我是setTimeout 这句话并不会马上输出而是等1000毫秒以后会在浏览器的控制台输出。

看一个例子，这个例子的输出结果是什么？

setTimeout(function(){
        
     console.log(1);
    }, 0);
    console.log(2);
    console.log(3);

出乎一些人的意料，得到的结果竟然是2、3、1。这似乎不按套路出牌啊，明明是等待了0毫秒也就是不等待直接输出啊，为啥1却在最后输出了呢？  
这就需要搞清楚一个很重要的概念：js是单线程的，单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。

其实，当js代码执行遇到setTimeout(fn,millisec)时，会把fn这个函数放在任务队列中，当js引擎线程空闲时并达到millisec指定的时间时，才会把fn放到js引擎线程中执行。  
**setTimeout(fn,0)的含义是，指定某个任务在主线程最早可得的空闲时间执行，也就是说，尽可能早得执行。它在"任务队列"的尾部添加一个事件，因此要等到同步任务和"任务队列"现有的事件都处理完，才会得到执行。**

参考：[setTimeout时间设置为0详细解析][setTimeout_0]

7.为什么JavaScript是单线程  
JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。那么，为什么JavaScript不能有多个线程呢？这样能提高效率啊。

JavaScript的单线程，与它的用途有关。**作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题**。比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？

所以，为了避免复杂性，从一诞生，JavaScript就是单线程，这已经成了这门语言的核心特征，将来也不会改变。

为了利用多核CPU的计算能力，HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程，但是子线程完全受主线程控制，且不得操作DOM。所以，这个新标准并没有改变JavaScript单线程的本质。

参考：[JavaScript 运行机制详解：再谈Event Loop][JavaScript _Event Loop]

8.Event Loop  
**任务队列**  
单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。  
如果排队是因为计算量大，CPU忙不过来，倒也算了，但是很多时候CPU是闲着的，因为IO设备（输入输出设备）很慢（比如Ajax操作从网络读取数据），不得不等着结果出来，再往下执行。  
JavaScript语言的设计者意识到，这时主线程完全可以不管IO设备，挂起处于等待中的任务，先运行排在后面的任务。等到IO设备返回了结果，再回过头，把挂起的任务继续执行下去。  
于是，所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。  
具体来说，异步执行的运行机制如下。（同步执行也是如此，因为它可以被视为没有异步任务的异步执行。）  
（1）所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。  
（2）主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。  
（3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。  
（4）主线程不断重复上面的第三步。

下图就是主线程和任务队列的示意图。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70 7]  
只要主线程空了，就会去读取"任务队列"，这就是JavaScript的运行机制。这个过程会不断重复。

**事件和回调函数**  
“任务队列"是一个事件的队列（也可以理解成消息的队列），IO设备完成一项任务，就在"任务队列"中添加一个事件，表示相关的异步任务可以进入"执行栈"了。主线程读取"任务队列”，就是读取里面有哪些事件。  
“任务队列"中的事件，除了IO设备的事件以外，还包括一些用户产生的事件（比如鼠标点击、页面滚动等等）。只要指定过回调函数，这些事件发生时就会进入"任务队列”，等待主线程读取。  
所谓"回调函数"（callback），就是那些会被主线程挂起来的代码。异步任务必须指定回调函数，当主线程开始执行异步任务，就是执行对应的回调函数。  
"任务队列"是一个先进先出的数据结构，排在前面的事件，优先被主线程读取。主线程的读取过程基本上是自动的，只要执行栈一清空，"任务队列"上第一位的事件就自动进入主线程。但是，由于存在后文提到的"定时器"功能，主线程首先要检查一下执行时间，某些事件只有到了规定的时间，才能返回主线程。

**Event Loop**  
主线程从"任务队列"中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为Event Loop（事件循环）。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70 8]  
上图中，主线程运行的时候，产生堆（heap）和栈（stack），栈中的代码调用各种外部API，它们在"任务队列"中加入各种事件（click，load，done）。只要栈中的代码执行完毕，主线程就会去读取"任务队列"，依次执行那些事件所对应的回调函数。  
执行栈中的代码（同步任务），总是在读取"任务队列"（异步任务）之前执行。请看下面这个例子。

var req = new XMLHttpRequest();
        req.open('GET', url);    
        req.onload = function (){
        };    
        req.onerror = function (){
        };    
        req.send();

上面代码中的req.send方法是Ajax操作向服务器发送数据，它是一个异步任务，意味着只有当前脚本的所有代码执行完，系统才会去读取"任务队列"。所以，它与下面的写法等价。

var req = new XMLHttpRequest();
        req.open('GET', url);
        req.send();
        req.onload = function (){
        };    
        req.onerror = function (){
        };

也就是说，指定回调函数的部分（onload和onerror），在send()方法的前面或后面无关紧要，因为它们属于执行栈的一部分，系统总是执行完它们，才会去读取"任务队列"。

参考：[JavaScript 运行机制详解：再谈Event Loop][JavaScript _Event Loop]

9.Node.js的Event Loop  
Node.js也是单线程的Event Loop，但是它的运行机制不同于浏览器环境。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70 9]  
根据上图，Node.js的运行机制如下。  
（1）V8引擎解析JavaScript脚本。  
（2）解析后的代码，调用Node API。  
（3）libuv库负责Node API的执行。它将不同的任务分配给不同的线程，形成一个Event Loop（事件循环），以异步的方式将任务的执行结果返回给V8引擎。  
（4）V8引擎再将结果返回给用户。

除了setTimeout和setInterval这两个方法，Node.js还提供了另外两个与"任务队列"有关的方法：process.nextTick和setImmediate。它们可以帮助我们加深对"任务队列"的理解。  
process.nextTick方法可以在当前"执行栈"的尾部----下一次Event Loop（主线程读取"任务队列"）之前----触发回调函数。也就是说，它指定的任务总是发生在所有异步任务之前。setImmediate方法则是在当前"任务队列"的尾部添加事件，也就是说，它指定的任务总是在下一次Event Loop时执行，这与setTimeout(fn, 0)很像。请看下面的例子（via StackOverflow）。

process.nextTick(function A() {
        
      console.log(1);
      process.nextTick(function B(){
        console.log(2);});
    });
    
    setTimeout(function timeout() {
        
      console.log('TIMEOUT FIRED');
    }, 0)
    // 1
    // 2
    // TIMEOUT FIRED

上面代码中，由于process.nextTick方法指定的回调函数，总是在当前"执行栈"的尾部触发，所以不仅函数A比setTimeout指定的回调函数timeout先执行，而且函数B也比timeout先执行。这说明，如果有多个process.nextTick语句（不管它们是否嵌套），将全部在当前"执行栈"执行。

现在，再看setImmediate。

setImmediate(function A() {
        
      console.log(1);
      setImmediate(function B(){
        console.log(2);});
    });
    
    setTimeout(function timeout() {
        
      console.log('TIMEOUT FIRED');
    }, 0);

上面代码中，setImmediate与setTimeout(fn,0)各自添加了一个回调函数A和timeout，都是在下一次Event Loop触发。那么，哪个回调函数先执行呢？答案是不确定。运行结果可能是1–TIMEOUT FIRED–2，也可能是TIMEOUT FIRED–1--2。  
令人困惑的是，Node.js文档中称，setImmediate指定的回调函数，总是排在setTimeout前面。实际上，这种情况只发生在递归调用的时候。

setImmediate(function (){
        
      setImmediate(function A() {
        
        console.log(1);
        setImmediate(function B(){
        console.log(2);});
      });
    
      setTimeout(function timeout() {
        
        console.log('TIMEOUT FIRED');
      }, 0);
    });
    // 1
    // TIMEOUT FIRED
    // 2

上面代码中，setImmediate和setTimeout被封装在一个setImmediate里面，它的运行结果总是1–TIMEOUT FIRED–2，这时函数A一定在timeout前面触发。至于2排在TIMEOUT FIRED的后面（即函数B在timeout后面触发），是因为setImmediate总是将事件注册到下一轮Event Loop，所以函数A和timeout是在同一轮Loop执行，而函数B在下一轮Loop执行。  
我们由此得到了process.nextTick和setImmediate的一个重要区别：多个process.nextTick语句总是在当前"执行栈"一次执行完，多个setImmediate可能则需要多次loop才能执行完。事实上，这正是Node.js 10.0版添加setImmediate方法的原因，否则像下面这样的递归调用process.nextTick，将会没完没了，主线程根本不会去读取"事件队列"！

process.nextTick(function foo() {
        
      process.nextTick(foo);
    });

事实上，现在要是你写出递归的process.nextTick，Node.js会抛出一个警告，要求你改成setImmediate。  
另外，由于process.nextTick指定的回调函数是在本次"事件循环"触发，而setImmediate指定的是在下次"事件循环"触发，所以很显然，前者总是比后者发生得早，而且执行效率也高（因为不用检查"任务队列"）。

参考：[JavaScript 运行机制详解：再谈Event Loop][JavaScript _Event Loop]

10.apply，call，bind的区别  
在javascript中，call和 apply 都是为了改变某个函数运行时的上下文（context）而存在的，换句话说，就是为了改变函数体内部 this的指向。  
JavaScript 的一大特点是，函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念。  
举个栗子:

但是如果我们有一个对象banana= \{color : “yellow”\} ,我们不想对它重新定义say方法，那么我们可以通过 call 或 apply 用 apple 的 say 方法：

banana = {
        
        color: "yellow"
    }
    apple.say.call(banana);     //My color is yellow
    apple.say.apply(banana);    //My color is yellow

所以，可以看出 call 和apply 是为了动态改变this而出现的，当一个 object没有某个方法（本栗子中banana没有say方法），但是其他的有（本栗子中apple有say方法），我们可以借助call或apply用其它对象的方法来操作。

**apply、call 的区别**  
对于 apply、call二者而言，作用完全一样,都是调用一个函数，传入函数执行上下文及参数。只是接受参数的方式不太一样。例如，有一个函数定义如下：

var func = function(arg1, arg2) {
        
         
    };
    就可以通过如下方式来调用：
    func.call(this, arg1, arg2);
    func.apply(this, [arg1, arg2])

其中 this 是你想指定的上下文，他可以是任何一个 JavaScript 对象(JavaScript中一切皆对象)，call 需要把参数按顺序传递进去，而 apply 则是把参数放在数组里。

JavaScript中，某个函数的参数数量是不固定的，因此要说适用条件的话，当你的参数是明确知道数量时用 call。  
而不确定的时候用apply，然后把参数push进数组传递进去。当参数数量不确定时，函数内部也可以通过 arguments这个数组来遍历所有的参数。

下面列举一些常用用法：  
（1）数组之间追加

var array1 = [12 , "foo" , {
        name "Joe"} , -2458]; 
    var array2 = ["Doe" , 555 , 100]; 
    Array.prototype.push.apply(array1, array2); 
    //array1 值为  [12 , "foo" , {name "Joe"} , -2458 , "Doe" , 555 , 100]

（2）获取数组中的最大值和最小值

var  numbers = [5, 458 , 120 , -215 ]; 
    var maxInNumbers = Math.max.apply(Math, numbers),   //458
        maxInNumbers = Math.max.call(Math,5, 458 , 120 , -215); //458

number本身没有 max 方法，但是Math 有，我们就可以借助 call或者 apply使用其方法。  
（3）验证是否是数组（前提是toString()方法没有被重写过）

function isArray(obj){
         
        return Object.prototype.toString.call(obj) === '[object Array]' ;
    }

（4）类（伪）数组使用数组方法

var domNodes = Array.prototype.slice.call(document.getElementsByTagName("*"));

Javascript中存在一种名为伪数组的对象结构。比较特别的是 arguments 对象，还有像调用 getElementsByTagName , document.childNodes之类的，它们返回NodeList对象都属于伪数组。不能应用 Array下的 push , pop 等方法。  
但是我们能通过 Array.prototype.slice.call 转换为真正的数组的带有length 属性的对象，这样 domNodes就可以应用Array下的所有方法了。

**深入理解运用apply、call**  
下面就借用面试题，来更深入的去理解下 apply和 call。  
（1）定义一个log方法，让它可以代理 console.log方法，常见的解决方法是：

function log(msg)　{
        
      console.log(msg);
    }
    log(1);    //1
    log(1,2);    //1

上面方法可以解决最基本的需求，但是当传入参数的个数是不确定的时候，上面的方法就失效了，这个时候就可以考虑使用 apply或者 call，注意这里传入多少个参数是不确定的，所以使用apply是最好的，方法如下：

function log(){
        
      console.log.apply(console, arguments);
    };
    log(1);    //1
    log(1,2);    //1 2

（2）接下来的要求是给每一个 log 消息添加一个"(app)"的前辍，比如：

log("hello world");    //(app)hello world

该怎么做比较优雅呢?这个时候需要想到arguments参数是个伪数组，通过 Array.prototype.slice.call 转化为标准数组，再使用数组方法unshift，像这样：

function log(){
        
      var args = Array.prototype.slice.call(arguments);
      args.unshift('(app)');
     
      console.log.apply(console, args);
    };

**bind**  
说完了 apply 和 call，再来说说bind。bind() 方法与apply 和 call 很相似，也是可以改变函数体内 this 的指向。  
MDN的解释是：bind()方法会创建一个新函数，称为绑定函数，当调用这个绑 定函数时，绑定函数会以创建它时传入 bind()方法的第一个参数作为 this，传入 bind()方法的第二个以及以后的参数加上绑定函数运行时 本身的参数按照顺序作为原函数的参数来调用原函数。  
直接来看看具体如何使用，在常见的单体模式中，通常我们会使用\_this , that , self等保存 this，这样我们可以在改变了上下文之后继续引用到它。 像这样：

由于Javascript 特有的机制，上下文环境在 eventBind:function()\{ \}过渡到 $(’.someClass’).on(‘click’,function(event) \{ \})发生了改变，上述使用变量保存 this 这些方式都是有用的，也没有什么问题。当然使用bind()可以更加优雅的解决这个问题：

var foo = {
        
        bar : 1,
        eventBind: function(){
        
            $('.someClass').on('click',function(event) {
        
                /* Act on the event */
                console.log(this.bar);      //1
            }.bind(this));
        }
    }

在上述代码里，bind()创建了一个函数，当这个click事件绑定在被调用的时候，它的 this关键词会被设置成被传入的值（这里指调用bind()时传入的参数）。因此，这里我们传入想要的上下文 this(其实就是 foo )，到 bind() 函数中。然后，当回调函数被执行的时候， this 便指向 foo 对象。再来一个简单的栗子：

var bar = function(){
        
    console.log(this.x);
    }
    var foo = {
        
    x:3
    }
    bar(); // undefined
    var func = bar.bind(foo);
    func(); // 3

这里我们创建了一个新的函数 func，当使用 bind()创建一个绑定函数之后，它被执行的时候，它的 this 会被设置成 foo ， 而不是像我们调用 bar() 时的全局作用域。  
（3）有个有趣的问题，如果连续 bind() 两次，亦或者是连续 bind() 三次那么输出的值是什么呢？像这样：

答案是，两次都仍将输出 3 ，而非期待中的 4 和 5 。原因是，在Javascript中，多次 bind()是无效的。更深层次的原因， bind() 的实现，相当于使用函数在内部包了一个 call / apply，第二次 bind()相当于再包住第一次 bind(),故第二次以后的 bind()是无法生效的。

**apply、call、bind比较**

三个输出的都是81，但是注意看使用 bind() 方法的，他后面多了对括号。

也就是说，区别是，当你希望改变上下文环境之后并非立即执行，而是回调执行的时候，使用 bind()方法。而 apply/call 则会立即执行函数。  
总结一下：

apply 、 call、bind 三者都是用来改变函数的this对象的指向的；  
apply 、 call 、bind 三者第一个参数都是this要指向的对象，也就是想指定的上下文；  
apply 、 call 、bind 三者都可以利用后续参数传参；  
bind 是返回对应函数，便于稍后调用；apply 、call 则是立即调用 。

参考：[js中的apply，call，bind的区别][js_apply_call_bind]

11.HTTP/2的多路复用  
HTTP/2有三大特性：头部压缩、Server Push、多路复用。

**keep-Alive**  
在没有Keep-Alive前，我们与服务器请求数据的流程是这样：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70 10]

*  浏览器请求//static.mtime.cn/a.js–>解析域名–>HTTP连接–>服务器处理文件–>返回数据–>浏览器解析、渲染文件
 *  浏览器请求//static.mtime.cn/b.js–>解析域名–>HTTP连接–>服务器处理文件–>返回数据–>浏览器解析、渲染文件
 *  …
 *  …
 *  这样循环下去，直至全部文件下载完成。

这个流程最大的问题就是：每次请求都会建立一次HTTP连接，也就是我们常说的3次握手4次挥手，这个过程在一次请求过程中占用了相当长的时间，而且逻辑上是非必需的，因为不间断的请求数据，第一次建立连接是正常的，以后就占用这个通道，下载其他文件，这样效率多高啊！你猜对了，这就是Keep-Alive。

***Keep-Alive解决的问题***  
Keep-Alive解决的核心问题：一定时间内，同一域名多次请求数据，只建立一次HTTP请求，其他请求可复用每一次建立的连接通道，以达到提高请求效率的问题。这里面所说的一定时间是可以配置的，不管你用的是Apache还是nginx。

***HTTP1.1还是存在效率问题***

*  串行的文件传输。当请求a文件时，b文件只能等待，等待a连接到服务器、服务器处理文件、服务器返回文件，这三个步骤。我们假设这三步用时都是1秒，那么a文件用时为3秒，b文件传输完成用时为6秒，依此类推。（注：此项计算有一个前提条件，就是浏览器和服务器是单通道传输）
 *  连接数过多。我们假设Apache设置了最大并发数为300，因为浏览器限制，浏览器发起的最大请求数为6，也就是服务器能承载的最高并发为50，当第51个人访问时，就需要等待前面某个请求处理完成。

**HTTP/2的多路复用**

*  解决第一个：在HTTP1.1的协议中，我们传输的request和response都是基本于文本的，这样就会引发一个问题：所有的数据必须按顺序传输，比如需要传输：hello world，只能从h到d一个一个的传输，不能并行传输，因为接收端并不知道这些字符的顺序，所以并行传输在HTTP1.1是不能实现的。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70 11]  
    HTTP/2引入二进制数据帧和流的概念，其中帧对数据进行顺序标识，如下图所示，这样浏览器收到数据之后，就可以按照序列对数据进行合并，而不会出现合并后数据错乱的情况。同样是因为有了序列，服务器就可以并行的传输数据，这就是流所做的事情。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70 12]
 *  解决第二个问题：HTTP/2对同一域名下所有请求都是基于流，也就是说同一域名不管访问多少文件，也只建立一路连接。同样Apache的最大连接数为300，因为有了这个新特性，最大的并发就可以提升到300，比原来提升了6倍！

参考：[浅析HTTP/2的多路复用][HTTP_2]

12.SPDY  
SPDY（SPDY是Speedy的昵音，意为更快），是Google开发的基于TCP协议的应用层协议。SPDY协议的目标是优化HTTP协议的性能，通过压缩、多路复用和优先级等技术，缩短网页的加载时间并提高安全性。SPDY协议核心思想是尽量减少TCP连接数，而对于HTTP的语义未做太大修改（比如，HTTP的GET和POST消息格式保持不变），基本上兼容HTTP协议。

超文本传输协议（HTTP）是一个非常成功的协议，但是HTTP/1.1及之前版本的HTTP协议均是针对20世纪90年代之期网络与Web应用需求而设计，其一些特点已经对现代应用程序的性能产生了负面影响，比如：  
（1）HTTP/1.0一次只允许在一个TCP连接上发起一个请求；HTTP/1.1流水线技术也只能部分处理请求并发，并仍然存在队列头阻塞问题，因此客户端在需要发起多次请求时，典型情况下，通常采用建立多连接来减少延迟。  
（2）单向请求，请求只能由客户端发起。  
（3）请求报文与响应报文首部信息冗余量大。  
（4）数据未压缩，数据传输量大。

SPDY正是Google在HTTP即将从1.1向2.0过渡之际推出的协议，长期以来一直被认为是HTTP 2.0可行选择。  
SPDY与HTTP相比，具有如下优点：  
（1）SPDY支持多路复用，实现请求优化；  
（2）SPDY支持服务器推送技术；  
（3）SPDY压缩了HTTP报文首部信息，节省了传输数据带宽；  
（4）SPDY强制使用SSL传输协议，全部请求由SSL加密，信息传输更安全。

参考：[程序员面试必考题（二十五）—SPDY与HTTP/2协议][SPDY_HTTP_2]

13.浏览器的缓存机制  
**缓存位置**  
从缓存位置上来说分为四种，并且各自有优先级，当依次查找缓存且都没有命中的时候，才会去请求网络。

*  Service Worker
 *  Memory Cache
 *  Disk Cache
 *  Push Cache

***Service Worker***  
Service Worker 是运行在浏览器背后的独立线程，一般可以用来实现缓存功能。使用 Service Worker的话，传输协议必须为 HTTPS。因为 Service Worker 中涉及到请求拦截，所以必须使用 HTTPS 协议来保障安全。**Service Worker 的缓存与浏览器其他内建的缓存机制不同，它可以让我们自由控制缓存哪些文件、如何匹配缓存、如何读取缓存，并且缓存是持续性的。**  
Service Worker 实现缓存功能一般分为三个步骤：首先需要先注册 Service Worker，然后监听到 install 事件以后就可以缓存需要的文件，那么在下次用户访问的时候就可以通过拦截请求的方式查询是否存在缓存，存在缓存的话就可以直接读取缓存文件，否则就去请求数据。  
当 Service Worker 没有命中缓存的时候，我们需要去调用 fetch 函数获取数据。也就是说，如果我们没有在 Service Worker 命中缓存的话，会根据缓存查找优先级去查找数据。但是不管我们是从 Memory Cache 中还是从网络请求中获取的数据，浏览器都会显示我们是从 Service Worker 中获取的内容。

***Memory Cache***  
Memory Cache 也就是内存中的缓存，主要包含的是当前中页面中已经抓取到的资源,例如页面上已经下载的样式、脚本、图片等。读取内存中的数据肯定比磁盘快,内存缓存虽然读取高效，可是缓存持续性很短，会随着进程的释放而释放。 一旦我们关闭 Tab 页面，内存中的缓存也就被释放了。  
那么既然内存缓存这么高效，我们是不是能让数据都存放在内存中呢？  
这是不可能的。计算机中的内存一定比硬盘容量小得多，操作系统需要精打细算内存的使用，所以能让我们使用的内存必然不多。  
需要注意的事情是，内存缓存在缓存资源时并不关心返回资源的HTTP缓存头Cache-Control是什么值，同时资源的匹配也并非仅仅是对URL做匹配，还可能会对Content-Type，CORS等其他特征做校验。

***Disk Cache***  
Disk Cache 也就是存储在硬盘中的缓存，读取速度慢点，但是什么都能存储到磁盘中，比之 Memory Cache 胜在容量和存储时效性上。

在所有浏览器缓存中，Disk Cache 覆盖面基本是最大的。它会根据 HTTP Header 中的字段判断哪些资源需要缓存，哪些资源可以不请求直接使用，哪些资源已经过期需要重新请求。并且即使在跨站点的情况下，相同地址的资源一旦被硬盘缓存下来，就不会再次去请求数据。绝大部分的缓存都来自 Disk Cache。

***Push Cache***  
Push Cache（推送缓存）是 HTTP/2 中的内容，当以上三种缓存都没有命中时，它才会被使用。它只在会话（Session）中存在，一旦会话结束就被释放，并且缓存时间也很短暂，在Chrome浏览器中只有5分钟左右，同时它也并非严格执行HTTP头中的缓存指令。

*  所有的资源都能被推送，并且能够被缓存,但是 Edge 和 Safari 浏览器支持相对比较差
 *  可以推送 no-cache 和 no-store 的资源
 *  一旦连接被关闭，Push Cache 就被释放
 *  多个页面可以使用同一个HTTP/2的连接，也就可以使用同一个Push Cache。这主要还是依赖浏览器的实现而定，出于对性能的考虑，有的浏览器会对相同域名但不同的tab标签使用同一个HTTP连接。
 *  Push Cache 中的缓存只能被使用一次
 *  浏览器可以拒绝接受已经存在的资源推送
 *  你可以给其他域名推送资源

如果以上四种缓存都没有命中的话，那么只能发起请求来获取资源了。

那么为了性能上的考虑，大部分的接口都应该选择好缓存策略，通常浏览器缓存策略分为两种：强缓存和协商缓存，并且缓存策略都是通过设置 HTTP Header 来实现的。

**缓存过程分析**  
浏览器与服务器通信的方式为应答模式，即是：浏览器发起HTTP请求 – 服务器响应该请求，那么浏览器怎么确定一个资源该不该缓存，如何去缓存呢？浏览器第一次向服务器发起该请求后拿到请求结果后，将请求结果和缓存标识存入浏览器缓存，浏览器对于缓存的处理是根据第一次请求资源时返回的响应头来确定的。具体过程如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70 13]  
由上图我们可以知道：

*  浏览器每次发起请求，都会先在浏览器缓存中查找该请求的结果以及缓存标识
 *  浏览器每次拿到返回的请求结果都会将该结果和缓存标识存入浏览器缓存中

以上两点结论就是浏览器缓存机制的关键，它确保了每个请求的缓存存入与读取。**根据是否需要向服务器重新发起HTTP请求将缓存过程分为两个部分，分别是强缓存和协商缓存。**

**强缓存**  
强缓存：不会向服务器发送请求，直接从缓存中读取资源，在chrome控制台的Network选项中可以看到该请求返回200的状态码，并且Size显示from disk cache或from memory cache。强缓存可以通过设置两种 HTTP Header 实现：Expires 和 Cache-Control。

***Expires***  
缓存过期时间，用来指定资源到期的时间，是服务器端的具体的时间点。也就是说，Expires=max-age + 请求时间，需要和Last-modified结合使用。Expires是Web服务器响应消息头字段，在响应http请求时告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据，而无需再次请求。  
Expires 是 HTTP/1 的产物，受限于本地时间，如果修改了本地时间，可能会造成缓存失效。Expires: Wed, 22 Oct 2018 08:41:00 GMT表示资源会在 Wed, 22 Oct 2018 08:41:00 GMT 后过期，需要再次请求。

***Cache-Control***  
在HTTP/1.1中，Cache-Control是最重要的规则，主要用于控制网页缓存，主要取值为：

*  public：所有内容都将被缓存（客户端和代理服务器都可缓存）
 *  private：所有内容只有客户端可以缓存，Cache-Control的默认取值
 *  no-cache：客户端缓存内容，但是是否使用缓存则需要经过协商缓存来验证决定
 *  no-store：所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存
 *  max-age=xxx (xxx is numeric)：缓存内容将在xxx秒后失效

需要注意的是，no-cache这个名字有一点误导。设置了no-cache之后，并不是说浏览器就不再缓存数据，只是浏览器在使用缓存数据时，需要先确认一下数据是否还跟服务器保持一致，也就是协商缓存。而no-store才表示不会被缓存，即不使用强制缓存，也不使用协商缓存。

**Expires和Cache-Control两者对比**  
其实这两者差别不大，区别就在于 Expires 是http1.0的产物，Cache-Control是http1.1的产物，两者同时存在的话，Cache-Control优先级高于Expires；在某些不支持HTTP1.1的环境下，Expires就会发挥用处。所以Expires其实是过时的产物，现阶段它的存在只是一种兼容性的写法。  
强缓存判断是否缓存的依据来自于是否超出某个时间或者某个时间段，而不关心服务器端文件是否已经更新，这可能会导致加载文件不是服务器端最新的内容，那我们如何获知服务器端内容是否已经发生了更新呢？此时我们需要用到协商缓存策略。

**协商缓存**  
协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程，主要有以下两种情况：

*  协商缓存生效，返回304和Not Modified  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70 14]
 *  协商缓存失效，返回200和请求结果  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70 15]  
    协商缓存可以通过设置两种 HTTP Header 实现：Last-Modified 和 ETag 。

***Last-Modified和If-Modified-Since***  
浏览器在第一次访问资源时，服务器返回资源的同时，在response header中添加 Last-Modified的header，值是这个资源在服务器上的最后修改时间，浏览器接收后缓存文件和header；

Last-Modified: Fri, 22 Jul 2016 01:47:00 GMT

浏览器下一次请求这个资源，浏览器检测到有 Last-Modified这个header，于是添加If-Modified-Since这个header，值就是Last-Modified中的值；服务器再次收到这个资源请求，会根据 If-Modified-Since 中的值与服务器中这个资源的最后修改时间对比，如果没有变化，返回304和空的响应体，直接从缓存读取，如果If-Modified-Since的时间小于服务器中这个资源的最后修改时间，说明文件有更新，于是返回新的资源文件和200  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70 16]  
Last-Modified 存在一些弊端：

*  如果本地打开缓存文件，即使没有对文件进行修改，但还是会造成 Last-Modified 被修改，服务端不能命中缓存导致发送相同的资源
 *  因为 Last-Modified 只能以秒计时，如果在不可感知的时间内修改完成文件，那么服务端会认为资源还是命中了，不会返回正确的资源

既然根据文件修改时间来决定是否缓存尚有不足，能否可以直接根据文件内容是否修改来决定缓存策略？所以在 HTTP / 1.1 出现了 ETag 和If-None-Match

***ETag和If-None-Match***  
Etag是服务器响应请求时，返回当前资源文件的一个唯一标识(由服务器生成)，只要资源有变化，Etag就会重新生成。浏览器在下一次加载资源向服务器发送请求时，会将上一次返回的Etag值放到request header里的If-None-Match里，服务器只需要比较客户端传来的If-None-Match跟自己服务器上该资源的ETag是否一致，就能很好地判断资源相对客户端而言是否被修改过了。如果服务器发现ETag匹配不上，那么直接以常规GET 200回包形式将新的资源（当然也包括了新的ETag）发给客户端；如果ETag是一致的，则直接返回304知会客户端直接使用本地缓存即可。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70 17]  
两者之间对比：

*  首先在精确度上，Etag要优于Last-Modified。  
    Last-Modified的时间单位是秒，如果某个文件在1秒内改变了多次，那么他们的Last-Modified其实并没有体现出来修改，但是Etag每次都会改变确保了精度；如果是负载均衡的服务器，各个服务器生成的Last-Modified也有可能不一致。
 *  第二在性能上，Etag要逊于Last-Modified，毕竟Last-Modified只需要记录时间，而Etag需要服务器通过算法来计算出一个hash值。
 *  第三在优先级上，服务器校验优先考虑Etag

**缓存机制**  
强制缓存优先于协商缓存进行，若强制缓存(Expires和Cache-Control)生效则直接使用缓存，若不生效则进行协商缓存(Last-Modified / If-Modified-Since和Etag / If-None-Match)，协商缓存由服务器决定是否使用缓存，若协商缓存失效，那么代表该请求的缓存失效，返回200，重新返回资源和缓存标识，再存入浏览器缓存中；生效则返回304，继续使用缓存。具体流程图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70 18]  
看到这里，不知道你是否存在这样一个疑问:如果什么缓存策略都没设置，那么浏览器会怎么处理？  
对于这种情况，浏览器会采用一个启发式的算法，通常会取响应头中的 Date 减去 Last-Modified 值的 10% 作为缓存时间。

**用户行为对浏览器缓存的影响**  
所谓用户行为对浏览器缓存的影响，指的就是用户在浏览器如何操作时，会触发怎样的缓存策略。主要有 3 种：

*  打开网页，地址栏输入地址： 查找 disk cache 中是否有匹配。如有则使用；如没有则发送网络请求。
 *  普通刷新 (F5)：因为 TAB 并没有关闭，因此 memory cache 是可用的，会被优先使用(如果匹配的话)。其次才是 disk cache。
 *  强制刷新 (Ctrl + F5)：浏览器不使用缓存，因此发送的请求头部均带有 Cache-control: no-cache(为了兼容，还带了 Pragma: no-cache),服务器直接返回 200 和最新内容。

参考：[深入理解浏览器的缓存机制][Link 1]

14.Vue Loader  
Vue Loader 是一个 webpack 的 loader，它允许你以一种名为单文件组件 SFC的格式撰写 Vue 组件：

Vue Loader 还提供了很多酷炫的特性：

*  允许为 Vue 组件的每个部分使用其它的 webpack loader，例如在 `<style>`的部分使用 Sass 和在 `<template>`的部分使用 Pug；
 *  允许在一个 .vue 文件中使用自定义块，并对其运用自定义的 loader 链；
 *  使用 webpack loader 将 `<style>`和 `<template>`中引用的资源当作模块依赖来处理；
 *  为每个组件模拟出 scoped CSS；
 *  在开发过程中使用热重载来保持状态。

简而言之，webpack 和 Vue Loader 的结合为你提供了一个现代、灵活且极其强大的前端工作流，来帮助撰写 Vue.js 应用。  
如果你不想手动设置 webpack，我们推荐使用 Vue CLI 直接创建一个项目的脚手架。通过 Vue CLI 创建的项目会针对多数常见的开发需求进行预先配置，做到开箱即用。

**处理资源路径**  
当 Vue Loader 编译单文件组件中的 块时，它也会将所有遇到的资源 URL 转换为 webpack 模块请求。

资源 URL 转换会遵循如下规则：

*  如果路径是绝对路径 (例如 /images/foo.png)，会原样保留。
 *  如果路径以 . 开头，将会被看作相对的模块依赖，并按照你的本地文件系统上的目录结构进行解析。
 *  如果路径以 ~ 开头，其后的部分将会被看作模块依赖。这意味着你可以用该特性来引用一个 Node 依赖中的资源：  
    `<img src="~some-npm-package/foo.png">`
 *  如果路径以 @ 开头，也会被看作模块依赖。如果你的 webpack 配置中给 @ 配置了 alias，这就很有用了。所有 vue-cli 创建的项目都默认配置了将 @ 指向 /src

转换资源 URL 的好处是：

*  file-loader 可以指定要复制和放置资源文件的位置，以及如何使用版本哈希命名以获得更好的缓存。此外，这意味着 你可以就近管理图片文件，可以使用相对路径而不用担心部署时 URL 的问题。使用正确的配置，webpack 将会在打包输出中自动重写文件路径为正确的 URL。
 *  url-loader 允许你有条件地将文件转换为内联的 base-64 URL (当文件小于给定的阈值)，这会减少小文件的 HTTP 请求数。如果文件大于该阈值，会自动的交给 file-loader 处理。

@ 别名在 .vue `<style>`里无法加载图片的问题

**Scoped CSS**  
当 `<style>`标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。

转换结果：

你可以在一个组件中同时使用有 scoped 和非 scoped 样式：

深度作用选择器  
如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 `>>>`操作符：

上述代码将会编译成：

.a[data-v-f3f3eg9] .b {
         /* ... */ }

还有一些要留意  
Scoped 样式不能代替 class。考虑到浏览器渲染各种 CSS 选择器的方式，当 p \{ color: red \} 是 scoped 时 (即与特性选择器组合使用时) 会慢很多倍。如果你使用 class 或者 id 取而代之，比如 .example \{ color: red \}，性能影响就会消除。

**热重载**  
当使用脚手架工具 vue-cli 时，热重载是开箱即用的。  
状态保留规则

*  当编辑一个组件的 `<template>`时，这个组件实例将就地重新渲染，并保留当前所有的私有状态。能够做到这一点是因为模板被编译成了新的无副作用的渲染函数。
 *  当编辑一个组件的 `<script>`时，这个组件实例将就地销毁并重新创建。(应用中其它组件的状态将会被保留) 是因为 `<script>`可能包含带有副作用的生命周期钩子，所以将重新渲染替换为重新加载是必须的，这样做可以确保组件行为的一致性。这也意味着，如果你的组件带有全局副作用，则整个页面将会被重新加载。
 *  `<style>`会通过 vue-style-loader 自行热重载，所以它不会影响应用的状态。

参考：[来聊聊 Vue Loader][Vue Loader]

15.Webpack

// 一个常见的`webpack`配置文件
    const webpack = require('webpack');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const ExtractTextPlugin = require('extract-text-webpack-plugin');
    
    module.exports = {
        
            entry: __dirname + "/app/main.js", //已多次提及的唯一入口文件
            output: {
        
                path: __dirname + "/build",
                filename: "bundle-[hash].js"
            },
            devtool: 'none',
            devServer: {
        
                contentBase: "./public", //本地服务器所加载的页面所在的目录
                historyApiFallback: true, //不跳转
                inline: true,
                hot: true
            },
            module: {
        
                rules: [{
        
                        test: /(\.jsx|\.js)$/,
                        use: {
        
                            loader: "babel-loader"
                        },
                        exclude: /node_modules/
                    }, {
        
                        test: /\.css$/,
                        use: ExtractTextPlugin.extract({
        
                            fallback: "style-loader",
                            use: [{
        
                                loader: "css-loader",
                                options: {
        
                                    modules: true,
                                    localIdentName: '[name]__[local]--[hash:base64:5]'
                                }
                            }, {
        
                                loader: "postcss-loader"
                            }],
                        })
                    }
                }
            ]
        },
        plugins: [
            new webpack.BannerPlugin('版权所有，翻版必究'),
            new HtmlWebpackPlugin({
        
                template: __dirname + "/app/index.tmpl.html" //new 一个这个插件的实例，并传入相关的参数
            }),
            new webpack.optimize.OccurrenceOrderPlugin(),
            new webpack.optimize.UglifyJsPlugin(),
            new ExtractTextPlugin("style.css")
        ]
    };

**什么是WebPack，为什么要使用它？**  
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

**开始使用Webpack**  
（1）安装  
Webpack可以使用npm安装，新建一个空的练习文件夹（此处命名为webpack sample project），在终端中转到该文件夹后执行下述指令就可以完成安装。

//全局安装
    npm install -g webpack
    //安装到你的项目目录
    npm install --save-dev webpack

（2）正式使用Webpack前的准备  
1）在上述练习文件夹中创建一个package.json文件，这是一个标准的npm说明文件，里面蕴含了丰富的信息，包括当前项目的依赖模块，自定义的脚本任务等等。在终端中使用npm init命令可以自动创建这个package.json文件

npm init

输入这个命令后，终端会问你一系列诸如项目名称，项目描述，作者等信息，不过不用担心，如果你不准备在npm中发布你的模块，这些问题的答案都不重要，回车默认即可。  
2）package.json文件已经就绪，我们在本项目中安装Webpack作为依赖包

// 安装Webpack
    npm install --save-dev webpack

3）回到之前的空文件夹，并在里面创建两个文件夹,app文件夹和public文件夹，app文件夹用来存放原始数据和我们将写的JavaScript模块，public文件夹用来存放之后供浏览器读取的文件（包括使用webpack打包生成的js文件以及一个index.html文件）。接下来我们再创建三个文件:

*  index.html --放在public文件夹中;
 *  Greeter.js-- 放在app文件夹中;
 *  main.js-- 放在app文件夹中;

此时项目结构如下图所示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70 19]  
我们在index.html文件中写入最基础的html代码，它在这里目的在于引入打包后的js文件（这里我们先把之后打包后的js文件命名为bundle.js，之后我们还会详细讲述）。

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <title>Webpack Sample Project</title>
      </head>
      <body>
        <div id='root'>
        </div>
        <script src="bundle.js"></script>
      </body>
    </html>

我们在Greeter.js中定义一个返回包含问候信息的html元素的函数,并依据CommonJS规范导出这个函数为一个模块：

// Greeter.js
    module.exports = function() {
        
      var greet = document.createElement('div');
      greet.textContent = "Hi there and greetings!";
      return greet;
    };

main.js文件中我们写入下述代码，用以把Greeter模块返回的节点插入页面。

//main.js 
    const greeter = require('./Greeter.js');
    document.querySelector("#root").appendChild(greeter());

（3）正式使用Webpack  
webpack可以在终端中使用，在基本的使用方法如下：

# {extry file}出填写入口文件的路径，本文中就是上述main.js的路径，
    # {destination for bundled file}处填写打包文件的存放路径
    # 填写路径的时候不用添加{}
    webpack {entry file} {destination for bundled file}

指定入口文件后，webpack将自动识别项目所依赖的其它文件，不过需要注意的是如果你的webpack不是全局安装的，那么当你在终端中使用此命令时，需要额外指定其在node\_modules中的地址，继续上面的例子，在终端中输入如下命令

# webpack非全局安装的情况
    node_modules/.bin/webpack app/main.js public/bundle.js

结果如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70 20]  
可以看出webpack同时编译了main.js 和Greeter,js,现在打开index.html,可以看到如下结果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70 21]

**通过配置文件来使用Webpack**  
Webpack拥有很多其它的比较高级的功能（比如说本文后面会介绍的loaders和plugins），这些功能其实都可以通过命令行模式实现，但是正如前面提到的，这样不太方便且容易出错的，更好的办法是定义一个配置文件，这个配置文件其实也是一个简单的JavaScript模块，我们可以把所有的与打包相关的信息放在里面。  
继续上面的例子来说明如何写这个配置文件，在当前练习文件夹的根目录下新建一个名为webpack.config.js的文件，我们在其中写入如下所示的简单配置代码，目前的配置主要涉及到的内容是入口文件路径和打包后文件的存放路径。

module.exports = {
        
      entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件
      output: {
        
        path: __dirname + "/public",//打包后的文件存放的地方
        filename: "bundle.js"//打包后输出文件的文件名
      }
    }

注：“\_\_dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录。  
有了这个配置之后，再打包文件，只需在终端里运行webpack(非全局安装需使用node\_modules/.bin/webpack)命令就可以了，这条命令会自动引用webpack.config.js文件中的配置选项，示例如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70 22]  
又学会了一种使用Webpack的方法，这种方法不用管那烦人的命令行参数，有没有感觉很爽。如果我们可以连webpack(非全局安装需使用node\_modules/.bin/webpack)这条命令都可以不用，那种感觉会不会更爽~，继续看下文。

**更快捷的执行打包任务**  
在命令行中输入命令需要代码类似于node\_modules/.bin/webpack这样的路径其实是比较烦人的，不过值得庆幸的是npm可以引导任务执行，对npm进行配置后可以在命令行中使用简单的npm start命令来替代上面略微繁琐的命令。在package.json中对scripts对象进行相关设置即可，设置方法如下。

{
        
      "name": "webpack-sample-project",
      "version": "1.0.0",
      "description": "Sample webpack project",
      "scripts": {
        
        "start": "webpack" // 修改的是这里，JSON文件不支持注释，引用时请清除
      },
      "author": "zhang",
      "license": "ISC",
      "devDependencies": {
        
        "webpack": "3.10.0"
      }
    }

注：package.json中的script会安装一定顺序寻找命令对应位置，本地的node\_modules/.bin路径就在这个寻找清单中，所以无论是全局还是局部安装的Webpack，你都不需要写前面那指明详细的路径了。

npm的start命令是一个特殊的脚本名称，其特殊性表现在，在命令行中使用npm start就可以执行其对于的命令，如果对应的此脚本名称不是start，想要在命令行中运行时，需要这样用npm run \{script name\}如npm run build，我们在命令行中输入npm start试试，输出结果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70 23]  
现在只需要使用npm start就可以打包文件了，有没有觉得webpack也不过如此嘛，不过不要太小瞧webpack，要充分发挥其强大的功能我们需要修改配置文件的其它选项，一项项来看。

**Webpack的强大功能**  
***Loaders***  
Loaders是webpack提供的最激动人心的功能之一了。通过使用不同的loader，webpack有能力调用外部的脚本或工具，实现对不同格式的文件的处理，比如说分析转换scss为css，或者把下一代的JS文件（ES6，ES7)转换为现代浏览器兼容的JS文件，对React的开发而言，合适的Loaders可以把React的中用到的JSX文件转换为JS文件。

Loaders需要单独安装并且需要在webpack.config.js中的modules关键字下进行配置，Loaders的配置包括以下几方面：

*  test：一个用以匹配loaders所处理文件的拓展名的正则表达式（必须）
 *  loader：loader的名称（必须）
 *  include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；
 *  query：为loaders提供额外的设置选项（可选）

不过在配置loader之前，我们把Greeter.js里的问候消息放在一个单独的JSON文件里,并通过合适的配置使Greeter.js可以读取该JSON文件的值，各文件修改后的代码如下：

在app文件夹中创建带有问候信息的JSON文件(命名为config.json)

{
        
      "greetText": "Hi there and greetings from JSON!"
    }

更新后的Greeter.js

var config = require('./config.json');
    
    module.exports = function() {
        
      var greet = document.createElement('div');
      greet.textContent = config.greetText;
      return greet;
    };

***Babel***  
Babel其实是一个编译JavaScript的平台，它可以编译代码帮你达到以下目的：

*  让你能使用最新的JavaScript代码（ES6，ES7…），而不用管新标准是否被当前使用的浏览器完全支持；
 *  让你能使用基于JavaScript进行了拓展的语言，比如React的JSX；

Babel的安装与配置  
Babel其实是几个模块化的包，其核心功能位于称为babel-core的npm包中，webpack可以把其不同的包整合在一起使用，对于每一个你需要的功能或拓展，你都需要安装单独的包（用得最多的是解析Es6的babel-env-preset包和解析JSX的babel-preset-react包）。  
我们先来一次性安装这些依赖包

// npm一次性安装多个依赖模块，模块之间用空格隔开
    npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react

在webpack中配置Babel的方法如下:

module.exports = {
        
        entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
        output: {
        
            path: __dirname + "/public",//打包后的文件存放的地方
            filename: "bundle.js"//打包后输出文件的文件名
        },
        devtool: 'eval-source-map',
        devServer: {
        
            contentBase: "./public",//本地服务器所加载的页面所在的目录
            historyApiFallback: true,//不跳转
            inline: true//实时刷新
        },
        module: {
        
            rules: [
                {
        
                    test: /(\.jsx|\.js)$/,
                    use: {
        
                        loader: "babel-loader",
                        options: {
        
                            presets: [
                                "env", "react"
                            ]
                        }
                    },
                    exclude: /node_modules/
                }
            ]
        }
    };

现在你的webpack的配置已经允许你使用ES6以及JSX的语法了。继续用上面的例子进行测试，不过这次我们会使用React，记得先安装 React 和 React-DOM

npm install --save react react-dom

接下来我们使用ES6的语法，更新Greeter.js并返回一个React组件

//Greeter,js
    import React, {
        Component} from 'react'
    import config from './config.json';
    
    class Greeter extends Component{
        
      render() {
        
        return (
          <div>
            {
        config.greetText}
          </div>
        );
      }
    }
    
    export default Greeter

修改main.js如下，使用ES6的模块定义和渲染Greeter模块

// main.js
    import React from 'react';
    import {
        render} from 'react-dom';
    import Greeter from './Greeter';
    
    render(<Greeter />, document.getElementById('root'));

重新使用npm start打包，如果之前打开的本地服务器没有关闭，你应该可以在localhost:8080下看到与之前一样的内容，这说明react和es6被正常打包了。  
![在这里插入图片描述][20191103124206610.png]  
Babel的配置  
Babel其实可以完全在 webpack.config.js 中进行配置，但是考虑到babel具有非常多的配置选项，在单一的webpack.config.js文件中进行配置往往使得这个文件显得太复杂，因此一些开发者支持把babel的配置选项放在一个单独的名为 “.babelrc” 的配置文件中。我们现在的babel的配置并不算复杂，不过之后我们会再加一些东西，因此现在我们就提取出相关部分，分两个配置文件进行配置（webpack会自动调用.babelrc里的babel配置选项），如下：

module.exports = {
        
        entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
        output: {
        
            path: __dirname + "/public",//打包后的文件存放的地方
            filename: "bundle.js"//打包后输出文件的文件名
        },
        devtool: 'eval-source-map',
        devServer: {
        
            contentBase: "./public",//本地服务器所加载的页面所在的目录
            historyApiFallback: true,//不跳转
            inline: true//实时刷新
        },
        module: {
        
            rules: [
                {
        
                    test: /(\.jsx|\.js)$/,
                    use: {
        
                        loader: "babel-loader"
                    },
                    exclude: /node_modules/
                }
            ]
        }
    };

//.babelrc
    {
        
      "presets": ["react", "env"]
    }

**CSS**  
webpack提供两个工具处理样式表，css-loader 和 style-loader，二者处理的任务不同，css-loader使你能够使用类似@import 和 url(…)的方法实现 require()的功能,style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。

继续上面的例子

//安装
    npm install --save-dev style-loader css-loader

//使用
    module.exports = {
        
    
       ...
        module: {
        
            rules: [
                {
        
                    test: /(\.jsx|\.js)$/,
                    use: {
        
                        loader: "babel-loader"
                    },
                    exclude: /node_modules/
                },
                {
        
                    test: /\.css$/,
                    use: [
                        {
        
                            loader: "style-loader"
                        }, {
        
                            loader: "css-loader"
                        }
                    ]
                }
            ]
        }
    };

请注意这里对同一个文件引入多个loader的方法。  
接下来，在app文件夹里创建一个名字为"main.css"的文件，对一些元素设置样式

/* main.css */
    html {
        
      box-sizing: border-box;
      -ms-text-size-adjust: 100%;
      -webkit-text-size-adjust: 100%;
    }
    
    *, *:before, *:after {
        
      box-sizing: inherit;
    }
    
    body {
        
      margin: 0;
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    }
    
    h1, h2, h3, h4, h5, h6, p, ul {
        
      margin: 0;
      padding: 0;
    }

我们这里例子中用到的webpack只有单一的入口，其它的模块需要通过 import, require, url等与入口文件建立其关联，为了让webpack能找到”main.css“文件，我们把它导入”main.js “中，如下

//main.js
    import React from 'react';
    import {
        render} from 'react-dom';
    import Greeter from './Greeter';
    
    import './main.css';//使用require导入css文件
    
    render(<Greeter />, document.getElementById('root'));

通常情况下，css会和js打包到同一个文件中，并不会打包为一个单独的css文件，不过通过合适的配置webpack也可以把css打包为单独的文件的。

***CSS module***  
在过去的一些年里，JavaScript通过一些新的语言特性，更好的工具以及更好的实践方法（比如说模块化）发展得非常迅速。模块使得开发者把复杂的代码转化为小的，干净的，依赖声明明确的单元，配合优化工具，依赖管理和加载管理可以自动完成。  
不过前端的另外一部分，CSS发展就相对慢一些，大多的样式表却依旧巨大且充满了全局类名，维护和修改都非常困难。  
被称为CSS modules的技术意在把JS的模块化思想带入CSS中来，通过CSS模块，所有的类名，动画名默认都只作用于当前模块。Webpack对CSS模块化提供了非常好的支持，只需要在CSS loader中进行简单配置即可，然后就可以直接把CSS的类名传递到组件的代码中，这样做有效避免了全局污染。具体的代码如下

module.exports = {
        
    
        ...
    
        module: {
        
            rules: [
                {
        
                    test: /(\.jsx|\.js)$/,
                    use: {
        
                        loader: "babel-loader"
                    },
                    exclude: /node_modules/
                },
                {
        
                    test: /\.css$/,
                    use: [
                        {
        
                            loader: "style-loader"
                        }, {
        
                            loader: "css-loader",
                            options: {
        
                                modules: true, // 指定启用css modules
                                localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css的类名格式
                            }
                        }
                    ]
                }
            ]
        }
    };

我们在app文件夹下创建一个Greeter.css文件来进行一下测试

/* Greeter.css */
    .root {
        
      background-color: #eee;
      padding: 10px;
      border: 3px solid #ccc;
    }

导入.root到Greeter.js中

import React, {
        Component} from 'react';
    import config from './config.json';
    import styles from './Greeter.css';//导入
    
    class Greeter extends Component{
        
      render() {
        
        return (
          <div className={
        styles.root}> //使用cssModule添加类名的方法
            {
        config.greetText}
          </div>
        );
      }
    }
    
    export default Greeter

放心使用把，相同的类名也不会造成不同组件之间的污染。  
![在这里插入图片描述][20191103124711300.png]

***CSS预处理器***  
Sass 和 Less 之类的预处理器是对原生CSS的拓展，它们允许你使用类似于variables, nesting, mixins, inheritance等不存在于CSS中的特性来写CSS，CSS预处理器可以这些特殊类型的语句转化为浏览器可识别的CSS语句。  
你现在可能都已经熟悉了，在webpack里使用相关loaders进行配置就可以使用了，以下是常用的CSS 处理loaders:

*  Less Loader
 *  Sass Loader
 *  Stylus Loader

**插件（Plugins）**  
插件（Plugins）是用来拓展Webpack功能的，它们会在整个构建过程中生效，执行相关的任务。  
Loaders和Plugins常常被弄混，但是他们其实是完全不同的东西，可以这么来说，loaders是在打包构建过程中用来处理源文件的（JSX，Scss，Less…），一次处理一个，插件并不直接操作单个文件，它直接对整个构建过程其作用。  
Webpack有很多内置插件，同时也有很多第三方插件，可以让我们完成更加丰富的功能。

使用插件的方法  
要使用某个插件，我们需要通过npm安装它，然后要做的就是在webpack配置中的plugins关键字部分添加该插件的一个实例（plugins是一个数组）继续上面的例子，我们添加了一个给打包后代码添加版权声明的插件。

const webpack = require('webpack');
    
    module.exports = {
        
    ...
        module: {
        
            rules: [
                {
        
                    test: /(\.jsx|\.js)$/,
                    use: {
        
                        loader: "babel-loader"
                    },
                    exclude: /node_modules/
                },
                {
        
                    test: /\.css$/,
                    use: [
                        {
        
                            loader: "style-loader"
                        }, {
        
                            loader: "css-loader",
                            options: {
        
                                modules: true
                            }
                        }, {
        
                            loader: "postcss-loader"
                        }
                    ]
                }
            ]
        },
        plugins: [
            new webpack.BannerPlugin('版权所有，翻版必究')
        ],
    };

通过这个插件，打包后的JS文件显示如下  
![在这里插入图片描述][20191103124935209.png]

参考：[入门Webpack，看这篇就够了][Webpack]

16.HTML5离线存储原理  
大家都知道Web App是通过浏览器来访问的，所以离线状态下是无法使用app的。其中web app中的一些资源并不经常改变，不需要每次都向服务器发送请求。这时应运而生的离线缓存就显得尤为突出。通过把需要离线缓存储的文件列在一个manifest配置文件中。酱紫在离线情况下也可以使用app。

使用HTML5，通过创建cache manifest文件，可轻松创建web应用的离线版本。  
HTML5引入了应用程序缓存，这意味着web应用可进行缓存，并可在没有网络时进行访问。

**应用程序缓存为**应用带来三个**优势**：

*  离线浏览–用户可在离线时使用它们。
 *  速度–已经缓存的资源加载得更快。
 *  减少服务器负载–浏览器将只从服务器下载更改过的资源。

使用方法：  
只要在头部加一个manifest属性就ok了

<!DOCTYPE HTML>
    <html manifest = "cache.manifest">
    ...
    </html>

然后cache.manifest文件的书写方式如下：

CACHE MANIFEST
    #v0.11
    
    CACHE:
    
    js/app.js
    css/style.css
    
    NETWORK:
    resourse/logo.png
    
    FALLBACK:
    / /offline.html

代码说明：  
离线存储的manifest一般由三个部分组成:  
（1）CACHE:表示需要离线存储的资源列表，由于包含manifest文件的页面将被自动离线存储，所以不需要把页面自身也列出来。  
（2）NETWORK:表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。不过，如果在CACHE和NETWORK中有一个相同的资源，那么这个资源还是会被离线存储，也就是说CACHE的优先级更高。  
（3）FALLBACK:表示如果访问第一个资源失败，那么就使用第二个资源来替换他，比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了，那么就去访问offline.html。

注意事项：

*  站点离线存储的容量限制是5M
 *  如果manifest文件，或者内部列举的某一个文件不能正常下载，整个更新过程将视为失败，浏览器继续全部使用老的缓存
 *  引用manifest的html必须与manifest文件同源，在同一个域下
 *  在manifest中使用的相对路径，相对参照物为manifest文件
 *  CACHE MANIFEST字符串应在第一行，且必不可少
 *  系统会自动缓存引用清单文件的 HTML 文件
 *  manifest文件中CACHE则与NETWORK，FALLBACK的位置顺序没有关系，如果是隐式声明需要在最前面
 *  FALLBACK中的资源必须和manifest文件同源
 *  当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。
 *  站点中的其他页面即使没有设置manifest属性，请求的资源如果在缓存中也从缓存中访问
 *  当manifest文件发生改变时，资源请求本身也会触发更新

参考：[HTML5离线存储原理][HTML5]

17.iframe  
iframe的优点：  
（1）iframe能够原封不动的把嵌入的网页展现出来。  
（2）如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。  
（3）网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。  
（4）如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。

iframe的缺点：  
（1）会产生很多页面，不容易管理。  
（2）iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差。  
（3）代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化。  
（4）很多的移动设备（PDA手机）无法完全显示框架，设备兼容性差。  
（5）iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。

18.对 WEB 标准以及 W3C 的理解与认识  
web标准简单来说可以分为**结构、表现和行为**。web标准一般是将该三部分独立分开，使其更具有模块化。但一般产生行为时，就会有结构或者表现的变化，也使这三者的界限并不那么清晰

W3C对web标准提出了规范化的要求，也就是在实际编程中的一些代码规范：包含如下几点  
（1）对于结构要求：（标签规范可以提高搜索引擎对页面的抓取效率，对SEO很有帮助）  
1）标签字母要小写  
2）标签要闭合  
3）标签不允许随意嵌套

（2）对于css和js来说  
1）尽量使用外链css样式表和js脚本。是结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。  
2）样式尽量少用行间样式表，使结构与表现分离，标签的id和class等属性命名要做到见文知义，标签越少，加载越快，用户体验提高，代码维护简单，便于改版  
3）不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性。

19.严格模式与混杂模式如何区分？它们有何意义？  
严格模式：又称标准模式，是指浏览器按照 W3C 标准解析代码。  
混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码。

如何区分：浏览器解析时到底使用严格模式还是混杂模式，与网页中的 DTD 直接相关。  
（1）如果文档包含严格的 DOCTYPE ，那么它一般以严格模式呈现。（严格 DTD ——严格模式）  
（2）包含过渡 DTD 和 URI 的 DOCTYPE ，也以严格模式呈现，但有过渡 DTD 而没有 URI （统一资源标识符，就是声明最后的地址）会导致页面以混杂模式呈现。（有 URI 的过渡 DTD ——严格模式；没有 URI 的过渡 DTD ——混杂模式）  
（3）DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现。（DTD不存在或者格式不正确——混杂模式）  
（4）HTML5 没有 DTD ，因此也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容。（ HTML5 没有严格和混杂之分）

意义：严格模式与混杂模式存在的意义与其来源密切相关，如果说只存在严格模式，那么许多旧网站必然受到影响，如果只存在混杂模式，那么会回到当时浏览器大战时的混乱，每个浏览器都有自己的解析模式。

**严格模式与混杂模式的语句解析不同点有哪些？**  
1）盒模型的高宽包含内边距padding和边框border  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70 24]  
在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在IE5.5及以下的浏览器及其他版本的Quirks模式下，IE的宽度和高度还包含了padding和border。

2）可以设置行内元素的高宽  
在Standards模式下，给span等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效。

3）可设置百分比的高度  
在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。

4）用margin:0 auto设置水平居中在IE下会失效  
使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效,quirk模式下的解决办法，用text-align属性:  
body\{text-align:center\};\#content\{text-align:left\}

5）quirk模式下设置图片的padding会失效

6）quirk模式下Table中的字体属性不能继承上层的设置

7）quirk模式下white-space:pre会失效

参考：[Doctype作用？严格模式与混杂模式如何区分？它们有何差异？][Doctype]

20.link与@import的区别  
两者都是外部引入CSS的方式，那么二者有什么区别呢？

*  @import是CSS提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载CSS文件，还可以定义RSS，rel连接属性等；
 *  加载页面时，link引入的CSS被同时加载，@import引入的CSS将在页面加载完毕后加载；
 *  link标签作为HTML元素，不存在兼容性问题，而@import是CSS2.1才有的语法，故老版本浏览器（IE5之前）不能识别；
 *  可以通过JS操作DOM，来插入link标签改变样式；由于DOM方法是基于文档的，无法使用@import方式插入样式；

建议使用link的方式引入CSS

[20191101111318218.png]: https://img-blog.csdnimg.cn/20191101111318218.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2019110111142821.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5,size_16,color_FFFFFF,t_70
[20191101111641415.png]: https://img-blog.csdnimg.cn/20191101111641415.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191101111700931.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191101113414479.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5,size_16,color_FFFFFF,t_70
[20191101113646588.png]: https://img-blog.csdnimg.cn/20191101113646588.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191101113841678.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191101114128426.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20191101114207337.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20191101114244592.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5,size_16,color_FFFFFF,t_70
[setTimeout_0]: https://www.jb51.net/article/136335.htm
[JavaScript _Event Loop]: http://www.ruanyifeng.com/blog/2014/10/event-loop.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20191102104318349.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20191102105040765.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20191102110041298.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5,size_16,color_FFFFFF,t_70
[js_apply_call_bind]: https://www.jianshu.com/p/f906e95e8598
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20191102172625859.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20191102173006824.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/20191102173048238.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5,size_16,color_FFFFFF,t_70
[HTTP_2]: https://segmentfault.com/a/1190000011172823?utm_source=tag-newest
[SPDY_HTTP_2]: https://www.jianshu.com/p/d352b4c9e26a
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70 13]: https://img-blog.csdnimg.cn/20191102233403353.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70 14]: https://img-blog.csdnimg.cn/20191102234153539.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70 15]: https://img-blog.csdnimg.cn/20191102234251598.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70 16]: https://img-blog.csdnimg.cn/20191102234441250.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70 17]: https://img-blog.csdnimg.cn/20191102234648445.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70 18]: https://img-blog.csdnimg.cn/20191102234836654.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5,size_16,color_FFFFFF,t_70
[Link 1]: https://www.jianshu.com/p/54cc04190252
[Vue Loader]: https://segmentfault.com/a/1190000020648944?utm_source=tag-newest
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70 19]: https://img-blog.csdnimg.cn/2019110312180930.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70 20]: https://img-blog.csdnimg.cn/20191103122036819.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70 21]: https://img-blog.csdnimg.cn/20191103122059739.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70 22]: https://img-blog.csdnimg.cn/20191103122231500.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70 23]: https://img-blog.csdnimg.cn/201911031223564.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5,size_16,color_FFFFFF,t_70
[20191103124206610.png]: https://img-blog.csdnimg.cn/20191103124206610.png
[20191103124711300.png]: https://img-blog.csdnimg.cn/20191103124711300.png
[20191103124935209.png]: https://img-blog.csdnimg.cn/20191103124935209.png
[Webpack]: https://www.jianshu.com/p/42e11515c10f
[HTML5]: https://www.cnblogs.com/zhangym118/archive/2016/09/22/5897056.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70 24]: https://img-blog.csdnimg.cn/20191104112040212.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5,size_16,color_FFFFFF,t_70
[Doctype]: https://www.cnblogs.com/wuqiutong/p/5986191.html