本文主要是介绍文盲的 JavaScript 经验谈之二：了解一下浏览器对 JS 的处理，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
文盲的 JavaScript 经验谈之一：认识 JavaScript
文盲的 JavaScript 经验谈之二：了解一下浏览器对 JS 的处理
文盲的 JavaScript 经验谈之三：认识 arguments
文盲的 JavaScript 经验谈之四：在 JS 中使用闭包
在编写第一个小程序之前，我们要认识一下浏览器对 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" οnclick="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" οnclick="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" οnclick="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" οnclick="addLine();" value="add a new line" />
</body>
这个小程序则没有把以前的东西冲掉，每点一次按钮，都增加一个盒子，那这是为什么呢？
这是因为浏览器对发生的解析的动作也有一个范围，第一个例子的范围是整个浏览器输出，而第二个例子则是在页面内追加，效果当然会有不同。
小技巧：
实际上，我们在看别人的网站的时候，如果有好的特效，我们经常会去查看他的源文件，但事实上，我们看到的内容是解析前的内容，很多数据并不与当前页面显示的效果相同，而各浏览器都支持一种方式：在地址栏输入 JS 指令；比如在地址栏输入 javascript:alert(document.body.innerHTML); 这对我们在检测页面中的各种数据是很有帮助的。
这篇关于文盲的 JavaScript 经验谈之二：了解一下浏览器对 JS 的处理的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
