性能優化篇 - css typed OM（css typed object model）

前言

在平時的工做當中，咱們在操做dom的樣式的時候，其實操做的就是css的對象模型cssOM，其實在16年的時候，就發佈了一組新的對象模型cssTypeOM，這是一個全新的操做css樣式的方式，它的好處有不少，咱們一一列舉。

瀏覽器渲染視圖步驟

在講解cssOM和cssTypeOM的區別的同時，咱們要了解瀏覽器是如何渲染視圖的：

一、解析html後構建dom對象

二、解析css後構建cssOM對象

三、瀏覽器將dom與css組成渲染樹

四、最終瀏覽器渲染到視圖中

cssOM

var width = 100;
document.body.style.width = width + 'px';
//須要修改時
document.body.style.width = (width + n(要改變的值)) + 'px';
複製代碼

這就是cssOM目前存在的問題，它沒有辦法基於目前的值去作屬性的變動，若是想在基礎上作變動，你還須要去先獲取到當前的值（是個字符串），轉換成數字，才能去作遞增或者遞減的操做，這個樣子運算成本很大，還會有可能出現沒必要要的bug。

typedOM

typedOM的出現，給咱們對樣式的增刪改查操做提供了很大的便利，typedOM不一樣於cssOM，它不是經過字符串表現形式去修改一個值，而是經過map對象的形式去修改一個值，而且，全部屬性的名稱直接能夠按照css樣式的方式去設置，不用寫駝峯了。

如何確認咱們的瀏覽器，是否支持typedOM呢？

window.CSS && CSS.number
複製代碼

typedOM的操做方式綁定在dom的attributeStyleMap方法上，是一個StylePropertyMap對象，該對象提供了四個方法：

append：

暫時尚未搞明白怎麼用，在MDN中的文檔中所說的，和實際操做的不一樣，若是有知道的小夥伴請及時留言，好讓我及時跟進文檔

set：

dom.attributeStyleMap.set(prop,val)
//示例
document.body.attributeStyleMap.set('width','100px')
//或
document.body.attributeStyleMap.set('width', CSS.px(100))
複製代碼

用來設定某一個屬性。

clear：

dom.attributeStyleMap.clear()
複製代碼

用來清除全部StylePropertyMap中設置的屬性，可是並不會清除掉樣式表當中設置的屬性。

delete：

dom.attributeStyleMap.delete(prop)
複製代碼

用來清除某一個指定的屬性，可是並不會清除掉樣式表當中設置的屬性。

在StylePropertyMap的原型鏈上，還有一個get方法，能夠經過傳對應的prop，並返回一個對象，對象裏面包括兩個值，一個是對應的數值，一個是該屬性值的單位：

dom.attributeStyleMap.get('width')
//{value: 100, unit: "px"}
複製代碼

總結

其實，css typed OM遠不止我文檔裏面寫的這些，還有不少數學操做的方法，便於咱們更快的進行計算。

綜上所述，咱們其實能夠看出來一些css typed OM的優點了，這裏我在總結一下：

一、最大限度的下降了經過字符串表現形式去修改css樣式，下降了出現此類bug的風險

二、經過css typed OM的運算方法，最短期最快的去進行樣式運算

三、錯誤處理，若是有接收到錯誤的css，就會直接拋出錯誤，方便在最短的時間去定位問題

四、因爲dom上的attributeStyleMap方法是一個StylePropertyMap對象，因此方便使用全部的map對象的方法

五、更好的性能！！！因爲減小了字符串操做，對於 CSSOM 的操做性能獲得了更進一步的提高，由 Tab Akins 提供的測試代表，操做 Typed OM 比直接操做 CSSOM 字符串帶來了大約 30% 的速度提高

瀏覽器兼容

該api在部分瀏覽器支持方面，可能會比較差，建議若是想提高性能的同時，又須要兼容n種瀏覽器，請提早寫好兼容性代碼，保證用戶體驗。