双向绑定就是数据和视图的双向绑定，数据变化更新视图，视图变化更新数据

视图变化更新数据，我们可以通过监听页面上的DOM事件，从而去修改数据

数据变化更新视图，首先进行数据劫持，使得我们能够感知到数据的变化；感知到数据的变化后，通知它的订阅者，订阅者执行更新函数，进而更新视图

订阅者是如何形成的呢？它是通过Compile解析器来实现的，解析器扫描每个节点，将相关指令初始化为一个订阅者Watcher，当然解析器在这个过程中还进行了其他操作，例如更换模板数据、绑定函数等

Observer观察者劫持data对象所有数据，监听数据变动；Compile解析器对每个节点进行解析，提取模板中的各种指令，获取数据对象，将数据更换到模板中，对视图进行初始化渲染，同时将更新视图的函数传递给订阅者；因为一个数据可能不止被用了一次，也就是它可能有多个订阅者，因此我们需要一个数据结构来存储订阅者，它就是Dep，Dep中存储着数据依赖项也就是订阅者，这个过程是在劫持数据对象时get方法中进行的；一旦数据有变动，就进入了set方法，观察者就通知Dep，Dep就通知所有的订阅者，订阅者接收到数据变动后，调用更新函数去更新视图，这就是数据变化更新视图的背后的原理。

HTTPS概述

HTTPS的主要原理是，它在将HTTP报文发送给TCP之前，先发给一个安全层，对报文进行加密处理。现在HTTP的安全层是通过SSL和TLS来实现的，一般都统称为SSL。

HTTPS为什么会出现

就是因为HTTP存在着以下这些问题：
1、被监听，因为HTTP传输的数据是明文，如果中途被劫持了，类似于密码之类的信息就不安全；对此HTTPS对数据进行加密处理

2、被伪装，客户端请求到的数据并一定来源于合法的地址；对此HTTPS采用了数字证书

3、被篡改，HTTP在传输过程中，数据可以随时被改动；对此HTTPS对数据进行摘要，可以感知数据变动

正是出于这些不安全因素，HTTPS应运而生

HTTPS方案

一般通过URL来告知Web服务器执行HTTP安全协议版本，也就是URL方案的前缀为http或https

如果URL走的是HTTPS，客户端会开启443默认端口来连接服务器，进行握手过程，同服务器交换SSL安全参数，附上加密的HTTP命令

安全传输建立流程

客户端发送一个HTTPS方案的请求之后，客户端会通过443端口与服务器建立连接，TCP连接建立以后，客户端和服务器会初始化SSL层，沟通加密参数，并交换密钥，握手完成后，SSL初始化完成，客户端发送请求报文给安全层。

如何保障安全

对称加密、非对称加密、数字证书

加密的HTTPS事务流程

• 建立到服务器443端口的TCP连接
• 双方进行SSL安全参数握手
• 在SSL发送HTTP请求，在TCP发送已经加密的请求
• 在SSL发送HTTP响应，在TCP发送已经加密的响应
• SSL关闭通知
• TCP关闭连接

SSL安全参数握手流程

• 客户端向服务器发送可供选择的密码，并请求证书
• 服务器发送选中密码和证书
• 客户端发送保密信息，双方生成密钥
• 双方互相告知，开始加密过程

站点证书的有效性校验

• 日期检测
• 签名颁发者可信度检测
• 签名检测
• 站点身份检测

SSL握手简化版流程

客户端发送HTTPS请求给服务器端

服务器端选择合适的加密协议后，返回数字证书及公钥

客户端验证数字证书是否合格，如果不合格则提示证书有问题；如果合格；则随机生成对称密钥，使用数字证书上的公钥对其进行加密，发送给服务器端

服务器端使用私钥对证书进行解密，得到客户端的对称密钥，对要返回的内容用对称私钥加密，发送给客户端

客户端通过对称私钥解密，得到数据，握手结束

前端性能优化可以从很多方面入手，其中网络请求层面是一个重点内容，而这方面一般有两个思路，1、减少网络请求；2、减小网络请求的体积

减少网络请求体积的一般做法有：合并请求资源，制作雪碧图，压缩请求等

js执行层面之所以耗费资源主要是源于内存泄漏，所以我们经常说要及时清空没有被使用的引用

页面渲染层面，一般强调减少DOM操作，这也是虚拟DOM产生的背景

要讲清楚这两个请求方法的区别，其实可以从RTC（一个互联网规范）对HTTP协议描述的特性出发

HTTP协议对请求方法规定了这几个特性：安全性、幂等性、可缓存性

首先是安全性。如果一个方法的语义是只读，那它就是安全的，也就是意味着它不会对服务器的资源作任何的改动；它是无害的。这些都是属于规范层面，但在实际操纵中的实现不一定是安全的，例如用GET方法修改用户信息

其次是幂等性。概念是同个方法执行多次和执行一次效果是一样的。GET方法是幂等的，POST方法不幂等。原因是可以从为什么要引入幂等性思考？主要是为了处理同一个请求重复发送的问题。例如用户填写了表单，表单数据用POST提交到服务器，此时用户不小心使得浏览器后退或者刷新了页面，浏览器就会提示用户数据会丢失，保证POST过去的都不是重复的

最后是可缓存性。GET方法可以缓存，POST方法不可缓存，这也是处于语义上的需要

还要其他一些区别：GET有长度限制，这和GET是通过URL参数传递信息有关；POST长度不限；

总结：GET方法是获取指定资源，它是安全的、幂等的、可以缓存的；POST方法根据报文主体的payload对指定资源作处理，它是不安全、不幂等

参考链接：MDN上关于HTTP的阐述

主要由三部分组成Observer Compiler Watcher

Observer监听数据变化，使得当数据变化时，我们有能力去执行一些操作

Compiler解析模板，将数据结合模板渲染到页面上

Watcher将两者结合起来，当挂载组件或初始化计算属性时，都会去实例化Watcher，将target传递给Observer，执行数据的getter方法，getter方法中取到target并收集到Dep中，这样就完成了依赖收集；当数据发生变化时，会调用dep.notify方法，通知所有的监听者Watcher，Watcher再调用参数中的回调函数update，更新视图

共同点

都是客户端存储方案

不同点：

• Cookie在浏览器和服务器之间传输，附加于HTTP报文中；localStorage、sessionStorage只是活动于浏览器端，不需要和服务器通信
• Cookie有path字段，可以规范Cookie的存储路径；localStorage、sessionStorage没有
• 存储大小方面，Cookie只有4KB；，这是由于它是存在于HTTP报文中，数据量自然不能过大；localStorage、sessionStorage能够存储5MB以上
• 数据的生命周期方面，Cookie如果是存在于内存中，则在关闭浏览器后便被释放，如果存在于硬盘中，有个过期时间或可手动清除；localStorage如果不手动清除，将会一直存在；sessionStorage在当前浏览器关闭之前有效
• 作用域方面，Cookie、localStorage只要是同源窗口就能生效（即使是不同浏览器）sessionStorage在不同的浏览器是不同的（即使是同个网站）
• localStorage、sessionStorage API提供了可监听的事件，可以在数据变动是执行相应动作
• 应用场景方面：Cookie现在一般用于用户登录信息存储；localStorage、sessionStorage一般用于购物车、存储较大的数据量；表单信息；网站访客统计等；localStorage可做一些数据持久化工作，减少数据库的访问量

是什么

• Cookie，也叫作小型文本文件，本质上是存储在客户端的数据，网站能够通过这些数据来辨别用户身份
• 按照数据存储在客户端不同的位置，可以将Cookie分为内存Cookie、硬盘Cookie
• 内存Cookie和浏览器挂钩，当关闭了浏览器，其占用的内存也就被释放，内存Cookie自然就被清除；也被称为非持久Cookie
• 硬盘Cookie，顾名思义就是存储在硬盘中的数据，一般都有个过期时间，用户也可以手动清除；也被称为持久Cookie

应用场景

• 购物车，当用户选中一个商品到购物车，服务器端返回浏览器页面的同时，也会将选中的商品的信息放入Cookie一起发送过去，当用户再选中商品时，浏览器在发送请求上会带上之前的Cookie，服务器接收到后，就能够将新的商品添加到上一次的商品后一起返回响应，这实际上解决了HTTP无状态所带来的客户操作状态无法保存的限制。
• 网站登录。第一次登录时如果勾选了自动登录，那么服务器端接收到用户的表单数据，进行一系列验证，返回响应时会携带一个加密的Cookie，这段Cookie将存储在用户硬盘中，当第二次登录时，浏览器就可以发送这段Cookie给服务器，服务器验证通过就可以直接登录了。

不足

• Cookie在服务器端和客户端之间的传输，总是附加在HTTP报文中，增加了流量
• 在HTTP中，Cookie是明文的，不安全；可以考虑HTTPS
• 存储大小只有4KB，不适合复杂数据存储

什么是前端缓存？

浏览器将对于已经请求过的资源缓存起来，等到下一次请求同样资源时，浏览器直接将缓存副本返回响应，不必向浏览器发送请求

前端缓存的好处

• 缩短网络请求的距离，减少延迟，加快网页打开速度，性能优化
• 资源重复利用，减少带宽，降低服务器压力

如何实现前端缓存？