javascript标签在页面中的位置探讨
JavaScript 页面 标签 位置 探讨
2023-06-13 09:14:49 时间
在制作网页的过程中,我们经常写类似下面的代码:
[html]
复制代码代码如下:
[html]
<html>
<head>
<title>ExampleHTMLPage</title>
<scripttype="text/javascript"src="example1.js"></script>
<scripttype="text/javascript"src="example2.js"></script>
</head>
<body>
<!--这里放内容-->
</body>
</html>
<html>
<head>
<title>ExampleHTMLPage</title>
<scripttype="text/javascript"src="example1.js"></script>
<scripttype="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>ExampleHTMLPage</title>
</head>
<body>
<!--这里放内容-->
<scripttype="text/javascript"src="example1.js"></script>
<scripttype="text/javascript"src="example2.js"></script>
</body>
</html>
<html>
<head>
<title>ExampleHTMLPage</title>
</head>
<body>
<!--这里放内容-->
<scripttype="text/javascript"src="example1.js"></script>
<scripttype="text/javascript"src="example2.js"></script>
</body>
</html>
这样,在解析包含的JavaScript代码之前,页面的内容将完全呈现在浏览器中。而用户也会因为浏览器窗口显示空白页面的时间缩短而感到打开页面的速度加快了。
或者也可以使用<script>标签的defer属性表明脚本在执行时不会影响页面的构造,即脚本会被延迟到整个页面都解析完毕后再运行,代码如下:
[html]
<html>
<head>
<title>ExampleHTMLPage</title>
<scripttype="text/javascript"defer="defer"src="example1.js"></script>
<scripttype="text/javascript"defer="defer"src="example2.js"></script>
</head>
<body>
<!--这里放内容-->
</body>
</html>
<html>
<head>
<title>ExampleHTMLPage</title>
<scripttype="text/javascript"defer="defer"src="example1.js"></script>
<scripttype="text/javascript"defer="defer"src="example2.js"></script>
</head>
<body>
<!--这里放内容-->
</body>
</html>
上述两种写法的实际效果是一样的。但是,并非所有的浏览器都支持defer属性,有些浏览器会忽略这个属性,不延迟脚本的执行。
相关文章
- 用JavaScript制作页面特效
- JavaScript页面后退或关闭
- 【说站】javascript原始类型是什么?如何鉴别?
- 【说站】JavaScript插入html页面的方法
- 【说站】javascript使用new创建对象
- JavaScript——动画函数封装
- JavaScript BOM
- eXtplorer:基于 PHP 和 Javascript 的文件管理程序
- Node.js新手必须知道的4个JavaScript概念详解架构师
- JavaScript学习总结(十七)——Javascript原型链的原理详解编程语言
- Javascript常用运算符(Operators)-javascript基础教程
- javascript装载iframe子页面,自适应高度
- javascript页面划词搜索JS
- javascript数组使用方法汇总
- 默认让页面的第一个控件选中的javascript代码
- JavaScript数组循环引起的思考
- javascript广告后加载,加载完页面再加载广告
- javascript静态树菜单实现代码
- javascript通过url向jsp页面传递中文参数导致乱码解决方案
- JavaScript根据数据生成百分比图和柱状图的实例代码
- JavaScript将页面表格导出为Excel的具体实现
- javascript实现json页面分页实例代码
- Javascript检查图片大小不要让大图片撑破页面
- JavaScript中发布/订阅模式的简单实例
- javascript实现切换td中的值
- JavaScript中判断页面关闭、页面刷新的实现代码
- javascript刷新父页面的各种方法汇总
- 禁用页面部分JavaScript不是全部而是部分