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

資訊專欄INFORMATION COLUMN

《高性能javascript》隨記 - DOM Scripting

Ryan_Li / 2120人閱讀

摘要:操作的代價非常昂貴,對元素節(jié)點的訪問和修改樣式布局的改變以及事件的綁定都影響著網(wǎng)頁的性能。所以,盡量減少對布局信息的查詢次數(shù),并用局部變量參與計算。當動畫結(jié)束時,重新定位,從而只一次下移文檔其他元素的位置。這樣可以最小化事件句柄數(shù)量。

  

DOM操作的代價非常昂貴,對元素節(jié)點的訪問和修改、樣式、布局的改變以及DOM事件的綁定都影響著網(wǎng)頁的性能。

批量修改DOM

如果要對元素節(jié)點進行多次讀寫,那么最好的方式是:把多次操作在DOM節(jié)點樹外統(tǒng)一處理好,然后再一次性更新DOM節(jié)點樹,具體的方法大致包含下面幾種。

先隱藏要操作的元素節(jié)點,然后對這些節(jié)點進行操作,最后再顯示出來。

先克隆要操作的元素節(jié)點,然后對克隆出來的節(jié)點進行操作,最后覆蓋原來的元素節(jié)點。

在文檔外創(chuàng)建并更新一個文檔片段(createDocumentFragment()),然后在附加在原始節(jié)點上。

緩存信息布局

瀏覽器通過隊列化修改和批量運行的方法,盡量減少重排版的次數(shù)。當你查詢布局信息(如偏移量、滾動條位置、風格屬性)的時候,瀏覽器將會刷新隊列并執(zhí)行所有修改操作,以返回最新的數(shù)值。所以,盡量減少對布局信息的查詢次數(shù),并用局部變量參與計算。

將元素提出動畫流

重排版有時只影響渲染樹的一小部分,但有時候也會是一大部分,下面這些步驟可以避免對大部分頁面進行重排版:

對動畫元素使用絕對定位,使他脫離頁面布局流。

啟動元素動畫。當它擴大時會覆蓋部分頁面。

當動畫結(jié)束時,重新定位,從而只一次下移文檔其他元素的位置。

事件托管

當一個頁面存在大量的元素,并且很多元素都有一個或多個事件綁定的時候,會影響頁面的性能,這個時候才用事件托管機制可以提升頁面的運行性能:你只需要監(jiān)聽事件,看看他們是不是你感興趣的元素發(fā)出的。這樣可以最小化事件句柄數(shù)量。

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

轉(zhuǎn)載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/85249.html

相關(guān)文章

  • 性能javascript隨記 - Loading and Excecution

    摘要:此過程中,頁面的解析與用戶的交互都是阻塞的。非阻塞腳本延時腳本可以給標簽添加一個屬性,這個屬性表明元素中的腳本不打算修改,因此代碼可以稍后執(zhí)行。此技術(shù)的重點在于無論在何處啟動下載,腳本的下載和運行都不會阻塞頁面的處理過程。 當瀏覽器遇到標簽時,頁面的加載、介些都會停下來,運行此javascript代碼,然后再繼續(xù)加載。這種事情同樣會發(fā)生在那些以src屬性調(diào)用的外部腳本,瀏覽器首先下載外...

    DevTTL 評論0 收藏0
  • 性能javascript隨記 - Data Access

    摘要:內(nèi)部屬性包含一個函數(shù)被創(chuàng)建的作用域中的對象的集合,此集合被稱為函數(shù)的作用域鏈。當作用域鏈銷毀時,激活對象一同被銷毀。下圖展示了函數(shù)運行期上下文的作用域和閉包由于閉包的屬性包含與運行期上下文作用域鏈相同的對象引用,會產(chǎn)生副作用。 javascript按照數(shù)據(jù)存儲位置的不同可分為以下四類: 直接量(字符串、數(shù)字、布爾型、Object、Array、Function、正則表達式、NULL以...

    fai1017 評論0 收藏0
  • JavaScript·摘抄·隨記(持續(xù)補充中)

    摘要:無主題,內(nèi)容為感觸較深的一些答疑探討等,摘自多篇文章,侵刪為什么是單線程的單線程,與它的用途有關(guān)。作為瀏覽器腳本語言,的主要用途是與用戶互動,以及操作。這決定了它只能是單線程,否則會帶來很復雜的同步問題。摘自運行機制詳解再談作者阮一峰 無主題,內(nèi)容為感觸較深的一些答疑、探討等,摘自多篇文章,侵刪 1、為什么JavaScript是單線程 JavaScript的單線程,與它的用途有關(guān)。作...

    young.li 評論0 收藏0
  • JavaScript·隨記 Null vs. Undefined

    摘要:剛學了一些的基礎(chǔ)語法,試著用一下。相關(guān)文檔基本語法配合基本使用相同點和都是的基本數(shù)據(jù)類型擴展的種基本數(shù)據(jù)類型和都是值擴展的種值空字符串不同點可見代表變量有值,值為空且該值是通過變量賦值獲得的代表聲明了變量,但沒有為其賦值。 剛學了一些 Markdown 的基礎(chǔ)語法,試著用一下。 相關(guān)文檔:Markdown基本語法配合基本使用 相同點: null 和 undefined 都是js...

    Tychio 評論0 收藏0

發(fā)表評論

0條評論

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