javascript标签在页面中的位置探讨

在制作网页的过程中，我们经常写类似下面的代码：
[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>
<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>

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

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

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

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

赞 (0)

相关推荐

  • asp.net(C#) 动态添加非ASP的标准html控件（如添加Script标签）

    复制代码 代码如下: HtmlGenericControl Include2 = new HtmlGenericControl("script"); Include2.Attributes.Add("type", "text/javascript"); Include2.InnerHtml = "alert('JavaScript in Page Header');"; this.Page.Header.Controls.Ad

  • 浅谈js script标签中的预解析

    首先介绍预解析,虽然预解析字面意思很好理解,但是却是出坑出的最多的地方,也是bug经常会有的地方,利用好预解析的特性可以解决很多问题,并且提高代码的质量及数量,浏览器在解析代码前会把变量的声明和函数(整个函数体)提前到当前作用域的最顶端. 细节问题:在多对的script标签中如果有相同的函数,那它们相互之间是不会受影响的,在第二对script标签中声明变量或者是创建函数,在第一对script标签中是无法访问到的,这就说明了,javaScript的预解析只会在各自的script标签中发生,同时,第

  • 有趣的script标签用getAttribute方法来自脚本吧

    在网页中引入外部对象并传递参数,想来大家都有这个经历.一般来说,使用的标签是iframe和embed(针对flash),不过这两个标签都不能象xml一般设置参数,只能通过在url地址后追加查询字符串的方式来传值.htc倒是挺不错的,只是没有浏览器兼容性,想来大家也不考虑它了.      用script标签可以把一个外部js文件载入到页面中,而且不管这个文件是否同域,都同样有效,这种跨域特性,可以说是独一无二的.一般情况下,我们都只是把js文件作为公用代码的一部分加以使用,在这里面集成一些公用函数

  • JavaScript动态添加css样式和script标签

    [动态添加css样式] <html> <head> <script type="text/javascript"> window.onload=function(){ var head=document.getElementsByTagName('head')[0]; //获取到head元素 var link=document.createElement('link'); //创建link元素节点,也就是link标签 link.rel="s

  • script标签属性type与language使用选择

    被人问起一个问题: <script language = "JavaScript"> <script type="text/javascript"> <script> 这三个标签的使用有什么区别? 虽然一直在用,却也没有好好去弄清楚,这里详细说明一下. 查阅一些资料,主要是浏览器支持问题.type 和 language 属性都可用来指定 <script> 标签中的脚本的类型.language 属性在 HTML 和 XH

  • javascript 获取url参数和script标签中获取url参数函数代码

    url paramter: 复制代码 代码如下: //lastest: var getArgs=function() {//get url querystring var params=document.location.search,reg=/(?:^\?|&)(.*?)=(.*?)(?=&|$)/g,temp,args={}; while((temp=reg.exec(params))!=null) args[temp[1]]=decodeURIComponent(temp[2]);

  • script标签的 charset 属性使用说明

    定义和用法 charset 属性规定在外部脚本文件中使用的字符编码. 如果外部文件中的字符编码与主文件中的编码方式不同,就要用到 charset 属性. 默认的字符编码是 ISO-8859-1. src 和 charset 属性 对特别长的 JavaScript 程序或者经常重复使用的程序来说,你可以希望将这些代码存放到一个单独的文件中.在这样的情况下,让浏览器通过 src 属性来载入那个单独的文件. src 的值是包含这个 JavaScript 程序的文件的 URL.保存的文件的 MIME 类

  • IE8中动态创建script标签onload无效的解决方法

    本文实例讲述了IE8中动态创建script标签onload无效的解决方法.分享给大家供大家参考.具体分析如下: 今天做项目,发现一个奇怪的问题,动态创建的script标签在IE8下无法触发onload事件. 代码如下: 复制代码 代码如下: var loadJs = function(src, fun){     var script = null;     script = document.createElement("script");     script.type = &qu

  • Script标签与访问HTML页面详解

    Script标签与访问HTML页面详解

    复制代码 代码如下: <img src="1_ender1000.jpg" id="img2" alt="" onclick="alert('onclick');" onmouseover="this.src='1_yylklshmyt20090217.jpg'" title="反转图片" />    <script type="text/javascript

  • 动态创建script标签实现跨域资源访问的方法介绍

    login.html 复制代码 代码如下: <script> function request(id,url){     oScript = document.getElementById(id);     var head = document.getElementsByTagName("head").item(0);     if (oScript) {        head.removeChild(oScript);     }     oScript = docu

随机推荐