网页解析的全过程(输入url到展示页面)
1.用户输入网址,浏览器发起DNS查询请求
系统缓存 – 如果在浏览器缓存里没有找到需要的记录,浏览器会做一个系统调用(windows里是gethostbyname)。这样便可获得系统缓存中的记录。
路由器缓存 – 接着,前面的查询请求发向路由器,它一般会有自己的DNS缓存。
ISP DNS 缓存 – 接下来要check的就是ISP缓存DNS的服务器。在这一般都能找到相应的缓存记录。
递归搜索 – 你的ISP的DNS服务器从跟域名服务器开始进行递归搜索,从.com顶级域名服务器到Facebook的域名服务器。一般DNS服务器的缓存中会有.com域名服务器中的域名,所以到顶级服务器的匹配过程不是那么必要了。
GET http://www.cricode.com/ HTTP/1.1
Host: www.cricode.com
Connection: keep-alive
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
User-Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.114 Safari/537.36
Accept-Encoding: gzip,deflate,sdch
Accept-Language: zh-CN,zh;q=0.8
Web服务器通常通过监听80端口,来获取客户端的HTTP请求。与客户端建立好TCP连接后,web服务器开始接受客户端发来的数据,并通过HTTP解码,从接受到的网络数据中解析出请求的url信息以前其他诸如Accept-Encoding、Accept-Language等信息。Web服务器根据HTTP请求头的信息,得到响应数据返回给客户端。一个典型的HTTP响应头数据报如下:
HTTP/1.1 200 OK
Date: Fri, 24 Oct 2014 13:55:18 GMT
Server: Apache
X-Powered-By: PHP/5.4.32
Keep-Alive: timeout=5, max=10000
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: text/html; charset=UTF-8
a0f6
<</span>!DOCTYPE HTML>
<</span>html>
<</span>head>
<</span>meta charset="UTF-8">
<</span>meta http-equiv="X-UA-Compatible" content="IE=10,IE=9,IE=8">
<</span>meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<</span>title><</span>/title>
<</span>body class="home"><</span>/body>
<</span>/html>
至此,一个HTTP通信过程完成。web服务器会根据HTTP请求头中的Connection字段值决定是否关闭TCP链接通道,当Connection字段值为keep-alive时,web服务器不会立即关闭此连接。(这一步一开始也许还会有重定向及浏览器跟踪重定向地址等)。
5、浏览器解析http response
(1)html文档解析(DOM Tree)
在浏览器没有完整接受全部HTML文档时,它就已经开始显示这个页面了。生成解析树即dom树,是由dom元素及属性节点组成,树的根是document对象。
(2)浏览器发送获取嵌入在HTML中的对象
加载过程中遇到外部css文件,浏览器另外发出一个请求,来获取css文件。遇到图片资源,浏览器也会另外发出一个请求,来获取图片资源。这是异步请求,并不会影响html文档进行加载。
但是当文档加载过程中遇到js文件,html文档会挂起渲染(加载解析渲染同步)的线程,不仅要等待文档中js文件加载完毕,还要等待解析执行完毕,才可以恢复html文档的渲染线程。
(3)css解析(parser Render Tree)
浏览器下载css文件,将css文件解析为样式表对象,并用来渲染dom tree。该对象包含css规则,该规则包含选择器和声明对象。
css元素遍历的顺序,是从树的低端向上遍历。
(4)js解析
浏览器UI线程:单线程,大多数浏览器(比如chrome)让一个单线程共用于执行javascrip和更新用户界面。
js阻塞页面:浏览器里的http请求被阻塞一般都是由js所引起,具体原因是js文件在下载完毕之后会立即执行,而js执行时候会阻塞浏览器的其他行为,有一段时间是没有网络请求被处理的,这段时间过后http请求才会接着执行,这段空闲时间就是所谓的http请求被阻塞。
js阻塞原因:之所以会阻塞UI线程的执行,是因为js能控制UI的展示,而页面加载的规则是要顺序执行,所以在碰到js代码时候UI线程会首先执行它
网页解析的全过程(输入url到展示页面)的更多相关文章
- 输入url到展示页面过程发生了什么?
输入网址,首先在书签或者历史记录里面去搜索相关的网址推荐给你 浏览器查找域名的IP的地址(在hosts文件有没有对应IP -> 浏览器发出一个DNS请求到本地DNS服务器,本地服务器一般是网 ...
- 关于浏览器,从输入URL到呈现页面过程!(主讲TCP/IP协议)
一.文本对话--从请求到响应 我们在浏览器中输入一个 URL,回车之后便会在浏览器中观察到页面内容.实际上这个过程是: (1)浏览器向网站所在的服务器发送了一个 Request(请求) (2)网站服务 ...
- 输入URL到展现页面的全过程
最近在看一本关于网络协议的书<图解HTTP> 当我们在浏览器的地址栏输入 http://www.pwstrick.com ,然后回车,回车这一瞬间到看到页面到底发生了什么呢? 1. 域名 ...
- 浏览器输入URL到响应页面的全过程
B/S网络架构从前端到后端都得到了简化,都基于统一的应用层协议HTTP来交互数据,HTTP协议采用无状态的短链接的通信方式,通常情况下,一次请求就完成了一次数据交互,通常也对应一个业务逻辑,然后这次通 ...
- 简略图解:输入 url 到出现页面,浏览器做了什么?
应该有很多前端开发人员都思考过这么一个问题:从输入 URL 到页面加载完成,中间都做发生了什么? 这个问题涉及的面非常广,每个涉及的点又很深入.从触屏/键盘如何到 CPU?CPU 如何到系统内核?如何 ...
- 输入URL地址到页面加载完成 过程
在浏览器的地址栏中输入URL地址"http://www.gacl.cn:8080/JavaWebDemo1/1.jsp"去访问服务器上的1.jsp这个web资源的过程 1.浏览器根 ...
- 计算机网络【6】—— 从浏览器输入URL到显示页面发生了什么
当在浏览器地址栏输入网址,如:www.baidu.com后浏览器是怎么把最终的页面呈现出来的呢?这个过程可以大致分为两个部分:网络通信和页面渲染. 一.网络通信 互联网内各网络设备间的通信都遵循TCP ...
- HTTP:地址栏输入url到显示页面的步骤
在浏览器地址栏输入URL 浏览器查看缓存,如果请求资源在缓存中并且新鲜,跳转到转码步骤 如果资源未缓存,发起新请求 如果已缓存,检验是否足够新鲜,足够新鲜直接提供给客户端,否则与服务器进行验证. 检验 ...
- 从输入URL到浏览页面的过程
之前我们已经讨论过浏览器的渲染原理,今天我们来讨论下更广泛的从输入URL到渲染出页面的过程. 1. 查询该URL是否有缓存 如果有,则直接返回,没有的话,下一步 2. 查询URL对应的IP 首先,到 ...
随机推荐
- PMBok项目管理
这就是项目管理的九大领域:整合管理.范围管理.时间管理.费用管理.质量管理.人力资源管理.沟通管理.风险管理.采购管理. 项目管理好像一头大象,将其大卸九块之后,要装进冰箱就容易多了. 看看书上是怎样 ...
- icon大小
ldpi mdpi hdpi xhdpi xxhdpi
- 3.1 cron表达式
1.Cron在线生成网址: http://cron.qqe2.com/ http://www.pdtools.net/tools/becron.jsp#cron 2.Cron 概要 3. ...
- jsp提交表单问题
以form形式提交的话 String usernameInForm = hreq.getParameter("username");String passwordInForm = ...
- AFHTTPSessionManager
// 取消所有请求 [self.manager.tasks makeObjectsPerformSelector:@selector(cancel)]; 使用场景: 比如一个界面有下拉刷新和上拉加载两 ...
- bash和sh区别
在一般的linux系统当中(如redhat),使用sh调用执行脚本相当于打开了bash的POSIX标准模式(等效于bash的 --posix 参数),一般的,sh是bash的“子集”,不是子集的部分. ...
- isinstance使用方法
#!/usr/bin/python2.7 def displayNumType(num): print num, 'is', if isinstance(num,(int, long ...
- PAT (天梯)L2-004. 这是二叉搜索树吗?
L2-004. 这是二叉搜索树吗? 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 一棵二叉搜索树可被递归地定义为具有下列性质的 ...
- excel转化为Json
Sheet sheet; Workbook book; Cell cell1,cell2,cell3,cell4; JSONArray jsonArray = ...
- VC与ADO数据库操作
VC与ADO数据库操作 学研部的同志们,大家好! 想开一次学习会,实习时间冲突了,只好把文档发给大家看了.重点推荐李振龙的BMP读图教程! 尤其是大三GIS班的同志,注意了,可能实习用得上的! 一.A ...