-
Notifications
You must be signed in to change notification settings - Fork 88
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
性能优化之帧率 #13
Comments
最近对这方面查了不少资料,想认领~ |
@inkinworld 原则上只提供给 小密圈 的成员认领,你可以在这个 issue 下分享链接/文章/资料等,错误的内容我会帮你纠正,可以一起学习。 |
申请认领~ |
不才之前使用的一种方案:通过 function fps(callback) {
var requestAnimationFrame =
/** Chromium */
window.requestAnimationFrame ||
/** Webkit */
window.webkitRequestAnimationFrame ||
/** Mozilla Geko */
window.mozRequestAnimationFrame ||
/** Opera Presto */
window.oRequestAnimationFrame ||
/** IE Trident */
window.msRequestAnimationFrame ||
/** Fallback function */
function (callbackFunc) {
window.setTimeout(callbackFunc, 1000 / 60);
};
var fps = 0;
var last = Date.now();
var offset;
function step() {
offset = Date.now() - last;
fps += 1;
if (offset >= 1000) {
last += offset;
/** callback with calculated fps */
callback(fps);
}
requestAnimationFrame(step);
}
step();
} |
@aleen42 会有帮助,但这个属于细节上的优化,网站的 FPS 影响因素特别多,把一个细节的优化点落实到整个项目工程中是一件比较费力的事情。 |
@barretlee clear |
在对性能分析工具使用前,推荐先阅读性能优化的文章 FPS 的测量方式使用 chrome timeline 功能进行性能分析:使用 chrome rendering Settings:使用该工具依次可查看:
使用 chrome Layers panel 进行页面布局、图层分析开启 Layers panel 方法:
参考自: 测试环境方法:FPS 优化方案What Every Frontend Developer Should Know About Webpage Rendering Google Web Fundamentals:HTML5 Rocks:Accelerated Rendering in Chrome taobao FED:Others:Smooth as Butter: Achieving 60 FPS Animations with CSS3 这些文章多少都有些话题重复的地方,但对理解浏览器渲染流程都很有帮助,可以根据每篇文章的相关引用链接进一步探索了解。 |
认领人须知
The text was updated successfully, but these errors were encountered: