前端面试真题（争取日更版）（四）

最新推荐文章于 2024-08-27 09:08:32 发布

前端菜柒

最新推荐文章于 2024-08-27 09:08:32 发布

阅读量577

点赞数 9

文章标签：前端面试职场和发展

本文链接：https://blog.csdn.net/a6666aa777/article/details/138288482

版权

本文概述了前端面试中常见的问题，包括TCP三次握手的流程、CSSposition属性的用法、浏览器渲染原理、Object.defineProperty和proxy的区别，以及Vue使用虚拟DOM的优势。旨在帮助前端开发者提升面试准备和理解核心技术。

摘要由CSDN通过智能技术生成

四、Object.defineProperty和proxy区别

五、vue使用虚拟dom的好处

总结

面试真题

笔者正在每天争分夺秒准备着前端的面试中，这个系列是笔者每天看牛客网总结出来的各个前端大厂面试真题（主要会涉及到html，css，js，vue，计算机网络等前端必备知识）

一、TCP三次握手

“三次握手”是TCP（Transmission Control Protocol，传输控制协议）连接建立过程中使用的流程。TCP是一种可靠的、面向连接的传输层协议，在数据传输之前需要建立连接，这个过程通常被称为“三次握手”。以下是三次握手的过程：

第一次握手：客户端向服务器发送一个SYN（同步）请求，表示希望建立连接，并且告诉服务器客户端的初始序列号（ISN）。
第二次握手：服务器收到SYN请求后，如果愿意建立连接，会向客户端发送SYN-ACK（同步确认）消息。这一消息包含服务器的初始序列号，并确认收到客户端的SYN。
第三次握手：客户端收到SYN-ACK后，向服务器发送ACK（确认）消息，表示收到服务器的确认，这样连接就建立起来了，双方可以开始传输数据。

这个三次握手过程确保了双方都清楚连接的建立情况，并提供了可靠的数据传输基础。

二、position定位

在 CSS 中，position 属性用于指定元素的定位方式。常用的值有：

static（默认值）：元素按照正常文档流进行排列，不受 top、right、bottom、left 等属性的影响。
relative：元素相对于其正常位置进行定位。设置了 top、right、bottom、left 等属性时，元素会在其正常位置的基础上进行偏移，但不会影响其他元素的位置。
absolute：元素相对于其最近的已定位（position 不是 static）祖先元素进行定位，如果没有已定位的祖先元素，则相对于初始包含块进行定位（通常是 <html> 元素）。设置了 top、right、bottom、left 等属性时，元素会相对于其包含块进行偏移。
fixed：元素相对于浏览器窗口进行定位，即使页面滚动，元素的位置也不会改变。设置了 top、right、bottom、left 等属性时，元素会相对于浏览器窗口进行偏移。

三、浏览器渲染原理

浏览器渲染的原理涉及将网页内容（例如HTML、CSS和JavaScript代码）转换为用户可以看到和与之交互的可视化页面。这个过程通常包括以下几个步骤：

解析HTML：浏览器从服务器接收到HTML文件后，会将其解析成一个DOM（Document Object Model）树。DOM树是一种数据结构，它表示了HTML文档的结构和内容。
解析CSS：浏览器在解析HTML的同时也会解析CSS样式表。CSS样式表定义了网页元素的样式和布局。解析CSS时，浏览器会将CSS规则应用于DOM树中的相应元素，形成一个渲染树（Render Tree）。
构建渲染树：渲染树是DOM树和CSS样式的结合。浏览器会根据DOM树和CSS规则创建一个渲染树，确定每个元素在页面中的样式和布局。
布局（排版）：一旦渲染树被构建，浏览器会计算每个元素在页面上的位置和大小。这一步被称为布局或排版。
绘制：在布局之后，浏览器会根据渲染树将页面绘制到屏幕上。这一步涉及将每个元素的样式、颜色和其他视觉效果应用到屏幕上的特定位置。
处理JavaScript：浏览器在渲染过程中还会执行网页中的JavaScript代码。JavaScript代码可能会修改DOM树或CSS样式，从而影响页面的外观和行为。在这种情况下，浏览器可能需要重新渲染页面。
资源加载：在解析HTML和CSS的过程中，浏览器可能会发现需要加载的外部资源（如图片、字体、脚本等）。浏览器会异步加载这些资源，以避免阻塞渲染进程。

整个渲染过程通常是逐步进行的，但现代浏览器通常会采用优化技术，如异步加载和并行处理，以提高渲染速度和效率。通过这些步骤，浏览器能够将网页内容呈现给用户。

四、Object.defineProperty和proxy区别

Object.defineProperty 和 Proxy 是 JavaScript 中用于对象操作和拦截的两种不同机制。

Object.defineProperty：
- Object.defineProperty 是 ECMAScript 5 引入的方法，用于在对象上定义新属性或修改现有属性的特性。
- 它允许直接定义属性的特性，如可枚举性、可配置性、可写性等。
- 可以通过该方法定义 getter 和 setter 方法，以便对属性进行访问和修改时执行自定义的操作。
- 适用于对现有对象进行操作，但不能拦截对对象的整体操作。

const obj = {};

// 定义一个新属性 "x"
Object.defineProperty(obj, 'x', {
  value: 42,
  writable: false
});

console.log(obj.x); // 输出: 42
obj.x = 100; // 尝试修改值，但由于属性是只读的，所以不会成功
console.log(obj.x); // 输出: 42

Proxy：
- Proxy 是 ECMAScript 6 引入的新特性，用于创建一个代理对象，可以拦截对目标对象的各种操作，包括读取属性、设置属性、函数调用等。
- 通过使用 Proxy，可以实现对对象的整体操作进行拦截和修改，而不仅仅是针对属性的特性。
- 可以通过在代理对象上定义拦截器函数来自定义拦截行为，以对操作进行修改或添加额外的逻辑。

const target = {};
const handler = {
  get: function(target, prop, receiver) {
    console.log(`正在访问属性 "${prop}"`);
    return target[prop];
  },
  set: function(target, prop, value, receiver) {
    console.log(`正在设置属性 "${prop}" 值为 "${value}"`);
    target[prop] = value;
    return true;
  }
};

const proxy = new Proxy(target, handler);

proxy.x = 10; // 设置属性 "x" 值为 "10"
console.log(proxy.x); // 访问属性 "x"，输出: 10

总的来说，Object.defineProperty 适用于对单个属性进行定义和操作，而 Proxy 则适用于对整个对象的操作进行拦截和修改，提供了更灵活的控制能力。

五、vue使用虚拟dom的好处

Vue.js 使用虚拟 DOM（Virtual DOM）的好处包括：

性能优化：虚拟 DOM 可以在内存中进行操作和比较，然后将变化的部分与实际 DOM 进行比较，并最小化实际 DOM 的操作次数。这种优化可以减少浏览器重新渲染页面的次数，提高性能和响应速度。
跨平台兼容性：虚拟 DOM 的概念使得 Vue.js 可以轻松地实现跨平台开发，例如在浏览器、服务器端（使用 Node.js）以及移动端（使用类似于 React Native 的技术）中都可以使用相同的代码结构。
简化复杂度：通过抽象出虚拟 DOM，Vue.js 可以更容易地管理复杂的 DOM 结构和页面状态。开发人员可以专注于组件和数据的逻辑，而不必过多地关注底层的 DOM 操作。
优化更新策略：Vue.js 使用虚拟 DOM 可以实现高效的更新策略，例如批量异步更新和按需更新等，以最小化页面重新渲染所需的计算资源和时间。
方便的开发工具支持：由于虚拟 DOM 的存在，开发工具可以更容易地跟踪和调试应用程序的状态变化，并提供诸如时间旅行调试等高级功能，从而提高开发效率和代码质量。