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


Posted in Javascript onApril 11, 2013

在制作网页的过程中,我们经常写类似下面的代码:
[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属性,有些浏览器会忽略这个属性,不延迟脚本的执行。
Javascript 相关文章推荐
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
Dec 14 Javascript
document.execCommand()的用法小结
Jan 08 Javascript
JS中的数组的sort方法使用示例
Jan 22 Javascript
jQuery实现伸展与合拢panel的方法
Apr 30 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
Nov 29 Javascript
JSON 数据详解及实例代码分析
Jan 20 Javascript
vue 添加vux的代码讲解
Nov 30 Javascript
浅谈vue项目优化之页面的按需加载(vue+webpack)
Dec 11 Javascript
Angular使用Restful的增删改
Dec 28 Javascript
使用 Element UI Table 的 slot-scope方法
Oct 10 Javascript
使用axios请求时,发送formData请求的示例
Oct 29 Javascript
如何基于filter实现网站整体变灰功能
Apr 17 Javascript
JS添加删除一组文本框并对输入信息加以验证判断其正确性
Apr 11 #Javascript
如何使用json在前后台进行数据传输实例介绍
Apr 11 #Javascript
在javascript中对于DOM的加强
Apr 11 #Javascript
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
Apr 11 #Javascript
在javascript中关于节点内容加强
Apr 11 #Javascript
onkeydown事件解决按回车键直接提交数据的需求
Apr 11 #Javascript
jQuery实用基础超详细介绍
Apr 11 #Javascript
You might like
PHP Warning: PHP Startup: Unable to load dynamic library \ D:/php5/ext/php_mysqli.dll\
2012/06/17 PHP
php实现头像上传预览功能
2017/04/27 PHP
VBScript版代码高亮
2006/06/26 Javascript
javascript getElementsByClassName函数
2010/04/01 Javascript
Jquery实现的tab效果可以指定默认显示第几页
2013/10/16 Javascript
ExtJS4给Combobox设置列表中的默认值示例
2014/05/02 Javascript
JS小游戏之宇宙战机源码详解
2014/09/25 Javascript
基于jQuery实现网页进度显示插件
2015/03/04 Javascript
自动完成的搜索框javascript实现
2016/02/26 Javascript
jQuery的ajax和遍历数组json实例代码
2016/08/01 Javascript
ionic实现带字的toggle滑动组件
2016/08/27 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
2016/12/07 Javascript
AngularJS服务service用法总结
2016/12/13 Javascript
vue+vue-validator 表单验证功能的实现代码
2017/11/13 Javascript
ligerUI---ListBox(列表框可移动的实例)
2017/11/28 Javascript
vue.js中$set与数组更新方法
2018/03/08 Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
2018/04/21 Javascript
React降级配置及Ant Design配置详解
2018/12/27 Javascript
关于vue项目中搜索节流的实现代码
2019/09/17 Javascript
vue-autoui自匹配webapi的UI控件的实现
2020/03/20 Javascript
[06:37]2014DOTA2国际邀请赛 昔日王者渴望重回巅峰
2014/07/12 DOTA
Python模拟脉冲星伪信号频率实例代码
2018/01/03 Python
Jupyter notebook远程访问服务器的方法
2018/05/24 Python
对Python+opencv将图片生成视频的实例详解
2019/01/08 Python
python pymysql链接数据库查询结果转为Dataframe实例
2020/06/05 Python
Python2.6版本pip安装步骤解析
2020/08/17 Python
利用python绘制中国地图(含省界、河流等)
2020/09/21 Python
HearthSong官网:儿童户外玩具、儿童益智玩具
2017/10/16 全球购物
车间调度岗位职责
2013/11/30 职场文书
成龙霸王洗发水广告词
2014/03/14 职场文书
2014年社区妇联工作总结
2014/12/02 职场文书
行政处罚事先告知书
2015/07/01 职场文书
学校扫黄打非工作总结
2015/10/15 职场文书
MySQL 如何分析查询性能
2021/05/12 MySQL
pytorch中的torch.nn.Conv2d()函数图文详解
2022/02/28 Python
《堡垒之夜》联动《刺客信条》 4月7日正式上线
2022/04/06 其他游戏