性能优化篇 - 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种浏览器，请提早写好兼容性代码，保证用户体验。