• 从输入url到浏览器呈现网页发生了什么?


    大致能分成两个部分:网络通信与页面渲染

    一.网络通信

    互联网各个网络设备间的通信均基于TCP/IP协议,此协议将整个过程进行分层,由上至下分别为: 应用层、传输层、网络层和数据链路层

    1.输入URL

    2.应用层用DNS解析域名(DNS协议)

    解析url域名,检查本地是否有对应的IP地址,有则返回,没有则请求上级DNS服务器

    备注:DNS domain name system,由解析器和域名服务器组成,主要用于解析域名为IP地址

    3.应用层发送http请求(HTTP协议)

    http请求由请求报头与请求体组成,请求体为请求的数据,请求头包含请求方式(get、post。。)协议(http、https。。)是否包含cookie等信息

    4.传输层传输报文(TCP协议)

    为了方便传输将IP协议大块的数据分割为以报文段为单位的小数据包,并为其标号,方便服务端还原。

    为了保证传输的安全可靠,将经历TCP三次握手:
    发送端发送带有SYN标志的数据包给接收端,在一定的时间内等待回复;

    接受端接收到数据包并确认无误后发送带有SYN/ACK标志的数据包给发送端,代表已接收,确认无误;

    发送端再发送带有ACK标志的数据包给接收端代表握手成功。

    SYN: synchronize 同步

    ACK:Acknowledgement 确认

    5.网络层查询MAC地址(IP协议)

    IP协议的作用是把分割好得报文发送给服务端,但在此之前得先知道对方的MAC地址。

    IP地址与MAC一一对应,IP地址能随意换,但MAC不会变,提供ARP协议查询到MAC地址

    MAC: media access control 媒体访问控制,可理解为物理地址,硬件地址,每个设备都有独一无二的MAC地址

    6.数据链路层传输数据

    提供数据链路层传输数据,至此客户端发送完毕。

    7.服务端接收数据

    客户端在数据链路层获取数据,层层上传至应用层,在传递过程中将数据包还原成完整的http请求

    8.服务端响应请求

    服务端找到资源并返回响应报文,响应报文中包括一个重要的信息——状态码。状态码由三位数字组成,其中比较常见的是200 OK表示请求成功。301表示永久重定向,即请求的资源已经永久转移到新的位置。在返回301状态码的同时,响应报文也会附带重定向的url,客户端接收到后将http请求的url做相应的改变再重新发送。404 not found 表示客户端请求的资源找不到。

    9.请求成功后返回html文件,进入页面渲染阶段

    二、页面渲染

    1.解析HTML构建DOM树,即由节点构成的树

    解析和构建同时进行,由上至下地进行解析,这里注意几点:

    a.外部样式 加载异步 (多个css文件异步加载,且不会阻塞dom树的构建)但会阻塞页面渲染,阻塞js执行

    b.js文件     加载同步 加载与执行都会阻塞之后的操作

    如何使样式不阻塞js?

    w1.如果外部脚本加上async(IR为defer),设为异步,则外部样式不会阻塞其执行

    w2.动态加载的外部样式不影响脚本的执行

    e.script一般放在最后面,因为它的加载和执行会阻塞页面的渲染,也就是说它的加载执行是同步的

    2.(style)构建渲染树,即将css样式应用到dom树上,构建CSSOM树

    webkit称之为附着

    3.(layout)布局

    树节点的大小、位置信息等的运算,构建渲染树

    4.(painting)绘制

    将树绘制在屏幕上。

     本文总结自:http://www.cnblogs.com/kongxy/p/4615226.html与http://www.cnblogs.com/dojo-lzz/p/3983335.html

  • 相关阅读:
    Java equals compareTo()的区别
    Java getClass() VS instanceof VS ==
    HashMap与LinkedHashMap
    位运算的一些用例
    常见字符集和编码方式
    spring 打印所有创建的beans
    ApplicationContext之getBean方法详解
    多线程时Autowired自动注入问题
    使用Nexus创建Maven私服
    MYSQL timestamp用法
  • 原文地址:https://www.cnblogs.com/yanze/p/7746610.html
Copyright © 2020-2023  润新知