浅析CSS的性能优化

下面我们来看一个动画效果（类似平时页面滚动功能），在该动画是让一个球沿着某种路径移动。最简单的方式就是实时调整它们的left和top属性，使用css动画实现。

在运行的时候即使是在电脑浏览器上也会隐约觉得动画的运行并不流畅，更不要提在移动端达到60fps的流畅效果了。这是因为top和left的改变会触发浏览器的reflow和repaint，整个动画过程都在不断触发浏览器的重新渲染，这个过程是很影响性能的。

为了解决这个问题，我们使用transform中的translate()来替换top和left

这个时候我们就会发现整个动画效果流畅了很多，在动画移动的过程中也没有发生repaint和reflow。那么为什么transform没有出发repaint呢？原因就是transform动画由GPU控制，支持硬件加速，并不需要软件方面的渲染。

浏览器收到页面文档后，会将文档中的标记语言解析为DOM树，DOM和CSS结合后形成浏览器构建页面的渲染树，渲染树中包含了大量的渲染元素，每一个渲染元素会被分到一个图层中，每个又会被加载到GPU形成渲染纹理，而图层在GPU中transform是不会触发repaint的，这一点非常类似3D绘图功能，最终这些使用transform的图层都会使用独立的合成器进程进行处理，移动时的变化也是独立的，不会影响到页面的其他元素，造成重排重绘是因为影响到页面的其他图层元素导致的，可以理解为其他元素都是在一个图层空间，所以一个图层移动其他的也会收到影响，而transform创建了一个新的复合图层，它会被GPU独立执行transform *** 作，跟其他图层互不影响，所以不会引起重排重绘。

此时，你也许会问浏览器什么时候会创建一个独立的复合图层呢？事实上一般是在以下几种情况下：

因为GPU进程会为其开启一个新的复合图层，不会影响默认复合图层（就是普通文档流），所以并不会影响周边的 DOM 结构，而属性的改变也会交给 GPU 处理，不会进行重排。使 GPU 进程开启一个新的复合图层的方式还有 3D 动画，过渡动画，以及 opacity 属性，还有一些标签，这些都可以创建新的复合图层。这些方式叫做硬件加速方式。你可以想象成新的复合图层和默认复合图层是两幅画，相互独立，不会彼此影响。降低重排的方式：要么减少次数，要么降低影响范围，创建新的复合图层就是第二种优化方式。绝对布局虽然脱离了文档流，但不会创建新的复合图层，因此当绝对布局改变时，不会影响普通文档流的 render tree，但是依然会绘制整个默认复合图层，对普通文档流是有影响的。普通文档流就是默认复合图层，不要介意我交换使用它们如果你要使用硬件加速方式降低重排的影响，请不要过度使用，创建新的复合图层是有额外消耗的，比如更多的内存消耗，并且在使用硬件加速方式时，配合 z-index 一起使用，尽可能使新的复合图层的元素层级等级最高。

（1）transform

（2）opacity

（3）filter

（1）内存。如果GPU加载了大量的纹理，那么很容易就会发生内存问题，这一点在移动端尤为明显。

（2）使用GPU渲染会影响字体的抗锯齿效果。这是因为GPU和CPU具有不同的渲染机制，即使最终硬件加速停止了，文本还是会在动画期间显示的很模糊。

1、transform会使用GPU硬件加速，性能更好，position + top/left会触发大量的重排重绘，性能影响较大。

2、硬件加速的工作原理是创建一个新的复合图层，然后使用合成线程进行渲染

3、3D和2D动画的区别，2D动画会在动画开始和动画结束时触发2次重新渲染

4、使用了GPU可以优化动画小故宫但是不要滥用，会有内存问题

5、理解强制触发硬件加速的transform技巧，使用对GPU友好的CSS属性

参考文章： >

你这个是盒子模型的定义没有理解清楚，盒子模型(margin border padding content)里面的层设置的高度已定，即content高度已定，而盒子其他的项没有设值，外面的层高度也已经定了，即里面的content已设置高度，后又加上了padding的值，所以盒子的高度又增加了

我们将在本文中介绍一些关于页面构建常用的一些小工具,大部分是基于firefox的插件,通过这些小工具可以让我们在页面构建中事半功倍

页面构建必备工具—Firebug相信每个页面构建的同学都有这个工具吧如果没有的话，你赶紧安装（点击此处安装）,Firebug就像它的名字一样，帮你找到虫子，烧掉它！同时有一些firefox的页面调试工具也是基于Firebug的，比如Yslow,CSSUsage网页测量利器_MeasureIt当我们拿到一个设计稿,写完基本的结构后,我们的测量工具可能就开始了,那些间距高度宽度对齐,就需要一把好尺子来协助我们了,这里我像大家推荐MeasureItFirefox点击安装,通过这把尺子,我们就能很方便的进行一些测量对齐工作,但是这个工具的缺陷是由于那个尺子的边框,我们不容易达到像素级的标准,那我们就需要下面将要介绍的工具Pixelperfect实时颜色选取工具_Colorzilla将版式调整好后的任务应该就是处理颜色方面的问题，通常我们会将其放到ps等编辑软件中来查看相应的色值，如果有了Colorzilla，我们就能更直观的使用颜色，特别是有时候我们用文本编辑软件编写CSS色值的时候，我们甚至可以将设计稿直接拖到浏览器里面直接去想要位置的颜色,而且支持RGB，RGBa，HSL，十六进制，可以直接复制

同时这个软件还提供了色板和渐变生成工具

点击此处立刻体验检查网页的相关信息_WebDeveloper一个页面相关信息的集大成者，任何关于网页前端的信息你都能从里面找到，我们可以很方便的查看网页的大纲、无CSS，查看DOM节点等

只要你想，基本都有了

让你的CSS更瘦一些—CSSusage随着产品经理一遍遍的调整产品，你是不是也感觉你的css文件慢慢变胖，但是又不敢轻易删掉一些样式，因为你不知道它们是不是被用到过，那就让下面的CSSUsage来帮你

通过检查class名称使用情况，来查看页面中的CSS信息，从而方便开发者优化CSS样式表

可显示4类信息Seencss中当页所使用的classSeenbefore此class曾经出现在此网站的其他网页，当然是在已经浏览过其他网页的情况下Unseencss中的class，此页面并未使用过:hover伪类信息我们以前曾稍微深入的探讨,请移步至CSS减肥工具—CSSUsage网页评级工具_YslowYslow是基于firebug的一个网页评级工具,它根据Yahoo用户体验部门订制的34条可能对网页前段表现产生影响的规则,这些规则中有23条可以通过这个工具来测试

即使我们不使用这个工具,了解这些规则也是很不错的

减少ponents避免使用滤镜不要在HTML中重定义文件的大小确保favicon

ico小而且可以被缓存网页截图存储工具_PearlcrescentpagesaverbasicPageSaver可以将网页转化为，包括网页上的Flash也能同时被转化

网页可以按照你的要求保存为PNG或者JPEG格式

可以将整个网页或者在屏幕上看到的部分转化为

为了方便截取网页，插件提供了大量的设置选项，包括默认的文件名、文件后缀名、的质量

可以通过工具栏按钮截取，也可以通过浏览器的菜单选项截取，还可以通过命令行截取

当前可见区域保存为：将整个页面保存为HTML页面与设计稿像素级比对工具_Pixelperfect可以将设计师的设计图通过此插件作为蒙版加载到浏览器上，通过调节的透明度以及位置，可以进行设计稿与页面的细节比对，来优化提高页面样式的精确度

先将设计稿添加到需要对比的页面中来：让显示：可以通过调整透明度和具体坐标位置来重合和网页，然后对样式进行修正

让显示：本地调试页面样式利器_Fiddler当我们的静态页面经过前端工程师、程序员同事的工作后，盼望着旁望着，终于上线了，这时咱们这边也又要忙碌了，因为一些在静态页面没有考虑到的情况和相关前端和程序同事的加工后，页面上出现了一些bug，特别是有时候这些BUG在不同的浏览器下展现还不一样，单靠Firebug工具我们烧不死这些虫，那我们就可以通过Fildder工具，来监视所有ponents页面中有助于进行SEO优化的信息情况3

Printview打印网页信息此内容将inspectSEOCriteria和components信息集合起来，可以进行打印

以上就是关于浅析CSS的性能优化全部的内容，包括:浅析CSS的性能优化、CSS3布局方式有哪些、CSS设置padding时，为什么是外面的层height变高，而不是里面的层的height变小<d等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！