1、标签的位置
按照惯例，所有<script>元素都应该放在页面的<head>元素中，例如：
<html>
<head>
<title> New Document </title>
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</head>
<body>
<!--这里放内容-->
</body>
</html>
这种做法的目的是把所有外部文件（包含CSS文件和javascript文件）的引用都放在相同的地方。可是，在文档<head>元素中包含所有的js文件，意味着必须等到全部javascript代码都被下载、解析和执行完成之后，才能开始呈现页面的内容（浏览器在遇到<body>标签时才开始呈现内容）。对于那些需要很多javascript代码的页面来说，这无疑会导致浏览器在呈现页面时出现明显的延迟，而延迟期间的浏览器窗口中将是一片空白。为了避免这个问题，现代web应用程序一般都把全部javascript引用放在<body>元素中，放在页面的内容后面，如下例所示：
<html>
<head>
<title> New Document </title>
</head>
<body>
<!--这里放内容-->
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</body>
</html>
这样，在解析包含的javascript代码之前，页面的内容将完全呈现在浏览器中。而用户也会因为浏览器窗口显示空白页面的时间缩短而感到打开页面的速度加快了。
2、延迟脚本
HTML4.0为<script>标签定义了defer的属性。这个属性的用途是表明脚本在执行时不会影响页面的构造。也就是说，脚本会延迟到整个页面都解析完毕后在执行。因此，在<script>元素中设置defer属性（如下面的例子），实际上与上面介绍的把<script>元素放在页面底部的效果是一样的。
<html>
<head>
<title> New Document </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>
这个例子中，虽然我们把<script>元素放在了文档的<head>元素中，但其中包含的脚本将延迟到浏览器遇到</html>标签后在执行。
不过，问题是并非所有浏览器都支持defer属性，IE和firefox3.0是目前唯一支持defer属性的主流浏览器。其他浏览器则会忽略这个属性，不延迟脚本的执行
同时其它浏览器可以使用async="true"属性，声明脚本异步加载。
分享到：
相关推荐
<br>Safari 2 3575ms 475ms 753% <br>Opera 9.1 3196ms 326ms 980% <br>Average improvement: 867% <br><br>下表为jQuery1.1.3与常用的一些JS库选择器的对比：<br>Browser Prototype jQuery Mootools Ext Dojo <br>...
参数1：要粘贴的文本，例：'这里的内容完全原样显示<strong>aaa</strong>' 参数2：是否覆盖粘贴，留空(覆盖粘贴)、true(粘贴在光标选择区域之前)、false(粘贴在光标选择区域之后) formatXHTML：格式化XHTML代码 参数...
关于对延迟脚本的思考 async和defer属性的脚本，相信大家都听说过，但是他的真正执行细节是什么样子的？...script标签，带async和defer属性等，通过document.createElement(‘script’)创建并且没有指定scrip
向html页面中插入javascript代码的主要方法就是通过script标签。... script标签存在两个属性，defer和async，因此script标签的使用分为三种情况： 1.[removed][removed] 没有defer或async属性，
Delayed JS 是一种轻量级解决方案，旨在通过动态加载和依赖跟踪来延迟 JavaScript 文件和脚本的加载，而无需外部加载大型库。 它有助于防止页面呈现阻塞，从而使页面加载速度更快，并满足谷歌的页面速度建议。 使用...
浏览器可以暂停脚本执行，直到加载 CSS 文件，除非脚本标签在 CSS 标签之前。 在开始之前，确保<head>看起来像这样： <head> <meta charset="utf-8"> <meta name="viewport" content=...
<DBSERVER_NAME>192.168.1.12</DBSERVER_NAME> 7、Mercury Tours 样例程序 启动：http://192.168.1.2:8080/mtours 注意安装JVM才能“View Calendar” 4、创建和定义测试需求、测试需求管理、跟踪 定义需求 ...
浏览器在解析HTML页面的过程中每遇到一个[removed]标签，都会因执行脚本而导致一定的延时，因此最小化延迟时间将会明显改善页面的总体性能。 通常一个大型网站或网络应用需要依赖数个javascript文件。你可以把多个...
一、前言 看到的前辈写的代码如下 [removed][removed] 竟然同时有async和defer属性，心想着肯定是前辈老司机的什么黑科技，两个一块儿肯定会发生什么神奇化学...也就是说，脚本会被延迟到整个页面都解析完毕后再运行
角度承诺React 触发延迟调用并在按钮本身中显示状态和结果的按钮或链接的 Angular 指令。如何使用安装通过凉亭安装： $ bower install angular-promise-react --save或从 github 下载。 在 angularjs 的一个之后包含...
延迟脚本执行，相当于将script标签放入页面body标签的底部，js脚本会在document的DOMContentLoaded之前执行。除IE和较新版本的Firefox外，其他浏览器并未支持。 language: 已废弃。大部分浏览器会忽略该值。 src: 可...
flussonic-mse-player flussonic-mse-player是一个JavaScript库，用于播放依赖于... 由于该库通过脚本标签包含，因此可以在window.FlussonicMsePlayer上访问。 < script type =" text/javascript " src =
-如何自定义Javascript脚本和C#处理函数来响应键盘事件。 -为Tree增加AutoLeafIdentification属性。 -增加示例(tree_auto_leaf_identification.aspx)(feedback:wdrabbit)。 +2009-11-17 v2.1.4 -修正...
[removed]标签 在HTML5中script主要有以下几个属性：async，defer，charset，src，type， async（可选）： 关键词：异步脚本，外部文件，立即下载；... 关键词：延迟脚本，外部文件，延迟加载；
-如何自定义Javascript脚本和C#处理函数来响应键盘事件。 -为Tree增加AutoLeafIdentification属性。 -增加示例(tree_auto_leaf_identification.aspx)(feedback:wdrabbit)。 +2009-11-17 v2.1.4 -修正...
最近为了补js的基础，开坑javascript高程，这书基础部分写得很详细很好读...延迟脚本：定义defer属性，表明脚本在执行时不会影响页面的构造，也就是脚本会被延迟到整个页面都解析完毕再运行。 HTML5中规范以上两个脚
标签之前添加脚本标签。 adblock.check()接受 2 个参数：一个回调函数和一个可选的延迟。 < script src =" adblockcheck.js " > </ script >< script >adblock . check ( function ( active ) { ...
延迟[delay]：序列图像之间的延迟。单位是滴答，即1/18.2秒。 序列数[last_num]：序列图像总数（2位数，从1开始计数）。 偏移[x]、[y]：图像偏移，单位像素。 起始图像文件 START_FILE 命名规则：*n.??? n: 1-9 ...
没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。 [removed][removed] 有 async，加载和...
标签底部的位置，以保证页面在脚本运行之前完成解析尽量减少对整个页面下载的影响 2、限制页面的[removed]总数也可以改善性能。每当页面解析碰到一个[removed]标签时， 紧接着有一段时间用于代码执行。最小化这些...