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 相关文章推荐
jquery蒙版控件实现代码
Dec 08 Javascript
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
Jan 06 Javascript
JS函数重载的解决方案
May 13 Javascript
transport.js和jquery冲突问题的解决方法
Feb 10 Javascript
jquery获取css的color值返回RGB的方法
Dec 18 Javascript
纯JS实现轮播图
Feb 22 Javascript
用jquery获取select标签中选中的option值及文本的示例
Jan 25 jQuery
解析Json字符串的三种方法日常常用
May 02 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
Aug 16 Javascript
Vue框架TypeScript装饰器使用指南小结
Feb 18 Javascript
Vue环境搭建+VSCode+Win10的详细教程
Aug 19 Javascript
深入讲解Vue中父子组件通信与事件触发
Mar 22 Vue.js
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实现的限制IP投票程序IP来源分析
2016/05/04 PHP
PHP如何实现跨域
2016/05/30 PHP
JS日历 推荐
2006/12/03 Javascript
收藏Javascript中常用的55个经典技巧
2007/08/12 Javascript
js关闭模态窗口刷新父页面或跳转页面
2012/12/13 Javascript
jQuery中removeAttr()方法用法实例
2015/01/05 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
2015/03/02 Javascript
JS实现弹性菜单效果代码
2015/09/07 Javascript
深入理解JQuery中的事件与动画
2016/05/18 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
2016/08/05 Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
2017/01/19 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
2017/06/16 jQuery
Angular在模板驱动表单中自定义校验器的方法
2017/08/09 Javascript
JSON字符串操作移除空串更改key/value的介绍
2019/01/05 Javascript
JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
2020/04/28 Javascript
[01:08:24]DOTA2-DPC中国联赛 正赛 RNG vs Phoenix BO3 第一场 2月5日
2021/03/11 DOTA
Python实现简单登录验证
2016/04/13 Python
python实时获取外部程序输出结果的方法
2019/01/12 Python
ubuntu上安装python的实例方法
2019/09/30 Python
Python日期格式和字符串格式相互转换的方法
2020/02/18 Python
Django模板获取field的verbose_name实例
2020/05/19 Python
Python爬取微信小程序通用方法代码实例详解
2020/09/29 Python
Django windows使用Apache实现部署流程解析
2020/10/12 Python
css3动画 小球滚动 js控制动画暂停
2019/11/29 HTML / CSS
html5+css3之制作header实例与更新
2020/12/21 HTML / CSS
印度尼西亚最大的电商平台:Tokopedia(印尼版淘宝)
2017/12/02 全球购物
卡西欧G-SHOCK英国官网: 防水防震手表
2018/01/08 全球购物
某个公司的Java笔面试题
2016/03/11 面试题
Linux管理员面试经常问道的相关命令
2014/12/12 面试题
空中乘务员岗位职责
2014/03/08 职场文书
职务聘任书范文
2014/03/29 职场文书
模具设计与制造专业自荐书
2014/07/01 职场文书
大学生创业计划书
2014/08/14 职场文书
党员群众路线剖析材料
2014/10/08 职场文书
公务员政审材料范文
2014/12/23 职场文书
Mysql中调试存储过程最简单的方法
2021/06/30 MySQL