2020.10.29腾讯QQ音乐社招前端电话一面总结

本文链接：https://blog.csdn.net/jal517486222/article/details/109377606

2020.10.29腾讯QQ音乐社招前端电话一面总结

面试官晚上19:16打过来的，聊了44分钟，到八点准时结束。无论过没过，都记录一下面试过程吧，是问了几个大问题，在几个大问题的基础上根据你的回答，再去问一些小问题。

前言

【面试官】：先自我介绍下吧
【我】：我现在是在南京工作，工作一年多了，公司里用的是React框架，接下来我也打算以React为主技术栈。
【面试官】：嗯，没了吗
【我】：嗯…
【面试官】：你换工作的原因是什么
【我】：我是从大三开始就想进大厂了，一直也在准备着，毕业时投了一些简历但是没有机会。所以又边工作边准备了一年多，现在有人帮我内推我就赶紧试一试。
【面试官】：你是什么开始学习前端的
【我】：我大三的时候开始在国外的一个叫做FCC(FreeCodeCamp.org)的网站上学习的，在那上面学了HTML、CSS、JQuery、JS。我在毕业的时候还不会框架，在学校里的时候，做项目都是用PHP+JQuery做的。进入这家公司之后，公司用的是React框架，我就花了一段时间感觉学习了React框架，学完React后感觉自己提升了好多，又接着学了一些前端的其他东西，前端的知识简直越学越多，感觉都学不完
【面试官】：你是在一个网站上学习的，那你有没有看过一些书籍之类的
【我】：我不怎么看纸质的书，我一般都是看网上的文档，因为纸质的书代码都在书上面，一行一行照着写也很麻烦，而且不方便在我有疑问的时候得到反馈。我学习主要是以在网上买视频课为主，因为买视频课可以直接学习到这个技术怎么用，它的原理是什么，遇到不会的地方还可以去联系他问他，现在这些付费的课程都会有个交流群，群里的其他学员也都会跟你一起交流，我觉得这样学习效率高一点，比看书好一点。

_{(巴拉巴拉说了这么一大堆，面试官就直接进入正题开始问了)}

有了解怎么给一个不存在的元素添加事件吗

【我】：不存在的元素啊？那要先创建这个元素吧
【面试官】：那在创建之前就没有办法绑定事件吗
【我】：创建之前啊，那在创建之前…我好像不知道…
【面试官】：有一个div，里面会有一些元素，在点击元素的时候会触发一个事件，但是它现在并不在div里面
【我】：那可以把事件挂在父组件上面吗，可以吧，由父组件触发，然后可以检测到里面的target是谁
【面试官】：那它利用的是什么原理
【我】：是事件的代理
【面试官】：事件的代理是什么原理
【我】：事件的冒泡
【面试官】：事件的三个阶段是怎样实现的
【我】：先是从父组件到子组件的捕获，然后触发事件，最后从子组件冒泡到父组件。
【面试官】：那用事件捕获可以实现事件代理吗
【我】：额…可以
【面试官】：那一般你是用什么方式实现的
【我】：我一般使用冒泡
【面试官】：那为什么不用捕获呢
【我】：因为…嗯…嗯…我没注意过这个

参考MDN：
对事件冒泡和捕捉的解释
当一个事件发生在具有父元素的元素上(例如，在我们的例子中是<video>元素)时，现代浏览器运行两个不同的阶段 - 捕获阶段和冒泡阶段。在捕获阶段：

浏览器检查元素的最外层祖先<html>，是否在捕获阶段中注册了一个onclick事件处理程序，如果是，则运行它。

然后，它移动到<html>中单击元素的下一个祖先元素，并执行相同的操作，然后是单击元素再下一个祖先元素，依此类推，直到到达实际点击的元素。

在冒泡阶段，恰恰相反:

浏览器检查实际点击的元素是否在冒泡阶段中注册了一个onclick事件处理程序，如果是，则运行它

然后它移动到下一个直接的祖先元素，并做同样的事情，然后是下一个，等等，直到它到达<html>元素。

在现代浏览器中，默认情况下，所有事件处理程序都在冒泡阶段进行注册。
事件冒泡是令人讨厌的行为，但有一种方法来解决它。标准事件对象具有可用的名为 stopPropagation()的函数, 当在事件对象上调用该函数时，它只会让当前事件处理程序运行，但事件不会在冒泡链上进一步扩大，因此将不会有更多事件处理器被运行(不会向上冒泡)。

事件分三个阶段：捕获、目标、冒泡。
捕获：由外向内，由不具体到最具体，由document到元素
目标：就是事件触发的元素
冒泡：由内向外，由最具体到最不具体，由元素到document

事件委托
冒泡还允许我们利用事件委托——这个概念依赖于这样一个事实,如果你想要在大量子元素中单击任何一个都可以运行一段代码，您可以将事件监听器设置在其父节点上，并让子节点上发生的事件冒泡到父节点上，而不是每个子节点单独设置事件监听器。

有了解过DOMContentLoaded这个事件吗

【我】：知道，这个是在网页图片、CSS全部加载完之后触发
【面试官】：window.onload事件呢？
【我】：啊，那你刚才问的是哪个，不是load吗（原谅我耳背了…）
【面试官】：DOMContentLoaded，我刚才问的是DOMContentLoaded
【我】：哦抱歉那我刚才听错了，我刚才讲的就是load事件，DOMContentLoaded事件就网页的骨架加载完就触发，不会等待图片、CSS样式加载完
【面试官】：那如果外链的JS没有加载完，DOMContentLoaded事件会不会触发？
【我】：不会，哦不，外链…它会触发吧…我不太确定了
【面试官】：如果有个外链标签在网页的头部，那网页会展示内容吗
【我】：是指script标签吗，还是指link啊？
【面试官】：外链的JS
【我】：那就渲染不出来了，JS会阻塞渲染
【面试官】：那DOMContentLoaded触发以后，页面上会展示内容吗
【我】：会展示
【面试官】：那外连接没加载完，DOMContentLoaded会触发吗
【我】：哦那不会，JS会阻止这个渲染进程
【面试官】：那在中间呢
【我】：在中间的话，那也不会
【面试官】那在尾部呢
【我】：不会，要等JS走完
【面试官】：那要想让它不要阻塞的话，有什么办法
【我】：可以给script标签加一个defer属性，还有async，让它延迟加载
【面试官】：如果不用这两个的话，还有什么其他方案
【我】：嗯…还有type=“module”
【面试官】：对于浏览器不支持的情况，比如这三个都不支持的情况，怎么实现呢
【我】：那可以把script标签的加载写在DOMContentLoaded事件的回调中，执行的时候再去生成这个script标签
【面试官】：嗯，那你这样的话不就导致加载事件被延后了吗，为什么要在这个事件中写呢
【我】：因为这个时候页面应该渲染好了吧，没渲染好的话，会不会造成页面的时间很长呢_{（此时我崩溃的内心：抱歉这}