浏览器视图层级中的“根”：<html>和<body>的属性研究

做前端开发的同学都会知道，每一个UI系统（比如IOS或Android）中都会有一个view hierarchy（视图层级）的概念，即所有的可视元素（大到一个页面，小到一个button）都在一个树形结构中，而树形结构的”根节点“为window，即整个屏幕或窗口。

浏览器中的view hierarchy可以认为是整个dom结构，但是“根节点”非常混乱，我们通常搞不清楚“根节点”是<body>、<html>、还是window，还是document？我对这几个节点深入研究了一下，以下是我的总结。

注：所有测试均在mac的chrome下，其他浏览器未测试。不过原理基本相同

我做了一个demo：http://linchen1987.github.io/tool/htmlbody/，大家可以边读文章边通过demo体会。

1. 根View是谁？

demo中可以看到：html和body没有充满整个屏幕，而是一个普普通通的块级元素（大家可以修改width和height属性看效果）。我们知道，body的父视图是html，那么html还会有一个父视图，这个父视图是什么呢？是window！也是浏览器中的根元素！这个元素的实例即为window对象（尺寸为window.innerWidth和window.innerHeight，可以监听resize事件等等）。那么document是什么呢？document虽然是整个DOM结构的根节点，但是document并不是显示元素，所以与view hierarchy无关。

结论：显示元素中，根元素不是html，是window。不过我们只会在body下创建子元素。浏览器的view hierarchy一直是这样的：

window

html

body

custom view

2. window，html和body的overflow属性

window像其他元素一样，是具有overflow属性的。window的overflow属性只有两个值：hidden和scroll。window的overflow属性取决于html和body的overflow属性，并且window可能改变html和body的overfow属性，很神奇吧。规则如下：

window会首先查找html的overflow属性。如果html的overflow为scroll或者hidden，则据为己用，html的实际overflow效果则变为visible。
当html设置visible时，window则会查找body的overflow属性，与html一样，如果为scroll或者hidden，则据为己用，此时body的实际overflow效果变为visible。
当html和body均设为visible时，window不找他们俩的麻烦了，自己默默设定为scroll。这也是默认的情况。

结论：

html不论overflow设置什么，最终效果均为visible。
html为hidden或scroll时，window的overflow取决于html；
html为visible时，body不论overflow设置什么，最终效果均为visible。
html为visible，body为hidden或scroll时，window的overflow取决于body的overflow
html为visible，body为visible时，window为scroll

3. window，html和body的background属性

同overflow，window也具有background属性。window的background属性取决于html和body，并且会影响html和body。结论如下：

html只要设置了background（即background不为transparent），window会将html的background据为己用，而html的background则变为transparent。
html为transparent时，只要body只要设置了background（即background不为transparent），window的background会将body的transparent据为己用，而body的background则变为transparent。
html和body的background都为transparent时，window的background为浏览器默认的颜色（白色），这也是默认的情况。

欢迎大家交流讨论，直接留言或邮箱linchen.1987@foxmail.com。