(面试)组合函数和白屏时间,笔记

294 阅读2分钟

组合函数:把函数像搭积木一样玩起来

咱们先看这段代码:

// 大写转换
var toUpperCase = function (x) {
    return x.toUpperCase();
}
// 拼接hello
var hello = function (x) {
    return "hello " + x;
}
// 嵌套调用
var greet = function (x) {
    return hello(toUpperCase(x));
}

这不就是把字母变大写再拼接字符串吗?但每次都要手动嵌套太麻烦了

第1版优化:闭包流水线

const compose = (f,g) => {
    return (x) => f(g(x)); // 先执行g,再传给f
}
// 用法
const greet = compose(hello, toUpperCase);

这就好比把函数像流水线一样串起来,但有个问题——只能接两个工位,我要能接N个工位怎么办?

完全体组合函数

const compose = function() {
    var args = [].slice.call(arguments); // 把参数变成真数组
    var start = args.length - 1; // 从最右边的函数开始执行
    
    return function(x) {
        var result = args[start].call(this, x); // 先执行最右边的函数
        for(var i = start-1; i >=0 ; i--){ // 倒着依次执行
            result = args[i].call(this, result);
        }
        return result;
    }
}
// 用法:compose(f1,f2,f3)(x) => f1(f2(f3(x)))

这就像搭乐高积木,不管你有多少块(函数),都能自动按顺序组装。重点在于从右往左执行,和数学中的复合函数 f(g(x)) 顺序一致。

白屏时间:你的网页卡在加载动画了吗?

白屏时间就是用户打开网页,看到第一个像素出现的时间。好比你去餐厅点菜,等了半天连杯水都没上,这时候你就要拍桌子了!

传统土方法:掐表计算

<script>
window.pageStartTime = Date.now(); // 开始计时
</script>
<!-- 各种CSS、JS -->
<script>
window.firstPaint = Date.now(); // 头部加载完
console.log(`白屏:${firstPaint - pageStartTime}ms`);
</script>

这就像用手机秒表手动计时,但问题很明显——如果页面结构在body里,这个时间就不准了。

专业级方案:Performance API

<script>
const observer = new PerformanceObserver(list => {
    list.getEntries().forEach(entry => {
        if(entry.name === 'first-paint'){
            console.log('专业白屏时间:', entry.startTime);
        }
    });
});
observer.observe({ type: 'paint', buffered: true }); // 监控绘制事件
</script>

这相当于给网页装了个行车记录仪,浏览器自己记录关键时间节点。其中first-paint是首次渲染,first-contentful-paint是首次有内容的渲染,比手动掐表准多了!

为什么要关心白屏?

  1. 用户耐心有限:3秒以上白屏,53%用户会直接离开
  2. SEO直接影响:Google明确把加载速度纳入排名因素
  3. 商业价值:每提升1秒加载速度,亚马逊年增收16亿美元

总结一下

  1. 组合函数:把函数调用从f(g(h(x)))变成compose(f,g,h)(x),代码更清爽
  2. 白屏优化:用Performance API监控,关键资源优先加载,懒加载非首屏内容
  3. 性能意识:就像开车要看仪表盘,做前端要时刻关注性能指标

下次面试被问到这两个问题,你就把这篇往脑子里一调取,稳稳拿offer!