面试总结-0511 | 皮卡秋

type

status

date

slug

summary

📝 主旨内容

一面

1.如何实现前端埋点的

曝光：商品用户看见次数统计 getBoundingClientRect intersection Observe

两种方案

getBoundingClientRect 浏览器支持不错, 简单易用但是可能存在性能问题。

Intersection Observer API 没有性能问题，但是存在一定兼容性。

好消息是我们可以使用polyfill 解决 Intersection Observer API 兼容性问题

它会在不支持的浏览器使用 getBoundingClientRect 去重新实现一遍 Intersection Observer API。

注册自定义指令 isIntersecting判断是否可见

事件：商品等点击统计注册自定义指令点击事件

监听报错 visibilitychange:解决 PC 端浏览器 Tab 选项卡切换、 APP 切换应用等。

页面时长：页面停留时间统计

上报：image sendBeacon post

2.如何在浏览器关闭时进行上报

navigator.sendBeacon

事件循环机制

当前任务在执行的过程中，一个script块（作为任务队列的第一个宏任务）开始执行，当同步任务执行完毕后会立刻检查所有微任务队列中的事件，微任务事件队列执行完毕之后，再去执行宏任务队列，一个宏任务执行完毕之后，检查微任务队列是否有任务，如果有就执行微任务，如果没有执行队列中的下一个宏任务，当前宏任务队列执行完成之后在执行下一个宏任务队列

https://blog.csdn.net/qq_63534905/article/details/127789918

项目优化的点为什么要这么做

代码优化项目结构优化打包上线优化 git工作流优化

promise async await

Promise： Promise是一种表示异步操作最终完成（或失败）及其结果值的对象。Promise有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。一旦Promise被resolve（解析）或reject（拒绝），它的状态就不能再改变。

async： async函数是一个返回Promise的异步函数，它使得异步代码看起来像同步代码。当你在一个函数前加上async关键字，该函数就会返回一个Promise。如果在async函数中使用了await关键字，那么JavaScript引擎会等待该Promise解析完成后再继续执行后续代码。

await： await关键字只能在async函数内部使用。await表达式会暂停async函数的执行，并等待一个Promise解析完成，然后返回解析的结果。如果Promise被拒绝，await表达式会抛出一个异常。示例：

在上面的例子中，fetchData是一个返回Promise的函数，它模拟了一个异步操作（通过setTimeout）。getData是一个async函数，它使用await来等待fetchData返回的Promise解析完成。

闭包是什么场景有什么坏处

闭包就是能够读取其他函数内部变量的函数。在编程中，闭包常被用于封装、函数式编程、定时器和事件处理、模块模式、回调函数、循环中的异步操作以及缓存等场景。具体来说，闭包在JavaScript中特别有用，因为它允许创建私有变量和函数，实现信息隐藏和封装，从而增强代码的安全性和可维护性。此外，闭包还可以用于创建高阶函数、延迟执行函数以及柯里化等功能，极大地丰富了编程的灵活性和表达能力。

然而，闭包也有一些坏处。首先，闭包会将外部函数的局部变量保存在内存中，即使外部函数已经执行完毕。如果闭包被频繁调用或者保存的数据量很大，可能会导致内存占用过高。其次，由于闭包需要在运行时维护外部函数的状态，因此会增加一定的性能损耗。相比于普通函数调用，闭包的执行效率可能会稍低。最后，闭包也可能使代码难以理解和调试，特别是当闭包嵌套过多或逻辑复杂时。

因此，在使用闭包时，需要权衡其带来的好处和潜在的坏处，根据具体场景和需求进行合理使用。

笔试题

二面

笔试题

输入：“10 + 2 * 30 - 0.5” 输出：69.5

🤗 总结归纳

笔试题相对以前脑子很慢还是转了一点还是有所进步的