CSS动画属性性能
- CSS动画属性会触发整个页面的重排relayout、重绘repaint、重组recomposite
- Paint通常是其中最花费性能的,尽可能避免使用触发paint的CSS动画属性,这也是为什么我们推荐在CSS动画中使用
webkit-transform: translateX(3em)
的方案代替使用left: 3em
,因为left
会额外触发layout与paint,而webkit-transform
只触发整个页面composite
要CSS伪类 :active
生效,只需要给 document 绑定 touchstart
或 touchend
事件
1 2 3 4 5 6 7 8 9 10 11 12 |
<style> a { color: #000; } a:active { color: #fff; } </style> <a herf=foo >bar</a> <script> document.addEventListener('touchstart',function(){},false); </script> |
JPEG有两种存储格式:baseline
和 progressive
。Baseline JPEG 会在数据可用时,一行一行自上而下显示。Progressive JPEG会先显示模糊图片,然后逐渐清晰。
Progressive JPEG在所有浏览器都会显示,这里的关注点是如何渲染。 查看全文
WebP
是Google
推出的意图改变web
图片JPG
、PNG
、GIF
三分天下局势的一种图片格式,可对图像大幅压缩。它不仅支持无损或有损压缩、alpha
通道,还支持动画演示。在同画质的情况下,WebP
格式图片占用体积相较于jpg
图片大约减少40%
,相较于无损png
图片大约减少30%
。
Google浏览器Chrome首先引入WebP,此外Opera 11.10也增加对WebP的支持。
如果你能看见下面的图片,说明你的浏览器支持WebP。 查看全文