从输入URL,到页面的展现,基本经历了如下几个过程:
- 在浏览器地址栏输入URL
- 域名解析
- 服务器处理
- 浏览器处理
- 绘制网页
在浏览器输入URL
- URL (Uniform Resource Locator)是统一资源定位符,用于定位互联网上的资源。
- URL 的组成:< 协议>://<域名>:<端口号>/<路径>/<文件名>。
- 协议:协议的类型有 http、https、file、ftp 等;其中http协议(HyperText Transfer Protocol)超文本传输协议,是网络上应用最为广泛的网络协议;https是进行加密的网络传输协议,安全性更高!
- 域名:是一串由点分割的名字组成的internet上,某一台计算机或计算机组的名字,用于在数据传输时,标识计算机的电子方位(有时也指地理方位)。
- IP:提到域名,就不得不提一下IP(Internet Protocol),网络之间的互联协议,也就是为计算机网络相互连接进行通信而设计的协议。在因特网中,它是能使连接到网上的所有计算机网络实现相互通信的一套规则,规定了计算机在因特网上进行通信时应当遵守的规则。
- DNS:(Domain Name System)网域名称系统,是因特网的一项核心服务,它可以作为将域名和IP地址相互映射的一个分布式数据库,能够使人更方便的访问互联网,而不用去记住能够被机器直接读取的IP地址。
域名解析
- 举个例子: http://www.baidu.com 访问百度,浏览器实际上并不知道baidu.com到底是什么东西,需要查找baidu.com网站所在服务器的IP地址,才能找到目标,实际上直接用IP也是可以访问该网站的,之所以用域名,是为了方便用户使用!(好记)
- 域名解析的流程
1. 浏览器缓存-浏览器会缓存DNS记录一段时间
2. 系统缓存-从Hosts文件查找,是否有该域名和对应的IP
3. 路由器缓存-一般路由器也会缓存域名信息
4. ISP DNS缓存-比如到电信的DNS上查找缓存
5. 如果都没有好到-则向根域名服务器查找域名对应的IP,根域名服务器把请求转发下一级,直到找到IP
6.找道IP之后,就向这个IP发送请求了
服务器处理
- 服务器是一台安装系统的机器,常见的系统如 Linux , windows server2012系统里安装的处理请求的应用,叫做Web server
- 常见的 Web 服务器:Apache、Nginx、IIS、Lighttpd
3.Web server可以解析接收到的HTTP请求(Rquest),返回一个HTTP响应(Response)给用户,或者接受请求后反向代理到其他的Web服务器进行别的解析。总而言之,服务器端都会产生相应的HTML响应让浏览器进行浏览。
4.具体接收到的HTTP请求则是在后台进行处理的
涉及到的处理过程为:
浏览器处理
1.浏览器把获取到的HTML代码解析成一棵DOM树,HTML中的每个标签(tag)都是DOM树中的一个节点,根节点就是我们常用的document对象。DOM树里包含了HTML所有标签,包括display:none隐藏,还有用JS动态添加的元素等;
2.浏览器把所有样式(用户定义的css和用户代理)解析成样式结构体,在解析过程中会去掉浏览器不能识别的样式,比如IE会去掉-moz开头的样式,而Firefox会去掉_开头的样式;
3.DOM树和样式结构体组合后构建render tree(渲染树),render tree类似于DOM树,但区别很大,render tree 能识别样式,render tree的每一个节点都有自己的样式,而且render tree中不包含隐藏的节点(比如display:none的节点,还有head节点),因为这些节点不会用于呈现,而且不会影响呈现。
注意:visibility:hidden隐藏的元素还是会包含到render tree中,因为visibility:hidden会影响布局(layout),会占有空间。根据css2的标准,render tree中的每个节点都称为Box(Box demensions),理解页面元素为一个具有填充,边距,边框和位置的盒子。
4.一旦render tree构建完成后,浏览器就可以根据render tree来绘制页面了。
5.这里涉及到两个很重要的概念:重绘和回流;
重绘:
重绘是一个元素外观的改变所触发的浏览器行为,例如改变visibility,outline,背景色属性。浏览器会根据元素的新属性重新绘制,使元素呈现新的外观。
回流:
回流是更明显的一种改变,可以理解为render tree需要重新计算。每个页面至少需要一次回流,就是在页面加载的时候。
注意:回流必将引起重绘,但重绘不一定引起回流。
绘制网页
- 浏览器根据HTML和css计算得到渲染树,最终绘制到屏幕上。也就是浏览器中我们能看到的可以进行交互的页面。