如何寫出高效能DOM?

2022-08-24 17:09:12 字數 615 閱讀 5052

提高高效能dom就不得不提到回流和重繪,那麼什麼是回流什麼是重繪? 

回流

對於dom結構中的各個元素都有自己的盒子模型,這些都需要瀏覽器根據各種樣式(瀏覽器的、開發人員定義的)來計算並根據計算結果將元素放到它該出現的位置,這個過程稱為回流。

重繪

當各種盒子的位置、大小以及其他屬性,例如顏色、字型大小等都確定下來後,瀏覽器於是便把這些元素都按照各自的特性繪製了一遍,於是頁面的內容出現了,這個過程稱之為重繪。

dom元素的新增、修改(內容)、刪除(回流+重繪),僅修改dom元素的字型顏色(只有重繪,因為不需要調整布局),回流一定觸發重繪,但是重繪不一定觸發回流。

現在我們知道了觸發重繪和回流的觸發條件,那我們為什麼要避免他們?為什麼避免他們高效能dom就能夠寫出來呢?

display的值會影響布局,從而影響整個頁面元素的位子發生變化,所以會更改render樹的結構,先將元素從document中刪除,完成修改後再把元素放回原來的位置,如果需要建立多個dom節點,可以使用documentfragment建立完後一次性的加入document

如何寫出高效能SQL

在編寫一條查詢語句的時候,可以依據你要查詢資料表的資料總量,估算一下這條查詢大致需要遍歷多少行資料 如果遍歷行數在百萬以內的,只要不是每秒鐘都要執行幾十上百次的頻繁查詢,可以認為是安全的。遍歷資料行數在幾百萬的,查詢時間最少也要幾秒鐘,你就要仔細考慮有沒有優化的辦法。遍歷行數在千萬左右,是 mysq...

如何寫出高效能SQL語句

1 首先要搞明白什麼叫執行計畫?執行計畫是資料庫根據sql語句和相關表的統計資訊作出的乙個查詢方案,這個方案是由查詢優化器自動分析產生欀如一條sql語句如果用來從乙個10萬條記錄的表中查1條記錄,那查詢優化器會選擇 索引查詢 方式,如果該錶進行了歸檔,當前只剩下5000條記錄了,那查詢優化器就會改變...

如何寫出高效能的MySQL查詢

想寫這樣一篇文章很久了,但始終沒有下手。最近幫同事看了幾個查詢,而且自己也在考慮乙個索引系統的問題,所以今天就把這個寫了。介紹一下mysql的索引機制,還有一些mysql查詢的優化策略。鄙人才疏學淺,很可能說的不對,請路過的各位大俠批評指正,獻醜了。jiajun.org 官方分割線 首先,說說mys...