## 1. 从输入地址到返回请求 ```JS 和其他机器互通，先得有其他机器的IP地址 我们只记得域名对不对，拿到域名，可以通过DNS查询到 IP 地址 打包，自然是 HTTP 的包，整个万维网都是基于 HTTP ```   ## 2. 网络体系结构  ## 3. 分组 ```JS 比如有1G 的包，网络会把1G 的包，经过复杂的算法切割成很多个小组，再根据不同的网络运输 1.数据都会分割成很多小块在网络上传输 2.分组都是乱序随机传输，目标机器给与排序；乱糟糟的一堆分组到达目标机器，目标机器会根据分组头部的一些字段来加以排序、合并； 不会按照顺序，每个分组都有可能走不同的通路，视网络情况而定 3.上一层次的分组会被封装进当前层次的数据部分 ```  ## 4. TCP ```JS TCP：Transmission Control Protocol 传输控制协议 一种面向连接的，可靠的，基于字节流的传输层通讯协议 同一层的UDP协议：协议不是可靠地，但是比较快，丢到网上不管死活的 客户端是男生，服务端是女生 创建连接：比如男生发消息（X）， 给女生说我喜欢你 ==> 女生收到后，答应了，回复（Y），并且还要男生给她一个定情信物（+1）； 男生深思后也答应了（Y），那就买了定情信物iphone8给她（+1）==> 然后女生就收到男生的礼物，三次深情拥抱 （三次握手） 数据传送：两个人谈恋爱一段时间后，男生说我们结婚吧！买套房给你答应吗（Y+1）？，但是不知道还要买什么给你（X+1）; 女生说，房那么贵可以不要，那就买两个 CK 牌的包包给我吧（X+2）！他们就这样愉快地沟通完毕了。 终止链接：后来男生深思后，说两个包包不算诚意(X+2)，你爸妈不会同意的,还是买套房给你吧（Y+1）！==> 女生说那就买3个CK 牌的包包给我吧（X+3），女生说等等我问问我乡下的父亲，毕竟他们是生我养我的==> 后来女孩都要结婚了，她乡下的父亲 father 一直没有回复，女生说那就在老家买一套房（Y+1）==> 由于老家房价比较便宜，男生索性买了两套，她父母跟他们的婚房各一套（Y+2）。 （四次挥手） ```  ## 5. HTTP ```JS HyperText Transfer Protocol 超文本传输协议 一种用于分布式、协作式和超媒体信息系统的应用层协议 ```  ## 6. HTTP 的报文结构（请求、响应） ```JS 1.get 和 post 是常用的发送请求的方法 2.状态码 4XX 一般表示客户端有错误 3.HTTP其实是无连接的 ``` ``` 调试工具的抓包都是处理过的，更容易阅读的 以下示例原始的 HTTP 抓包： curl -v http://www.baidu.com/ ``` 执行后会有： 1.发送请求结构 方法有：get,post,option,head,put,delete,trace,connect.  2.响应结构  3.HTML 字符串  4.状态码  Network 根据 content- type 来确定是 css 还是 HTML cookie 确定什么用户访问浏览器 accept-encoding 可查看支持什么压缩方式 ## 7. [资料] 聊聊常见的状态码 ```JS 常见的状态码 HTTP 有 request 和 response，他们都有自己的报文结构： messeage-structure 其中 response 有很多不同的状态码，这里呢就聊聊常见的状态码。 404 404 的含义就是客户端所访问的资源不存在，可以试试这个链接。 http://codeing.imweb.io/hhhh 值得说说的就是，服务器当然可以侦测到 404 的请求，从而返回一些好玩的页面，比如腾讯新闻网的找寻失联儿童，点这里瞧瞧。 http://www.qq.com/babygohome/?pgv_ref=404 304 这个是面试官常问的状态码，因为涉及到浏览器的缓存，当然，这个在我们的“浏览器缓存”相关的视频里面有详细的讲解，这里不多说。 301 和 302 同样是面试官常问的问题。 这两个都表示跳转了，区别是啥呢？ 你有一个博客，运营了一段时间，首页链接假设是 http://blog.com/index.html 。 后来呢，你换了个域名，链接就变成了 http://superblog.com/index.html 。 现在问题来了，你的很多迷弟迷妹都只知道老首页的链接呀，你肯定希望他们访问你的老首页就跳转到新首页对不对， 所以这个时候跳转的需求登场了！ 你有两个选择： 301 ，这个表示永久移动，就是你再也不会用老域名了，所有能识别 301 语义的客户端啊，请收藏我的新链接！ 302 ，表示临时移动，就是你还会用回老域名，现在临时切下，所有能识别 302 语义的客户端，请继续收藏我的老链接！ 以上，就是 301 和 302 ，搞清楚哦。 500 前端工程师的大敌，500 ！ 调式接口的时候碰到 500 的话，你就可光明正大地操起折叠凳怼过去了！ 哈哈哈，让 500 来的更多点吧，衰仔！ 当然，上面都是常见的、好玩的状态码，更多的没意思的状态码可以参考下其他资料哈。 参考文档 HTTP 状态码 http://www.runoob.com/http/http-status-codes.html ``` ## 8. 浏览器的缓存 ```JS from memory cache ：已缓存过的，从内存缓存 from disk cache ：从磁盘缓存的 Provisional headers are shown ：临时标题所示：这个说明这个请求没有发送 这几个字段可控制缓存： cache-control（一定时间内缓存，超过时间就会重新缓存） expires（历史遗留问题可不设置）、 last-modified ``` ## 9. 浏览器缓存相关的头字段 分为返回的响应头部和发送请求头部  # 10. 浏览器缓存的逻辑流程 （缓存是面试重灾区） 强缓存 ```JS 第一次访问60秒:浏览器因为是第一次访问服务器，没有缓存，所以将cache-controi:max-age=60,为了兼容性设置expies. 返回到浏览器： last-modified 响应头最后修改时间、200状态码 第二次访问30秒：直接从本地磁盘拿出来，返回请求打开，没有发送请求到服务器；叫做强缓存 ``` 协商缓存 ```js 第三次访问61秒：文件没改动：发送文件最后的修改时间与服务器上传过来最新的修改时间是一样的，不会返回响应的内容，会有请求头 返回304，直接到磁盘取；（如果客户端发送了一个带条件的GET 请求且该请求已被允许，而文档的内容（自上次访问以来或者根据请求 的条件）并没有改变，则服务器应当返回这个304状态码。简单的表达就是：客户端已经执行了GET，但文件未变化。） 第三次访问61秒：文件改动过：因为改动过，是全新的文件，所以返回200状态码，last-modified 又会改一次，所以最后修改时间会更新 所以浏览器会拿到最新的文件，叫做：61秒协商缓存，304就是这么来的 只改时间，不改内容，last-modified 就不适用了，不能作为最新地文件返回 Eag:xxxxx -------根据内容算出的哈希值 if-None-Match:xxxxxx 将文件的内容作为底子（基组），经过复杂算法，得到字符串叫：哈希值，唯一不变的，只要内容不变，Eag 就不变，发送请求时就会把Eag 发送给服务器判断是否改动文件。 last-modified：xxxxxx ----- 最后修改时间 if-Modified-Since:xxxxxx Eag/If-None-Match 和 Last-Modified/If-Modified-Since 原理相似，作用都是协商缓存，机制不同，成对出现的 这么一个重要的提升页面访问速度的手段，不值得你反复推敲么？ max-age 的取值怎么会是绝对时间呢，因为服务器端和浏览器端的时间很容易不一致，绝对时间一直有缺陷， 所以才会出现 max-age 的相对时间啊。 ```  ## 11. DNS ```JS 浏览器输入域名，先找到ip ,在发送请求，怎么通过域名来查到IP？ -----就是通过 DNS Domain Name System 域名系统 应用层协议 HTTP 基于TCP 协议的 DNS 基于UDP协议的 了解查询过程 比如： ke.qq.com 三级域名.二级域名.顶级域名 全世界有13组根域名服务器，遍布世界各地 ```   ## 12. 不是结尾的结尾 ```JS 复习本章节的内容 ```