美文网首页
2020-05-19从输入url到页面展示

2020-05-19从输入url到页面展示

作者: 奋斗的小鸟cx | 来源:发表于2020-05-19 18:49 被阅读0次
  • 1 输入url过程
    浏览器进程检查url,组装协议,构建完成的url

  • 2 url请求过程
    (1)浏览器进程通过通信进程(IPC)把url给网络进程。
    (2)网络进程接收到url请求后检查本地是否有缓存。
    (2.1) 如果有直接将该资源返回给浏览 器进程
    (2.2) 如果没有,网络进程根据DNS解析服务器的IP地址,利用IP地址建立tcp连接,连接后,浏览器端构建 请求行请求头等信息,并把该域名相关的cookie等数据附加在请求头中,向服务器发送请求信息
    (2.3)服务器响应后,网络进程接收到响应头和响应信息,并解析响应内容
    (3)网络进程解析响应流程
    (3.1) 检查状态码,如果是301/302,则需要重定向,从Location自动中读取地址,重新进行第2步
    (301/302跳转也会读取本地缓存吗?这里有个疑问),如果是200,则继续处理请求。
    (3.2)200响应处理:
    检查响应类型Content-Type,如果是字节流类型,则将该请求提交给下载管理器,该导航流程结束,不再进行
    后续的渲染,如果是html则通知浏览器进程准备渲染进程准备进行渲染。

  • 3 准备渲染过程
    浏览器进程检查当前url是否和之前打开的渲染进程根域名是否相同,如果相同,则复用原来的进程,如果不同,则开启新的渲染进程

  • 4 提交文档过程
    提交文档;浏览器进程将网络进程接收到的html数据提交给渲染进程;过程如下
    4.1 浏览器进程接收到网络进程的响应头数据之后,向渲染进程发起 “提交文档" 的消息;
    4.2 渲染进程接收到 ”提交文档" 的消息后便和网络进程建立传输数据的 “管道”
    4.3 数据传输完毕之后,渲染进程就返回 "确认提交"的消息给浏览器进程
    4.4 浏览器进程在收到 “确认提交 ”后,便更新浏览器界面状态包括了安全状态、地址栏的 URL、前进后退的历史状态,并更新 Web 页面。

    导航完成状态
  • 5 渲染页面过程
    渲染进程对文档进行页面解析和子资源加载,HTML 通过HTM 解析器转成DOM Tree(二叉树类似结构的东西),CSS按照CSS 规则和CSS解释器转成CSSOM TREE,两个tree结合,形成render tree(不包含HTML的具体元素和元素要画的具体位置),通过Layout可以计算出每个元素具体的宽高颜色位置,结合起来,开始绘制,最后显示在屏幕中新页面显示出来

相关文章

网友评论

      本文标题:2020-05-19从输入url到页面展示

      本文链接:https://www.haomeiwen.com/subject/bixiohtx.html