1.第一轮渲染
如果用户访问的是一个页面,url请求发出以后,首先接受到的应该是一个用html写的格式文档,内容可能是这样的:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="foo.css">
</head>
<body>
<h1 id="greet">Hello World!</h1>
<script type="text/javascript" src="foo.js"></script>
</body>
</html>
然后浏览器开始解析文档内容,根据文档类型选择解析方法。此页面文档中的head包含了页面编码、页面标题和样式表信息(css),css是另一个比较重要的概念,它包含了一系列有关页面渲染的规则。
接下来继续开始渲染body的内容部分,这里的示例内容比较简单,先是一个h1标签,在页面上渲染了一个大大的Hello World!,此时,页面完成了第一轮渲染,称之为首屏渲染。最后引入了一个javascript(简称js)的脚本文件。
2.第二论渲染
foo.js加载成功后开始了第二轮渲染。
我们通常把这些用于第二轮渲染的js放在body的最后引用,为的是让首屏内容以最快的速度显示给用户。
第二轮渲染主要由foo.js完成,通过js脚本对页面文档的内容进行操作,比如为用户提供一些操作方法和现实一些动态效果。foo.js可能是这样的:
window.onload = function () {
var greet = document.getElementById('greet');
greet.onclick = function () {
var answer = document.createElement('p');
answer.innerHTML = 'Hi I\'m World!';
document.body.appendChild(answer);
}
}
这段代码运行后产生的效果就是,当用户点击Hello World!时,页面上会显示Hi I’m World!。前者是首屏渲染产生的结果,后者是第二轮渲染产生的结果。