从地址栏输入网址说起

从地址栏输入网址说起

                                              ———— 芽生三月 20171208

 

      当我们打开浏览器,呈现在我们眼前的是熟悉的用户界面,顶层状态栏带着缩放窗口和关闭窗口的按钮,往下是前进、后退、刷新和地址栏,接着是我们常用网站的标签,再往下就是我们期待的网页窗口。

   网页是我们使用浏览器的目的,获取想要的信息,以一种舒适的方式获取我们需要的信息。然而这一切都要从中间那条长长的输入域——地址栏说起。

   当我们带着访问目的,在地址栏输入URL(注:1)后,浏览器根据主机名去操作系统的hosts文件里查找对用的IP,如果hosts文件里没有对应的IP,就去互联网上的DNS服务器上查找这台主机域名对应的IP地址。然后浏览器根据主机IP和端口号,使用Socket发送通信请求,服务器使用ServerSocket 监听该端口,二者通过TCP协议(注:2)建立连接,基于HTTP协议(注:3)进行网络通讯。

   当浏览器根据http协议向服务器发送请求,数据以流的形式传输;服务器接受到并从流中解析出数据,然后根据请求去读取资源并以流的形式响应给浏览器。web服务器监听来自特定端口的http请求,当浏览器向服务器发送http请求时,其中的servlet容器(注:4)会创建HttpServletRequest和HttpServletResponse对象(注:5),并把他们传递给已经创建好的Filter和(URL模式与请求URL匹配的)servlet实例的方法,request对象从流中解析请求数据(诸如请求头和请求实体);servlet实例方法会对请求进行业务逻辑处理,并返回对应的信息,如果需要的话要从外部资源比如数据库,获取数据来构建响应信息。事实上,如果把服务器比作大脑,那么数据库就是记忆。大部分数据是存在数据库中。response对象提供了控制和发送响应的方法(比如转发、重定向、设置响应头和响应实体,比如是jsp生成的html),并将响应数据写入流中。当http响应被提交并结束后,request和respone对象会被销毁。期间,我们可以使用session和cookies(注:6)来储存浏览器和服务器之间的一些信息,比如认证信息。

   最后浏览器从流中解析出数据文件,提供给渲染引擎。接下来的是,由渲染引擎完成。渲染引擎通过网络获取到html文件之后,首先通过解析器的词法分析(注:7)和语法分析(注:8)来解析(注:9)html文件,生成DOM树;然后通过解析器的词法分析和语法分析来解析css文件,生成Render树;接着是布局Render树,确定每个节点在屏幕中的确切坐标;最后遍历render树,用UI后端来绘制每个节点。至此用户请求的内容便呈现在窗口中。(注10)后面JS解释器会解释执行js代码来实现对用户操作的监听和动态页面的生成。

这就是从地址栏输入网址到窗口呈现我们想要的网页信息整个过程发生的主体事件。

配图:

浏览器组件

 

浏览器与服务器交互

 

服务器工作流程图

 

注:1.URL: --协议名://主机名:端口/应用名/资源路径,这里协议包括http协议、https协议等应用层协议;主机名通常是域名,每个域名在DNS服务器对应一个IP,IP不一定有对应的域名;端口决定和IP主机上哪个应用进行交互,80端口是默认端口,可以不写;应用名也可以web容器里进行配置成/来隐藏;资源路径是服务器读取资源的依据。

    2.TCP协议:TCP是一个面向连接,可靠的,基于字节流的传输层协议。三次握手建立了可靠连接,四次握手断开连接。

    3.HTTP协议:HTTP是一个属于应用层的面向对象的协议,规定了客户端与服务器端信息交流的方式,由于其简捷、快速的方式,适用于分布式超媒体信息系统

    4.servlet容器:servlet容器时web服务器的一部分,当Servlet容器启动时,它会部署并加载所有的web应用。当web应用被加载时,Servlet容器会一次性为每个应用创建Servlet上下文(ServletContext)并把它保存在内存里。Servlet容器会处理web应用的web.xml文件,并且一次性创建在web.xml里定义的Servlet、Filter和Listener,同样也会把它们保存在内存里。当Servlet容器关闭时,它会卸载所有的web应用和ServletContext,所有的Servlet、Filter和Listner实例都会被销毁。从Java文档可知,ServletContext定义了一组方法,Servlet使用这些方法来与它的Servlet容器进行通信。例如,用来获取文件的MIME类型、转发请求或者编写日志文件。在web应用的部署文件(deployment descriptor)标明“分布式”的情况下,web应用的每一个虚拟机都拥有一个上下文实例。在这种情况下,不能把Servlet上下文当做共享全局信息的变量(因为它的信息已经不具有全局性了)。可以使用外部资源来代替,比如数据库。

   5.HttpServletRequest和HttpServletResponse:Servlet容器包含在web服务器中,web服务器监听来自特定端口的HTTP请求,这个端口通常是80。当客户端(使用web浏览器的用户)发送一个HTTP请求时,Servlet容器会创建新的HttpServletRequest和HttpServletResponse对象,并且把它们传递给已经创建的Filter和URL模式与请求URL匹配的Servlet实例的方法,所有的这些都使用同一个线程。request对象提供了获取HTTP请求的所有信息的入口,比如请求头和请求实体。response对象提供了控制和发送HTTP响应的便利方法,比如设置响应头和响应实体(通常是JSP生成的HTML内容)。当HTTP响应被提交并结束后,request和response对象都会被销毁。

   6.session和cookies:当客户端第一次访问web应用或者第一次使用request.getSession()获取HttpSession时,Servlet容器会创建Session,生成一个long类型的唯一ID(你可以使用session.getId()获取它)并把它保存在服务器的内存里。Servlet容器同样会在HTTP响应里设置一个Cookie,cookie的名是JSESSIONID并且cookie的值是session的唯一ID。根据HTTP cookie规范(正规的web浏览器和web服务器必须遵守的约定),在cookie的有效期间,客户端(web浏览器)之后的请求都要把这个cookie返回给服务器。Servlet容器会利用带有名为JSESSIONID的cookie检测每一个到来的HTTP请求头,并使用cookie的值从服务器内容里获取相关的HttpSession。HttpSession会一直存活着,除非超过一段时间没使用。你可以在web.xml里设定这个时间段,默认时间段是30分钟。因此,如果客户端已经超过30分钟没有访问web应用的话,Servlet容器就会销毁Session。之后的每一个请求,即使带有特定的cookie,都再也不会访问到同一个Session了。servletcontainer会创建一个新的Session。另外,在客户端的session cookie拥有一个默认的存活时间,这个时间与浏览器的运行时间相同。因此,当用户关闭浏览器后(所有的标签或者窗口),客户端的Session就会被销毁。

重新打开浏览器后,与之前的Session关联的cookie就再也不会被发送出去了。再次使用request.getSession()会返回一个全新的HttpSession并且使用一个全新的session ID来设置cookie。

       7.词法分析:词法分析就是将输入分解为符号,符号是语言的词汇表——基本有效单元的集合。对于人类语言来说,它相当于我们字典中出现的所有单词。

       8.语法分析:语法分析指对语言应用语法规则,解析基于文档依据的语法规则——文档的语言或格式。每种可被解析的格式必须具有由词汇及语法规则组成的特定的文法,称为上下文无关文法。人类语言非上下文无关文法。

       9.解析:解析一个文档即将其转换为具有一定意义的结构——编码可以理解和使用的东西。解析的结果通常是表达文档结构的节点树,称为解析树或语法树。解析过程是迭代的,解析器从词法分析器处取到一个新的符号,并试着用这个符号匹配一条语法规则,如果匹配了一条规则,这个符号对应的节点将被添加到解析树上,然后解析器请求另一个符号。 如果没有匹配到规则,解析器将在内部保存该符号,并从词法分析器取下一个符号,直到所有内部保存的符号能够匹配一项语法规则。如果最终没有找到匹配的规则,解析器将抛出一个异常,这意味着文档无效或是包含语法错误.

       10:渲染引擎线程:除了网络操作一般由2-6个并行线程执行,其他操作都是单线程,浏览器主线程是一个无限循环事件以保证执行过程可用,等待事件并执行他们。为了用户体验,并不会等到html解析完才去构建和布局(回流)render树,解析完一部分就显示一部分,同时网路可能还在下载其余内容。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值