- 菜菜同学某天对多肉突然很感兴趣, 想做一盆最美的多肉.
用户想在互联网获取某个网页的信息
- 于是把这个想法告诉了我, 我屁颠儿地跑去代办了.
于是用户在地址栏输入地址, 点击回车, 让浏览器去帮忙完成请求过程.
- 我就是浏览器
- 我根据多肉之家的地址, 搜到了他的经纬度, 根据导航找了过去. 哇, 多肉之家好多门啊, 我找到了正确的那扇门并成功走了进去.
浏览器把用户输入的网址, 通过DNS解析翻译成真实IP, 再去连接服务器的80端口, 之后连接成功.
- 多肉之家, 就是服务器.
- 多肉之家的地址, 就是服务器的域名
- 多肉之家的坐标, 就是服务器的IP
注意: [宜山路810号/贝岭科技园]可能都表示的是同一个坐标, 所以确定的是坐标, 地址可能有多个- 多肉之家的门, 就是端口
- 进门后我喊到: "你好, 我要一个最美的多肉盆栽".
浏览器按Http协议发包到给服务器的80端口
- 我说的这句话, 就是Http请求报文
- 门里有个人听到这个消息, 一看, 哎呀, 最美的没有现成的呀, 需要找设计师赶快设计.
服务器上运行的Web容器接收到请求, 看到请求的是动态资源(没有现成的), 于是把请求路由给PHP
- 门内这个人是Web容器
- 设计师就是PHP
- PS: 门内这个人只盯着这一扇门, 一旦这扇门有人进来并说话, 他就要上前应答; 就好像 Web容器 只监听着80端口, 一旦80端口有连接有数据, 他就去处理.
- PS: 若此资源已存在, 就直接给我; 即: 若请求的是静态资源, 跳过步骤6
- 设计师收到这个消息, 加紧开始设计. 在设计过程中, 不少模块使用了他多年的珍藏, 根据最美的需求, 略加改动, 再整合起来, 完成了花盆+土+设计图纸.
PHP开始处理请求, 处理过程有一些数据是从MySQL里查出来的, PHP对于这些数据加以处理, 生成了HTML.
- 我收到后, 开始阅读图纸并同时制作.
HTML响应给了浏览器, 浏览器开始解析并同时渲染.
- 我发现需要一个乌木, 一个雪莲, 两个玉蝶. 哦, 这居然是个天然小型生态系统! 同时要准备杂质过滤器, 蚯蚓, 蜂鸟, 阳光模拟器, 雨水模拟器...
我在解析HTML过程中看到他需要一些外部的 CSS , JS 和 图片等.
- 于是我挨个根据材料每个在图纸上标注的地址, 进行1..8的流程.
- 这些材料不一定都在同一家店.
- 大多是店里已经存在的, 也有的是不存在现做的.
浏览器依次根据HTML里写的 CSS JS 图片等的地址去加载并解析, 进行1..8的流程
PS: 资源所在的服务器可能不同.
PS: 店里已经存在的材料, 就是静态资源; 不存在需要现做的, 是动态资源. 区别就在于是否跳过步骤6
- 步骤9中最后拿到的每个配件, 我拿回来也是要阅读解析一遍, 要了解花是怎么摆, 生物怎么养, 模拟器怎么运行等. 在这个过程一旦发现还需要其他设备, 就继续重复1..8.
CSS JS 图片都按自己规则进行解析展示. 其中CSS JS在运行过程中, 可能还会加载其他资源, 一旦发现, 立刻重复1..8
- 最后最美的多肉生态系统终于运行起来了. 时不时地雨后彩虹, 虫儿嬉戏, 这多亏了这套天然小型生态系统相关的配件呀.
页面终于完整地显示出来了
页面里JS在浏览器里运行起来, 还可以动态的去调整页面上的元素, 让页面更加丰富.
