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

浏览数：28 / 时间：2015年06月09日

通过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个连接等。