使用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++) { （编辑：PHP编程网 - 黄冈站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
浙公网安备 33038102330482号