首页 > web前端 > js教程 > javascript标签在页面中的位置探讨_基础知识

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

WBOY
发布: 2016-05-16 17:37:23
原创
1050 人浏览过

在制作网页的过程中,我们经常写类似下面的代码:
[html]

复制代码 代码如下:



Example HTML Page









Example HTML Page








按照惯例,所有的<script>元素都应该放在页面的<head>元素中。请注意:无论引用几个外部js文件,浏览器都会按照<script>元素在页面中出现的先后顺序对它们依次进行解析 。换句话说,在第一个<script>元素包含的代码解析完成后,第二个<script>包含的代码才会被解析,然后才是第三个、第四个... <br>这种做法的目的就是把所有外部文件(包括CSS文件和JavaScript文件)的引用都放在相同的地方。可是,在文档的<head>元素中包含所有JavaScript文件,意味着必须等到全部JavaScript代码都被下载、解析和执行完成以后,才能开始呈现页面的内容(浏览器在遇到<body>标签时才开始呈现内容)。对于那些需要很多JavaScript代码的页面来说,这无疑会导致浏览器在呈现页面时出现明显的延迟,而延迟期间的浏览器窗口将是一片空白。为了避免这个问题,现代Web应用程序一般都会把全部JavaScript引用放在<body>元素中,放在页面的内容后面,如下所示: <br>[html] <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="92026" class="copybut" id="copybut92026" onclick="doCopy('code92026')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code92026"> <br><html> <br><head> <br><title>Example HTML Page</title> <br></head> <br><body> <br><!-- 这里放内容 --> <br><script type="text/javascript" src="example1.js"></script>





Example HTML Page








这样,在解析包含的JavaScript代码之前,页面的内容将完全呈现在浏览器中。而用户也会因为浏览器窗口显示空白页面的时间缩短而感到打开页面的速度加快了。

或者也可以使用<script>标签的defer属性表明脚本在执行时不会影响页面的构造,即脚本会被延迟到整个页面都解析完毕后再运行,代码如下: <br>[html] <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="70000" class="copybut" id="copybut70000" onclick="doCopy('code70000')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code70000"> <br><html> <br><head> <br><title>Example HTML Page</title> <br><script type="text/javascript" defer="defer" src="example1.js"></script>








Example HTML Page








上述两种写法的实际效果是一样的。但是,并非所有的浏览器都支持defer属性,有些浏览器会忽略这个属性,不延迟脚本的执行。
相关标签:
来源:php.cn
上一篇:基于JavaScript实现 获取鼠标点击位置坐标的方法_基础知识 下一篇:JS添加删除一组文本框并对输入信息加以验证判断其正确性_javascript技巧
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
相关专题
更多>
热门推荐
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板