瀏覽器視圖層級中的“根”：<html>和<body>的屬性研究

FuisonDesign 發(fā)布于2019-08-01 14:45 / 2468人閱讀

摘要：瀏覽器中的可以認(rèn)為是整個結(jié)構(gòu)，但是根節(jié)點(diǎn)非?；靵y，我們通常搞不清楚根節(jié)點(diǎn)是還是，還是我對這幾個節(jié)點(diǎn)深入研究了一下，以下是我的總結(jié)。結(jié)論顯示元素中，根元素不是，是。

做前端開發(fā)的同學(xué)都會知道，每一個UI系統(tǒng)（比如IOS或Android）中都會有一個view hierarchy（視圖層級）的概念，即所有的可視元素（大到一個頁面，小到一個button）都在一個樹形結(jié)構(gòu)中，而樹形結(jié)構(gòu)的”根節(jié)點(diǎn)“為window，即整個屏幕或窗口。

瀏覽器中的view hierarchy可以認(rèn)為是整個dom結(jié)構(gòu)，但是“根節(jié)點(diǎn)”非常混亂，我們通常搞不清楚“根節(jié)點(diǎn)”是、、還是window，還是document？我對這幾個節(jié)點(diǎn)深入研究了一下，以下是我的總結(jié)。

注：所有測試均在mac的chrome下，其他瀏覽器未測試。不過原理基本相同

我做了一個demo：http://linchen1987.github.io/tool/htmlbody/，大家可以邊讀文章邊通過demo體會。

1. 根View是誰？

demo中可以看到：html和body沒有充滿整個屏幕，而是一個普普通通的塊級元素（大家可以修改width和height屬性看效果）。我們知道，body的父視圖是html，那么html還會有一個父視圖，這個父視圖是什么呢？是window！也是瀏覽器中的根元素！這個元素的實(shí)例即為window對象（尺寸為window.innerWidth和window.innerHeight，可以監(jiān)聽resize事件等等）。那么document是什么呢？document雖然是整個DOM結(jié)構(gòu)的根節(jié)點(diǎn)，但是document并不是顯示元素，所以與view hierarchy無關(guān)。

結(jié)論：顯示元素中，根元素不是html，是window。不過我們只會在body下創(chuàng)建子元素。瀏覽器的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屬性，很神奇吧。規(guī)則如下：

window會首先查找html的overflow屬性。如果html的overflow為scroll或者h(yuǎn)idden，則據(jù)為己用，html的實(shí)際overflow效果則變?yōu)関isible。

當(dāng)html設(shè)置visible時，window則會查找body的overflow屬性，與html一樣，如果為scroll或者h(yuǎn)idden，則據(jù)為己用，此時body的實(shí)際overflow效果變?yōu)関isible。

當(dāng)html和body均設(shè)為visible時，window不找他們倆的麻煩了，自己默默設(shè)定為scroll。這也是默認(rèn)的情況。

結(jié)論：

html不論overflow設(shè)置什么，最終效果均為visible。

html為hidden或scroll時，window的overflow取決于html；

html為visible時，body不論overflow設(shè)置什么，最終效果均為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。結(jié)論如下：

html只要設(shè)置了background（即background不為transparent），window會將html的background據(jù)為己用，而html的background則變?yōu)閠ransparent。

html為transparent時，只要body只要設(shè)置了background（即background不為transparent），window的background會將body的transparent據(jù)為己用，而body的background則變?yōu)閠ransparent。

html和body的background都為transparent時，window的background為瀏覽器默認(rèn)的顏色（白色），這也是默認(rèn)的情況。

歡迎大家交流討論，直接留言或郵箱[email protected]。