前端页面的两轮渲染

最新推荐文章于 2024-03-23 15:00:20 发布

PIEr_mx

最新推荐文章于 2024-03-23 15:00:20 发布

阅读量452

点赞数

分类专栏： frontend 前端文章标签：前端渲染

本文链接：https://blog.csdn.net/PIEr_mx/article/details/48101155

版权

frontend 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

前端

1 篇文章 0 订阅

订阅专栏

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

PIEr_mx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端页面的两轮渲染

1.第一轮渲染如果用户访问的是一个页面，url请求发出以后，首先接受到的应该是一个用html写的格式文档，内容可能是这样的：html>head> meta charset="UTF-8"> title>Documenttitle> link rel="stylesheet" type="text/css" href="foo.css">head>body>
复制链接

扫一扫