行使Chrome Timeline来完美页面机能
|
副问题[/!--empirenews.page--]
嗯没错就是它。下面一一先容一下吧。地区 1 是一个缩略图，可以看到除了时刻轴以外被上下分成了四块，别离代表 FPS、CPU 时刻、收集通讯时刻、仓库占用;这个缩略图可以横向缩放，白色地区是下面可以看到的时刻段(灰色虽然是不行见的啦)。地区 2 可以看一些交互变乱，譬喻你转动了一下页面，那么这里会呈现一个 scroll 的线段，线段包围的范畴就是转动颠末的时刻。地区 3 则是详细的变乱列表了。 一开始没有记录的时辰，全部的地区都是空的。开始统计和竣事统计都很简朴，左上角那坨玄色的圆圈就是。它右边谁人长得像“榨取通行”的按钮是用来破除现有记录的。当稀有据的时辰，我们把鼠标滚轮向上滚，可以看到地区被放大了： 短短的时刻里，赏识器做了这么多工作。对付一样平常的屏幕，原则上来说一秒要往屏幕上绘制 60 帧，以是理论上讲我们一帧内的计较时刻不能高出 16 毫秒，然而赏识器除了执行我们的代码以外，还要干点此外(譬喻计较 CSS，播放音频……)，以是着实我们能用的只有 10~12 毫秒阁下。 差不多认识操纵了，那么就来一下拭魅战吧!若是有一天，你接办了这样一段代码： <!-- 一段小动画：点击按钮之后会有一个爆炸的粒子结果 --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Test</title> <style> .main { position: relative; width: 500px; height: 500px; background: #000; overflow: hidden; } .circle { position: absolute; border-radius: 50%; border: 1px solid #FFF; width: 8px; height: 8px; } </style> </head> <body> <div class="main"></div> <hr> <button onclick="showAnimation()">点我</button> <script src="jquery.min.js"></script> <script src="animation.js"></script> </body> </html> // animation.js
// 粒子总数 var COUNT = 500; // 重力 var G = -0.1; // 摩擦力 var F = -0.04;
function init() { for (var i = 0; i < COUNT; i++) { var d = Math.random() * 2 * Math.PI; var v = Math.random() * 5; var circle = $('<div id="circle-' + i + '" class="circle" data-x="250" data-y="250" data-d="' + d + '" data-v="' + v + '"></div>'); circle.appendTo($('.main')); } }
function updateCircle() { for (var i = 0; i < COUNT; i++) { （编辑：湖南网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
