高级前端二面常见面试题总结

最新推荐文章于 2025-05-14 15:32:26 发布

aync_sync

最新推荐文章于 2025-05-14 15:32:26 发布

阅读量541

点赞数

CC 4.0 BY-SA版权

文章标签：前端框架 javascript

本文链接：https://blog.youkuaiyun.com/aync_sync/article/details/129242140

这篇博客总结了高级前端面试中常见的问题，包括Connection: keep-alive的工作原理和作用，单例模式的实现，Promise.any的用法，以及JavaScript中的类型转换和模板字符串解析等知识点，还探讨了BFC布局、标题标签与样式标签的区别，懒加载的实现原理，正向代理与反向代理的区别，以及浏览器对HTML5离线储存的管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

介绍一下Connection:keep-alive

什么是keep-alive

我们知道HTTP协议采用“请求-应答”模式，当使用普通模式，即非KeepAlive模式时，每个请求/应答客户和服务器都要新建一个连接，完成之后立即断开连接（HTTP协议为无连接的协议）；

当使用Keep-Alive模式（又称持久连接、连接重用）时，Keep-Alive功能使客户端到服务器端的连接持续有效，当出现对服务器的后继请求时，Keep-Alive功能避免了建立或者重新建立连接。

为什么要使用keep-alive

keep-alive技术的创建目的，能在多次HTTP之前重用同一个TCP连接，从而减少创建/关闭多个 TCP 连接的开销（包括响应时间、CPU 资源、减少拥堵等），参考如下示意图

客户端如何开启

在HTTP/1.0协议中，默认是关闭的，需要在http头加入"Connection: Keep-Alive”，才能启用Keep-Alive；

Connection: keep-alive

http 1.1中默认启用Keep-Alive，如果加入"Connection: close “，才关闭。

Connection: close

目前大部分浏览器都是用http1.1协议，也就是说默认都会发起Keep-Alive的连接请求了，所以是否能完成一个完整的Keep- Alive连接就看服务器设置情况。

单例模式

意图：保证一个类仅有一个实例，并提供一个访问它的全局访问点。

主要解决：一个全局使用的类频繁地创建与销毁。

何时使用：当您想控制实例数目，节省系统资源的时候。

如何解决：判断系统是否已经有这个单例，如果有则返回，如果没有则创建。

实现：

var Singleton = (function() {
   
   
    // 如果在内部声明 SingletonClass 对象，则无法在外部直接调用
    var SingletonClass = function() {
   
    }; 
    var instance;
    return function() {
   
   
        // 如果已存在，则返回 instance
        if(instance) return instance;
        // 如果不存在，则new 一个 SingletonClass 对象
        instance = new SingletonClass();
        return instance;
    }
})();

// 测试
var a = new Singleton();
var b = new Singleton();
console.log(a === b);  // true

Promise.any

描述：只要 promises 中有一个fulfilled，就返回第一个fulfilled的Promise实例的返回值。

实现

Promise.any = function(promises) {
   
   
    return new Promise((resolve, reject) => {
   
   
        if(Array.isArray(promises)) {
   
   
            if(promises.length === 0) return reject(new AggregateError("All promises were rejected"));
            let count = 0;
            promises.forEach((item, index) => {
   
   
                Promise.resolve(item).then(
                    value => resolve(value),
                    reason => {
   
   
                        count++;
                        if(count === promises.length) {
   
   
                            reject(new AggregateError("All promises were rejected"));
                        };
                    }
                );
            })
        }
        else return reject(new TypeError("Argument is not iterable"));
    });
}

代码输出结果

const first = () => (new Promise((resolve, reject) => {
   
   
    console.log(3);
    let p = new Promise((resolve, reject) => {
   
   
        console.log(7);
        setTimeout(() => {
   
   
            console.log(5);
            resolve(6