本文探讨了JavaScript在浏览器中的加载与执行过程，通过实例演示了HTML与JS的顺序加载原理，并对比了不同DOM操作方法对页面的影响。
在编写第一个小程序之前，我们要认识一下浏览器对 JS 的处理方式，其实是一件很简单的事情：
在页面加载完成之前，浏览器按顺序加载所有的 HTML 内容及 JS 内容，直到 window.onload 标记为加载完毕
在这个过程中，JS 的内容可以直接被解析
可以用下面这个例子来检验一下
<script>
addLine();
</script>
<script>
function addLine(){
document.write('<div style="border:1px solid #CCCCCC;line-height:20px;text-align:center;background:#EEEEEE;">this is a line.</div>');
}
addLine();
</script>
<input type="button" onclick="addLine();" value="add a new line" />
<script>
addLine();
</script>
addLine();
</script>
<script>
function addLine(){
document.write('<div style="border:1px solid #CCCCCC;line-height:20px;text-align:center;background:#EEEEEE;">this is a line.</div>');
}
addLine();
</script>
<input type="button" onclick="addLine();" value="add a new line" />
<script>
addLine();
</script>
首先，页面会有一个错误的提示，addLine() 未定义，我们把调用写的太靠前了，写在了 addLine 函数定义之前了；
其次，我们看到了，页面上有两个 box ，中间书写着 this is a line.，而且一个在按钮之前，一个在按钮之后，那么，这一点就验证了，JS 和 HTML 是顺序加载的说法；
最后，当我们在点击页面上这个按钮的时候，不管页面是否加载完成，都会强使当前页面完成，既 onload 标记为真，那么我们在点击这个 add a new line 按钮的时候，就是相当与在页面加载完之后再运行 addLine() 函数。我们可以看到的效果是，当前页面的地址未发生改变，但原来的内容完全不见了，只留下了一个 this is a line. 的盒子。
那这是什么原因造成的呢？
这里又回到了浏览器对 JS 的处理：
在页面加载完成之后，如果再次发生页面解析的动作，则页面只显示当前解析的部分
在上边的例子中，页面加载完成之后，我们点击按钮后的动作为输出一个带有文字的盒子，那么，这个动作就对浏览器中的内容要进行从新解析，而解析的结果就是输出一个盒子，但原来的内容全都不见了。
那么，如果我们把上边的代码改一下呢？
<script>
function addLine(){
var obj = document.createElement('div');
obj.style.background = '#EEEEEE';
obj.style.border = '1px solid #CCCCCC';
obj.style.lineHeight = '20px';
obj.style.textAlign = 'center';
obj.innerHTML = 'this is a line.';
document.body.appendChild(obj);
}
</script>
<body>
<input type="button" onclick="addLine();" value="add a new line" />
</body>
function addLine(){
var obj = document.createElement('div');
obj.style.background = '#EEEEEE';
obj.style.border = '1px solid #CCCCCC';
obj.style.lineHeight = '20px';
obj.style.textAlign = 'center';
obj.innerHTML = 'this is a line.';
document.body.appendChild(obj);
}
</script>
<body>
<input type="button" onclick="addLine();" value="add a new line" />
</body>
这个小程序则没有把以前的东西冲掉，每点一次按钮，都增加一个盒子，那这是为什么呢？
这是因为浏览器对发生的解析的动作也有一个范围，第一个例子的范围是整个浏览器输出，而第二个例子则是在页面内追加，效果当然会有不同。
小技巧：
实际上，我们在看别人的网站的时候，如果有好的特效，我们经常会去查看他的源文件，但事实上，我们看到的内容是解析前的内容，很多数据并不与当前页面显示的效果相同，而各浏览器都支持一种方式：在地址栏输入 JS 指令；比如在地址栏输入 javascript:alert(document.body.innerHTML); 这对我们在检测页面中的各种数据是很有帮助的。
扫一扫
319
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
