- 博客(8)
- 资源 (26)
- 收藏
- 关注
RSS订阅原创 遇到的那些必须弄清楚的关于高性能动画的知识点
问题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关注的人