这个时候,典型的情况下,机房里面应该还有一个数据库服务器,或许,还有一台缓存服务器,如果对于流量巨大的网站,那么动态脚本的解释器可能还有单独的物理机器来跑,如果是中小的站点,那么,上述的各色服务,甚至都可能在一台物理机上,这些服务监听之间的关系,可以参考这里,再搭一次 Apache PHP MySQL 环境,不管怎么说,他们做好了准备,静候差遣。
从点击到呈现 — 详解一次HTTP请求(2)
上回说道服务器启动了监听服务,准备迎接来自客户机的请求。那么,我们以一次典型的浏览请求来解析:
当我们开始在浏览器中输入网址的时候,浏览器其实就已经在智能的匹配可能得 url 了,他会从历史记录,书签等地方,找到已经输入的字符串可能对应的 url,然后给出智能提示,对于 google chrome 那种变态的浏览器,他甚至会直接从缓存中把网页展示出来,就是说,你还没有按下 enter,页面就出来了,这个过于奇葩,我们不详细讲。
如果在本地的 hosts 文件没有能够找到对应的 ip 地址,浏览器会向 dns 域名解析服务器发起域名解析请求,dns 的域名解析是递归的,(还有另外 dns 是迭代的),递归的 dns 首先会查看自己的 dns 缓存,如果缓存能够命中,那么就从缓存中把 ip 地址返回给浏览器,如果找不到对应的域名的 ip 地址,那么就向上转发请求,然后把得到的这个域名对应的 nameserver 的地址取得,再向这个 namserver 去请求域名对应的 ip,最后把这个 ip 地址返回给浏览器,不过怎么说,这个递归查询的过程,对于浏览器来说是透明的,他只要坐等
ip地址送回来就可以了。对于 DNS 的进一步理解,可以看这里,进一步理解 DNS
得到 ip 地址后,浏览器会开始构造一个 http 请求,一个典型的 http request header 一般需要包括请求的方法,例如 GET 或者 POST 等,不常用的还有 PUT 和 DELETE 方法,更加不常用的还有 HEAD 和 OPTION 以及 TRACE 方法,一般的浏览器只能发起 GET 或者 POST 请求,应用层的 http 请求准备好后,浏览器在传输层发起一条到达服务器的 tcp 连接,这个时候应该开始三次握手的过程,tcp 包被封装到网络层的 ip 包里面,ip 包再被封装到数据链路层的数据帧结构中,再通过物理层的比特流送出去,这些分层的意义在于分工合作,数据链路层通过
CSMA/CD 协议保证了相邻两台主机之间的数据报文传递,而网络层的 ip 数据包通过不同子网之间的路由器的路由算法和路由转发,保证了互联网上两台遥远主机之间的点对点的通讯,不过这种传输是不可靠,于是可靠性就由传输层的 tcp 协议来保证,tcp 通过慢开始,乘法减小等手段来进行流量控制和拥塞避免,同时提供了两台遥远主机上进程到进程的通信,最终保证了 http 的请求头能够被远方的服务器上正在监听的 http 服务器进程收到,终于,数据包在跳与跳之间被拆了又封装,在子网与子网之间被转发了又转发,最后进入了服务器的操作系统的缓冲区,服务器的操作系统由此给正在被阻塞住的
accept 函数一个返回,将他唤醒。
解决了字符集的问题,接下来就是构建 dom 树了,在 html 语言嵌套正常而且规范的情况下,这种 xml 标记的语言是比较容易的能够构建出一棵 dom 树出来的,当然,对于互联网上大量的不规范的页面,不同的浏览器应该有自己不同的容错去处理。构建出来的 dom 本质上还是一棵抽象的逻辑树,构建 dom 树的过程中,如果遇到了由 script 标签包起来的 js 动态脚本代码,那么会把代码送到 js 引擎里面去跑,如果遇到了 style 标签包围起来的 css 代码,也会保存下来,用于稍后的渲染。如果遇到了 img
等引用外部文件的标签,那么浏览器会根据指定的 url 再次发起一个新的 http 请求,去把这个文件拉取回来,值得一提的是,对于同一个域名下的下载过程来说,浏览器一般允许的并发请求是有限的,通常控制在两个左右,所以如果有很多的图片的话,一般出于优化的目的,都会把这些图片使用一台静态文件的服务器来保存起来,负责响应,从而减少主服务器的压力。
dom 树构造好了之后,就是根据 dom 树和 css 样式表来构造 render 树了,这个才是真正的用于渲染到页面上的一个一个的矩形框的树,对于 render 树上每一个框,需要确定他的 x y 坐标,尺寸,边框,字体,形态,等等诸多方面的东西,render 树一旦构建完成,整个页面也就准备好了,可以上菜了。
需要说明的是,下载页面,构建 dom 树,构建 render 树这三个步骤,实际上并不是严格的先后顺序的,为了加快速度,提高效率,让用户不要等那么久,现在一般都并行的往前推进的,现代的浏览器都是一边下载,下载到了一点数据就开始构建 dom 树,也一边开始构建 render 树,构建了一点就显示一点出来,这样用户看起来就不用等待那么久了。