美文网首页前端学习饥人谷技术博客
从输入URL到页面展示,浏览器的经历

从输入URL到页面展示,浏览器的经历

作者: MrGan | 来源:发表于2018-01-11 09:42 被阅读26次
    v2-19bb24889cd19d5d4ad1c2d65175160a_hd.jpg

    一、什么是URL?

    URL(Uniform Resource Locator)统一资源定位器,是计算机Web网络相关的术语,就是网页地址的意思。当您访问百度网站时你的浏览器上就会显示http://www.baidu.com,那么这个就是百度网站的URL了。

    二、IP寻址过程简述

    DNS(Domain Name System,域名系统),因特网上作为域名和IP地址相互映射的一个分布式数据库,能够使用户更方便的访问互联网,而不用去记住能够被机器直接读取的IP数串。通过主机名,最终得到该主机名对应的IP地址的过程叫做域名解析(或主机名解析)。

    1. 输入URL后,浏览器会从浏览器自身缓存中查找是否有目标域名和对应的IP地址,查找是否有目标域名和对应的IP地址。
    2. 从电脑C盘的hosts文件查找是否有存储DNS信息。
    3. 从路由器的缓存DNS信息中查找。
    4. ISP DNS缓存查找,从网络服务商(比如电信)的DNS缓存信息中查找。
    5. 经由以上几种方法还没查找到目标URL对应的IP的话,就会向根域名DNS服务器查找目标URL的对应IP,根域名服务器会向下级服务器转送请求,层层下发,直至找到对应IP为止

    经过以上IP寻址的过程,目标URL查找到对应的IP地址之后,通过IP地址查找到对应的服务器,浏览器将用户发起的http请求发送给服务器。下一步就到了服务器处理阶段的工作。

    三、服务器处理用户请求

    每台服务器上都会安装处理请求的应用——web server(常见的web server产品有apache、nginx、IIS或Lighttpd等)。

    web server 担任管控的角色,对于不同用户发送的请求,会结合配置文件,把不同请求委托给服务器上处理对应请求的程序进行处理(例如CGI脚本,JSP脚本,servlets,ASP脚本,服务器端JavaScript,或者一些其它的服务器端技术等),然后返回后台程序处理产生的结果作为响应。

    四、网站处理阶段

    网站处理,就是实际后台处理的工作。后台开发现在有很多框架,但大部分都还是按照MVC设计模式进行搭建的。

    MVC是三个单词的首字母缩写,它们是Model(模型)、View(视图)和Controller(控制)。

    这个模式认为,程序不论简单或复杂,从结构上看,都可以分成三层。

    1)最上面的一层,是直接面向最终用户的"视图层"(View)。它是提供给用户的操作界面,是程序的外壳。

    2)最底下的一层,是核心的"数据层"(Model),也就是程序需要操作的数据或信息。

    3)中间的一层,就是"控制层"(Controller),它负责根据用户从"视图层"输入的指令,选取"数据层"中的数据,然后对其进行相应的操作,产生最终结果。

    总结而言,首先控制器接收用户的请求,并决定应该调用哪个模型来进行处理,然后模型用业务逻辑来处理用户的请求并返回数据,最后控制器用相应的视图格式化模型返回html字符串给浏览器,浏览器呈现网页给用户。因此,下一步就来到浏览器处理阶段。

    五、浏览器处理阶段

    通过后台处理返回的html字符串结果会被浏览器读取解析,对应就是html页面加载、解析、渲染的工作。

    1、加载

    浏览器对一个html页面的加载顺序是从上而下的,并在加载过程并行进行解析渲染处理。在这个过程中遇到link标签、image标签、script标签时,浏览器会再次向服务器发送请求获取css文件、图片资源、js文件,并执行js代码,同步进行加载解析。

    2、解析、渲染

    解析的过程,其实就是生成解析树,即dom树。dom树是由dom元素及属性节点组成,加上css解析的样式对象和js解析后的动作实现。而渲染,就是将DOM树进行可视化表示。下一步就来到了绘制网页的工作阶段。

    六、绘制页面

    浏览器通过上面步骤计算得到渲染树,是DOM树的可视化表示,构建渲染树使页面以正确的顺序绘制出来,遵循一定的渲染规则,经过一系列的渲染工作,实现网站页面的绘制,由此最终完成了页面展示。

    相关文章

      网友评论

        本文标题:从输入URL到页面展示,浏览器的经历

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