国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

姘存按 / 2844人閱讀

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

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

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

DOM0級(jí)

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

DOM1級(jí)

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

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

DOM2級(jí)

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

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

DOM 2.0 HTML：針對(duì)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ù)需要對(duì)文檔進(jìn)行遍歷或者其他的操作。

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

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

DOM3級(jí)

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

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

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

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

清理 DOM 加載流程

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

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

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

謹(jǐn)慎訪問 DOM

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

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

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

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

誰的性能比較好

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

如何選用

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

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

警惕文檔遍歷中的空格 bug

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

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

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

可以定義一個(gè)函數(shù)用來清除所有包括包含文本節(jié)點(diǎn)。這樣當(dāng)執(zhí)行文檔遍歷的時(shí)候，就不存在元素之間的空格影響。函數(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ù)的功能僅是臨時(shí)性的清除元素之間的空格，需要在HTML文檔的每一次加載是都重新只想你個(gè)一遍清除的操作。當(dāng)然，使用這種方法雖然比較高效，但是在每次遍歷文檔之前，都需要先執(zhí)行一次遍歷操作，如果文檔的結(jié)構(gòu)比較復(fù)雜，那么這個(gè)操作所消耗的系統(tǒng)資源是不可小視的。

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/85693.html

相關(guān)文章

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

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

    YuboonaZhang 評(píng)論0 收藏0

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

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

    verano 評(píng)論0 收藏0

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

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

    isLishude 評(píng)論0 收藏0

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

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

    MRZYD 評(píng)論0 收藏0

  • 你需要的前端進(jìn)階書籍清單，分享下載

    摘要：寫在前面目前專注深入學(xué)習(xí)，特花了點(diǎn)時(shí)間整理了一些前端學(xué)習(xí)相關(guān)的書籍。大致分為以下大系列系列系列基礎(chǔ)系列應(yīng)用系列進(jìn)階系列類庫系列框架系列。這些書籍在這里免費(fèi)提供下載，有興趣的一起學(xué)習(xí)。 寫在前面 目前專注深入JavaScript學(xué)習(xí)，特花了點(diǎn)時(shí)間整理了一些前端學(xué)習(xí)相關(guān)的書籍。 大致分為以下7大系列：CSS系列、DOM系列、JavaScript基礎(chǔ)系列、JavaScript應(yīng)用系列、Ja...

    yuanzhanghu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<