目录
四、Object.defineProperty和proxy区别
面试真题
笔者正在每天争分夺秒准备着前端的面试中,这个系列是笔者每天看牛客网总结出来的各个前端大厂面试真题(主要会涉及到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 的存在,开发工具可以更容易地跟踪和调试应用程序的状态变化,并提供诸如时间旅行调试等高级功能,从而提高开发效率和代码质量。
总的来说,Vue.js 使用虚拟 DOM 可以带来更好的性能、更高的开发效率以及更好的跨平台兼容性,使得构建复杂的交互式 Web 应用程序变得更加容易和可靠。
总结
以上就是今天要讲的内容,本文算是我自己的一个日常总结,也是希望能够帮助到更多的前端er。