譯 如何在webkit中觸發(避免)重排

2021-06-22 02:31:43 字數 2010 閱讀 9639

正如大多數web開發者所知道的,大量的js指令碼執行時間可能都耗費在dom的操作上,而這些操作執行太耗時是由執行指令碼引起的,而不是編譯執行js位元組碼本身所導致。這其中乙個潛在的耗時操作就是重排(又名回流)-- 瀏覽器在渲染頁面的過程中會執行從頁面的dom樹來構造乙個渲染樹。dom數量越多結構越複雜,操作越耗時。

讓頁面渲染和執行保持流暢的乙個有效方法是進行批處理操作,讓dom的操作、處理和狀態查詢區分開來(譯者注:狀態查詢就是獲取dom的一些樣式屬性值,如獲取乙個div元素的高度、寬度等)。

下面有些例子:

// 非最優, 會造成2次重排

var newwidth = adiv.offsetwidth + 10; // read

adiv.style.width = newwidth + 'px'; // write

var newheight = adiv.offsetheight + 10; // read

adiv.style.height = newheight + 'px'; // write

// 更優,只引起一次重排

var newwidth = adiv.offsetwidth + 10; // read

var newheight = adiv.offsetheight + 10; // read

adiv.style.width = newwidth + 'px'; // write

adiv.style.height = newheight + 'px'; // write

stoyan stefanov在其部落格

rendering: repaint, reflow/relayout, restyle中提供了關於這個話題的很好的例子。

這通常會導致開發者有這樣的疑問:到底什麼會觸發重排?上週的時候,

dimitri glazkov

在this codesearch link這篇文章中回答了這個問題。我自己為了更好地去理解這個問題,我通讀了這篇文章,並把文章總結成了一系列的屬性和方法。

它們是:

clientheight, clientleft, clienttop, clientwidth, focus(), getboundingclientrect(), getclientrects(), innertext, offsetheight, offsetleft, offsetparent, offsettop, offsetwidth, outertext, scrollbylines(), scrollbypages(), scrollheight, scrollintoview(), scrollintoviewifneeded(), scrollleft, scrolltop, scrollwidth

height, width

getboundingclientrect(), getclientrects()

computectm(), getbbox()

getcharnumatposition(), getcomputedtextlength(), getendpositionofchar(), getextentofchar(), getnumberofchars(), getrotationofchar(), getstartpositionofchar(), getsubstringlength(), selectsubstring()

instanceroot

getcomputedstyle(), scrollby(), scrollto(), scrollx, scrolly, webkitconvertpointfromnodetopage(), webkitconvertpointfrompagetonode()

這個列表覆蓋範圍可能不全,但它是研究如何避免重排的乙個好的開始。檢查是否觸發重排最好的方法是在chrome或safari開發者工具的timeline panel選項中檢視紫色布局條的狀態。

如何在C 中使用Dapper(譯)

前言 物件關係對映 orm 已經被使用了很長時間,以解決在程式設計過程中物件模型與資料模型在關聯式資料庫中不匹配的問題。1.開啟visual studio 4.為專案指定乙個名稱 5.選擇空專案模板 6.點選 確定 以上將建立乙個空的asp.net應用程式專案。然後我們需要建立乙個實體類 poco類...

如何在流程中觸發其他工作流

在工作流中觸發其他的流程是很常見的一種情況,其原理就是通過容器 觸發其他的工作流。事件發生器應用如圖 圖1 1 在流程中觸發相同物件的其他工作流,即是這兩個工作流都是構建在同乙個物件的基礎上。這種情況比較簡單,只要在觸發另外乙個工作流時把當前的物件傳入並指定觸發事件即可。參加圖 1 1。在流程中觸發...

如何在觸發器中修改物件結構

create or replace trigger test trigger before insert on test tab for each row declare local variables here begin alter sequence test seq maxvalue 1000...