高效能 JavaScript 讀書筆記(三)

2021-08-30 11:16:01 字數 1088 閱讀 1201

概念

重排:當元素的寬和高發生改變的時候,就會重新排列元素,稱為重拍。

重繪:將重排的的元素重新繪製在瀏覽器中,稱為重繪。

在元素中新增段落、新增邊框、新增或者刪除元素、修改內外邊距等,一切改變現有元素的位置的操作都會導致重排的發生。相應的,新增背景色這一類沒有改變元素位置的操作則不會導致重排和重繪。

最小化重繪和重排

重繪和重排的代價非常昂貴,為了減少發生次數,應該減少發起重排請求,盡可能將修改 dom 的請求合併。

var el = document.getelementbyid('mydiv');

el.style.csstext = 'border-left:1px;border-right:2px;padding:5px;';

減少重排和重繪

可以通過以下步驟來減少重繪和重排的次數:

1.使元素脫離文件流

2.對其應用多重改變

3.把元素待會文件中

這樣一來,只有第一步和第三部會觸發重排。否則,如果對元素的修改較多的話,第二步會觸發多次重排。

有三種方法可以使 dom 脫離文件:

>隱藏元素,應用修改,重新顯示

> 使用文件片段在當前 dom 之外構建乙個子樹,再把它拷貝回文件。

> 將原始元素拷貝到乙個脫離文件的節點中,修改副本,完成後再替換原始元素。

hover

如果大量使用 hover 會影響效能,降低執行速度。

事件委託

如果頁面中存在大量元素,而且每乙個都要一次或多此繫結事件處理器。這種情況會影響效能,因為瀏覽器需要追蹤每個事件處理器。

乙個簡單而優雅的處理 dom 事件的技術是事件委託。

它基於這樣乙個事實:事件逐層冒泡並能被父級元素捕獲。使用事件**,只需要給外層繫結乙個處理器,就可以處理在其子元素上觸發的所有事件。

根據 dom 標準,每個事件都要經歷三個階段:

- 捕獲 -到達目標 -冒泡

高效能JavaScript摘要 三

程式設計實踐 避免二次評估 js指令碼允許獲取乙個字串當作指令碼執行,四種方法可以實現。eval function 構造器,settimeout 和setinterval var num1 5,num2 6 var result eval num1 num2 console.log result v...

高效能MySQL 讀書筆記

第4章 schema與資料型別優化 第5章 建立高效能的索引 三星索引 最左匹配原則 高效能索引策略 多列索引 mysql採用的是分層架構 上層是server層,下層是儲存引擎層。sql標準中定義了四種隔離級別 隔離級別 定義髒讀 不可重複讀 幻讀加鎖讀 讀未提交 read uncommitted,...

高效能Mysql 讀書筆記

mysql與眾不同的特性是它的儲存引擎架構,這種架構將查詢處理即其他的任務系統和資料的儲存 提取相分離.第二層架構中,大多數的mysql的核心服務功能都在這一層,包括查詢解析,分析優化,快取以及所處的內建函式,所有的跨儲存引擎的功能都在這一層實現 儲存過程,觸發器,檢視等.第三層包含mysql的儲存...