再次被JS气炸——<script>引用的位置

最新推荐文章于 2025-03-24 18:12:57 发布

鲤鱼旗上打妖怪

最新推荐文章于 2025-03-24 18:12:57 发布

阅读量3.1k

点赞数 1

本文链接：https://blog.youkuaiyun.com/liyuqi_liyuqi/article/details/51706060

版权

再练习使用image对象时，把<script>引用放在<head>中，被引用的js有时能用，有时无效，一开始以为是js代码本身的问题，我调试了一上午，最后实在找不到哪儿出了bug，我就把<script>引用放在了<html>文档下面，然后就正常运行了，懵逼脸！

我顺手百度了一下，内容如下：

按照惯例，所有的<script>元素都应该放在页面的<head>元素中。请注意：无论引用几个外部js文件，浏览器都会按照<script>元素在页面中出现的先后顺序对它们依次进行解析。换句话说，在第一个<script>元素包含的代码解析完成后，第二个<script>包含的代码才会被解析，然后才是第三个、第四个...
这种做法的目的就是把所有外部文件（包括CSS文件和JavaScript文件）的引用都放在相同的地方。可是，在文档的<head>元素中包含所有JavaScript文件，意味着必须等到全部JavaScript代码都被下载、解析和执行完成以后，才能开始呈现页面的内容（浏览器在遇到<body>标签时才开始呈现内容）。对于那些需要很多JavaScript代码的页面来说，这无疑会导致浏览器在呈现页面时出现明显的延迟，而延迟期间的浏览器窗口将是一片空白。为了避免这个问题，现代Web应用程序一般都会把全部JavaScript引用放在<body>元素中，放在页面的内容后面。这样，在解析包含的JavaScript代码之前，页面的内容将完全呈现在浏览器中。而用户也会因为浏览器窗口显示空白页面的时间缩短而感到打开页面的速度加快了。
或者也可以使用<script>标签的defer属性表明脚本在执行时不会影响页面的构造：<script type="text/javascript" defer="defer" src="example1.js"></script>
<script type="text/javascript" defer="defer" src="example2.js"></script>，即脚本会被延迟到整个页面都解析完毕后再运行。

上述两种写法的实际效果是一样的。但是，并非所有的浏览器都支持defer属性，有些浏览器会忽略这个属性，不延迟脚本的执行。

这条回答只说明<script>引用放在内容末尾是为了避免让用户等待，并没有解决我的问题。然后继续搜索，看见另外一个回答：

因为在<head>的时候，浏览器还没有解析<body>，生成DOM.

也就是说，当我的<script>引用放在<head>中时，此时页面没有DOM，js的一系列DOM操作都是无效的，才会导致我的代码无法运行。这条回答解决了我的问题。那么综合以上两个情况，把<script>引用或者js代码放在内容后面应该是良好的编码习惯咯！