• 从浏览器输入 url 到页面渲染


    浏览器中输入 url 到 页面渲染:

      1. 解析url,拿到域名

      2. DNS 解析,域名解析。DNS 就是 域名和IP对应的数据库,域名和IP之间是一一对应的关系,域名解析有专门的域名解析服务器。整个过程是自动完成的。

        DNS 解析会经过以下几个步骤:

          1)查询浏览器缓存 

          2) 如果在浏览器中没有找到缓存,会查询系统缓存,这一步当中,是查询 host 文件,这个文件是保存了以前访问网址的域名和IP 数据,就相当于本地的IP 数据库,如果找到了,就直接获取目标主机的IP 地址;如果没有找到,就会进入第三步 

          3) 查询路由缓存。路由器有自己的 DNS 缓存,可能有相关的内容,如果还是没有,就进入下一步

          4) 递归查询, 从根域名服务器到顶级域名服务器,再到极限域名服务器依次搜索对应目标域名的IP

        通过以上查找,就能找到对应域名的 IP 

      3. TCP 三次握手

           第一次握手:客户端向服务器发送请求,等待服务器的确认

        第二次握手:服务器收到请求并确认,回复一个指令

        第三次握手:客户端收到服务器的指令之后,并返回一个指令。

      4. 请求和传输数据

        比如通过 get 请求访问一个网址,通过抓包可以看到,请求网址,请求方法,远程地址以及状态码,http 版本等,也包括请求头,响应头等内容。

        响应头中有个 setCookie 的信息,这就说明浏览器当中没有关于这个网址的 cookie 信息,当我们下一次访问同样的网站的时候,就可以看到在请求头中包含了这个 cookie信息。

        cookie 可以用来保存一些有用的信息,cookie 如果是首次访问,会提示服务器建立用户缓存信息,如果不是,可以利用 cookie 对应键值找到相应缓存。缓存中放着用户名,密码和一些用户设置等,通过这种 get 请求和响应,可以将目标服务器上的目标文件传输到浏览器进行渲染。

      5. 浏览器渲染页面

        客户端拿到服务器传输过来的文件后,找到 html 和 ml,me 文件,通过 ml 和 me 文件,浏览器就知道要用页面渲染引擎来处理 html 文件,

        1) 浏览器解析html 源码,创建一个 dom 树。

           在 dom 树中,每一个 html 标签都是一个节点,每一个文本,也会有一个对应的文本节点。

        2) 浏览器解析 css 代码,计算出最终的样式数据,形成 css 结构树。  (其中 dom 树 和 css 结构树是并行构建)

          首先会忽略非法的 css 代码,之后按照浏览器默认设置,用户设置,外联样式,内联样式,html 中的style 样式顺序进行渲染

        3) 利用 dom 树 和  css 结构树  构建  一个渲染树

          渲染树和 dom 有点像,但是也有区别,dom 树完全和 html 标签一一对应,而渲染树会忽略掉不需要渲染的元素,比如,hide,display:none 的元素,而且一大段的文本在渲染树中都是一个独立的节点。渲染树中的每一个节点都存储有对应的css 属性

        4)浏览器根据渲染树直接把页面绘制到屏幕上。

  • 相关阅读:
    Spark ListenerBus 和 MetricsSystem 体系分析
    Scala使用JUnit4单元测试
    Error:java: Compilation failed: internal java compiler error
    Spark 2.2 DataFrame的一些算子操作
    Spark SQL中UDF和UDAF
    Scala基础
    Spark Sql的UDF和UDAF函数
    Kafka笔记整理(二):Kafka Java API使用
    Kafka笔记整理(一)
    【口语英语】小学英语1-6年级听力必备知识汇总,建议收藏!
  • 原文地址:https://www.cnblogs.com/bala/p/15852525.html
Copyright © 2020-2023  润新知