- 博客(8)
- 资源 (26)
- 收藏
- 关注
原创 遇到的那些必须弄清楚的关于高性能动画的知识点
问题1:60Hz和60fps有什么关系?没有任何关系。fps代表GPU渲染画面的频率,Hz代表显示器刷新屏幕的频率。一幅静态图片,你可以说这副图片的fps是0帧/秒,但绝对不能说此时屏幕的刷新率是0Hz,也就是说刷新率不随图像内容的变化而变化。游戏也好浏览器也好,我们谈到掉帧,是指GPU渲染画面频率降低。比如跌落到30fps甚至20fps,但因为视觉暂留原理,我们看到的画面仍然是运动和连贯的。
2016-06-28 11:52:27 1829
原创 每天记录一点新遇到的浏览器方法和属性
问题1:document的elementFromPoint方法这个方法可以根据坐标的点来获取元素,不过是获取最上层的元素,而且浏览器兼容也是需要考虑的,因为不同的浏览器传入的参数有可能是clientx,也有可能是pagex。下面的代码就可以实现这个功能。function init() { document.onclick = getElement; writeroot = docu
2016-06-25 17:09:01 869
原创 高性能动画设计的一些优化思路总结
问题1:关注JS的垃圾回收对动画性能的影响Javascript没有显式的内存管理,这就意味着你创建了对象但是你没有释放他们,久而久之,浏览器就会去清理这些对象。这时候动画执行就会停止,浏览器会识别那些内存依然在使用,然后释放其它的内存空间。而且这种多余的垃圾都是逐渐被创建,然后一起被清理的。在60fps的动画上,每一帧只有16ms的绘制时间,但是垃圾回收却会100ms或者更长,这样就会导致明显
2016-06-21 23:08:35 1552
原创 我们来看看chrome控制台动画的性能
问题1:我们使用left/top来看看动画的性能body { padding: 30px; text-align: center;}.container { position: relative; min-height: 400px; -webkit-tap-highlight-color: rgba(0,0,0,0);}.ball { position: a
2016-06-13 10:55:47 3865
转载 Chromium网页渲染机制简要介绍和学习计划
作为一个浏览器,快速地将网页渲染出来是最重要的工作。Chromium为了做到这一点,费尽了心机,做了大量优化工作。这些优化工作是卓有成效的,代表了当今最先进的网页渲染技术。值得一提的是,这些渲染技术不仅适用于网页渲染,也可以应用在原生系统的UI渲染上。例如,在Android系统上,我们就可以看到两者在渲染技术上的相似之处。本文接下来就对Chromium的网页渲染机制进行简要介绍,并且制定学习计划。
2016-06-12 20:54:59 908
原创 GPU硬件加速的那些优秀的资源总结-续
那么为什么一个renderlayerbacking对象需要那么多层?原因有很多,例如webkit需要将滚动条独立开来称为一个层,需要两个容器层来表示renderlayer对应的z坐标为正数和z坐标为负数的子女,需要滚动的内容建立新层,还可能需要剪裁层和反射层,这些层绘制和组织的顺序如下图(图中每一个层就是一个graphiclayer对象):
2016-06-11 21:22:18 3095
原创 如何让网页大小自适应的JS代码
其原理是比较简单的,也就是根据当前视口的大小自动计算跟元素的fontSize值: ! function(a) { function b() { //为window对象添加了rem属性,其值为document.documentElement的宽度的1/16! //同时把他设置为document.documentElement的fontSize属性,这里其实不用把w
2016-06-05 10:12:10 10433
在线评论数据集 论文全文 字段解释
2017-04-12
CMD规范之seajs
2015-12-06
HTML5离线存储
2015-11-17
javascript编程宝典第二版源码
2015-07-06
网络爬虫代码
2015-07-05
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人