• 浏览器输入url之后到最后网页渲染出来经历了什么


    简单的个人总结:

    ①查询ip地址
    ②建立tcp连接,接入服务器
    ③浏览器发起http请求
    ④服务器后台操作并做出http响应
    ⑤网页的解析与渲染

    查询ip地址

    ①浏览器解析出url中的域名。
    ②查询浏览器的DNS缓存。
    ③浏览器中没有DNS缓存,则查找本地客户端hosts文件有无对应的ip地址。
    ④hosts中无,则查找本地DNS服务器(运营商提供的DNS服务器)有无对应的DNS缓存。
    ⑤若本地DNS没有DNS缓存,则向根服务器查询,进行递归查找。
    ⑥递归查找从顶级域名开始(如.com),一步步缩小范围,最终客户端取得ip地址。

    tcp连接与http连接

    ①http协议建立在tcp协议之上,http请求前,需先进行tcp连接,形成客户端到服务器的稳定的通道。俗称TCP的三次握手。
    ②tcp连接完成后,http请求开始,请求有多种方式,常见的有get,post等。
    ③http请求包含请求头,也可能包含请求体两部分,请求头中包含我们希望对请求文件的操作的信息,请求体中包含传递给后台的参数。
    ④服务器收到http请求后,后台开始工作,如负载平衡,跨域等,这里就是后端的工作了。
    ⑤文件处理完毕,生成响应数据包,响应也包含两部分,响应头和相应体,响应体就是我们所请求的文件。
    ⑥经过网络传输,文件被下载到本地客户端,客户端开始加载。
    7、浏览器接收返回的http内容

    前端解析分割线
    8、开始解析html文件,当然是自上而下,先是头部,后是body

    9、当解析到头部css外部链接时,同步去下载,如果遇到外部js链接也是下载【不过js链接不建议放在头部,因为耽误页面第一展现时间】

    10、接着解析body部分,边解析边开始生成对应的DOM树,同时等待css文件下载

    11、一旦css文件下载完毕,那么就同步去用已经生成的DOM节点+CSS去生成渲染树

    12、渲染树一旦有结构模型了,接着就会同步去计算渲染树节点的布局位置

    13、一旦计算出来渲染的坐标后,又同步去开始渲染

    14、10-13步进行过程中如果遇到图片则跳过去渲染下面内容,等待图片下载成功后会返回来在渲染原来图片的位置

    15、同14步,如果渲染过程中出现js代码调整DOM树机构的情况,也会再次重新来过,从修改DOM那步开始

    16、最终所有节点和资源都会渲染完成

    =分析结束分割线=
    17、渲染完成后开始page的onload事件
    18、整个页面load完成

    html渲染的相关内容

    1.解析html文件,创建DOM树
      自上而下解析,遇到任何样式(link、style)和脚本(script)都会阻塞
      1)css加载不会阻塞html文件的解析,但会阻塞dom的渲染
      2)css加载会阻塞后面js语句的执行
      3)js会阻塞html的解析和渲染
      4)没有defer和async标签的script会立即加载并执行
      5)有async标签的js,js的加载执行和html的解析和渲染并行
      6)有defer标签的js,js的加载和html的解析和渲染并行,但会在html
      解析完成后执行,在触发DOMContentLoaded事件前执行
      7)DOMContentLoaded和onload的区别:DOMContentLoaded在html解
      析完毕后执行,loload在页面完全加载完成后执行(包括样式和图片)
    

    参考学习:https://www.cnblogs.com/tisikcci/p/5866753.html
    https://blog.csdn.net/sinat_27346451/article/details/77451634
    https://www.cnblogs.com/midiyu/p/7905554.html

    https://www.jianshu.com/p/a2cb1e3a79be

  • 相关阅读:
    笔记-树形dp
    20181018 考试记录
    20181015 考试记录&数论
    [模板]2-SAT 问题&和平委员会
    FLask的偏函数应用
    Flask中的g到底是个什么鬼?
    Flask源码关于local的实现
    Flask的“中间件”
    Flask之模板
    FLask之视图
  • 原文地址:https://www.cnblogs.com/princeness/p/11664970.html
Copyright © 2020-2023  润新知