内容简介:While working with CSS, HTML, and JavaScript, it's always important to take care of browser rendering in browser DevTools. To find issues with rendering, we are using "Timeline" with "JS Profile" and "Memory" consumption tracking. Those tools are great whe
Measure FPS
While working with CSS, HTML, and JavaScript, it's always important to take care of browser rendering in browser DevTools. To find issues with rendering, we are using "Timeline" with "JS Profile" and "Memory" consumption tracking. Those tools are great when you know about the existing problem.
During our development process, we are using FPS-meter, which gives a signal when "Long" frames occur. To see meter action, visit this link ( in the left bottom corner ). Play with sliders to see how different CSS effects may slow down the rendering process, blur is the most "expensive" CSS3 filter.
This library works on mobile devices. It utilizes performance.now to measure time frame and requestAnimationFrame to measure rendered frames, both APIs are very efficient and have a minor impact ( for correct FPS measurement ).
Demo:
- Demo can be found on this website ( in the left bottom corner ).
Drop-in version
Installation is not required, copy-paste script into browser' console:
- Drop-in: minified version ;
- Drop-in: developer version ;
- Link to minified file ;
- HTML Script:
<script type="text/javascript" src="https://raw.githubusercontent.com/VeliovGroup/fps-meter/master/fps-meter-drop-in.min.js"></script>
Installation
NPM install
npm i --save fps-m
Meteor add
meteor add ostrio:fps-meter
NPM require
// require
const FPSMeter = require('fps-m');
// ES6 import:
import FPSMeter from 'fps-m';
Meteor: ES6 Import
import { FPSMeter } from 'meteor/ostrio:fps-meter';
Quick start
(new FPSMeter({ui: true})).start();
API
new FPSMeter([opts])
-
opts{ Object } -
opts.ui{ Boolean } - Render small box with current FPS intobody, default:false -
opts.reactive{ Boolean } - Store current FPS as reactive data source, default:false
// Quick start:
const fps = new FPSMeter({ui: true, reactive: false});
// fps.start();
// fps.stop();
Methods
-
FPSMeter#start()— Use to start measuring FPS. If{ui: true}small box with current FPS will be rendered intobody -
FPSMeter#stop()— Use to stop measuring FPS. If{ui: true}box with current FPS will be removed frombody -
FPSMeter#pause()— Use to pause measuring FPS. If{ui: true}box with current FPS will remain inbody -
FPSMeter#resume()— Use to resume measuring FPS -
FPSMeter#toggle()— Use to toggle (pause/resume) measuring FPS
Properties
-
FPSMeter#isRunning{ Boolean } —trueif meter is running andfalsewhen meter is on pause, stopped or has not started yet -
FPSMeter#template{ Blaze.View | undefined } — When{ui: true}this property holds Blaze.View instance, otherwise itsundefined -
FPSMeter#element{ DOMElement | undefined } — When{ui: true}this property holds DOMElement of FPSMeter UI elementdiv, otherwise itsundefined -
FPSMeter#fps{ Number | ReactiveVar } — When{reactive: false}it holds a { Number } with current FPS. When{reactive: true}it is an instance of{*ReactiveVar*}. Use.get()method to return current FPS. It's reactive data source, and can be used in template:
const fps = new FPSMeter({ui: false, reactive: true});
Template.currentFPS.helpers({
currentFPS() {
return fps.fps.get();
}
});
Template.currentFPS.events({
'click [data-start-fps]'(e) {
e.preventDefault();
fps.start();
return false;
},
'click [data-stop-fps]'(e) {
e.preventDefault();
fps.stop();
return false;
}
});
<template name="currentFPS">
<div>{{currentFPS}}</div>
<button data-start-fps>Start</button>
<button data-stop-fps>Stop</button>
</template>
Pause/Resume by clicking on UI box
const fps = new FPSMeter({ ui: true });
fps.start();
fps.element.addEventListener('click', fps.toggle.bind(fps), { passive: true, capture: false });
Support this project:
- Become a patron — support my open source contributions with monthly donation
- Use ostr.io — Monitoring , Analytics , WebSec , Web-CRON and Pre-rendering for a website
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
移动互联网商规28条
王吉斌、彭盾、程成 / 机械工业出版社 / 2014-6 / 49.00
每一次信息技术革命都会颠覆很多行业现有的商业模式和市场规则,当前这场移动互联网变革的波及面之广和蔓延速度之快,完全超出我们的想象。行业的边界被打破并互相融合,在此之前,我们只面临来自同行业的竞争,但是今天,我们不知道竞争对手会来自哪里。也许今天我们还是行业的巨人,但是明天就会被踩在脚下,当我们的体温犹热时,新的巨人已经崛起。诺基亚等传统科技巨头的衰退告诉我们,企业在一个时代的优势,到了另外一个新时......一起来看看 《移动互联网商规28条》 这本书的介绍吧!