码迷,mamicode.com
首页 > Web开发 > 详细

浏览器---WEB开发基础之三

时间:2014-07-22 08:34:33      阅读:205      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   java   使用   os   

    通过HTTP协议的介绍,打开网页必须建立TCP连接,然后通过HTTP协议进行交互,因此,浏览器访问网址,第一件事就是建立TCP连接,但是TCP连接是基于IP的,而我们输入的却是网址,所以,实际上第一件事,应该是通过DNS去查找网址(也就是域名)对应的主机的IP,然后才是三次握手建立TCP连接(此处知识详见《计算机网络基础》),然后浏览器向服务器发送: 

GET HTTP://www.baidu.com HTTP/1.1 
Accept: application/x-ms-application, image/jpeg, application/xaml+xml, [...] 
User-Agent: Mozilla/5.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; [...] 
Accept-Encoding: gzip, deflate 
Connection: Keep-Alive 
Host: www.baidu.com 
Cookie: BAIDUID=[...]:FG=1; H_PS_PSSID=[...]

    是的,这就是发送求情报文,只是这些事情都是由浏览器做的!此处报文的解释,请详细参考《HTTP权威指南》。 
    然后由服务器处理(此处省略详细细节,后面服务端节讲解),并返回响应报文,报文格式不再详述,参考对应的书籍或标准,但是返回的主体内容却是值得分析的。网页是由HTML、css、js、图片、视频、音频、flash等组成的,因此,服务器返回的主体内容,如果Content-Type= text/html;则,首先包含了HTML、css和js,浏览器会解析和渲染这些内容,而外联的内容如css文件、js文件、图片文件等,是在另外的请求中去获取和下载的,如果使用火狐浏览器并安装了firebug,打开可以看见如下的截图: 
    由上图可以知道,实际上访问www.baidu.com发送了10次请求,请求页面、gif、png、js等,此过程是解析出这些外部资源之后再次请求获得的。通过浏览器把最后的结果渲染并呈现给用户! 

    OK,那么浏览器拿到响应报文的主体,到底是如何渲染出最终的网页效果的呢?要想知道如何渲染,就得知道浏览器里面有些什么: 
    浏览器一般是有以下几个组成,浏览器内核 (排版引擎/渲染引擎)+JavaScript引擎+其他功能具体市面上有哪些浏览器内核,有哪些JavaScript引擎,请参考科普贴:http://www.iplaysoft.com/browsers-engine.html 
    具体到浏览器的下载和渲染顺序,网上有一些介绍如下: 
1、IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的。 
2、在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都已经下载完)。 
3、如果遇到语义解释性的标签嵌入文件(JS脚本,CSS 下载过程会启用单独连接进行下载,并且在下载后进行解析,解析过程中,停止页面所有往下元素的下载。 
5、样式表在下载完成后,将和以前下载的所有样式表一起进行解析,解析完成后,将对此前所有元素(含以前已经渲染的)重新进行渲染。 
6、JS、CSS中如有重定义,后定义函数将覆盖前定义函数。 
    Firefox处理下载和渲染顺序大体相同,只是在细微之处有些差别,例如:iframe的渲染。
    那么为什么要讲解浏览器组成部分、渲染顺序、HTTP协议呢?当然是为了得到更好的性能(如网站响应时间短,页面渲染速度快等)和用户体验! 
    对于前端而言(除了网络部分外),其优化策略,可以参考《高性能网站建设指南》和《高性能网站建设进阶指南》等。同时附上两篇博文: 
http://www.ipmtea.net/css/201110/28_759.html 
http://www.cnblogs.com/shishm/archive/2012/03/16/2400718.html 
    其实具体的优化,真的是具体情况具体分析,同时也需要和服务端配合,特别是了解操作系统、浏览器等的一些隐藏的限制!如对单个IP,最多只能有5个连接等。

浏览器---WEB开发基础之三,布布扣,bubuko.com

浏览器---WEB开发基础之三

标签:style   blog   http   java   使用   os   

原文地址:http://my.oschina.net/ayesd/blog/291806

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!