javascript标签在页面中之处商讨

作者:分分快三计划

 

放置在<body>标签的最后

<!DOCTYPE html>
<html>
<head>
<title>标题</title>
</head>
<body>

<script type=”text/javascript” src=”1.js”></script>
<script type=”text/javascript” src=”2.js”></script>
</body>
</html>

这样,在解析包含的JavaScript 代码之前,页面的内容将完全呈现在浏览器中。而用户也会因为浏览器窗口显示空白页面的时间缩短而感到打开页面的速度加快了。

复制代码 代码如下:

结构代码:

放置在<body></body>之间

放入<body>部分js代码将在页面载入的时候被执行

<!DOCTYPE html>
<html>
<head>
<title>标题</title>
</head>
<body>
<script type=”text/javascript” src=”1.js”></script>
<script type=”text/javascript” src=”2.js”></script>

</body>
</html>

浏览器一般是从上到下渲染HTML,当遇到Javascript代码时,浏览器将发生阻塞(不再解析后边的任何代码,包括JavaScript和HTML),有些浏览器在阻塞期间不会解析该Javascript代码后边的HTML代码,必须等到该Javascript代码执行完毕,才继续解析。所以会发生这种现象:浏览器先是呈现一部分页面,再呈现后边的页面,中间间隔时间明显。这样就会使得用户体验差。

[html] 复制代码 代码如下: html head titleExample HTML Page/title script type="text/javascript" src="exa...

</body>

放置在<head></head>之间

放入<head>部分js代码将在页面加载完之前被载入

<!DOCTYPE html>
<html>
<head>
<title>标题</title>
<script type=”text/javascript” src=”1.js”></script>
<script type=”text/javascript” src=”2.js”></script>
</head>
<body>

</body>
</html>

这样做的目的就是把所有的外部文件的引用都放在相同的地方。但是这也意味着必须等到全部的JavaScript代码全部被下载、解析和执行完成后,才能开始呈现页面的内容(浏览器在遇到<body>标签时才开始呈现内容)。如果需要很多JavaScript代码的页面来说,就会导致浏览器在呈现页面时出现明显的延迟,而延迟阶段浏览器窗口是一片空白。所以将<script>放置在<head></head>之间一般用于提前载入以响应用户的动作,一般不影响HTML文档的浏览器显示内容。

<html>
<head>
<title>Example HTML Page</title>
<script type="text/javascript" defer="defer" src="example1.js"></script>
<script type="text/javascript" defer="defer" src="example2.js"></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>
<html>
<head>
<title>Example HTML Page</title>
<script type="text/javascript" defer="defer" src="example1.js"></script>
<script type="text/javascript" defer="defer" src="example2.js"></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>

页面主体内容

复制代码 代码如下:

HTML超文本语言以标签为主编写前端页面。

上述两种写法的实际效果是一样的。但是,并非所有的浏览器都支持defer属性,有些浏览器会忽略这个属性,不延迟脚本的执行。

<head></head>

这样,在解析包含的JavaScript代码之前,页面的内容将完全呈现在浏览器中。而用户也会因为浏览器窗口显示空白页面的时间缩短而感到打开页面的速度加快了。

</html>

在制作网页的过程中,我们经常写类似下面的代码:
[html]

<html>

或者也可以使用<script>标签的defer属性表明脚本在执行时不会影响页面的构造,即脚本会被延迟到整个页面都解析完毕后再运行,代码如下:
[html]

<title></title>

<html>
<head>
<title>Example HTML Page</title>
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>
<html>
<head>
<title>Example HTML Page</title>
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>

<body>

<html>
<head>
<title>Example HTML Page</title>
</head>
<body>
<!-- 这里放内容 -->
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</body>
</html>
<html>
<head>
<title>Example HTML Page</title>
</head>
<body>
<!-- 这里放内容 -->
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</body>
</html>

复制代码 代码如下:

按照惯例,所有的<script>元素都应该放在页面的<head>元素中。请注意:无论引用几个外部js文件,浏览器都会按照<script>元素在页面中出现的先后顺序对它们依次进行解析 。换句话说,在第一个<script>元素包含的代码解析完成后,第二个<script>包含的代码才会被解析,然后才是第三个、第四个...
这种做法的目的就是把所有外部文件(包括CSS文件和JavaScript文件)的引用都放在相同的地方。可是,在文档的<head>元素中包含所有JavaScript文件,意味着必须等到全部JavaScript代码都被下载、解析和执行完成以后,才能开始呈现页面的内容(浏览器在遇到<body>标签时才开始呈现内容)。对于那些需要很多JavaScript代码的页面来说,这无疑会导致浏览器在呈现页面时出现明显的延迟,而延迟期间的浏览器窗口将是一片空白。为了避免这个问题,现代Web应用程序一般都会把全部JavaScript引用放在<body>元素中,放在页面的内容后面,如下所示:
[html]

本文由分分快三计划发布,转载请注明来源

关键词: 分分快三计划 HTML