从输出URL到浏览器显示页面产生了什么

  • 输出网址

    当你开始输出网址比方www.cnblogs.com时游览器就能够在书签或者历史记录外面去搜寻相干的网址推荐给你。

  • 浏览器查找域名的IP地址

    1. 申请发动后，游览器首先会解析这个域名，首先它会查看本地硬盘的 hosts 文件，看看其中有没有和这个域名对应的规定，如果有的话就间接应用 hosts 文件外面的 ip 地址。
    2. 如果在本地的 hosts 文件没有可能找到对应的 ip 地址，浏览器会收回一个 DNS申请到本地DNS(域名散布零碎)服务器 。本地DNS服务器个别都是你的网络接入服务器商提供，比方中国电信，中国移动。
    3. 查问你输出的网址的DNS申请达到本地DNS服务器之后，本地DNS服务器会首先查问它的缓存记录，如果缓存中有此条记录，就能够间接返回后果，此过程是递归的形式进行查问。如果没有，本地DNS服务器还要向DNS根服务器进行查问
    4. 根DNS服务器没有记录具体的域名和IP地址的对应关系，而是通知本地DNS服务器，你能够到域服务器下来持续查问，并给出域服务器的地址。这种过程是迭代的过程
    5. 本地DNS服务器持续向域服务器发出请求，在这个例子中，申请的对象是.com域服务器。.com域服务器收到申请之后，也不会间接返回域名和IP地址的对应关系，而是通知本地DNS服务器，你的域名的解析服务器的地址
    6. 最初，本地DNS服务器向域名的解析服务器发出请求，这时就能收到一个域名和IP地址对应关系，本地DNS服务器不仅要把IP地址返回给用户电脑，还要把这个对应关系保留在缓存中，以备下次别的用户查问时，能够间接返回后果，放慢网络拜访。

  • 建设TCP链接

    1. 在拿到域名对应的IP地址后，会以随机端口（1024~~65535）向WEB服务器程序80端口发动TCP的连贯申请，这个连贯申请进入到内核的TCP/IP协定栈（用于辨认该连贯申请，解封包，一层一层的剥开），还有可能要通过Netfilter防火墙（属于内核的模块）的过滤，最终达到WEB程序，最终建设了TCP/IP的连贯，对于客户端与服务器的TCP链接，必然要说的就是『三次握手』。

    2. 客户端发送一个带有SYN标记的数据包给服务端，服务端收到后，回传一个带有SYN/ACK标记的数据包以示传播确认信息，最初客户端再回传一个带ACK标记的数据包，代表握手完结，连贯胜利。

      通俗化之后就是：

      客户端：老弟我要跟你链接

      服务端：好的，批准了

      客户端：好嘞

  • 游览器向WEB服务器发动Http申请

    建设TCP连贯之后，发动HTTP申请，申请个别分为三局部

    申请办法URI协定/版本

    申请头(Request Header)

    申请注释

  • 服务器端解决

    服务器端收到申请后的由web服务器（精确说应该是http服务器）解决申请，诸如Apache、Ngnix、IIS等。web服务器解析用户申请，晓得了须要调度哪些资源文件，再通过相应的这些资源文件解决用户申请和参数，并调用数据库信息，最初将后果通过web服务器返回给浏览器客户端。

  • 敞开TCP链接

    为了防止服务器与客户端单方的资源占用和损耗，当单方没有申请或响应传递时，任意一方都能够发动敞开申请。与创立TCP连贯的3次握手相似，敞开TCP连贯，须要4次挥手。

    客户端：老弟，我这边没数据要传了，咱们敞开链接吧

    服务端：好的，接管到了，我看看我这边还有没有要传的

    服务端：我这边也没有了，敞开吧

    客户端：好嘞

  • 游览器解析资源

    对于获取到的HTML、CSS、JS、图片等等资源。

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

    在解析CSS的同时，能够持续加载解析HTML，但在解析执行JS脚本时，会进行解析后续HTML，这就会呈现阻塞问题

  • 游览器布局渲染

    依据渲染树布局，计算CSS款式，即每个节点在页面中的大小和地位等几何信息。HTML默认是流式布局的，CSS和js会突破这种布局，扭转DOM的外观款式以及大小和地位。这时就要提到两个重要概念：repaint和reflow。

    repaint：屏幕的一部分重画，不影响整体布局，比方某个CSS的背景色变了，但元素的几何尺寸和地位不变。

    reflow： 意味着元件的几何尺寸变了，咱们须要从新验证并计算渲染树。是渲染树的一部分或全副产生了变动。这就是Reflow，或是Layout。

    有些状况下，比方批改了元素的款式，浏览器并不会立即 reflow 或 repaint 一次，而是会把这样的操作积攒一批，而后做一次 reflow，这又叫异步 reflow 或增量异步 reflow。
    有些状况下，比方 resize 窗口，扭转了页面默认的字体等。对于这些操作，浏览器会马上进行 reflow。