如何設計一個typed？
在平時的工作當中，我們在操作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種瀏覽器，請提前寫好兼容性代碼，保證用戶體驗。