组合函数：把函数像搭积木一样玩起来
咱们先看这段代码：
// 大写转换
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是首次有内容的渲染，比手动掐表准多了！
为什么要关心白屏？
- 用户耐心有限：3秒以上白屏，53%用户会直接离开
- SEO直接影响：Google明确把加载速度纳入排名因素
- 商业价值：每提升1秒加载速度，亚马逊年增收16亿美元
总结一下
- 组合函数：把函数调用从
f(g(h(x)))变成compose(f,g,h)(x)，代码更清爽 - 白屏优化：用Performance API监控，关键资源优先加载，懒加载非首屏内容
- 性能意识：就像开车要看仪表盘，做前端要时刻关注性能指标
下次面试被问到这两个问题，你就把这篇往脑子里一调取，稳稳拿offer！
