html引用外部js文件不能执行

Posted 2023-04-08

初学者，想用jquery框架，将js放在外部文件中，html中既引用了jquery.js，也加载了我所放置的外部文件js,但是很奇怪，html 就是不能执行，将相同的代码复制到html文件中便可以执行了，不知道这是为什么？求各路大神帮忙解答，，谢谢！！

因为没看到你的代码，按照以下看看哪里有问题。
1、jquery文件必须放在外部文件之前。
2、文件地址是否出错了。
<script type='text/javascript' src='XXXX/Jquery文件.js'></script>
<script type='text/javascript' src='XXXX/外部文件.js'></script>追问

task.js里面的代码放在html中没有任何问题，放在js文件里就什么都没有了，结尾还有个，没复制进去

我明白了，外部文件中不能加标签是吧？好傻啊，谢谢啊！！

参考技术A 你的js文件中不要有<script></script>

HTML文档引用外部js文件失效问题

一：首先应该明确的几个问题：

1、在HTML中，使用JavaScript脚本代码的三种方式

（1）在script元素定义，其间的脚本代码在文档加载后顺序执行，并且执行一次。

（2）脚本代码可以定义在内建事件属性值中，当该事件被触发，就会执行属性值中的脚本代码。eg：

<button onclick = "javascript:所运行的Javascript语句"/>

(3)脚本代码可以位于一个独立的以.js为扩展名的源文件中。

2、脚本代码位置问题：

（1）script脚本代码可以在文档中包含一段脚本代码，该元素可以在HTML文档中出现任意次数，而且，该元素可以位于head元素或body元素内。

3、html文档的解析规则：

1html字符串被浏览器接收后一句一句读取并解析
2如果解析到link标签，便发送请求获取css；
3解析到script标签，发送请求获取js后并执行相应的代码
4解析到img后会请求图片资源
5在解析html过程中构建dom树，解析css等过程中构建渲染树，递归布局后进行页面绘制

从上到下进行解析。

二、HTML文档引用js失效问题

1、HTML文档解析是从上到下进行，就会出现CSS和JS解析顺序问题

CSS不阻塞DOM的加载和解析（它只阻塞DOM的渲染呈现。这里谈加载），不会阻塞其它资源的加载(比如图片)，但是会阻塞 后续JS 文件的执行（原因之一是，js执行代码可能会依赖到css样式。css只阻塞执行而不阻塞js的加载）。
鉴于上面的特性，当css后面存在js的时候，css会间接地阻塞js后面资源的加载（css阻塞js，js阻塞dom）。因此将脚本文件放到 body 底部(但还是在</body>之前)就可以起到很不错的优化效（遵循先解析再渲染再执行script这个顺序）。可以将js文件或script元素的脚本代码放置在head中，但为了避免不必要的解析错误，直接将其放置在body尾部即可。