浏览器---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 
    具体到浏览器的下载和渲染顺序,网上有一些介绍如下: 
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开发基础之三

时间: 2024-11-10 18:21:10

浏览器---WEB开发基础之三的相关文章

web开发基础--字节序

1.有效位 在谈字节序前需要先了解有效位,有效位分为两种:最低有效位(LSB: Least Significant Bit) 和最高有效位(MSB:Most Significant Bit).在二进制数中,LSB是最低加权位,与十进制数字中最右边的一位类似:MSB是最高加权位,与十进制数字中最左边的一位类似.通常,MSB位于二进制数的最左侧,LSB位于二进制数的最右侧.以一个十进制的数12345678为例,最高有效位就是1,最低有效位就是8. 2.字节序: 字节序,顾名思义字节的顺序,就是大于一

PHP 系列:PHP Web 开发基础

PHP是动态类型的Web开发的脚本语言,PHP以页面文件作为加载和运行的单元,PHP现在有了Composer作为开发包管理. 1.使用Composer管理依赖 自从.NET开发用了Nuget管理程序集依赖,我就再也离不开它了,幸亏Java中也有Maven管理jar包,虽然开源中国的镜像太慢但还有ibiblio的镜像可用,PHP现在终于有了Composer(参考1)用来管理资源包. (1)全局安装(参考2) 在指定安装目录中执行命令行: php -r "readfile('https://getc

移动web开发基础知识

首先做开发码子编完了我们得有个工具去看效果,PC端开发我们有firefox,chrome等等,那么我们做手机web用什么做调试?手机设备多种多样,不同品牌,不同的屏幕尺寸.当然我们不可能把所有的手机设备都买齐了,然后在开发的时候,在桌子上从左到右依次摆放,在写了一段代码之后,从左到右依次刷新,呵呵.如果真有人这么去做,我也不说啥了,我只求跪求土豪咱做朋友吧~嘿嘿. 废话说了一推,说回重点:首先,移动web开发咱需要一个调试工具. 1.Google emulation:谷歌的移动端模拟器,简单的理

Java Web开发基础(3)-JSTL

在DRP项目中接触到了JSTL标签库,对我这样的比較懒的人来说,第一感觉就是"惊艳". JSTL标签库的使用.能够消除大量复杂.繁复的工作.工作量降低的不是一点半点.是降低了一大半.不论什么工具的引入,都会使我们的工作变的简单.可是问题是我们工作能够变的简单,可是我们不能让自己的大脑变的简单.所以,我们不是简单的会用就能够.我们还须要了解这个工具是怎样工作的.怎样为我们提供便利的.ok.以下进入正题,我们从问题開始-- JSP脚本带来的问题 不知道看到这几个子,各位有什么想法?反正我认

Java Web开发基础(2)-JSP

上一篇博我粗略的介绍了一下Servlet.粗略是由于博主也刚刚学习这部分的内容,还不是非常懂所以无法讲的非常精细.可是本着二八原则,我还是先继续学习.所以,这篇博客接着JSP的内容.由于.这两个内容关联性还是比較强的,学习的过程也应该是互相促进的. 简单介绍 概述:JSP(Java Server Page)简单的说是一种动态网页技术.它通过在HTML网页中嵌入可以生成动态内容的程序代码.来实现静态内容和动态内容在终于呈现给client的统一. 也就是说在HTML页中可以存在着JavaBean,J

java web开发基础学习

由于以前很少用java开发,至于连myEclipse都不怎么熟悉.    1.使用myEclipse生成部署网站步骤. 选tomcat后点击右边的Redeploy 这样便在tomcat目录下生成了一个部署网站文件. 2.使用myEclipse调试web步骤 将project下拉中所有项目的server全部remove. 留下需要调试的项目,add myelipse. 启动myeclipse服务器 在代码中打好断点,然后点地球图标跳转到开发工具浏览器 输入网址,点击右边的绿色三角形既可打开网页并调

Web开发基础-Node.js-01

01-浏览器工作原理 1)人机交互部分(ui) 2)网络请求部分(socket) 3)javascript引擎 4)渲染引擎(解析html,css) 5)数据存储部分(cookie,本地存储等) --渲染引擎介绍 工作原理: 解析html,构建dom树 构建渲染树 对渲染树布局 绘制渲染树,调用操作系统底层API进行绘图操作 02渲染器工作原理-WEB-worker 简介: JavaScript 语言采用的是单线程模型,也就是说,所有任务只能在一个线程上完成,一次只能做一件事.前面的任务没做完,

web开发基础之HTTP协议

HTTP协议 HTTP协议简介 超文本传输协议(英文:HyperText Transfer Protocol,缩写:HTTP)是一种用于分布式.协作式和超媒体信息系统的应用层协议.HTTP是万维网的数据通信的基础. HTTP的发展是由蒂姆·伯纳斯-李于1989年在欧洲核子研究组织(CERN)所发起.HTTP的标准制定由万维网协会(World Wide Web Consortium,W3C)和互联网工程任务组(Internet Engineering Task Force,IETF)进行协调,最终

Web开发基础01-Html与CSS

1.软件架构 CS:client/server 客户端/服务器端 BS:browser/server浏览器/服务器端 1.1.BS架构的详解 1.1.1. 资源分类 分为静态资源和动态资源 静态资源: 使用静态网页开发技术发布的资源(html css javascript) 如新闻,不管是谁,看的一样 如果用户请求的是静态资源,那么服务器会直接将静态资源发送给浏览器,而浏览器内置了静态资源解析引擎,可以展示静态资源. 动态资源: 使用动态网页技术开发发布的资源(jep/servlet,php,a