层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。_CSS目前最新版本为CSS3，是能_css.zip

#GPU * CPU擅长处理具有复杂计算步骤和复杂数据依赖的计算任务，如分布式计算，数据压缩，人工智能，物理模拟，以及其他很多很多计算任务等。CPU可以渲染图像，可以解码视频、可以解码音频、可以3D渲染，但在执行效率方面，就不如专门的硬件了。 * GPU的众核架构非常适合把同样的指令流并行发送到众核上，采用不同的输入数据执行。在2003-2004年左右，图形学之外的领域专家开始注意到GPU与众不同的计算能力，开始尝试把GPU用于通用计算（即GPGPU）。之后NVIDIA发布了CUDA，AMD和Apple等公司也发布了OpenCL，GPU开始在通用计算领域得到广泛应用，包括：数值分析，海量数据处理（排序，Map-Reduce等），金融分析等等。 * CPU更灵活，负载小，而GPU虽然处理速度没有那么快，但在处理高并发任务时有优势。<br/> ##FPS 帧率或画面更新率是用于测量显示帧数的量度。测量单位为“每秒显示帧数” 或“赫兹”，一般来说FPS用于描述视频、电子绘图或游戏每秒播放多少帧，而赫兹则描述显示屏的画面每秒更新多少次。 由于人类眼睛的特殊生理结构，如果所看画面之帧率高于每秒约10-12帧的时候，就会认为是连贯的， 此现象称之为视觉暂留。这也就是为什么电影胶片是一格一格拍摄出来，然后快速播放的。而超过大概85赫兹的图像，像是画面每更新一次只会发光几百分之一秒的阴极射线管及等离子显示屏，此时已经到达大脑处理图像的极限，人眼并无法分辨与更高更新率的差异，因此使用主动式快门眼镜的3D电视更新率达到200赫兹或以上，对人眼来说是无法看到左右视角切换的过程。 * 所以说，FPS值越高代表画面越流畅。现在，像Chrome, FireFox, Safari, IE9+和最新版本的Opera都支持硬件加速，当它们检测到页面中某个DOM元素应用了某些CSS规则时就会开启，最显著的特征的元素的3D变换。 ```css .cube{ -webkit-transform: translate3d(250px,250px,250px); rotate3d(250px,250px,250px,-120deg); scale3d(0.5, 0.5, 0.5); } ``` * 可是在一些情况下，我们并不需要对元素应用3D变换的效果，那怎么办呢？这时候我们可以使用个小技巧“欺骗”浏览器来开启硬件加速。虽然我们可能不想对元素应用3D变换，可我们一样可以开启3D引擎。例如我们可以用transform: translateZ(0)来开启硬件加速 。 ```css .cube { -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); /* Other transform properties here */ } ``` 在 Chrome and Safari中，当我们使用CSS transforms 或者 animations时可能会有页面闪烁的效果，下面的代码可以修复此情况： ```css .cube { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; -moz-perspective: 1000; -ms-perspective: 1000; perspective: 1000; /* Other transform properties here */ } ``` 在webkit内核的浏览器中，另一个行之有效的方法是: ```css .cube { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); /* Other transform properties here */ } ``` * absolute vs translate <br/>  * rotate() <br/>  * scale() <br/>  * 原生的移动端应用(Native mobile applications)总是可以很好的运用GPU，这是为什么它比网页应用(Web apps)表现更好的原因。硬件加速在移动端尤其有用，因为它可以有效的减少资源的利用。 * 只对我们需要实现动画效果的元素应用以上方法，如果仅仅为了开启硬件加速而随便乱用，那是不明智的。小心使用这些方法，如果通过你的测试，结果确是提高了性能，你才可以使用这些方法。使用GPU可能会导致严重的性能问题，因为它增加了内存的使用，而且它会减少移动端设备的电池寿命 我们再来简单了解下GPU在Chrome里如何工作的，传统来说，网页内容是完全依赖于CPU来渲染的，这也称作软件渲染 （software rendering），随着GPU的发展越来越好，在图形3D等方面的优势很明显，GPU有个特性是分层渲染，这样的话就可以让CPU和GPU同时并行工作，大大提高网页渲染的速度