浏览器渲染原理

上一篇 / 下一篇 2016-04-19 17:15:17 / 个人分类：web测试

页面渲染：就是浏览器将html代码根据css定义的规则显示在浏览器窗口中的这个过程。

实例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

</head>

<body>

<div>

</div>

<br />

<p>

</p>

</body>

</html>

steps：

1.客户端向服务器发送请求，服务器返回如上的html给客户端浏览器，请求的只是html页面，单纯的一个html请求不能提供完整的页面，因为一个页面有很多请求，每一个元素都是一个单独的请求，比如图片，比如css，js脚本等等，渲染就是要把这些都获取到

2.从<html>标签开始，发现<head>标签内有个外部样式文件要加载

3.client向server发送一个要求加载css文件，server响应

4.client继续加载html文件里<body>里的标签，在css.css文件加载完后，同时开始渲染页面。

5.客户端浏览器在<body>里的标签中发现一个<img>标签并且引用了服务器进而的一张名为test.jpg的图片.客户端浏览器又向服务器发出一次请求。而浏览器不会因为此时正在加载<img>标签里的图片而停止等待图片加载完，浏览器继续渲染还未完成的部分。

6.<img>标签里的图片加载完了，则要显示出来，同时图片会占有一定的面积，又会影响到后面的布局，浏览器不得不又回来重新渲染一次这部分。

7.总算把body里的标签加载及渲染完后，浏览器又发现了一段js代码：

8.浏览器又立刻向服务器发出请求加载js.js文件，服务器响应。

9.浏览器又在js.js文件中发现了一段代码是让<div>标签隐藏的代码，此时浏览器又要重新去渲染被隐藏的<div>部分。