70场面试，复盘我遇到的有趣问题（二）

         不知道这个系列可以更新多久，我预期是希望逐步整理所有的我认为有价值的问题，趁着还有时间，多复盘一下，大概每篇更新四五个问题，在精不在多。
         如果大家觉得有用欢迎点赞收藏送花！
1.（Minimax二面）react的单向数据流怎么理解，有什么好处？
        当时对这个概念了解的不太深入，没回答好，下来复盘我觉得可以按照如下思路展开。
        首先这个问题想回答好就需要理解几个概念：什么是数据流？什么是单向？为什么要设置成单向的？咱一个一个看看
        react组件中最常用到的数据有两类：state和props，state是组件内部自行维护的，props是父组件传给子组件的，下面说的数据我理解都指的是props。
        数据流：也就是数据在不同组件或节点之间的流动，比如a数据（引用类型）被b节点引用，又被b传递给c，那么a数据改变后会影响b，从而影响c，这就叫数据流。但是这种流动是双向的，因为如果在b或c修改了这个数据，其他的也会变化。
        单向：在react中，单向是”自顶向下“的，也就是react规定了数据的流向是从外层组件向内层组件进行传递和更新的，而内层组件是无法直接修改props影响外层的。
        那么为什么要用单向的形式？如果内层的组件可以通过修改props来修改外层的数据，那么外层使用到这个数据或者其他使用到这个数据的地方都会造成数据更新，UI渲染也会改变，这会造成数据紊乱和不可控。所以为了更好的可控性，react设计了单向数据流。
        除此之外还有一个好处，所有的数据更新是单向的，那么出现问题的时候会更好溯源，因为修改数据的链路是确定的，排查起来顺着调用链就可以一层一层找到问题了。
2.（快手二面）如果用户传了一个很大的excel要解析，如何处理比较好？web worker如何和主线程通信？
        首先这个问题可以泛化到很多复杂计算上，而不只是excel解析，其次可以延申展开一些东西。‘
        web worker是JS里难得的多线程。
        在 HTML5 中，工作线程的出现使得在 Web 页面中进行多线程编程成为可能。众所周知，传统页面中（HTML5 之前）的 JavaScript 的运行都是以单线程的方式工作的，虽然有多种方式实现了对多线程的模拟（例如：JavaScript 中的 setinterval 方法，setTimeout 方法等），但是在本质上程序的运行仍然是由 JavaScript 引擎以单线程调度的方式进行的。在 HTML5 中引入的工作线程使得浏览器端的 JavaScript 引擎可以并发地执行 JavaScript 代码，从而实现了对浏览器端多线程编程的良好支持。
HTML5 中的 Web Worker 可以分为两种不同线程类型，一个是专用线程 Dedicated Worker，一个是共享线程 Shared Worker。两种类型的线程各有不同的用途
        和主线程之间的通信是通过postMessage来进行的。简单的说，主线程用postMessage向webworker推送消息，子线程用onMessage接受并处理，处理完之后在子线程内调用postMessage将结果返回给主线程，主线程同样用onMessage接受。具体内容请查阅MDN文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API/Using_web_workers
3.（灵犀互娱一面）多个web worker如何保证顺序？
        还好当时面试官只是提了一嘴，没让我解答。
        这个问题属于上面的问题的延申版本，其实没了解过具体方式也能猜个七七八八（类比文件切片上传之类的）。要想保证顺序，最简单的方式就是在给不同web worker分配任务时附带上一个唯一编号，在web worker处理完返回结果时也将这个编号一起发回给主线程，在主线程中按顺序重组。
        查了一下，webworker自身也提供了all和race等方法，这些其实就是在promise的基础上封装的（想来也正常，毕竟不同线程，肯定要异步返回）。有一个很详细的知乎文章，有兴趣的uu们自行查阅哈：https://zhuanlan.zhihu.com/p/41431253#:~:text=web-worker
4.（快手二面）setInterval准确吗？
        感觉大家可能也看过，但是这个问题还是比较有意思的。
        答案是不准确，为啥呢？
        嵌套的 setTimeout 相较于 setInterval 能够更精确地设置两次执行之间的延时。
        下面来比较这两个代码片段。第一个使用的是 setInterval：
        let i = 1;
        setInterval(function() {
          func(i++);
        }, 100);
        第二个使用的是嵌套的 setTimeout：
        let i = 1;
        setTimeout(function run() {
        func(i++);
          setTimeout(run, 100);
        }, 100);
        对 setInterval 而言，内部的调度程序会每间隔 100 毫秒执行一次 func(i++)（图1），时间开始计算的位置是调用内部方法的那一刻，因此第一次方法结束到第二次开始之间的时间间隔其实是小于100ms的，这就是为啥他不准确。
        再看看setTimeout（图2）。时间开始计算的位置是内部方法调用结束的时刻，也就是说两次方法之间的时间间隔是准确的100ms。好处在于如果内部方法调用的耗时比较长，那么这个方法也能确保两次调用之间的时间间隔。
        延申：如果setInterval的内部函数执行耗时大于设定的时间间隔咋办？
        在这种情况下，JavaScript 引擎会等待 func 执行完成，然后检查调度程序，如果时间到了，则 立即 再次执行它。极端情况下，如果函数每次执行时间都超过 delay 设置的时间，那么每次调用之间将完全没有停顿。
5.（百度一面）语义化标签如果没加样式，跟div、span这些非语义化标签有啥区别？
        这个就看大家对语义化标签的理解了。首先肯定能想到的一点就是更方便理解，看到header就知道是顶，看到aside就知道是侧边栏，但是这些任务div都能完成，区别在哪？
        1.即使在没有CSS的情况下，HTML页面也能呈现出很好地内容结构、代码结构。语义标签具有默认的CSS，比如html5之前的h1、h2等等就是语义化标签，他们表示几级标题；虽然我们在html没有引入任何css时，我们仍然可以看到h标签有字体放大加粗的效果。 实际上，html本身是没有表现的，我们看到例如 h1标签是粗体，字体大小2em，加粗；strong是加粗的，不要认为这是html的表现，这些其实html默认的css样式在起作用，所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的HTML结构的优点，但是浏览器都有有默认样式，默认样式的目的也是为了更好的表达html的语义，可以说浏览器的默认样式和语义化的HTML结构是不可分割的
        2.不仅人更容易看懂，也更利于机器看懂，对SEO更友好。

再次感谢大家的点赞收藏和花花
#软件开发2024笔面经##前端##快手##minimax##百度##面经#