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属性,有些浏览器会忽略这个属性,不延迟脚本的执行。

时间: 2024-08-01 08:51:51

javascript标签在页面中的位置探讨_基础知识的相关文章

javascript学习笔记(十八) 获得页面中的元素代码_基础知识

1.获取元素 getElementById()方法,通过元素的id获取元素,接受一个参数即要获取元素的id,如果不存在这个id返回 null 注意不要让表单元素的name和别的元素的id相同,IE8以下的IE浏览器用这个方法通过元素的name属性可以获得该元素 以下面元素为例 <div id ="myDiv">这里是id为"myDiv"的div内容</div>var document.getElementById("myDiv&qu

详解JavaScript的Polymer框架中的通知交互_基础知识

Polymer 以访问器属性的形式来定义有监听需求的属性(没有监听需求的属性依然是普通的属性形式定义).模板中还可以采用「::」语法来将属性双向同步于目标元素的某个事件,这就是 Angular 中双向绑定的概念,甚至还要比它更纯粹.更贴近原理. 在 properties 中定义的属性如果没有添加 notify 并且没在模板中用到,那么它就是没有监听需求的,于是就会被定义成普通属性.否则都会被定义成访问器属性,下面例子就解释了这个问题 运行 <script> var Polymer = { do

浅谈JavaScript的Polymer框架中的事件绑定_基础知识

既然是一套完整的前端框架那就一定有提供事件绑定相关的支持.其实在之前的例子中就使用过事件绑定,只是没有单独系统地介绍过而已. Polymer 的事件思想是对事件处理函数尽可能地都命名并定义到 VM 上,我觉得这个做法是在有意地把 VM 这一层隔离出来. 下面这个例子给按钮和其所在的 Shadow DOM Host 都绑定了个事件,点击按钮后两个事件都会触发. 运行 <script> var Polymer = { dom: 'shadow' }; </script> <bas

javascript之typeof、instanceof操作符使用探讨_基础知识

写javascirpt代码时,typeof和instanceof这两个操作符时不时就会用到,堪称必用.但是!使用它们总是不能直接的得到想要的结果,非常纠结,普遍的说法认为"这两个操作符或许是javascript中最大的设计缺陷,因为几乎不可能从他们那里得到想要的结果" typeof 说明:typeof返回一个表达式的数据类型的字符串,返回结果为js基本的数据类型,包括number,boolean,string,object,undefined,function. 从说明来看,貌似没什么

JavaScript 中的事件教程_基础知识

事件是可以被JavaScript侦测到的行为. 事件 JavaScript使我们有能力创建动态页面.事件是可以被JavaScript侦测到的行为. 网页中的每个元素都可以产生某些可以触发JavaScript函数的事件.比方说,我们可以在用户点击某按钮时产生一个onClick事件来触发某个函数.事件在HTML页面中定义. 事件举例: 鼠标点击  页面或图像载入  鼠标悬浮于页面的某个热点之上  在表单中选取输入框  确认表单  键盘按键  注意:事件通常与函数配合使用,当事件发生时函数才会执行.

详解JavaScript中的异常处理方法_基础知识

 有三种类型的编程错误:(1)语法错误和(2)运行时错误(3)逻辑错误:语法错误: 语法错误,也被称为解析错误,在编译时进行传统的编程语言,并出现在JavaScript解释时. 例如,下面一行将导致一个语法错误,因为它缺少一个右括号: <script type="text/javascript"> <!-- window.print(; //--> </script> 当一个语法错误在JavaScript中出现,只有在同一个线程中包含的语法错误的影响

JavaScript中的this机制_基础知识

JavaScript有自己的一套this机制,在不同情况下,this的指向也不尽相同. 全局范围 console.log(this); //全局变量 全局范围使用this指向的是全局变量,浏览器环境下就是window. 注:ECMAScript5的strict模式不存在全局变量,这里的this是undefined. 函数调用中 function foo() { console.log(this); } foo(); //全局变量 函数调用中的this也指向全局变量. 注:ECMAScript5的

用JavaScript实现页面重定向功能的教程_基础知识

 页面重定向是什么? 当你点击一个URL来访问一个网页X,但在内部你被定向到另一页Y,仅仅是因为页面重定向.这一概念是从不同于JavaScript 页面刷新 . 可能有各种原因,为什么想从原来的页面重定向.下面列出的几个原因:     如果不喜欢你的域名,可以重定向到一个新的.同时,要引导所有访问者到新网站.在这种情况下,可以保持旧的域名,但放在一个页面到一个页面重定向使所有的旧域名游客可以来到新的域名.     基于浏览器的版本,或者名字不同的页面,也可以根据不同的国家,而不是用服务器端网页重

详解JavaScript中的every()方法_基础知识

 JavaScript 数组中的每个方法测试数组中的所有元素是否经过所提供的函数来实现测试.语法 array.every(callback[, thisObject]); 下面是参数的详细信息:     callback : 函数用来测试每个元素     thisObject : 对象作为该执行回调时使用 返回值: 返回true,如果此数组中的每个元素满足所提供的测试函数.兼容性: 这种方法是一个JavaScript扩展到ECMA-262标准;因此它可能不存在在标准的其他实现.为了使它工作,你需