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

    经过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 
    具体到浏览器的下载和渲染顺序，网上有一些介绍以下： 
一、IE下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的。 
二、在渲染到页面的某一部分时，其上面的全部部分都已经下载完成（并非说全部相关联的元素都已经下载完）。 
三、若是遇到语义解释性的标签嵌入文件（JS脚本，CSS 下载过程会启用单独链接进行下载，而且在下载后进行解析，解析过程当中，中止页面全部往下元素的下载。 
五、样式表在下载完成后，将和之前下载的全部样式表一块儿进行解析，解析完成后，将对此前全部元素（含之前已经渲染的）从新进行渲染。 
六、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个链接等。