前端页面的两轮渲染

来源：互联网发布：网络的拼音怎么写的编辑：程序博客网时间：2024/04/30 20:19

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!。前者是首屏渲染产生的结果，后者是第二轮渲染产生的结果。

0 0