性能优化之帧率

[barretlee]

认领人须知

• FPS 的测量方式
• FPS 测量方案
• FPS 优化方案

[inkinworld]

最近对这方面查了不少资料，想认领～

[barretlee]

@inkinworld 原则上只提供给 小密圈 的成员认领，你可以在这个 issue 下分享链接/文章/资料等，错误的内容我会帮你纠正，可以一起学习。

[inkinworld]

申请认领～

[aleen42]

不才之前使用的一种方案：通过 requestAnimationFrame() 来计算，不知是否有帮助呢？

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();
}

[barretlee]

@aleen42 会有帮助，但这个属于细节上的优化，网站的 FPS 影响因素特别多，把一个细节的优化点落实到整个项目工程中是一件比较费力的事情。

[aleen42]

@barretlee clear

[inkinworld]

在对性能分析工具使用前，推荐先阅读性能优化的文章

FPS 的测量方式

使用 chrome timeline 功能进行性能分析：

chrome DevTool Timeline Tool

使用 chrome rendering Settings:

Rendering Settings

使用该工具依次可查看：

1. 发生重绘的元素
2. 图层边界
3. 实时帧值
4. 滚动性能

使用 chrome Layers panel 进行页面布局、图层分析

开启 Layers panel 方法：

1. chrome 访问 Enable Developer Tools experiments
2. 重启chrome
3. 打开 Chrome DevTools
4. 点击 DevTools 右上角菜单 settings
5. 选择左侧 Experiments 菜单
6. 激活 Layers panel 选项
7. 关闭该菜单，重启 Chrome DevTools
8. 在 DevTools 顶部查看是否有 Layers panel Tab，若无，点击右上角菜单 More Tools 选项中激活

参考自： Hidden Gems in Chrome Developer Tools

测试环境方法：

无线性能优化：FPS 测试

FPS 优化方案

What Every Frontend Developer Should Know About Webpage Rendering

Google Web Fundamentals：

Rendering Performance

HTML5 Rocks:

Accelerated Rendering in Chrome

taobao FED:

无线性能优化：Composite

Others:

Smooth as Butter: Achieving 60 FPS Animations with CSS3

Pixels are expensive

这些文章多少都有些话题重复的地方，但对理解浏览器渲染流程都很有帮助，可以根据每篇文章的相关引用链接进一步探索了解。