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

Posted 2022-12-19 胡开心同学

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

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尾部即可。