zoukankan      html  css  js  c++  java
  • 细说浏览器输入URL后发生了什么

    转载自:Segmentfault_GavinHsueh_细说浏览器输入URL后发生了什么

    本文摘要:
    1.DNS域名解析;
    2.建立TCP连接;
    3.发送HTTP请求;
    4.服务器处理请求;
    5.返回响应结果;
    6.关闭TCP连接;
    7.浏览器解析HTML;
    8.浏览器布局渲染;

    一、DNS域名解析

     从客户端到本地服务器属于递归查询,而DNS服务器之间的交互属于迭代查询。

    二、建立TCP链接

    费了一顿周折终于拿到服务器IP了,下一步自然就是链接到该服务器。对于客户端与服务器的TCP链接,必然要说的就是『三次握手』。

    客户端发送一个带有SYN标志的数据包给服务端,服务端收到后,回传一个带有SYN/ACK标志的数据包以示传达确认信息,最后客户端再回传一个带ACK标志的数据包,代表握手结束,连接成功。

    三、发送HTTP请求

    与服务器建立了连接后,就可以向服务器发起请求了。这里我们先看下请求报文的结构(如下图):

     请求报文
    在浏览器中查看报文首部(以google浏览器为例):

     请求行包括请求方法、URI、HTTP版本。首部字段传递重要信息,包括请求首部字段、通用首部字段和实体首部字段。我们可以从报文中看到发出的请求的具体信息。具体每个首部字段的作用,这里不做过多阐述。

    四、服务器处理请求

    服务器端收到请求后的由web服务器(准确说应该是http服务器)处理请求,诸如Apache、Ngnix、IIS等。web服务器解析用户请求,知道了需要调度哪些资源文件,再通过相应的这些资源文件处理用户请求和参数,并调用数据库信息,最后将结果通过web服务器返回给浏览器客户端。

    五、返回响应结果

    在HTTP里,有请求就会有响应,哪怕是错误信息。这里我们同样看下响应报文的组成结构:

    在响应结果中都会有个一个HTTP状态码,比如我们熟知的200、301、404、500等。通过这个状态码我们可以知道服务器端的处理是否正常,并能了解具体的错误。

    状态码由3位数字和原因短语组成。根据首位数字,状态码可以分为五类:

    六、关闭TCP连接

    为了避免服务器与客户端双方的资源占用和损耗,当双方没有请求或响应传递时,任意一方都可以发起关闭请求。与创建TCP连接的3次握手类似,关闭TCP连接,需要4次握手。

    七、浏览器解析HTML

    准确地说,浏览器需要加载解析的不仅仅是HTML,还包括CSS、JS。以及还要加载图片、视频等其他媒体资源。

    浏览器通过解析HTML,生成DOM树,解析CSS,生成CSS规则树,然后通过DOM树和CSS规则树生成渲染树。渲染树与DOM树不同,渲染树中并没有head、display为none等不必显示的节点。

    要注意的是,浏览器的解析过程并非是串连进行的,比如在解析CSS的同时,可以继续加载解析HTML,但在解析执行JS脚本时,会停止解析后续HTML,这就会出现阻塞问题,关于JS阻塞相关问题,这里不过多阐述,后面会单独开篇讲解。

    八、浏览器布局渲染

    根据渲染树布局,计算CSS样式,即每个节点在页面中的大小和位置等几何信息。HTML默认是流式布局的,CSS和js会打破这种布局,改变DOM的外观样式以及大小和位置。这时就要提到两个重要概念:replaint和reflow。

    replaint:屏幕的一部分重画,不影响整体布局,比如某个CSS的背景色变了,但元素的几何尺寸和位置不变。

    reflow: 意味着元件的几何尺寸变了,我们需要重新验证并计算渲染树。是渲染树的一部分或全部发生了变化。这就是Reflow,或是Layout。
    所以我们应该尽量减少reflow和replaint,我想这也是为什么现在很少有用table布局的原因之一。

    最后浏览器绘制各个节点,将页面展示给用户。

    总结

    本文系统地讲述从浏览器从输入域名到最终页面展示的整体流程。篇幅所限,本文的每一步讲述其实并不全面,所以后面我会单独就域名解析、HTTP请求/响应、浏览器的解析、渲染等内容单独开篇讲解

  • 相关阅读:
    清除cookie
    判断是否为中文
    正则表达式
    smarty基础语法
    smarty模板
    ajax
    php工作笔记1
    PHP中超全局变量$GLOBALS和global的区别
    SQL连表查询
    linux上安装git(客户端)及GitHub的配置
  • 原文地址:https://www.cnblogs.com/lfri/p/12431527.html
Copyright © 2011-2022 走看看