前言
在平時的工作當中，我們在操作dom的樣式的時候，其實操作的就是css的物件模型cssOM，其實在16年的時候，就釋出了一組新的物件模型cssTypeOM，這是一個全新的操作css樣式的方式，它的好處有很多，我們一一列舉。
瀏覽器渲染檢視步驟
在講解cssOM和cssTypeOM的區別的同時，我們要了解瀏覽器是如何渲染檢視的：
1、解析html後構建dom物件
2、解析css後構建cssOM物件
3、瀏覽器將dom與css組成渲染樹
4、最終瀏覽器渲染到檢視中
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的優勢了，這裡我在總結一下：
1、最大限度的降低了通過字串表現形式去修改css樣式，降低了出現此類bug的風險
2、通過css typed OM的運算方法，最短時間最快的去進行樣式運算
3、錯誤處理，如果有接收到錯誤的css，就會直接丟擲錯誤，方便在最短的時間去定位問題
4、由於dom上的attributeStyleMap方法是一個StylePropertyMap物件，所以方便使用所有的map物件的方法
5、更好的效能！！！由於減少了字串操作，對於 CSSOM 的操作效能得到了更進一步的提升，由 Tab Akins 提供的測試表明，操作 Typed OM 比直接操作 CSSOM 字串帶來了大約 30% 的速度提升
瀏覽器相容
該api在部分瀏覽器支援方面，可能會比較差，建議如果想提升效能的同時，又需要相容n種瀏覽器，請提前寫好相容性程式碼，保證使用者體驗。