网络协议
| OSI七层模型 | TCP/IP概念层模型 | 功能 | TCP/IP协议族 |
|---|---|---|---|
| 应用层 | 应用层 | 文件传输，电子邮件，虚拟终端 | HTTP,FTP,SMTP,DNS,Telnet |
| 表示层 | 应用层 | 数据格式化 | |
| 会话层 | 应用层 | 解除或建立与别的接点的联系 | |
| 传输层 | 传输层 | 提供端对端接口 | TCP, UDP |
| 网络层 | 网络层 | 为数据包选择路由 | IP,ICMP,RIP,OSPF,BGP,IGMP |
| 数据链路层 | 链路层 | 传输有地址的帧以及错误检测功能 | PPP,ARP,MTU |
| 物理层 | 链路层 | 以二进制数据形式在屋里媒体上传输数据 | IEEE802 |
输入url到浏览器显示过程
1. 浏览器输入网址
2. 通过DNS解析域名的实际IP地址
DNS 解析先从浏览器的缓存中查找，
没有就向系统DNS缓存中找，
再没有就去路由器的DNS 缓存找，
最后去ISP的DNS缓存中找。
浏览器----系统----路由器----ISP
3. 检查浏览器是否有缓存
（1）通过Cache-control 和 Expires检查是否命中强缓存，命中就直接存取本地磁盘的html
（2）如果没有命中强缓存，就向服务器发起请求（先进行下一步的TCP连接），服务器通过Etag和Last-Modify字段与服务器确认返回的响应是否被更改（协商缓存），如果没有更改就返回304，浏览器取本地缓存。
（3）若强缓存和协商缓存都没有命中，就返回请求结果。
4. 建立TCP连接
通过三次握手建立连接，
三次是因为避免是历史连接，确认客户端发来的请求是这次通信的人。
5. 浏览器发送请求获取页面html
浏览器发送[get或post请求] + [请求的资源] + [http版本号]
6. 服务器响应html
这里的服务器可能是server或者是cdn
注：cdn - 内容分发网络，可用来加快传输速度，主要用来存储静态文件，例如前端的html、css、js、图片文件等。
服务器上可能会通过nginx等设置静态资源代理，将url对应的html等静态资源返回。
nginx是常用的反向代理服务器.
如果网站是博客或者其他需要seo友好的页面，就需要做服务端渲染，这时服务器会根据模版和数据渲染好html文件返回给前端。
常见的服务端渲染方案有：ejs、art-template、等模版语法，也有基于vue、react等框架的服务端渲染框架nuxt.js及next.js等。
7. 关闭TCP连接
4次挥手
8. 浏览器解析HTML
- 浏览器下载 HTML 数据，将html文档解析成为一个个标签，这些标签组成了树状结构
- 如果解析到style标签则开始解析css，如果解析到link标签则先异步下载，完成后解析css。
- 如果遇到script标签，判断是行内写法则直接解析执行，如果是src引入则同步下载脚本文件，下载完成立即执行，注意这里下载过程是阻塞的，其他流程都会等下载完成后执行
9. 浏览器渲染页面
浏览器渲染页面的过程主要是解析html文档组成标签节点树，解析css形成样式规则树，标签节点树和样式规则树共同组成渲染树，浏览器最终显示渲染树形成页面。
- 浏览器会将HTML解析成一个DOM树，DOM 树的构建过程是一个深度遍历过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。（更具体的解析HTML过程看上一篇博客：点击打开链接）
- 将CSS解析成 CSS Rule Tree（css规则树） 。
- 解析完成后，浏览器引擎会根据DOM树和CSS规则树来构造 Render Tree。注意：Render Tree 渲染树并不等同于 DOM 树，因为一些像Header或display:none的东西就没必要放在渲染树中了。
- 有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。下一步进行layout，进入布局处理阶段，即计算出每个节点在屏幕中的位置。
- 再下一步就是绘制，即遍历RenderTree，并使用用户界面后端层绘制每个节点。根据计算好的信息绘制整个页面。
