css優化

css渲染機制（右往左）

瀏覽器如何讀取你的CSS選擇器？我們需要明白的最重要的一點是從右向左。比如這個選擇器ul > li a[title=”home”]，瀏覽器首先讀取的是a[title=”home”]。這個首先被讀取的部分我們叫它key selector，它是瀏覽器最終要選擇的元素。

ID最快，Universal最慢

有四種類型的key selector，解析速度由快到慢依次是：ID、class、tag和universal

#main-navigation {   }      /* ID（最快） */
body.home #page-wrap {   }  /* ID */
 

.main-navigation {   }      /* Class */
ul li a.current {   }       /* Class *
ul {   }                    /* Tag */
ul li a {  }                /* Tag */
* {   }                     /* Universal（慢） */
#content [title='home']     /* Universal */

不高效

content [title=’home’] /* Universal */
main-nav > li { } /* 比它看起來的要慢 */

永遠不要這樣做
ul#main-navigation { }

css抒寫樣式順序

1.定位屬性：position display float left top right bottom overflow clear z-index

2.自身屬性：width height padding border margin background

3.文字樣式：font-family font-size font-style font-weight font-varient color

4.文字屬性：text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow

5.css3中新增屬性：content box-shadow border-radius transform……

目的：減少瀏覽器reflow（迴流），提升瀏覽器渲染dom的效能

慎重選擇高消耗的樣式
什麼 CSS 屬性是高消耗的？就是那些繪製前需要瀏覽器進行大量計算的屬性。

box-shadows
border-radius
transparency
transforms
CSS filters（效能殺手）

正確使用 Display 的屬性

Display 屬性會影響頁面的渲染，請合理使用。

display: inline後不應該再使用 width、height、margin、padding 以及 float；

display: inline-block 後不應該再使用 float；

display: block 後不應該再使用 vertical-align；

display: table-* 後不應該再使用 margin 或者 float；

動畫效能優化

一般瀏覽器的渲染重新整理頻率是 60 fps，所以在網頁當中，幀率如果達到 50-60 fps 的動畫將會相當流暢，讓人感到舒適。

如果使用基於 javaScript 的動畫，儘量使用 requestAnimationFrame. 避免使用 setTimeout, setInterval.

避免通過類似 jQuery animate()-style 改變每幀的樣式，使用 CSS 宣告動畫會得到更好的瀏覽器優化。

使用 translate 取代 absolute 定位就會得到更好的 fps，動畫會更順滑。

多利用硬體能力，開啟 GPU 加速

css中以下屬性（CSS3 transtions、CSS3 3D transforms、opacity、canvas、webGL、video）來觸發GPU渲染，請合理使用，ps:過度使用會引發手機耗電增加

js優化

載入優化

1、script標籤放在底部,不要放在head標籤;

2、儘量減少js檔案數量

3、給script標籤新增一個defer屬性,defer屬性指明所含的指令碼不會修改DOM,因此程式碼能安全地延遲執行。

<script src="file.js" defer></script>

4、把loadScript()函式直接嵌入頁面,從而 避免多產生一次HTTP請求;一旦頁面初始化所需要的程式碼完成下載,你可以繼續自由地使用loadScript();去載入頁面其他的功能所需要的指令碼;

資料存取優化

1、函式中讀寫區域性變數總是最快的,讀寫全域性變數通常是最慢的。請記住,全域性變數總是存在於執行環境作用域鏈的最尾端,因此他也是最遠的。對所有瀏覽器而言,總分趨勢是,一個識別符號所在的位置越深,它的讀寫速度也就越慢。

最好的方式是把使用一次以上的全域性變數用區域性變數代替。例如:

Var doc =document;

物件成員–原型

js中的物件是基於原型的。原型是其他物件的急促,它定義並實現了一個新建立的物件所必須包含的成員列表。

因此物件可以有兩種型別:例項成員和原型成員。例項成員直接存在於物件例項中,原型成員則從物件原型繼承而來

物件成員–原型鏈

使用建構函式Book來建立一個新的Book例項。例項boo1的原型(proto)是Book.prototype,而Book.prototype的原型是object。

4、避免使用with語句,因為他會改變執行環境作用域鏈。同樣,try-cath語句中catch子句也有同樣的影響,因此也要小心使用;

5、通常來說,可以通過吧常用的物件成員、陣列元素、跨域變數儲存在區域性變數中來改善js效能,因為區域性變數訪問速度更快。

優化DOM程式設計

1、var element= document.querySelectorAll(“#menu a “);

最新的瀏覽器提供了一個名為querySelectorAll()的原聲dom方法;

2、獲取頁面中有些class為‘waring’和‘notice’的元素

Var errs = document.querySelectorAll(‘div.waring,div.notice’);

3、為了防止頁面多次重排,可以將樣式的修改合併在一起然後一次處理,這樣只會修改一次DOM

Var el = document.getElementById(‘mydiv’);

el.style.cssText =”border:1px solid red;border-right:2px;padding:5px;”

這樣會覆蓋已存在的樣式資訊,如果保留現有樣式,可以:

el.style.cssText +=‘;border-left:1px;’;

另外一種就是修改class的名稱;

4、一個減少重排的方式是通過改變display睡醒,臨時從文件中移除元素,然後再恢復他

5、另外一種減少重排的方法是在文件之外建立並更新一個文件片段,然後把它附加到原始列表中。

Var fragement = document.getElementById(“mylist”);

appendDataToElement(fragement,data);

Document.getElementById(‘mylist’).appendChild(fragement);

6、還有一種解決方案是為需要修改的節點建立一個備份,然後對副本進行操作,一旦操作完成,就用新的節點替代舊的節點

Var old = document.getElementById(“mylist”);

Var clone = old.cloneNode(true);

appendDataToElement(clone,data);

Old.parentNode.replaceChild(clone,old);

推薦使用文件片段的方案,因為所產生的DOM遍歷和重拍次數最少。