TP联洲一面

最新推荐文章于 2024-10-16 11:23:07 发布

Redstone Monstrosity

最新推荐文章于 2024-10-16 11:23:07 发布

阅读量1.5k

点赞数 7

文章标签：前端面试

本文链接：https://blog.csdn.net/qq_43858368/article/details/142267270

版权

1. 请尽可能详细地说明，BFC是什么？你的回答中不要写出示例代码。

BFC（Block Formatting Context）是CSS中的一个重要概念，它定义了一个独立的渲染区域，使得其中的块级盒子可以在布局上不受外部影响，从而可以更精确地控制页面布局。BFC是一种布局上下文，它决定了盒子如何对其内容进行布局、定位和清除浮动。

BFC的特点

独立的渲染区域：BFC创建了一个独立的渲染区域，内部的块级盒子会按照特定的规则进行布局，不会影响到外部元素的布局。
防止外边距重叠：在同一个BFC中的两个相邻块级元素的外边距会发生重叠，通过触发两个元素所在的BFC可以避免外边距重叠。
清除浮动：BFC可以包含浮动元素，使得父元素的高度能够自适应内部元素的高度，从而解决父元素高度塌陷的问题。
自适应布局：BFC可以用于实现自适应的两栏布局，通过将其中一栏设置为浮动元素或绝对定位元素，另一栏设置为BFC，可以实现两栏布局并且自适应高度。

触发BFC的条件

根元素（<html>）
浮动元素（float不为none）
绝对定位元素（position为absolute或fixed）
行内块元素（display为inline-block）
表格单元格（display为table-cell）
表格标题（display为table-caption）
包含块的overflow属性不为visible

BFC的应用场景

清除浮动
防止外边距重叠
自适应两栏布局
防止文字环绕
解决垂直居中问题
实现多栏等高布局
防止元素被浮动元素覆盖

通过理解BFC的概念、触发条件以及应用场景，开发者可以更有效地控制页面布局，解决常见的布局问题，提升网站的可维护性和性能。

2. 请尽可能详细地说明，前端怎么实现高并发http请求？有哪些注意事项？你的回答中不要写出示例代码。

前端实现高并发HTTP请求是一个复杂的过程，需要综合考虑多个方面。以下是一些关键点和注意事项：

实现高并发HTTP请求的方法

使用异步编程模型：利用JavaScript的异步特性，如Promise、async/await，以及Fetch API的Promise版本，可以避免阻塞线程，实现并发请求。
请求队列和并发控制：通过维护一个请求队列，可以限制并发请求的数量，确保系统稳定性。可以使用Promise.all或其他并发控制工具来管理这些请求。
资源利用和释放：确保在请求完成后及时释放资源，如网络连接和DOM节点，以避免内存泄漏。

注意事项

浏览器限制：浏览器通常会对同一域名的并发请求数量有限制，通常为6~8个。这是为了防止对服务器造成过大压力。
服务器压力：大量并发请求可能会导致服务器资源耗尽，因此需要合理控制并发请求的数量。
网络拥堵：大量请求可能会占用大量网络带宽，导致网络拥堵，影响用户体验。

优化策略

分页与无限滚动：通过分页或无限滚动的方式，可以减轻服务器负担，提高加载效率。
缓存机制：利用浏览器缓存，如Service Workers，可以存储常用资源，减少重复请求。

前端限流方法

防抖和节流：通过防抖和节流技术，可以控制用户操作的频率，避免频繁发送请求。
请求超时设置：为请求设置合理的超时时间，避免因网络延迟导致的长时间等待。

通过上述方法，前端可以在不依赖后端优化的情况下，有效地实现高并发HTTP请求，并确保系统的稳定性和性能。

3. 请尽可能详细地说明，事件循环中的宏任务和微任务都有哪些？你的回答中不要写出示例代码。

事件循环是JavaScript中处理异步任务的核心机制，它通过宏任务和微任务的调度来确保代码的顺序执行。宏任务和微任务是事件循环中的两种任务类型，它们的执行顺序和时机有所不同。

宏任务

定义：宏任务是指那些需要在主线程上执行的任务，通常是异步的，由浏览器提供的API触发，如setTimeout、setInterval、I/O操作、UI渲染等。
特点：宏任务会在事件循环的某个阶段执行，执行完一个宏任务后，才会执行微任务队列中的任务。
常见类型：
- 整体代码块的执行
- 定时器（setTimeout、setInterval）
- I/O操作
- UI渲染
- requestAnimationFrame
- setImmediate（Node.js环境）

微任务

定义：微任务是在当前宏任务执行完毕后，立即执行的任务。它们通常是一些回调函数，如Promise的then方法、MutationObserver的回调函数等。
特点：微任务的优先级高于宏任务，意味着在宏任务执行完毕后，会立即执行所有排队的微任务，然后再继续执行下一个宏任务。
常见类型：
- Promise的then、catch、finally回调
- async/await中的异步代码
- MutationObserver回调
- process.nextTick（Node.js环境）

执行顺序

执行当前宏任务中的同步代码。
执行当前宏任务中的所有微任务。
执行下一个宏任务。
重复上述步骤，直到所有宏任务和微任务都执行完毕。

通过理解宏任务和微任务的概念及其在事件循环中的执行顺序，开发者可以更有效地管理代码的执行，确保异步操作的正确处理。

3. 请尽可能详细地说明，原型链是什么，在ES5中怎么实现继承？

原型链是JavaScript中实现对象间继承的机制。每个JavaScript对象都有一个内部属性（通常称为[[Prototype]]），它指向另一个对象，即该对象的原型。当我们试图访问一个对象的属性时，如果该对象本身没有这个属性，JavaScript引擎会沿着这个对象的原型链向上查找，直到找到该属性或到达原型链的末端（即null）。

原型链的实现原理

构造函数和原型对象：
- 每个函数都有一个prototype属性，这个属性指向一个对象，即该函数的原型对象。
- 当我们使用构造函数创建一个新对象时，这个新对象的内部[[Prototype]]属性会被设置为构造函数的prototype属性所指向的对象。
原型链的形成：
- 如果一个对象的原型对象还有自己的原型对象，这样就形成了一条原型链。
- 原型链的顶端是Object.prototype，它的原型是null，表示原型链的结束。

ES5中实现继承的方法

在ES5中，我们可以使用以下几种方法来实现继承：

原型链继承：
- 通过将子类的原型对象设置为父类的实例来实现继承。
- 这种方法的缺点是所有子类实例共享父类实例的属性，可能会导致属性污染。

function Parent() {
  this.name = 'Parent';
}

Parent.prototype.sayHello = function() {
  console.log('Hello, I am ' + this.name);
};

function Child() {}

Child.prototype = new Parent(); // 将子类的原型对象设置为父类的实例
Child.prototype.constructor = Child; // 修复子类原型的构造函数指向

var child = new Child();
child.sayHello(); // 输出: Hello, I + this.name

构造函数继承：
- 在子类构造函数中调用父类构造函数，并使用call或apply方法将子类实例的上下文传递给父类构造函数。
- 这种方法可以避免属性污染，但无法继承父类原型上的方法。

function Parent(name) {
  this.name = name;
}

Parent.prototype.sayHello = function() {
  console.log('Hello, I am ' + this.name);
};

function Child(name) {
  Parent.call(this, name); // 调用父类构造函数，并将子类实例的上下文传递给它
}

var child = new Child('Child');
console.log(child.name); // 输出: Child
child.sayHello(); // 报错: child.sayHello is not a function

组合继承：
- 结合原型链继承和构造函数继承的优点，实现属性和方法的继承。
- 这种方法是ES5中最常用的继承方式。

function Parent(name) {
  this.name = name;
}

Parent.prototype.sayHello = function() + this.name;
}

function Child(name) {
  Parent.call(this, name); // 第二次调用Parent构造函数
}

Child.prototype = new Parent(); // 第一次调用Parent构造函数
Child.prototype.constructor = Child; // 修复子类原型的构造函数指向

var child = new Child('Child');
child.sayHello(); // 输出: Hello, I am Child