2019獨角獸企業重金招聘Python工程師標準>>>

以前在寫網頁的時候很少關注到網站的性能，時間進入今天，一個網站不在是單純幾張圖片或者幾段文字，組成一個網站，今天的用戶更加注重網站體驗，所以寫一個頁面的時候網站的性能優化變得格外重要，作為一個前端的開發人員，一定的要對網站的每一個頁面做到最大性能優化，今天的學習了一下如果提高網站性能重要的知識：

回流與重繪

----------------------------------------讓你的網頁快點在快點-----------------------------------------------

html中的每個tag都是dom?樹中的1個節點，document（根節點）。

回流：

當視圖中的一部分（或全部）因為元素的規模尺寸，布局，隱藏等改變而需要重新構建。這就叫著回流（也可以叫做重新布局）

重繪:

當視圖中的有些元素需要更新屬性，而這些屬性只是影響元素的外觀，風格，而不會影響布局的，就叫著重繪

這里提到重要的一點：?回流一定會重繪，而重繪未必回流。

會產生回流或者重繪的操作：

1、添加、刪除元素（回流+重繪）

2、隱藏元素?display：none,(回流+重繪)，visibility：hidden（重繪，不回流）

3、移動元素：改變top,left,或者移動元素到另外1個父元素中（重繪+回流）

4、對style的操作（）

5、改變瀏覽器的大小（回流+重繪）

瀏覽器在處理回流和重繪的時候，會把所有的引起回流、重繪的操作放入一個隊列里面，一定數量或者時間間隔就會flush對象，這樣就會讓多次的回流、重繪變成一次回流重繪

減少回流、重繪

1.不要改變一個元素的樣式屬性，最后直接改變類名，類名是預先定義好的樣式，不是動態的，你要動態的改變一些樣式，可以使用字符串拼接形式進行改變

示例：

//?不好的寫法
var?left?=?1;var?top?=?1;
el.style.left?=?left?+?"px";
el.style.top??=?top??+?"px";//?比較好的寫法?
el.className?+=?"?className1";//?比較好的寫法?
el.style.cssText?+=?";?left:?"?+?left?+?"px;?top:?"?+?top?+?"px;";

2.讓要操作的元素的進行“離線處理”，

3.不要經常訪問會引起瀏覽器fiush隊列的屬性，如果確實要訪問，可以先對變量進行緩存，應聘哪的時候就可以直接讀取變量

示例：

//?別這樣寫，大哥
for(循環)?{
????el.style.left?=?el.offsetLeft?+?5?+?"px";
????el.style.top??=?el.offsetTop??+?5?+?"px";
}//?這樣寫好點
var?left?=?el.offsetLeft,top??=?el.offsetTop,s?=?el.style;for(循環)?{
????left?+=?10;
????top??+=?10;
????s.left?=?left?+?"px";
????s.top??=?top??+?"px";
}

4.一定要思考清除，操縱元素會影響到多少個節點，盡量減少對節點的影響，影響越多，就越耗費資源、

轉載于:https://my.oschina.net/u/1403169/blog/202440

總結

以上是生活随笔為你收集整理的提高网站的性能----回流与重绘的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。