例如:从输入http://hackr.jp/xss/web到页面渲染发生了下方如图的事情。
详细的过程:
(1)客户端将URL输入到浏览器地址栏,向DNS服务器请求获取指定域名的IP地址;
(2)DNS服务器解析从客户端发来的域名,获取到对应的IP地址,将IP地址传回到客户端;
(3)客户端获取到IP地址后,在应用层按照HTTP协议,生成针对目标web服务器的HTTP请求报文。在传输层,应用TCP协议,为了方便通信,将HTTP请求报文分割成报文段,按照序号分为多个报文段,把每个报文可靠地传输给对方;
(4)请求报文传输至网络层,应用IP协议,搜索对方的地址,一边中转,一边传送,一直路由到目标web服务器。
(5)到达web服务器,遵循TCP/IP四层结构,将请求报文逐层处理传到服务器。在传输层,按照TCP协议,将客户端的报文按照原来的顺序重组请求报文;
(6)在应用层,按照HTTP 协议,对web服务器请求的内容处理,传至客户端。
(7)请求的报文发送至客户端,再依据四层协议,逐层去首部报文等操作获取到请求的内容。
(8)请求的内容传至浏览器,接下来进行浏览器对内容的渲染过程;
(9)浏览器将从服务器获取的HTML文档构建成文档对象模型DOM(Document Object Model).;
(10)样式将被载入和解析,构成层叠样式表模型CSSOM(CSS Object Model).;
(11)在DOM和CSSOM之上,渲染树(rendering tree)将会被创建,代表一系列将被渲染的对象;
(12)渲染树映射除了不可见元素(例如<head>或者含有display:none;的标签)外的所有DOM结构。每一段文本字符串都将划分在不同的渲染对象中,每一个渲染对象都包含了它相应的DOM对象以及计算后的样式。
(13)渲染树的每个元素包含的内容都是计算过的,它被称之为布局layout.浏览器使用一种流式处理的方法,只需要一次pass绘制操作就可以布局所有的元素;
(14)当页面元素样式的改变不影响元素在文档流中的位置时,浏览器只会将新样式赋予元素并进行重绘操作,这是浏览器的重绘;
(15)当改变影响文档内容或者结构,或者元素位置时,回流操作就会被触发。