Javascript加载机制

一、js代码的加载次序

1、当js代码直接嵌入到html中时：

当你在浏览器中运行以上代码时，点击 这个input元素，则正常弹出 “我的button”
你再运行以下代码，对比两个效果：

此时就不是弹出 "我是button" 这些文字了，而是没反应，浏览器还会给你报个 Uncaught TypeError: Cannot set property 'onclick' of null 错误。

其实你了解了html的加载机制后，就会懂得报错的原因了。
因为在html中，元素的加载是从上往下加载的。
第一段代码浏览器先加载了 ,所以后面的js能获得到 bu的对象。

第二段代码浏览器则是先加载了 bu 的对象，可是这时，input type="button" value="我是 button" id="bu">这个根本还没有加载，js获取不到，当然只能报错了。

2、从外部引入js文件

以下是相应的test.js文件

var bObj=document.getElementById("bu");
bObj.onclick= objclick;
function objclick()
{
    alert(this.value)
};

以上代码运行，则会报错，原因和前面的类似，也是因为还未加载到 html 中的input元素，js就开始先获取bu的对象，然而却获取不到，只能报错。

以上代码运行，则正常执行，点击 input ，也正常输出 “我是button”, 原因如上

二、区块加载

工作时，遇到了个很有趣的现象，

当浏览器运行这个文件时，猜猜，它会输出什么？？？？

想到了吗，这里由我来告诉你吧
它会输出 11 、1111
这里其实可以把js的加载看作是一个像区块的加载

前面一个区块，没有语法错误，不会影响到当前区块里面其他js代码的执行。

而这个区块中的ale 语法错误，导致浏览器报错，影响了这个区块的执行
可是这里的报错，却不会影响到其他区块代码的执行。所以能够输出 11、1111

所以我总结，每个中的代码在报错机制中，是独立运行，互不干扰的。