整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

JavaScript面试题12-浏览器是如何渲染页面的?

览器渲染页面有以下几个步骤:

  1. 当浏览器的网络进程接收到 HTML文档后,会开启一个渲染任务,并将其传递给渲染主线程的消息队列。
  2. 在事件循环机制的作用下,渲染主线程会取出消息队列中的渲染任务,开启渲染流程。
  3. 整个的渲染流程分为多个阶段,分别是:HTML 解析、样式计算、布局、分层、绘制、分块、光栅化、画;
  4. 每个阶段都有明确的输入和输出、上一个阶段的输出会成为下一个阶段的输入;这样一来,整个渲染流程就形成了一套组织严密的生产流水线。

时浏览网站的时候经常会遇到点击某些按钮会弹出登录提示或者注意事项提示的弹窗。那么这种弹窗是怎么实现的呢。实现方法有很多,不外乎就是点击事件触发相应的弹窗事件。
在这里介绍一个简易实现的方法。
首先,这里的弹窗长这样:


而原本页面长这样:


这里假定图中深绿色的按钮作为触发弹窗事件的按钮,在这里命名为btn1,然后就是弹窗的制作:
由图可看出,弹窗是基于整个屏幕的,有个灰色背景遮罩,中间有一块白色底带有图标文字说明的内容提示区,下面还有两个按钮,close是关闭弹窗的作用。了解了这些,就开始制作弹窗了:
1、html结构如下:

  1. css样式如下:

.tc{
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 9;
background: rgba(0,0,0,.5);
display: none;
}
.tc .box{
width: 670px;
height: 404px;
background: #fff;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
box-sizing: border-box;
padding-top: 54px;
}
.tc .box .icon{
width: 110px;
height: 110px;
margin: auto;
}
.tc .box .t1{
font-size: 18px;
line-height: 28px;
color: #333;
text-align: center;
box-sizing: border-box;
padding: 0 70px;
margin-top: 38px;
}
.tc .box .t2{
display: flex;
justify-content: center;
margin-top: 48px;
}
.tc .box .t2 .btn1{
width: 195px;
height: 40px;
border: none;
background: #1296db;
color: #fff;
font-size: 18px;
display: block;
cursor: pointer;
}
.tc .box .t2 .btn2{
width: 128px;
height: 40px;
border: none;
background: #295965;
color: #fff;
font-size: 18px;
display: block;
margin-left: 16px;
cursor: pointer;
}
由于在整个弹窗的父级div里加了隐藏属性:display:none; 所以在页面上是看不到弹窗的,这个时候就要开始写触发弹窗的点击事件了,上面假定的按钮是btn1,弹窗这块的父级div是 tc 。
<script>
$('.btn1').on('click',function(){
$('.tc').show();
})
</script>
这样就写好之后点击 btn1 就能显示弹窗了,现在弹窗出现的效果有了,那么点击close关闭弹窗的效果也就不远了
<script>
$('.tc .btn2').on('click',function(){
$('.tc').hide();
})
</script>
在这里把close 的类名命名为 btn2, 如上代码就实现了点击close按钮关闭弹窗的功能。
将这两个事件放在一起,节省一个script,也显得美观些就是这样
<script>
$('.btn1').on('click',function(){
$('.tc').show();
})
$('.tc .btn2').on('click',function(){
$('.tc').hide();
})
</script>
到这里一个建议的点击弹窗关闭的效果就实现了。

单的 ASP.NET 页面看上去就像普通的 HTML 页面。


Hello RUNOOB.COM

在开始学习 ASP.NET 之前,我们先来构建一个简单的 HTML 页面,该页面将在浏览器中显示 "Hello RUNOOB.COM":

Hello RUNOOB.COM!


用 HTML 编写的 Hello RUNOOB.COM

下面的代码将以 HTML 页面的形式显示实例:

<html>

<body bgcolor="yellow">

<center>

<h2>Hello RUNOOB.COM!</h2>

</center>

</body>

</html>

如果您想亲自尝试一下,请保存上面的代码到一个名为 "firstpage.htm" 的文件中,并创建一个到该文件的链接:firstpage.htm。


用 ASP.NET 编写的 Hello RUNOOB.COM

转换 HTML 页面为 ASP.NET 页面最简单的方法是,直接复制一个 HTML 文件,并把新文件的扩展名改成 .aspx

下面的代码将以 ASP.NET 页面的形式显示实例:

<html>

<body bgcolor="yellow">

<center>

<h2>Hello RUNOOB.COM!</h2>

</center>

</body>

</html>

如果您想亲自尝试一下,请保存上面的代码到一个名为 "firstpage.aspx" 的文件中,并创建一个到该文件的链接:firstpage.aspx。


它是如何工作的?

从根本上讲,ASP.NET 页面与 HTML 是完全相同的。

HTML 页面的扩展名是 .htm。如果浏览器向服务器请求一个 HTML 页面,服务器可以不进行任何修改,就直接发送页面给浏览器。

ASP.NET 页面的扩展名是 .aspx。如果浏览器向服务器请求个 ASP.NET 页面,服务器在将结果发回给浏览器之前,需要先处理页面中的可执行代码。

上面的 ASP.NET 页面不包含任何可执行的代码,所以没有执行任何东西。在下面的实例中,我们将添加一些可执行的代码到页面中,以便演示静态 HTML 页面和动态 ASP 页面的不同之处。


经典 ASP

Active Server Pages (ASP) 已经流行很多年了。通过 ASP,可以在 HTML 页面中放置可执行代码。

之前的 ASP 版本(在 ASP.NET 之前)通常被称为经典 ASP。

ASP.NET 不完全兼容经典 ASP,但是只需要经过少量的修改,大部分经典 ASP 页面就可以作为 ASP.NET 页面良好地运行。

如果您想学习更多关于经典 ASP 的知识,请访问我们的 ASP 教程。


用经典 ASP 编写的动态页面

为了演示 ASP 是如何显示包含动态内容的页面,我们将向上面的实例中添加一些可执行的代码(红色字体标识):

<html>

<body bgcolor="yellow">

<center>

<h2>Hello RUNOOB.COM!</h2>

<p><%Response.Write(now())%></p>

</center>

</body>

</html>

<% --%> 标签内的代码是在服务器上执行的。

Response.Write 是用来向 HTML 输出流中写东西的 ASP 代码。

Now() 是一个返回服务器当前日期和时间的函数。

如果您想亲自尝试一下,请保存上面的代码到一个名为 "dynpage.asp" 的文件中,并创建一个到该文件的链接:dynpage.asp。


用 ASP .NET 编写的动态页面

下面的代码将以 ASP.NET 页面的形式显示实例:

<html>

<body bgcolor="yellow">

<center>

<h2>Hello RUNOOB.COM!</h2>

<p><%Response.Write(now())%></p>

</center>

</body>

</html>

如果您想亲自尝试一下,请保存上面的代码到一个名为 "dynpage.aspx" 的文件中,并创建一个到该文件的链接:dynpage.aspx。


ASP.NET 对比经典 ASP

上面的实例无法演示 ASP.NET 与经典 ASP 之间任何的不同之处。

正如最后的两个实例中,您看不出 ASP 页面和 ASP.NET 页面两者之间的不同之处。

在下一章中,您将看到服务器控件是如何让 ASP.NET 比经典 ASP 更强大的。