performance面板使用,以及解決動畫卡頓

時間 2019-11-08

標籤 performance 面板使用以及解決動畫简体版

原文原文鏈接

https://googlechrome.github.io/devtools-samples/jank// 官方案例css

http://www.javashuo.com/article/p-ogffqjfp-db.htmlhtml

http://www.javashuo.com/article/p-sypanrqx-bc.htmlgit

The Anatomy of a Frame https://aerotwist.com/blog/the-anatomy-of-a-frame/

http://www.ruanyifeng.com/blog/2015/09/web-page-performance-in-depth.html 瀏覽器渲染過程github

http://www.javashuo.com/article/p-ruzqwaaq-g.html CSS動畫的性能分析和瀏覽器GPU加速web

https://blog.csdn.net/leer168/article/details/25917093 深刻瀏覽器理解CSS animations 和 transitions的性能問題chrome

http://www.javashuo.com/article/p-myybgvmu-nq.html 說說動畫卡頓的解決方案api

實際案例瀏覽器

http://www.javashuo.com/article/p-hbizibnk-bz.htmlbash

http://www.javashuo.com/article/p-vegqapcg-g.htmldom

遵循的原則

1. 關於阻塞

css加載不會阻塞 DOM樹的解析；CSS解析會阻塞；
css加載和解析會阻塞 js（因此內聯樣式不用加載性能較高，適用於第一屏）
js 會阻塞 DOM樹的解析（由於js會改變DOM樹內容）
css引入的字體文件加載也會阻塞 js , 頁面渲染

2. 關於與頁面渲染過程的對應

js執行時：這時應該只是構建了前面部分的dom樹和CSSOM樹，由於js須要經過dom api和CSSOM api操做前面部分的標籤的內容和樣式。
DOM樹構建完成：DomContentLoaded事件
CSSOM構建完成、Render Tree構建完成：Recalculate Style
Layout：Layout事件
paint：Paint（圖片層繪製）和 Composite Layers（圖片層合併），除了transform 或 opacity屬性以外，更改任何屬性始終都會觸發繪製Paint。
reflow重排：3 4 5步走一遍
repaint重繪：3 5步走一遍
更改一個既不要佈局也不要繪製的屬性：3步 + Composite Layers，此行爲在678從新渲染步驟中開銷最小，適合動畫或滾動，具體好比transfrom opacity。

3. 關於chrom瀏覽器的一些行爲

渲染隊列：瀏覽器存在一個渲染隊列，用於將屢次連續的重排和重繪操做變成一次。當你進行DOM的讀操做時，若是隊列不爲空，chrome會清空隊列，當即進行重排或重繪；若是爲空，chrome不會作出多餘的操做。
佈局：佈局或重排中瀏覽器須要計算元素要佔據的空間大小及其在屏幕的位置，網頁的佈局模式意味着一個元素可能影響其餘元素，例如 <body> 元素的寬度通常會影響其子元素的寬度以及樹中各處的節點。
繪製與合成：繪製通常是在多個表面（一般稱爲層）上完成的，所以瀏覽器須要將它們按正確順序繪製到屏幕上，以便正確渲染頁面。
css選擇器：對於複雜的css選擇器，瀏覽器須要花更多時間來肯定元素的樣式，所以以類爲中心的css編寫原則，老外比較推崇，好比:nth-last-child僞類能夠用獨立的類替代（否則它怎麼叫僞類(￣▽￣)"）。

手動控制從新渲染

window.requestAnimationFrame() 方法能夠將某些代碼統一放到下一次從新渲染時執行。具體是將js代碼放在下一幀開始時執行。若是使用setTimeout 或 setInterval 來執行動畫之類的視覺變化，其回調可能在幀的某個時間點執行，可能在末尾，這會使咱們丟失幀，致使卡頓。

處理「佈局抖動」反覆讀寫屬性會致使佈局抖動，致使長幀。

function doubleHeight(element) { var currentHeight = element.clientWidth; element.style.width = (currentHeight / 2) + 'px'; element.style.height = '80px'; } var elements = document.getElementsByTagName('tr'); for (var i = 0; i < elements.length; i++) { doubleHeight(elements[i]); }

將doubleHeight函數改爲下面這樣：

function doubleHeight(element) { var currentHeight = element.clientHeight; window.requestAnimationFrame(function () { element.style.height = (currentHeight * 2) + 'px'; }); }

2）頁面滾動事件（scroll）

$(window).on('scroll', function() { window.requestAnimationFrame(scrollHandler); });

3）最適合用於動畫

http://www.javashuo.com/article/p-vegqapcg-g.html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。