前端面试题(持续更新)

目录

js面试题

事件冒泡和事件捕获的原理以及它们的区别与使用场景

防抖和节流

VUE面试题

vue中history和hash的区别是什么

vue的响应式原理 

---

HTML面试题

cookie,localStorage,sessionStorage的区别

• 存储大小：cookie40kb左右，Storage20M左右。
• 存储格式：cookie是字符串格式，Storage是键值对。
• 通讯相关：cookie随请求携带，Storage不会自动携带。
• 操作相关：cookie操作复杂，没有api前后端都可以操作；Storage操作简单，有api，只能前端操作。

输入一个url到页面渲染发生了什么

1. 浏览器地址栏输入URL并回车
2. 浏览器查找当前URL是否存在缓存，并比较缓存是否过期
3. DNS解析URL对应ip
4. 根据ip建立TCP连接
5. 发送http请求
6. 服务器处理请求，浏览器接收HTTP响应
7. 浏览器解析并渲染页面
8. 关闭TCP连接

js面试题

事件冒泡和事件捕获的原理以及它们的区别与使用场景

事件冒泡的原理:事件从触发的目标元素开始,然后逐级冒泡到上一个元素,直到达到DOM树的根节点.当事件冒泡时,父级元素的事件处理程序会在子级元素的事件处理程序之前被触发.

事件冒泡的使用场景:事件冒泡的一个常用场景是事件委托.通过事件委托我们可以将事件处理程序绑定到父元素上,而不是绑定到子元素上,从而减少事件处理程序的数量,提高性能和代码的可维护性.

事件捕获的原理：事件从DOM树的根节点开始，然后逐级向下捕获到最具体的元素（目标元素）。当事件捕获时，父级元素的事件处理程序会在子级元素的事件处理程序之后被触发。

事件捕获的使用场景：如果你需要在事件达到特定元素之前执行一些操作，例如在事件到达目标元素之前进行验证或修改事件的行为，可以使用事件捕获。通过在父级元素上使用事件捕获，你可以在事件到达目标元素之前拦截事件并进行处理。

事件冒泡和事件捕获区别：

1. 触发顺序：事件捕获先于事件冒泡触发。在事件捕获阶段，事件从DOM树的根节点向下传播到目标元素；在事件冒泡阶段，事件从目标元素向上冒泡到根节点。
2. 事件处理程序执行顺序：在事件捕获阶段，父级元素的事件处理程序会先于子级元素的事件处理程序执行；在事件冒泡阶段，子级元素的事件处理程序会先于父级元素的事件处理程序执行。
3. 默认阶段：大多数事件处理程序默认情况下在事件冒泡阶段触发，因此它们通常在事件冒泡阶段被执行。但是，可以使用addEventListener的第三个参数来指定事件是在事件捕获阶段还是事件冒泡阶段处理。

防抖和节流

相同点:

1. 都是为了减少事件触发频率，优化性能。

不同点:

1. 节流是指在一段时间内最多触发一次事件，节流算法会在特定的时间间隔内判断是否触发事件；

2. 防抖是指在一段时间内只要有事件触发，就重新计算时间，直到这段时间内没有事件触发，才真正的执行事件；
3. 节流适用于持续的触发，防抖适用于短时间内的大量触发。

闭包

在一个函数A内部有一函数B，并且将B函数return出去便使在外部的B函数能够访问A函数中的变量即形成了一个简单的变量闭包。

作用：

1. 可以在函数外部访问到函数內部的变量
2. 可以将某个函数内部的值保存下来
3. 可以避免使用全局变量，赋值全局变量被污染

缺点：

每次外部函数执行前都会开辟出新的内存空间，并且函数的地址不同，开辟出的内存地址也不同，导致一块内存被长期占用而不会被垃圾回收机制释放，便会导致内存泄漏。

VUE面试题

vue中history和hash的区别是什么

1. hash路由url有"#",而history没有
2. hash路由的实现原理是通过监听hashChange事件来实现的,history是通过调用history.pushState方法并且监听popstate事件来实现的.history.pushState会追加历史记录,并更换地址栏的地址信息,但页面不会刷新.

vue的响应式原理 

当vue组件被创建时，在生命周期的第一阶段(创建阶段)vue使用Object.defineProperty()对data选项进行遍历劫持并添加get/set钩子；在生命周期第二阶段(挂载阶段)指令与声明式变量touch时，会发生依赖收集，这时候再调用当前组件的watcher进行第一次Dom渲染，如果声明式变量发生变化时，vue会再次通知watcher更新视图。