• 一个页面从输入url,到页面显示加载完成,这个过程中都发生了什么?


    来源一:

    https://segmentfault.com/q/1010000000489803

      1. 输入地址
      2. 浏览器查找域名的 IP 地址
        这一步包括 DNS 具体的查找过程,包括:浏览器缓存->系统缓存->路由器缓存...
      3. 浏览器向 web 服务器发送一个 HTTP 请求
      4. 服务器的永久重定向响应(从 http://example.comhttp://www.example.com
      5. 浏览器跟踪重定向地址
      6. 服务器处理请求
      7. 服务器返回一个 HTTP 响应
      8. 浏览器显示 HTML
      9. 浏览器发送请求获取嵌入在 HTML 中的资源(如图片、音频、视频、CSSJS等等)
      10. 浏览器发送异步请求

    来源二:

    http://www.guokr.com/question/554991/

    1)把URL分割成几个部分:协议、网络地址、资源路径。其中网络地址指示该连接网络上哪一台计算机,可以是域名或者IP地址,可以包括端口号;协 议是从该计算机获取资源的方式,常见的是HTTP、FTP,不同协议有不同的通讯内容格式;资源路径指示从服务器上获取哪一项资源。
    例如:http://www.guokr.com/question/554991/
    协议部分:http
    网络地址:www.guokr.com
    资源路径:/question/554991/

    2)如果地址不是一个IP地址,通过DNS(域名系统)将该地址解析成IP地址。IP地址对应着网络上一台计算机,DNS服务器本身也有IP,你的网络设置包含DNS服务器的IP。
    例如:www.guokr.com 不是一个IP,向DNS询问请求www.guokr.com 对应的IP,获得IP: 111.13.57.142。这个过程里,你的电脑直接询问的DNS服务器可能没有www.guokr.com 对应的IP,就会向它的上级服务器询问,上级服务器同样可能没有,就依此一层层向上找,最高可达根节点,找到或者全部找不到为止。

    3)如果地址不包含端口号,根据协议的默认端口号确定一个。端口号之于计算机就像窗口号之于银行,一家银行有多个窗口,每个窗口都有个号码,不同窗口可以负责不同的服务。端口只是一个逻辑概念,和计算机硬件没有关系。
    例如:www.guokr.com 不包含端口号,http协议默认端口号是80。如果你输入的url是http://www.guokr.com:8080/ ,那表示不使用默认的端口号,而使用指定的端口号8080。

    4)向2和3确定的IP和端口号发起网络连接。
    例如:向111.13.57.142的80端口发起连接

    5)根据http协议要求,组织一个请求的数据包,里面包含大量请求信息,包括请求的资源路径、你的身份
    例如:用自然语言来表达这个数据包,大概就是:请求 /question/554991/ ,我的身份是xxxxxxx。

    6)服务器响应请求,将数据返回给浏览器。数据可能是根据HTML协议组织的网页,里面包含页面的布局、文字。数据也可能是图片、脚本程序等。现在 你可以用浏览器的“查看源代码”功能,感受一下服务器返回的是什么东东。如果资源路径指示的资源不存在,服务器就会返回著名的404错误。

    7)如果(6)返回的是一个页面,根据页面里一些外链的URL,例如图片的地址,按照(1)-(6)再次获取。

    8)开始根据资源的类型,将资源组织成屏幕上显示的图像,这个过程叫渲染,网页渲染是浏览器最复杂、最核心的功能。

    9)将渲染好的页面图像显示出来,并开始响应用户的操作。

    以 上只是最基本的步骤,实际不可能就这么简单,一些可选的步骤例如网页缓存、连接池、加载策略、加密解密、代理中转等等都没有提及。即使基本步骤本身也有很 复杂的子步骤,TCP/IP、DNS、HTTP、HTML:每一个都可以展开成庞大的课题,而浏览器的基础——操作系统、编译器、硬件等更是一个比一个复 杂。不是计算机专业的同学看了上面的解释完全不明白是很正常的,可能会问为什么要搞得那么复杂,但我保证这每一个步骤都经过深思熟虑和时间的考验。你输入 URL即可浏览互联网,而计算机系统在背后做了无数你看不到的工作,计算机各个子领域无数工程师为此付出你难以想象的努力。

    来源三:牛客网

    分为4个步骤:
    1. 当发送一个 URL 请求时,不管这个 URL 是 Web 页面的 URL 还是 Web 页面上每个资源的 URL,浏览器都会开启一个线程来处理这个请求,同时在远程 DNS 服务器上启动一个 DNS 查询。这能使浏览器获得请求对应的 IP 地址。
    2. 浏览器与远程 Web 服务器通过 TCP 三次握手协商来建立一个 TCP/IP 连接。该握手包括一个同步报文,一个同步-应答报文和一个应答报文,这三个报文在 浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信,而后服务器应答并接受客户端的请求,最后由客户端发出该请求已经被接受的报文。
    3. 一旦 TCP/IP 连接建立,浏览器会通过该连接向远程服务器发送 HTTP 的 GET 请求。远程服务器找到资源并使用 HTTP 响应返回该资源,值为 200 的 HTTP 响应状态表示一个正确的响应。
    4. 此时,Web 服务器提供资源服务,客户端开始下载资源。

    请求返回后,便进入了我们关注的前端模块
    简单来说,浏览器会解析 HTML 生成 DOM Tree,其次会根据 CSS 生成 CSS Rule Tree,而 javascript 又可以根据 DOM API 操作 DOM
  • 相关阅读:
    深入理解CSS中的层叠上下文和层叠顺序
    利用CSS3制作淡入淡出动画效果
    <link>标签的rel属性全解析
    解决<pre>标签里的文本换行(兼容IE, FF和Opera等)
    HTML特殊字符大全
    清除浮动4种方法总结下
    打开wamp中的phpmyadmin出现403的错误
    js访问CSS最终计算样式
    js 正则 exec() 和 match() 数据抽取
    函数表达式中,函数名称在函数体内是只读的
  • 原文地址:https://www.cnblogs.com/ishuanghe/p/5200775.html
Copyright © 2020-2023  润新知