瀏覽器視圖層級中的「根」：和的屬性研究

時間 2019-11-07

原文原文鏈接

作前端開發的同窗都會知道，每個UI系統（好比IOS或Android）中都會有一個view hierarchy（視圖層級）的概念，即全部的可視元素（大到一個頁面，小到一個button）都在一個樹形結構中，而樹形結構的」根節點「爲window，即整個屏幕或窗口。html

瀏覽器中的view hierarchy能夠認爲是整個dom結構，可是「根節點」很是混亂，咱們一般搞不清楚「根節點」是<body>、<html>、仍是window，仍是document？我對這幾個節點深刻研究了一下，如下是個人總結。前端

注：全部測試均在mac的chrome下，其餘瀏覽器未測試。不過原理基本相同git

我作了一個demo：http://linchen1987.github.io/tool/htmlbody/，你們能夠邊讀文章邊經過demo體會。github

1. 根View是誰？

demo中能夠看到：html和body沒有充滿整個屏幕，而是一個普普統統的塊級元素（你們能夠修改width和height屬性看效果）。咱們知道，body的父視圖是html，那麼html還會有一個父視圖，這個父視圖是什麼呢？是window！也是瀏覽器中的根元素！這個元素的實例即爲window對象（尺寸爲window.innerWidth和window.innerHeight，能夠監聽resize事件等等）。那麼document是什麼呢？document雖然是整個DOM結構的根節點，可是document並非顯示元素，因此與view hierarchy無關。chrome

結論：顯示元素中，根元素不是html，是window。不過咱們只會在body下建立子元素。瀏覽器的view hierarchy一直是這樣的：瀏覽器

windowdom

html測試

bodyspa

custom viewcode

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。