一、在介紹domready之前,先了解下相關的知識
1、html是一種標記語言,告訴我們這頁面裡面有什麼內容,但是行為互動則要通過dom操作來實現,但是注意:不要把尖括號裡面的內容看作是dom!
2、html是要通過瀏覽器解析之後才會轉換成為dom節點
一般地,但我們向瀏覽器中輸入乙個位址,開始載入頁面到我們看到頁面的內容為止,這期間就有乙個dom節點構建的過程(瀏覽器將html標籤轉換為dom節點)。
當前頁面上的所有的html標籤都轉換成dom節點,這就叫dom樹建完,簡稱為domready.
3、瀏覽器是自上向下,從左往右,html字串標籤乙個乙個的讀入,頁面上會有很多的標籤,響相應的會生成很多的對應的dom,每種標籤對應的規則不一樣,有的標籤下面可以新增任意的html標籤,有的標籤下面卻只能加規定的標籤,如標籤下面就只能是或者如果你加其他的標籤比如,瀏覽器則不會解釋這個標籤,又比如下面規定只能加文字。
4、一般的html標籤的都轉換成dom節點的速度很快,但是有寫卻很慢,比如,外部指令碼檔案,外部css樣式表,等的檔案,當瀏覽器解釋到這一類的標籤,回去指定的路徑載入對應的檔案,
5、因為瀏覽器渲染引擎是單執行緒的,如果頭部指令碼檔案過多過大,會產生"白屏"現象,所以為了防止這種情況,我們應該將所有的指令碼檔案都放到標籤之前,這一點在雅虎軍規中也有提到。
6、此外, style標籤與link標籤,它們在載入樣式檔案時是不會堵塞,但它們一旦非同步載入好,就立即開始渲染已經構建好的元素節點們, 這可能會引起reflow, 這也影響速度.
7、另乙個影響dom構建的標籤是iframe,他不會堵塞dom構建,但是它會在載入dom時和其他標籤爭搶資源(因為iframe會傳送http請求,但是http請求有限),們經常看到一些新聞網,上面會掛許多iframe廣告, 這些頁面一開始載入時就很卡,也是這緣故.
總結:上面的種種原因都會影響到dom的構建,所以我們貿然的使用getelementbyid,bytagename等等方法獲取頁面的元素時,很可能頁面上的html標籤還沒有轉換成為dom節點,所以就會報null的錯誤
二、使用domready機制解決因dom解析未完成前使用document.getelementbyid獲取報null錯誤的問題
1、在早期的瀏覽器中,提供了乙個window.onload方法,這個方法會在瀏覽器載入完所有的檔案(包括、指令碼檔案、樣式檔案),且html標籤都轉換成為dom節點是,會被觸發,但是這個方法在執行時間上有點晚,如果很多,那麼你懂得額！！！！！
2、在標籤瀏覽器, w3c終於紳士地提供了乙個domcontentloaded事件;在舊式ie下,也可以勉強使用onreadystatechange事件模擬, 直接某一天,有個外國大牛發掘出doscroll這個偉大的hack, 它讓我們在ie下更接近domcontentloaded的效果
JS框架設計讀書筆記之 動畫
css樣式可分為兩種，一種值接近無限的集合 color,width 一種值只有幾種 display 可以進行計算的樣式，產生了動畫效果。1.動畫的第一步是獲得元素的精確樣式值。2.若要做平移，傳入結束位置 距離 時長 fps。tips fps設定多少合適？除了人的眼睛，還要考慮到顯示器的顯示速度與瀏...
JS框架設計讀書筆記之 節點模組
瀏覽器提供了多種手段建立api，從流行程度依次是document.createelement innerhtml insertadjacenthtml createcontextualfragment。document.createelement 傳入乙個標籤名，返回此型別的元素節點。對於瀏覽器不支...
JS框架設計讀書筆記之 核心模組
該模組是框架最先執行的部分，jquery與vue中都有初始化的 模組的功能主要是 物件擴充套件 陣列化 型別判定 事件繫結和解綁 無衝突處理 模組載入 domready 物件擴充套件 jquery.extend first.length i return first grep function el...