深入浅出javascript（四）网页运行原理

这一篇是根据不同的书本知识归纳的内容，解答的问题是浏览器是如何工作的？

另外，还有一些长篇的内容，写的是浏览器内部如何架构的，这些内容非常复杂艰深，比现在所写的内容又低了一个层级，希望有时间能总结贴出来。

一、打开浏览器窗口，产生window对象。

打开网页，首先弹出一个窗口，也就是window对象。这个对象是浏览器自动创建出来的。

根据JS的知识，任何一个对象都有属性和方法，属性又可以分为各种样式，比如数值number,字符串string，甚至属性也是一个对象，这样层层嵌套。那么，如何知道这个window对象到底有多少个属性和多少个方法呢？

代码如下：

<script type="text/javascript">
for(var key in window)
{
document.write(key+"->"+typeof(window[key])+"<br>");
}
</script>

//生成结果如下：
top->object
location->object
document->object
window->object
external->object
chrome->object
key->string
speechSynthesis->object
caches->object
....

可以看到window有非常多的属性和方法（function），同时，这个window对象也是JS运行的全局对象和全局作用域对象。这个怎么理解呢？

代码示例：

<script type="text/javascript">
var a=10; //定义一个变量
function f() //定义一个函数
{
alert("ok");
}
var _object={};//定义一个对象
document.write(a);
//或document.write(window.a);
f();
//或:window.f();
</script>

代段说明一个问题：无论创建的是什么，都是window对象之下，可以用window.的形式引用，只因为是全局的，所以会把window前缀省略掉。

二、文档对象document

文档对象document，从外观上看就是加载网页的地方，这和window有点区别。但不管怎样，document对象却是window对象的一个属性，通过遍历window对象可以看到。

归结来说：

window对象下有很多属性，属性也可以是一个对象，而document对象是window对象的一个属性。

正如上文所说，window对象是全局的，因此window可以省略。

完整的写法可以是这样：

window.document.write("ok");

省略后可以写成：

document.write("ok");

这样，就搞清楚了到底谁是谁的问题，一个东西到底是从哪里来的问题。

根据上面遍历window对象的方法，我们同样可以追察document对象到底有多少个属性和方法。

<script type="text/javascript">
for(var key in window.document)
{
document.write(key+"->"+typeof(window.document[key])+"<br>");
}
</script>

结果可以看到，它也有很多属性和方法。

有了这些概念，再去引用各个属性和方法，就知道是怎么回事儿。

三、文档对象模型

这一块知识，网上有很多，就不再详写。简单说就是，网页被加载之后，就生成一个个的对象，可以引用、操作，还可以动态创建。