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

缺乏、安全感 2021-07-04 16:17 218阅读 0赞

## 前言 ##

在平时的工作当中，我们在操作`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%` 的速度提升

## 浏览器兼容 ##

![在这里插入图片描述][20190905234553591.png]  
该`api`在部分浏览器支持方面，可能会比较差，建议如果想提升性能的同时，又需要兼容`n`种浏览器，请提前写好兼容性代码，保证用户体验。

[20190905234553591.png]: /images/20210704/b00fb501dabc4eaea6d6a277c2cd9073.png