(TODO)前端性能优化的解决方案

思路

通过静态扫描+动态测试+深入函数级别的性能探测，三合一构建最佳实践一条龙服务。

lighthouse测试

可以下载Chrome插件，也可以直接程序中引入js使用：

https://www.cnblogs.com/fnng/p/15488030.html

网易云音乐的实践：

https://zhuanlan.zhihu.com/p/91365316

依赖包分析

这个在线工具可以分析你的package.json，列出每个包的大小以及在不同网速下的加载耗时，很赞！

https://bundlephobia.com/

比如我扫描d3-charts，得到的结果如下：

d3-charts

静态扫描

https://github.com/es-analysis/plato

动态测试

npm install -g lighthouse
lighthouse –view url

深入函数级别的性能探测

类似PHP中的XHProf，可以通过切面(AOP)的概念来做：
https://polande.com/js-aop-function-time/

内存

可以编写函数获取每个变量的内存大小：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
function memorySizeOf(obj) {
    var bytes = 0;

    function sizeOf(obj) {
        if(obj !== null && obj !== undefined) {
            switch(typeof obj) {
            case 'number':
                bytes += 8;
                break;
            case 'string':
                bytes += obj.length * 2;
                break;
            case 'boolean':
                bytes += 4;
                break;
            case 'object':
                var objClass = Object.prototype.toString.call(obj).slice(8, -1);
                if(objClass === 'Object' || objClass === 'Array') {
                    for(var key in obj) {
                        if(!obj.hasOwnProperty(key)) continue;
                        sizeOf(obj[key]);
                    }
                } else bytes += obj.toString().length * 2;
                break;
            }
        }
        return bytes;
    };

    function formatByteSize(bytes) {
        if(bytes < 1024) return bytes + " bytes";
        else if(bytes < 1048576) return(bytes / 1024).toFixed(3) + " KiB";
        else if(bytes < 1073741824) return(bytes / 1048576).toFixed(3) + " MiB";
        else return(bytes / 1073741824).toFixed(3) + " GiB";
    };

    return formatByteSize(sizeOf(obj));
};

参考文章：JS内存管理

流程

引入stat.js

https://mrdoob.github.io/stats.js/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script src="https://mrdoob.github.io/stats.js/build/stats.min.js"></script>
<script>
	var stats = new Stats();
    stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
    document.body.appendChild(stats.dom);

    function animate() {
        stats.begin();
        // monitored code goes here
        stats.end();
        requestAnimationFrame(animate);
    }

    requestAnimationFrame(animate);
</script>

开启Chrome性能分析

定位到具体影响性能的代码

参考资料

(精)使用 Preload/Prefetch 优化你的应用：

https://zhuanlan.zhihu.com/p/48521680