亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

DOM 深入學(xué)習(xí) - 1

姘存按 / 2923人閱讀

摘要：本文章記錄本人在深入學(xué)習(xí)中看書理解到的一些東西，加深記憶和并且整理記錄下來，方便之后的復(fù)習(xí)。級年月，正式發(fā)布更新后的核心部分，并且在這次發(fā)布添加了一些新的規(guī)范，這次發(fā)布的稱為級規(guī)范。

本文章記錄本人在深入學(xué)習(xí)Javascirpt DOM中看書理解到的一些東西，加深記憶和并且整理記錄下來，方便之后的復(fù)習(xí)。

DOM 版本 
  
w3c 指定的DOM規(guī)范包括多個版本，不同的版本（或稱知為級別）又包含不同的子規(guī)法和模塊，不同瀏覽器對DOM的支持是千變?nèi)f化的。

DOM0級

在很早的時候市場上已經(jīng)有了一些不同版本的DHTML規(guī)范，主要包括IE和Netscape兩個不同的版本。這組DHTML規(guī)法規(guī)定了一套文檔對象、集合、方法和屬性。雖然不同的DHTML版本的特性存在差異，但是一些基本的思路和用法還是有章可循的。

DOM1級

  
1998年10月，w3c 推出了DOM 1.0版本的規(guī)范。

這個規(guī)法主要是包括兩個子規(guī)范。
- DOM Core（核心部分）：把XML文檔設(shè)計為樹形節(jié)點(diǎn)結(jié)構(gòu)，并為這種結(jié)構(gòu)的運(yùn)行機(jī)制定制了一套規(guī)法化標(biāo)準(zhǔn)，同時定義了創(chuàng)建、編輯、操作這些文檔結(jié)構(gòu)的方法以及屬性。
- DOM HTML：針對HTML文檔、標(biāo)簽集合、以及與個別HTML標(biāo)簽相關(guān)的元素定義了對象、屬性和方法。

DOM2級

  
2000年1月，w3c正式發(fā)布更新后的DOM核心部分，并且在這次發(fā)布添加了一些新的規(guī)范，這次發(fā)布的DOM稱為2級規(guī)范。2003年1月，w3c又正式發(fā)布了對DOM HTML子規(guī)范的修訂，添加了針對HTML 4.01和XHTML 1.0版本文檔中的很多對象、屬性和方法。這次發(fā)布就叫做DOM2.0的推薦版本。

DOM 2.0 Core：添加了更多的特性，如針對命名空間的方法等。

DOM 2.0 HTML：針對HTML的文檔結(jié)構(gòu)模型，并添加了一些屬性。

DOM 2.0 Event：規(guī)定了與鼠標(biāo)相關(guān)的事件和控制機(jī)制，但是不包括鍵盤相關(guān)事件和處理部分。

DOM 2.0 Style：提供了訪問和操作所有與css相關(guān)的樣式以及規(guī)則的能力。

DOM 2.0 Traversal and DOM 2.0 Range：允許開發(fā)人員通過迭代方式訪問DOM，以便根據(jù)需要對文檔進(jìn)行遍歷或者其他的操作。

DOM 2.0 Views：提供了訪問和更新文檔的表現(xiàn)的能力。

DOM 2.0規(guī)法已經(jīng)是目前各大瀏覽器主持的主流標(biāo)準(zhǔn)?？上?b>ie的支持并不完善。

DOM3級

  
2014年4月，w3c發(fā)布了DOM3.0版本。

DOM 3.0 Core：添加了更多新的方法和新屬性。同時也修改了已有的一些方法。

DOM 3.0 Load and Save：提供將XML文檔的內(nèi)容加載到DOM文檔中和將DOM文檔序列化為XML的文檔能力。

DOM 3.0 Validation：提供了確保動態(tài)生成的文檔的有效性的能力，即如何符合文檔類型聲明。

清理 DOM 加載流程

一般瀏覽器加載順序：
1. 解析HTML結(jié)構(gòu)
2. 加載外部腳本和樣式結(jié)構(gòu)表
3. 解析并且執(zhí)行腳本代碼
4. 構(gòu)造DOM模型
5. 加載圖片等外部文件
6. 頁面加載完畢

通過上面的加載順序可以知道，網(wǎng)頁頭部的腳本（由外部文件加載）會在構(gòu)造HTML DOM文檔之前執(zhí)行，這就會導(dǎo)致執(zhí)行腳本無法訪問文檔結(jié)構(gòu)模型。

如果頁面包含許多的外部文件，如大量的圖片、視頻、音頻、動畫等文件，可能會延遲腳本的執(zhí)行事件。為了避免js腳本處于長時間的等待，可以把需要執(zhí)行的腳本部分放在HTML文檔的中間，這樣只要在構(gòu)造DOM后執(zhí)行到腳本所在的結(jié)構(gòu)位置，就會執(zhí)行腳本。所以一般建議把js放在頁面的底部。

謹(jǐn)慎訪問 DOM

訪問一個DOM元素是代價比較高的，修改元素的代價更高，因為它們經(jīng)常導(dǎo)致瀏覽器重新計算頁面的幾何變換。在訪問或者修改元素最不好的情況下就是使用循環(huán)執(zhí)行操作，特別是在HTML集合中使用循環(huán)。

for (var i = 0; i < 15000; i++) {
    document.getElementById("here").innerHTML += "a";
};

上面這段代碼的問題就是每一次循環(huán)都會去對DOM元素訪問兩次：一次是讀取innerHTML屬性能容，第二次是寫入它。更有效率的方法是使用局部賓利儲存更新后的內(nèi)容，在循環(huán)結(jié)束后一次性寫入。

var text = "";
for (var i = 0; i < 15000; i++) {
    text += "a";
};
document.getElementById("here").innerHTML += text;
innerHTML 與 DOM 方法

誰的性能比較好

兩者的性能都是基本接近，不過幾乎所有的瀏覽器中，innerHTML的速度會更快一些，但是最新的基于webkit內(nèi)核的瀏覽器除外。

如何選用

使用innerHTML的好處就是在早期的瀏覽器上面是顯而易見的，但在最新版本的瀏覽器上面就沒有那么的明顯。因此，采用哪種方法將取決于用戶經(jīng)常使用的瀏覽器，以及個人的編碼愛好。

對于日常的大多數(shù)的操作而言，使用innerHTML和使用DOM差異并不是很大，應(yīng)當(dāng)根據(jù)代碼的可讀性、可維護(hù)性、團(tuán)隊習(xí)慣、以及代碼風(fēng)格來綜合決定采用那種風(fēng)格。

警惕文檔遍歷中的空格 bug

在遍歷DOM元素時候，空格的存在很容易造成誤解，因為DOM把空格也作為一個節(jié)點(diǎn)進(jìn)行解析（換行符也算）。

var el = document.documentElement.lastChild.firstChild.nodeName;

可以使用上面的代碼去檢測DOM的元素。

可以定義一個函數(shù)用來清除所有包括包含文本節(jié)點(diǎn)。這樣當(dāng)執(zhí)行文檔遍歷的時候，就不存在元素之間的空格影響。函數(shù)要在文檔結(jié)構(gòu)加載完后在執(zhí)行。

function clean(el) {
    var el = el || document,
            f = el.firstChild;

    while (f != null) {
        if (f.nodeType === 3 && /s/.test(f.nodeValue)) {
            e.removeChild(f);
        } else if (f.nodeType === 1) {
            arguments.callee(f);
        }
        f = f.nextSibling;
    };
}

使用上面函數(shù)要注意到是，該函數(shù)的功能僅是臨時性的清除元素之間的空格，需要在HTML文檔的每一次加載是都重新只想你個一遍清除的操作。當(dāng)然，使用這種方法雖然比較高效，但是在每次遍歷文檔之前，都需要先執(zhí)行一次遍歷操作，如果文檔的結(jié)構(gòu)比較復(fù)雜，那么這個操作所消耗的系統(tǒng)資源是不可小視的。

  
最后，如果文章有什么錯誤和疑問的地方，請指出。與sf各位共勉！

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/85693.html

相關(guān)文章

  • DOM 深入學(xué)習(xí) - 2

    摘要：使用局部變量來訪問集合元素訪問任何類型的，當(dāng)同一個屬性或者方法被訪問同一次以上時，最好使用一個局部變量緩存該成員。當(dāng)遍歷一個集合的時候，第一個要優(yōu)化的就是將集合引用存儲在局部變量中，并在循環(huán)之外緩存屬性。 本文章記錄本人在深入學(xué)習(xí)Javascirpt DOM中看書理解到的一些東西，加深記憶和并且整理記錄下來，方便之后的復(fù)習(xí)。 減少 DOM 重繪和重排的次數(shù) 簡單了解重繪和重...

    YuboonaZhang 評論0 收藏0

  • 《深入react技術(shù)?！?em>學(xué)習(xí)筆記（一）初入React世界

    摘要：前言以深入學(xué)習(xí)技術(shù)棧為線索，記錄下學(xué)習(xí)的重要知識內(nèi)容。要傳入時，必須使用屬性表達(dá)式。如果要使用自定義屬性，要使用前綴這與標(biāo)準(zhǔn)是一致的。 前言 以《深入學(xué)習(xí)react技術(shù)?！窞榫€索，記錄下學(xué)習(xí)React的重要知識內(nèi)容。本系列文章沒有涵蓋全部的react知識內(nèi)容，只是記錄下了學(xué)習(xí)之路上的重要知識點(diǎn)，一方面是自己的總結(jié)，同時拿出來和在學(xué)習(xí)react的人們一塊分享，共同進(jìn)步。 正文 一：rea...

    verano 評論0 收藏0

  • 《深入react技術(shù)棧》學(xué)習(xí)筆記（三）漫談React

    摘要：前言接下來讓我們進(jìn)入新的章節(jié)漫談。正文一事件系統(tǒng)的事件系統(tǒng)事件系統(tǒng)符合標(biāo)準(zhǔn)，不存在任何兼容性問題，并且與原生的瀏覽器事件一樣有同樣的接口。所有的事件都自動綁定到最外層。組織事件冒泡的行為只適用于合成系統(tǒng)中，且沒辦法阻止原生事件冒泡。 前言 接下來讓我們進(jìn)入新的章節(jié)：漫談React。本篇文章主要講React事件系統(tǒng)和表單操作。 正文 一：事件系統(tǒng) 1.react的事件系統(tǒng)react事件系...

    isLishude 評論0 收藏0

  • 《深入react技術(shù)?！?em>學(xué)習(xí)筆記（二）初入React世界

    摘要：用于規(guī)范的類型與必需的狀態(tài)。表示由組件更改的數(shù)據(jù)，通常是通過與用戶的交互來更改的。為了實(shí)現(xiàn)的修改，需要注冊事件處理程序到相應(yīng)的元素上。當(dāng)事件發(fā)生時，將更新后的值是從中檢索，并通知組件。通常情況下，該函數(shù)初始化狀態(tài)使用，，或其他數(shù)據(jù)存儲。 前言 上一篇文章中，我們講到了JSX的一些用法和注意事項，這次我們來講react中最基礎(chǔ)也是特別重要的內(nèi)容：組件。這篇文章包含組件的以下內(nèi)容：狀態(tài)、屬...

    MRZYD 評論0 收藏0

  • [ 學(xué)習(xí)路線 ] 學(xué)完這些去阿里！GOGOGO

    摘要：以下知識點(diǎn)是前輩師兄總結(jié)基礎(chǔ)語義化標(biāo)簽引進(jìn)了一些新的標(biāo)簽，特別注意等，注意的標(biāo)題結(jié)構(gòu)理解瀏覽器解析的過程，理解的樹形結(jié)構(gòu)，及相應(yīng)理解標(biāo)簽在各個瀏覽器上的默認(rèn)樣式代理樣式，理解中的重置樣式表的概念理解等功能性標(biāo)簽理解標(biāo)簽，理解文件提交過程推薦 以下知識點(diǎn)是前輩師兄總結(jié) 1、HTML/HTML5基礎(chǔ)： 1.0、語義化H5標(biāo)簽1.1、H5引進(jìn)了一些新的標(biāo)簽，特別注意article...

    zhaochunqi 評論0 收藏0

發(fā)表評論

0條評論

姘存按

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<