引言

就在前几天,WebAssembly 正式成为 World Wide Web Consortium (W3C) 的标准，加入到了 HTML、CSS a和 JavaScript 的行列。WebAssembly 也正式抵达了 1.0 版本，它已获得了主流浏览器 Firefox、Chrome、Safari 和 Edge 的支持。既然都已经成为了标准，很明显对于web开发来说肯定有颠覆性的作用，那它到底有什么用呢，下面让我们一起来探索一下他的”黑科技”。

为了了解WebAssembly，我们先来了解一下他的前世今生。

本地调试js-sdk，因为初始化js-sdk的时还需要通过域名url才能生成签名，所以需要在本地模拟一个
域名进行调试。下面是详细的操作步骤：

1. 首先需要让手机与调试的电脑位于同一个局域网
2. 让电脑能够通过自己设置的域名访问调试本地页面，例如我的页面index是 http://127.0.0.1/basic.html 我想要通过电脑浏览器访问 http://baidu.com/basic.html 得到我的页面index
   (1)修改hosts ，windows路径（C:\Windows\System32\drivers\etc），先用#把 127.0.0.1 localhost 注释掉，新建 127.0.0.1 baidu.com
   (2)访问http://baidu.com/basic.html：
3. 下载安装charles，将手机的ip访问代理到电脑端：

1. TCP的三次握手和四次挥手
   (1) 建立起一个TCP连接需要经过”三次握手”：
   第一次握手：客户端发送syn包(syn=j)到服务器，并进入SYN_SEND状态，等待服务器确认；
   第二次握手：服务器收到syn包，必须确认客户的SYN（ack=j+1），同时自己也发送一个SYN包（syn=k），即SYN+ACK包，此时服务器进入SYN_RECV状态；
   第三次握手：客户端收到服务器的SYN＋ACK包，向服务器发送确认包ACK(ack=k+1)，此包发送完毕，客户端和服务器进入ESTABLISHED状态，完成三次握手。
   握手过程中传送的包里不包含数据，三次握手完毕后，客户端与服务器才正式开始传送数据。理想状态下，TCP连接一旦建立，在通信双方中的任何一方主动关闭连接之前，TCP 连接都将被一直保持下去

(2) 由于TCP连接是全双工的，因此每个方向都必须单独进行关闭。这个原则是当一方完成它的数据发送任务后就能发送一个FIN来终止这个方向 的连接。收到一个 FIN只意味着这一方向上没有数据流动，一个TCP连接在收到一个FIN后仍能发送数据。首先进行关闭的一方将执行主动关闭，而另一方执行被动关闭。
（1）主动端A发送一个FIN，用来关闭客户A到被动端B的数据传送。
（2）被动端B收到这个FIN，它发回一个ACK，确认序号为收到的序号加1。和SYN一样，一个FIN将占用一个序号。
（3）被动端B关闭与主动端A的连接，发送一个FIN给主动端A。
（4）主动端A发回ACK报文确认，并将确认序号设置为收到序号加1。

(3) 序列号、确认号及标志位等
序列号seq：占4个字节，用来标记数据段的顺序，TCP把连接中发送的所有数据字节都编上一个序号，第一个字节的编号由本地随机产生，给字节编上序号后，就给每一个报文段指派一个序号，序列号seq就是这个报文段中的第一个字节的数据编号。
确认号ack：占4个字节，期待收到对方下一个报文段的第一个数据字节的序号，序列号表示报文段携带数据的第一个字节的编号，而确认号指的是期望接受到下一个字节的编号，因此挡墙报文段最后一个字节的编号+1即是确认号。
确认ACK：占1个比特位，仅当ACK=1，确认号字段才有效。ACK=0，确认号无效。
同步SYN：连接建立时用于同步序号。当SYN=1，ACK=0表示：这是一个连接请求报文段。若同意连接，则在响应报文段中使用SYN=1，ACK=1.因此，SYN=1表示这是一个连接请求，或连接接收报文，SYN这个标志位只有在TCP建立连接才会被置为1，握手完成后SYN标志位被置为0.
终止FIN：用来释放一个连接。

为什么握手是3次而挥手是4次呢？
至于四次挥手，同样也是基于以上的原理。尤其是通信双方都可以独立关闭自己的通信通道，也就是半关闭。
client先发送FIN告知对方我已经完成数据发送了，server回复ack来确定我知道了。这样一个流程，就关闭了client的发送信息通道。但是还可以接收来自server方的数据。
server此时已经知道接收不到client的数据了，但是还可以给它发送数据。如果server也没有啥数据要发送给对方了，server也会以FIN标志位发送一个信息给client，client接到后，也会传递一个ack表示知道了。这样子，双方都完成了关闭。

前言

随着笔者工作的深入，发现webpack对于一个合格的前端工程师来说是一项很重要的技能，如果对webpack了解还不够深入，工作中或者学习中可能会遇到一些麻烦，为此笔者特意建立此文章用来记录与webpack相关的知识，并且笔者会不断更新此文章(边学边更新)。

https://juejin.im/post/5b4609f5e51d4519596b66a7

1. webpack中的plugins
   插件（Plugins）是用来拓展webpack功能的，它们会在整个构建过程中生效，执行相关的任务。
   Loaders和Plugins常常被弄混，但是他们其实是完全不同的东西：Loaders是在打包构建过程中用来处理源文件的（JSX，Scss，Less..），一次处理一个;插件并不直接操作单个文件，它直接对整个构建过程起作用。
   webpack有很多内置插件，同时也有很多第三方插件，可以让我们完成更加丰富的功能。插件目的在于解决 loader 无法实现的其他事。

前言

笔者最近在深入学习ES6中, 在写代码的过程中用到了set,Map这两个ES6新增的数据结构, 深切感受到了它们的强大, 解决问题的能力。于是笔者决定写一篇文章总结一下。并分享给大家,希望能够对大家有帮助。这篇文章主要给大家介绍了关于ES6学习笔记之map、set与数组、对象对比的相关资料, 下面让我们一起走进set, Map的世界吧😄😄。

温馨提示: Map和Set是ES6标准新增的数据类型，请根据浏览器的支持情况决定是否要使用。

笔者工作中用到的js框架便是当下十分火热的vue，这篇文章用于记录和总结笔者工作和学习过程中遇到的关于vue框架的问题。以便以后遇到相同的问题能够快速找到解决办法。😄😄

1. Vue 自定义标签的 src 属性不能使用相对路径的问题
   我们都知道，当使用自己定义的组件和原生img标签用相对路径引入src的话，其实是会有不同结果的，如下

   1 2 3 4 5 6

   <!-- 正常加载 --> <v-img :src="require('../../assets/logo.png')" /> <!-- 无法加载 --> <v-img src="../../assets/logo.png" /> <!-- 正常加载 --> <img src="../../assets/logo.png" />