2021春季前端知识系统总结

委托：把事件托付给别人或别的机构办理

事件流：确定页面接收事件的顺序；事件冒泡和事件捕获

事件代理通过事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

本地存储数据

分页加载、数据分批请求

懒加载

响应式请求（如通过滚定条判断接口请求）

组件缓冲、减少资源加载

CSS文件放头部；
CSS代码多利用CSS的继承属性，减少不必要的重写，占用体积
脚本文件放body标签上一行，防止阻塞，根据场景进行必要的async和defer

使用服务端渲染

压缩图片、base64格式

使用webp格式的图片、减少容量

from merory cache

form dish cache

Expires / Last-modified

Cache-Control

Last-Modified / If-Modified-Since

etag / if none match

频繁变动的资源：Cache-Control: no-cache

不常变化的资源：Cache-Control: max-age=31536000

强制缓存

协商缓存

启发式缓存

解析域名先查找缓存

构建dom、同时构建cssom、样式计算，生成渲染树、计算节点坐标构建布局树、填表记录绘制顺序，生成分层树、绘制(分图层、图块、栅格化、合成、显示)
绘制阶段：在多个层上绘制DOM元素的文字、颜色、图像、边框和阴影等。
渲染层合并：按照合理的顺序合并图层然后显示到屏幕上。

构建DOM树、然后同时构建CSSOM树、转换样式表中的属性值、使其标准化

构建渲染树、样式计算；计算出 DOM 树中每个节点的具体样式；遵守CSS的继承和层叠两个规则

总之，样式计算阶段的目的是为了计算出 DOM 节点中每个元素的具体样式，在计算过程中需要遵守 CSS 的继承和层叠两个规则。这个阶段最终输出的内容是每个 DOM 节点的样式，并被保存在 ComputedStyle 的结构内。

布局阶段：根据渲染树构建布局树、布局计算
遍历DOM树中的所有可见节点，并确定dom节点坐标

分层

图层绘制

栅格化（raster）操作

合成与显示

概念

http0.9

http1.0

http1.1

http2.0

http3.0

起始行 start line：描述请求或响应的基本信息；由三部分构成：

头部字段集合 header：使用key-value 形式更详细地说明报文

消息正文 entity：实际传输的数据

GET、HEAD、POST、PUT、DELETE、CONNECT、TRACE

不熟：
403：禁止，服务器拒绝请求，常见于客户端权限不足。
502：网关或代理服务器无效
503：服务不可用（处于停机或超载状态）

数据压缩、分块传输、范围请求

长连接、短连接

队头阻塞

长轮询、短轮询

检验和

三次握手四次挥手

序列号、确认号

滑动窗口

流量控制

慢启动、拥塞控制、快重传、快恢复

概念：

1. HTTP + TLS / SSL，默认端口是 443
2. HTTPS协议是通过加入SSL（Secure Sockets Layer）层来加密HTTP数据进行安全传输的HTTP协议，同时启用默认的443端口进行数据传输。
3. 因为 HTTP 是明文传输，所以不安全，容易被黑客窃听或篡改
4. 通信须保证安全：机密性 + 完整性 + 身份认证 + 不可否认

SSL/TLS是什么（处于会话层）：
它把 HTTP 下层的传输协议由 TCP/IP 换成了 SSL/TLS，由“HTTP over TCP/IP”变成了“HTTP over SSL/TLS”，让 HTTP 运行在了安全的 SSL/TLS 协议上，收发报文不再使用 Socket API，而是调用专门的安全接口。

SSL：secure socket layer 安全套接层
TSL：transport secure layer 安全传输层

对称加密

非对称加密

非对称加密的缺点：

1. 黑客虽然拿不到会话密钥，无法破解密文，但可以通过窃听收集到足够多的密文，再尝试着修改、重组后发给网站。因为没有完整性保证，服务器只能“照单全收”，然后他就可以通过服务器的响应获取进一步的线索，最终就会破解出明文。
2. 另外，黑客也可以伪造身份发布公钥。如果你拿到了假的公钥，混合加密就完全失效了。你以为自己是在和“某宝”通信，实际上网线的另一端却是黑客，银行卡号、密码等敏感信息就在“安全”的通信过程中被窃取了。

保证信息完整性：摘要算法

1. 摘要算法，也是常说的散列函数、哈希函数。
2. 你可以把摘要算法近似地理解成一种特殊的压缩算法，它能够把任意长度的数据“压缩”成固定长度、而且独一无二的“摘要”字符串，就好像是给这段数据生成了一个数字“指纹”。
   摘要算法是把数据从一个大空间映射到了小空间，所以存在冲突的可能性。

数字签名：

1. 加密算法结合摘要算法，可以解决通信过程的安全性和信息的完整性，但无法确保是否是服务端，所以得确保身份认证。
2. 数字证书 = 网站信息 + 数字签名；即信息先进行摘要算法加密，再用私钥进行加密。接收到信息后再用公钥解密。
3. 公钥被掉包，是因为客户端无法分辨穿回来的公钥是中间人还是服务器。
4. 现实生活中，解决身份认证的手段是签名和印章，只要在纸上写下签名或者盖个章，就能够证明这份文件确实是由本人而不是其他人发出的。

数字签名缺点：

1. 存在“公钥的信任”问题。

证书 ( 第三方认证 )：
这个“第三方”就是我们常说的 CA（Certificate Authority，证书认证机构）。它就像网络世界里的公安局、教育部、公证中心，具有极高的可信度，由它来给各个公钥签名，用自身的信誉来保证公钥无法伪造，是可信的。
即公钥的分发需要使用数字证书，必须由 CA 的信任链来验证，否则就是不可信的；

双向认证 SSL 协议的具体通讯过程，服务器和用户双方必须都有证书。由此可见，SSL协议是通过非对称密钥机制保证双方身份认证，并完成建立连接，在实际数据通信时通过对称密钥机制保障数据安全性

SSL协议通信过程
浏览器首先要从URI里提取出协议和域名。协议名是https、所以默认端口号是 443，再用DNS解析，得到目标的IP地址，然后就可以使用三次握手与网站建立TCP连接了。

(1) 浏览器发送一个连接请求给服务器;服务器将自己的证书(包含服务器公钥S_PuKey)、对称加密算法种类及其他相关信息返回客户端;

(2) 客户端浏览器检查服务器传送到CA证书是否由自己信赖的CA中心签发。若是，执行4步;否则，给客户一个警告信息：询问是否继续访问。

(3) 客户端浏览器比较证书里的信息，如证书有效期、服务器域名和公钥S_PK，与服务器传回的信息是否一致，如果一致，则浏览器完成对服务器的身份认证。

(4) 服务器要求客户端发送客户端证书(包含客户端公钥C_PuKey)、支持的对称加密方案及其他相关信息。收到后，服务器进行相同的身份认证，若没有通过验证，则拒绝连接;

(5) 服务器根据客户端浏览器发送到密码种类，选择一种加密程度最高的方案，用客户端公钥C_PuKey加密后通知到浏览器;

(6) 客户端通过私钥C_PrKey解密后，得知服务器选择的加密方案，并选择一个通话密钥key，接着用服务器公钥S_PuKey加密后发送给服务器;

(7) 服务器接收到的浏览器传送到消息，用私钥S_PrKey解密，获得通话密钥key。

(8) 接下来的数据传输都使用该对称密钥key进行加密。

同源策略

安全策略

同源策略限制内容有：
· Cookie、LocalStorage、IndexedDB 等存储性内容
· DOM 节点
· AJAX 请求发送后，结果被浏览器拦截了

但是有三个标签允许跨域加载资源：
· <img src=XXX>
· <link href=XXX>
· <script src=XXX>

利用 <script> 标签没有跨域限制的漏洞，网页可以得到从其他来源动态产生的 JSON 数据。JSONP请求一定需要对方的服务器做支持才可以。

JSONP和AJAX相同，都是客户端向服务器端发送请求，从服务器端获取数据的方式。但AJAX属于同源策略，JSONP属于非同源策略（跨域请求）

缺点：仅支持get方法

JQ的JSONP形式

服务端设置 Access-Control-Allow-Origin 就可以开启 CORS。 该属性表示哪些域名可以访问资源，如果设置通配符则表示所有网站都可以访问资源。

虽然设置 CORS 和前端没什么关系，但是通过这种方式解决跨域问题的话，会在发送请求时出现两种情况，分别为简单请求和复杂请求。

可解决的问题

示例

Websocket是HTML5的一个持久化的协议，它实现了浏览器与服务器的全双工通信，也是跨域的一种解决方案。

WebSocket和HTTP都是应用层协议，都基于 TCP 协议。但是 WebSocket 是一种双向通信协议，在建立连接之后，WebSocket 的 server 与 client 都能主动向对方发送或接收数据。同时，WebSocket 在建立连接时需要借助 HTTP 协议，连接建立好了之后 client 与 server 之间的双向通信就与 HTTP 无关了。

网页被注入恶意代码，使用户加载并执行攻击者恶意制造的网页程序。
盗取用户的 cookie 信息从而伪装成用户去操作，危害数据安全。

存储型

反射型

DOM型

如何防范：对输入(和URL参数)进行过滤，对输出进行转义
设置cookie的HttpOnly属性为 true
纯前端渲染

跨站请求伪造（ Cross-site request forgery ），是一种挟制用户在当前已登录的 Web 应用程序上执行非本意的操作的攻击方法。
攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到冒充用户对被攻击的网站执行某项操作的目的。

state

props

refs

context

概念：
给予函数式组件类似于类组件生命周期的概念，扩大了函数式组件的应用范围。

提出的原由：

类组件难以 实现复用性（redux、mobx），使用  hooks更面向函数式编程（声明、过滤添加业务逻辑、调用）
Hooks 鼓励开发者将业务通用的逻辑封装成React Hooks,而不是根据类组件。
目前函数式组件基本用于 纯展示组件 ，一旦函数式组件耦合有业务逻辑，就需要通过 Props 的传递，通过子组件触发父组件方法的方式来实现业务逻辑的传递，Hooks 的出现使得函数组件也有了自己的状态与业务逻辑，简单逻辑在自己内部处理即可，不再需要通过 Props 的传递，使简单逻辑组件抽离更加方便，也使使用者无需关心组件内部的逻辑，只关心 Hooks 组件返回的结果即可。

钩子函数

模拟请求头http-equiv

页面关键词keywords

页面描述内容description

定义网页作者author

媒体查询viewport

导航优化

网站结构布局

利用布局，把重要的内容HTML代码放在前面

网页代码优化

网站性能优化

概念：cookie 是服务器提供的一种用于维护会话状态信息的数据，通过服务器发送到浏览器，浏览器保存在本地的一种纯文本文件，当下一次有同源的请求（path、domain、secure）时，将保存的 cookie 值添加到请求头部，发送给服务端。这可以用来实现记录用户登录状态等功能。
客户端保持状态的方案。这种生命期为浏览会话期的cookie被称为会话cookie。会话cookie一般不保存在硬盘上而是保存在内存里。
cookie 一般可以存储 4kb 大小的数据，并且只能够被同源的网页所共享访问。且默认为会话级别，需设置maxAge生存周期实现本地存储。

属性：name=value、maxAge、expires、path、domain、httpOnly、securice、sameSite

使用场景：实现自动登录、记录用户习惯(网页主题、保留浏览页数)

概念：session技术是基于cookie,cookie技术存储session编号--jsessionid，是存储在服务端的，记录服务器和客户端会话状态的机制。
服务器端保持状态的方案。
生命周期由服务端设置，而不是网页关闭后会话ID就失效！

一个常见的误解是以为session在有客户端访问时就被创建，然而事实是直到某server端程序调用HttpServletRequest.getSession(true)这样的语句时才被创建。

session在下列情况下被删除：
A．程序调用HttpSession.invalidate()
B．距离上一次收到客户端发送的session id时间间隔超过了session的最大有效时间
C．服务器进程被停止

使用：发起请求时运行携带cookie传递sessionID( axios.default.withCredentials = true  )
          后端设置 Access-Control-Allow-Credentials:true

使用场景：安全级别更高，用户账号信息，敏感信息

1. cookie和session都是用来跟踪浏览器用户身份的会话方式。
2. session保存在服务器，cookie保存在客户端
3. session中保存的时对象，cookie保存的是字符串
4. session不能区分路径，同一个用户访问一个网站期间，所有的session在任何一个地方都可以访问
5. cookie如果设置路径，则在某些地方不能访问 session需要借助cookie才能正常工作，
6. 如果禁用cookie,session则失效
7. 客户端会在发送请求的时候，自动将本地存活的cookie封装在信息头发送给服务器

会话存储，属于同一会话级别有效，即有当前页面跳转的新页面，可数据共享。

本地存储，永久有效。会出现超出配额现象。可采取降级处理

超文本引用，会并行的下载资源，不会阻塞HTML解析。因此建议使用link标签而不是@import来导入到html文档里。

资源下载，阻塞HTML解析。

@import是css提供的语法规则，只有导入样式表的作用;
@impoer引入的css文件在页面加载完毕后才被加载;

左浮动 + 负边距左偏移(响应式用inline-block)

左绝对定位 + 负边距左偏移

flex、inline-table、grip

左浮动右浮动，中间水平居中

两边使用绝对定位，中间水平居中

两边使用float和负margin

table、flex

布局规则

触发条件

应用

absolute + 负margin

absolute + calc

absolute + transform

flex

概念

absolute和硬件加速的区别

复合图层的作用

硬件加速时请使用index

每个层叠上下文都完全独立于它的兄弟元素：当处理层叠时只考虑子元素

个层叠上下文都是自包含的：当一个元素的内容发生层叠后，该元素将被作为整体在父级层叠上下文中按顺序进行层叠

没有创建自己的层叠上下文的元素会被父层叠上下文同化

暂时性死区

块级作用域

构造函数继承

原型对象继承

组合继承

寄生组合继承

extends父类、在构造器中首行super父类构造器

起初异步函数之间存在依赖关系，通过层层嵌套回调，可满足这种顺序执行、相互之间的依赖关系，但是缺点是当层次太多时，会代码臃肿、难易维护；
后来提出一种用同步的流程表示异步的操作，串行执行有依赖关系的异步函数。即 promise的 链式调用，增强可读性与可维护性；缺点是无法取消，一旦开始执行，中途无法取消。

value、reason、state、succeedArr、failArr
resolve()、reject()

then 、catch、finnally 监听

Promise.all、Promise.race

Promise.resolve

promise为ES6重点掌握，所以promise相关的知识点都要掌握、会手写原理

闭包、立即执行函数、一个脚本文件一个功能模块，实现单一职责原则与多人开发合作

commonJS用同步的方式加载模块。在服务端，模块文件都存在本地磁盘，读取非常快，所以这样做不会有问题。但是在浏览器端，限于网络原因，会出现队头阻塞情况，更合理的方案是使用异步加载。

动态只读引用(import命令指向一个只读引用)，浅拷贝。使用设置缓存，再次使用会去缓存中的值，所以导入的对象为缓存中的同一对象，会存在相互影响。

依赖前置，提前执行。模块依赖异步加载，需等待所有的依赖模块加载成功后才会运行。所以不保证模块加载的顺序性

依赖就近，延迟执行。解决AMD在声明依赖的模块时会在第一时间加载并执行模块内的代码。

最大的区别是对依赖模块执行时机处理不同，加载模块都是异步加载。
同样都是异步加载模块，AMD在加载模块完成后就会执行改模块，所有模块都加载执行完后会进入require的回调函数，执行主逻辑，这样的效果就是依赖模块的执行顺序和书写顺序不一定一致，看网络速度，哪个先下载下来，哪个先执行，但是主逻辑一定在所有依赖加载完成后才执行。
CMD加载完某个依赖模块后并不执行，只是下载而已，在所有依赖模块加载完成后进入主逻辑，遇到require语句的时候才执行对应的模块，这样模块的执行顺序和书写顺序是完全一致的。

这也是很多人说AMD用户体验好，因为没有延迟，依赖模块提前执行了，CMD性能好，因为只有用户需要的时候才执行的原因。

缺点：
AMD提高了开发成本，阅读性与书写比较困难，语义不顺畅；不符合通用模块化思维方式
CMD依赖SPM打包，模块的加载逻辑偏重

跨平台模块开发，浏览器服务端都可支持

ES6模块不是对象，import命令静态分析。

语法区别：
一个使用import/export 语法
另一个使用require/module 语法

另一个 ESM 与 CommonJS 显著的差异在于，ESM 导入模块的变量都是强绑定，导出模块的变量一旦发生变化，对应导入模块的变量也会跟随变化，而 CommonJS 中导入的模块都是值传递与引用传递，类似于函数传参（基本类型进行值传递，相当于拷贝变量，非基础类型【对象、数组】，进行引用传递）。

一般用来判断基本数据类型：除了Null(object)、Symbol(function)之外的其他5个，
还可以判断函数：typeof 方法名(function)

一般用来判断自定义的类实例对象，原理是以arr instanceof Array来说
（arr.__proto__一直往上__proto__直到找到Array.prototype为止）

最可靠的方法。例如：Object.prototype.toString.call(null)=>[object Null]

1、如果两个值类型相同，进行 === 比较。
2、如果两个值类型不同，他们可能相等。根据下面规则进行类型转换再比较：
3、如果一个是null、一个是undefined，那么[相等]。
4、如果一个是字符串，一个是数值，把字符串转换成数值再进行比较。
5、如果任一值是 true，把它转换成 1 再比较；如果任一值是 false，把它转换成 0 再比较。
6、如果一个是对象，另一个是数值或字符串，把对象转换成基础类型的值再比较。
对象转换成基础类型，利用它的toString或者valueOf方法。
js核心内置类，会尝试valueOf先于toString；例外的是Date，Date利用的是toString转换。
7、任何其他组合，都[不相等]。
总结：对象类型（object、array、function）会转为原始类型(number、string、boolean)的值去比较，
原始类型的值会转为数值类型(0、1)去比较

1、如果类型不同，就[不相等]
2、如果两个都是数值，并且是同一个值，那么[相等]；
例外的是，如果其中一个是NaN，那么[不相等]。（判断一个值是否是NaN，只能用isNaN()来判断）
3、如果两个都是字符串，每个位置的字符都一样，那么[相等]；否则[不相等]。
4、如果两个值都是true，或者都是false，那么[相等]。
5、如果两个值都引用同一个对象或函数，那么[相等]；否则[不相等]。
6、如果两个值都是null，或者都是undefined，那么[相等]。 

"=="表示只要值相等即可为真，而"==="则要求不仅值相等，而且也要求类型相同。

对于明确数据类型的用===更为可靠，JavaScript是一门弱类型语言，表达式运算赋值等操作都会导致类型转换。
而一些隐式转换会带来一些意想不到的后果。

Object.create()

字面量对象

new Function

数据属性

访问属性

浏览器主进程、GPU进程、网络进程、插件进程、渲染进程

功能：
核心任务是将HTML、CSS、JS转换为用户可与之交互的网页，排版引擎Blink和V8引擎都运行在线程中；
谷歌默认每个Tab标签创建一个渲染进程，渲染进程运行在沙箱模式下

GUI渲染进程、JS引擎线程、事件触发线程、定时触发线程、异步http请求线程

1. 主线程执行完毕，查询任务队列，取出一个任务，推入主线程处理
2. 当有异步任务时，提交给对应的异步进程处理
3. 异步任务完毕，推入任务队列队尾，等待JS引擎线程的执行
4. 主线程执行完当前任务后，会查询微任务队列，微任务队列取完后，会先进行一定时间的UI渲染，再继续取任务队列队头。一次循环；

宏任务

微任务

异步操作解决了同步操作的性能问题，微任务解决了实时性问题

概念

分类

在当前作用域中查找变量，若当前作用域中没有定义该变量，那么就会向父级作用域中继续查找，
一层一层往上查找，直到找到全局作用域，这种关系叫做作用域链

全局执行上下文

函数执行上下文

Eval函数执行上下文

概念：this对象是在运行时基于函数的执行环境绑定的
（this 实际上是在函数被调用时发生的绑定，它指向什么完全取决于函数在哪里被调用，也就是函数的调用位置）

绑定规则

定义:当一个嵌套的内部函数引用了外部函数的变量或者函数时，外部函数在执行时就产生了闭包。
在JS中，当变量存在于一个函数内部，那么该变量的作用域属于函数作用域，在该函数执行后作用域会被销毁，内存也随之被回收，这样我们在函数外部无法访问到函数内部变量。
但由于闭包是建立在一个函数内部的子函数，其可访问父级作用域，所以即便父级函数执行完，它的作用域也不会被销毁（因为它的子函数正在访问它的作用域的变量）
所以：闭包就是能够读取其他函数内部变量的函数

可以读取函数内部的变量
可以让这些变量的值始终保持在内存中

1. 封装对象的私有属性
2. 避免变量的全局污染
3. 缓存结果，闭包可以延长外部函数的局部变量的生命周期,可以实现计数器,累加器这类，让变量始终保持在内存中

设计单例模式
编写防抖函数
事件回调
封装变量

使用Scavenge算法：
1.把新生代空间对半划分为两个区域，一半是对象区域，一半是空闲区域；
2.新加入的对象都会存放到对象区域，当对象区域快被写满时，就需要执行一次垃圾清理操作；
3.首先要对对象区域中的垃圾做标记；标记完成之后，就进入垃圾清理阶段，副垃圾回收器会把这些存活的对象复制到空闲区域中，同时它还会把这些对象有序地排列起来，所以这个复制过程，也就相当于完成了内存整理操作，复制后空闲区域就没有内存碎片了；
4.完成复制后，对象区域与空闲区域进行角色翻转，也就是原来的对象区域变成空闲区域，原来的空闲区域变成了对象区域。这样就完成了垃圾对象的回收操作，同时这种角色翻转的操作还能让新生代中的这两块区域无限重复使用下去。

老生代的对象特点：
1.对象占用空间大
2.对象存活时间长
使用标记-清除算法：
1.首先是标记过程阶段。标记阶段就是从一组根元素开始，递归遍历这组根元素，在这个遍历过程中，能到达的元素称为活动对象，没有到达的元素就可以判断为垃圾数据；
2.接下来就是垃圾的清除过程。它和副垃圾回收器的垃圾清除过程完全不同，你可以理解这个过程是清除掉红色标记数据（是步骤1中标记的垃圾数据）的过程；
3.对一块内存多次执行标记 - 清除算法后，会产生大量不连续的内存碎片。而碎片过多会导致大对象无法分配到足够的连续内存，于是又产生了另外一种算法——标记 - 整理（Mark-Compact），这个标记过程仍然与标记 - 清除算法里的是一样的，但后续步骤不是直接对可回收对象进行清理，而是让所有存活的对象都向一端移动，然后直接清理掉端边界以外的内存。
括展：
由于 JavaScript 是运行在主线程之上的，一旦执行垃圾回收算法，都需要将正在执行的 JavaScript 脚本暂停下来，待垃圾回收完毕后再恢复脚本执行。我们把这种行为叫做全停顿（Stop-The-World）。
为了降低老生代的垃圾回收而造成的卡顿，V8 将标记过程分为一个个的子标记过程，同时让垃圾回收标记和 JavaScript 应用逻辑交替进行，直到标记阶段完成，我们把这个算法称为增量标记（Incremental Marking）算法。
使用增量标记算法，可以把一个完整的垃圾回收任务拆分为很多小的任务，这些小的任务执行时间比较短，可以穿插在其他的 JavaScript 任务中间执行，这样当执行上述动画效果时，就不会让用户因为垃圾回收任务而感受到页面的卡顿了。

beforeCreate

概念：
组件实例已经完全创建：data已绑定，methods已初始化，但是真实的dom还没有生成，所以$el还不可以用

Created

beforeMount

mounted

设计初衷

initComputed

惰性求值，使用缓存

1. computed是计算一个新的属性，并将该属性挂载到vm（Vue实例）上，而watch是监听已经存在且已挂载到vm上的数据，所以用watch同样可以监听computed计算属性的变化（其它还有data、props）
2. computed本质是一个惰性求值的观察者，具有缓存性，只有当依赖变化后，第一次访问 computed 属性，才会计算新的值，而watch则是当数据发生变化便会调用执行函数
3. 从使用场景上说，computed适用一个数据被多个数据影响，而watch适用一个数据影响多个数据；

Vue 通过原型拦截的方式重写了数组的 7 个方法,首先获取到这个数组的ob,也就是它的 Observer 对象,如果有新的值,就调用 observeArray 对新的值进行监听,然后手动调用 notify,通知 render watcher,执行 update

也就是它的 Observer 对象,如果有新的值,就调用 observeArray 对新的值进行监听,然后手动调用 notify,通知 render watcher,执行 update

Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。

如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。

然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。queueWatcher函数，对watch.id进行标记、去重、push更新队列，最后将queueWatcher中的队列传入flushSchedulerQueue函数中;flushSchedulerQueue是下一个tick时的回调函数，主要目的是执行Watcher的run函数，用来更新视图。

Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate，如果执行环境不支持，则会采用 setTimeout(fn, 0) 代替。

在 vue2.5 的源码中，macrotask 降级的方案依次是：setImmediate、MessageChannel、setTimeout

vue 的 nextTick 方法的实现原理:

vue 用异步队列的方式来控制 DOM 更新和 nextTick 回调先后执行
microtask 因为其高优先级特性，能确保队列中的微任务在一次事件循环前被执行完毕
考虑兼容问题,vue 做了 microtask 向 macrotask 的降级方案

props和emit

$parent/$children与ref

provide/inject

$emit和$on

Vuex、会话存储、本地存储

单一原则
链式调用
统一原则

babel-loader：把 ES6 转换成 ES5

css-loader：加载 CSS，支持模块化、压缩、文件导入等特性

style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS

eslint-loader：通过 ESLint 检查 JavaScript 代码

file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件

url-loader：和 file-loader 类似，但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去

image-loader：加载并且压缩图片文件

新的Hash值：a61bdd6e82294ed06fa3；代表每一次编译的标识。
新的json文件： a93fd735d02d98633356.hot-update.json；有c和h属性，h是本地新生成的hash值、c是当前要热更新的文件对应的js模块。
新的js文件：index.a93fd735d02d98633356.hot-update.js；本次修改的代码，重新编译打包后的。

启动webpack，生成compiler实例。compiler上有很多方法，比如可以启动 webpack 所有编译工作，以及监听本地文件的变化。
使用express框架启动本地server，让浏览器可以请求本地的静态资源。
本地server启动之后，再去启动websocket服务，如果不了解websocket，建议简单了解一下websocket速成。通过websocket，可以建立本地服务和浏览器的双向通信。这样就可以实现当本地文件发生变化，立马告知浏览器可以热更新代码啦！

当监听到一次webpack编译结束，就会调用_sendStats方法通过websocket给浏览器发送通知，ok和hash事件，这样浏览器就可以拿到最新的hash值了，做检查更新逻辑。

监听到文件的变化了，当文件发生变化，就触发重新编译。同时还监听了每次编译结束的事件。当监听到一次webpack编译结束，_sendStats方法就通过websoket给浏览器发送通知，检查下是否需要热更新。下面重点讲的就是_sendStats方法中的ok和hash事件都做了什么。

socket方法建立了websocket和服务端的连接，并注册了 2 个监听事件。

hash事件，更新最新一次打包后的hash值。
ok事件，进行热更新检查。

①删除过期的模块，就是需要替换的模块

②将新的模块添加到 modules 中

③通过__webpack_require__执行相关模块的代码

Rollup提出 Tree Shaking

输出代码有三种：

• 业务逻辑代码
• Runtime - 代码执行的引导
• Manifest - 模块依赖关系的记录

对构建代码分析：

• 可以看到构建结果中的业务逻辑代码，Runtime和Manifest
• 在Manifest中记录中依赖关系，通过__webpack_require__加载
• 构建结果中包含了没有使用到的square
• 构建体积明显比rollup中iife格式大
• 代码执行的时候，rollup中iife输出格式，代码执行的速度更快，webpack构建出来的还有依赖查找，而且每个模块通过一个函数包裹形式，执行的时候，就形成了一个个的闭包，占用了内存，当然可以在webpack3使用ConcatenationPlugin插件优化这样的输出格式，打包到一个依赖中

• webpack 拆分代码， 静态资源按需加载；
• Rollup 所有资源放在同一个地方，一次性加载，利用 tree-shake 特性来剔除项目中未使用的代码，减少冗余，但是webpack2已经逐渐支持tree-shake（压缩代码）
  

官方简介

应用使用 webpack，对于类库使用 Rollup
从上面使用场景可以大概分析出，Rollup偏向应用于js库，webpack偏向应用于前端工程，UI库；
如果你的应用场景中只是js代码，希望做ES转换，模块解析，可以使用Rollup。如果你的场景中涉及到css、html，涉及到复杂的代码拆分合并，建议使用webpack。