组合函数:把函数像搭积木一样玩起来
咱们先看这段代码:
// 大写转换
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!