原理性的问题：具有普遍意义的最基本的规律或道理

很诚恳地说道，，【其实，我并不知道他的原理，和他们对比有什么区别】

一 ajax的原理

 请求步骤：

“Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用JavaScript来操作DOM而更新页面 流程”

二 mvvm

 model-view -viewModel 模型 -视图 -  视图模型

模型和视图只要有一个改变，都会通过视图模型进行同步变化。

数据到模型，是通过发布订阅者模式；模型到数据，操作DOM。

参考：https://blog.csdn.net/dwfrost/article/details/85777900

三 http的原理

//  首先弄懂URL与URI
URL[location]统一资源标志符
URI[id identifier] 唯一的标识资源

// 其次弄懂HTTPS 与 HTTP
Http：超文本传输协议
https：以安全为目的的 HTTP通道
  • HTTPS在HTTP的基础下加入SSL，提供了身份验证与加密通讯方法; 端口号是443

　3.1  HTTP的过程

当单击某个超链接或者输入访问地址访问时，HTTP的工作开始：
 
 简单来说，就是动作——解析 —— 返回

1. 触发。如用户点击某个超链接，软件启动时发送的请求，用户在地址栏访问网址等等。
2. 解析。浏览器解析URL，得到协议类型、域名或服务器地址、资源地址。
3. DNS查询。浏览器依次检查缓存与Hosts文件，如果没有，则向DNS服务器请求目标服务器的IP地址。
4.握手。浏览器向服务器发起TCP的连接请求，TCP经过3次握手以后建立连接。
5.请求。建立连接后，浏览器发送一个HTTP请求给服务器。
6.响应。服务器处理完后响应HTTP，返回数据给html。

　为了防止服务器端开启一些无用的连接增加服务器开销以及防止已失效的连接请求报文段突然又传送到了服务端，因而产生错误。

3.2 三次握手-四次挥手

A向B发信息
第一次A发信息确定是不是B 然后B接受信息，并向A发送信息确定可以接收到
第二次A向B发确定已收到信息，然后B接受信息并反馈信息给A。
第三次A向B发内容信息，B接受信息.B向A发接受内内容信息

四 响应式的原理  |   双向绑定的原理

 简言之：

 数据劫持结合发布者订阅者模式,通过Object.defineProperty()对每个属性的get和set进行拦截。

在数据发生变化的时候发布消息给订阅者,触发相应的监听回调。”

Vue 的响应式是通过 Object.defineProperty 对数据进行劫持，并结合发布订阅者模式实现。

Vue 利用 Object.defineProperty 创建一个 observe 来劫持监听所有的属性，把这些属性全部转为 getter 和 setter。

Vue 中每个组件实例都会对应一个 watcher 实例，它会在组件渲染的过程中把使用过的数据属性通过 getter 收集为依赖。

之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。

Object.defineProperty()的作用就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性

Object.defineProperty(obj, prop, desc)

五 Promise的原理

1.  解决回调地狱。 2.可以同时实现多个操作完成后进行处理或得到获得的结果。

缺点：状态一旦进行不能更改

原理： 从状态 、 参数 、then【race，all】

状态：  pending 、 fulfilled 、 rejected
构造promise实例需要给构造函数传入一函数，函数有两个形参，分别是resolve和reject。状态已经撞见不得。

六 缓存cache

preloader

缓存出现的目的：为了更快的响应【由上到下查找，找到则返回；找不到继续】;

请求的分类有硬件缓存和软件缓存之分。 

出现在网络中请求中，基本的网络请求：请求 、 处理 、响应。后端缓存主要集中于“处理”过程中。

缓存的单位是s【若是s以下的缓存不能使用缓存】

由上到下：

在NetWork的size中可以看到内存缓存[Memory cache,短期缓存，关闭浏览器就结束。 几乎所有的请求资源都可以进去内存缓存，preloader]、

硬件缓存[disk cache,，也叫http cache 持久存储，绝大部分的缓存都来自硬件缓存，占有内存，也会根据算法进行删除]，

Service Worke ,是谷歌浏览器F12，applicattion->cache  Storage找到

有强制缓存按强制缓存； 没有用对比缓存，比较后确定是304 还是200.

2.1 强制缓存：

减少请求数

标志性字段是cache-control | 后 和expires | 最开始【缺点：写法需要规范】，用于表示请求时间 

设置最大有限时间，前者是绝对时间 ； 后者是相对时间

不缓存：

public、parivate

Cache-control:public,max-age=0

　max-age=0 到期需要重新验证，no-cache需要重新验证

缩短响应大小提高相应数据

2.2 对比缓存

服务器会将IF-Modified-Since 的值与Last-Modified字段进行对比。

如果相等| 命中，响应304 | 未命中；若修改了则是200。

1. 浏览器先请求缓存数据库，发返回一个标识。浏览器拿着标识和服务器通讯
2.若缓存未失效，则返回http状态码304表示继续使用，于是继续使用缓存
  若失效，则返回新的数据和缓存规则，浏览器响应数据后，再把规则写入缓存数据库

ajax的参考自：https://blog.csdn.net/weixin_50313248/article/details/118515282 

缓存参考自：https://zhuanlan.zhihu.com/p/44789005?utm_source=qq&utm_medium=social&utm_oi=815669732077355008

http原理参考自：https://blog.csdn.net/zoujiawei6/article/details/114597931

                            https://baijiahao.baidu.com/s?id=1654225744653405133&wfr=spider&for=pc

相响应的原理参考自：https://blog.csdn.net/dongqian911/article/details/116242827  

                                https://blog.csdn.net/qq_41998083/article/details/110846732

方向与原理性问题

相关

标签