百度提前批前端一面（ai 创新）四个手撕

第一次面试，来攒个人品首先是自我介绍介绍完了问实习经历中最得意的项目是什么你觉得这个项目之所以成功的原因是什么然后是产品运营经历（感觉面试官比较关心这个）还是如上，做的最好的项目是什么，成功的原因如果复盘的话，有什么可以做得更好的地方有没有什么过程性指标（会问的比较细，需要重点准备下）然后就到反问了这个面试官感觉脾气比较好，希望孩子能过呜呜

一天约两面，八股和手撕全答出来直接暂不匹配非常莫名其妙，上一个莫名其妙的是途虎，dp十分钟撕出来还挂这俩公司一生黑了😅😅😅一面巨水，开局问的和HR一样，但是聊的很好，所以下午直接约二面了项目问的不深，走马观花式问react和vue的区别写过小程序吗（因为部门进去就是写小程序的）手撕防抖节流去重尽可能多的方式（不是数组，是面试官给一个对象，根据属性去重，我写了五种）40min结束战斗二面只有半小时，大部分时间在写题应该是面试官不感兴趣，问的都是一些简历上的边角料，无八股本地IDE写题，题目如下一个页面上下布局，上面一个输入框，右边一个按钮下面一个列表，输入框输入文字，点击按钮，将对应文字添...

         不知道这个系列可以更新多久，我预期是希望逐步整理所有的我认为有价值的问题，趁着还有时间，多复盘一下，大概每篇更新四五个问题，在精不在多。         如果大家觉得有用欢迎点赞收藏送花！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_workers3.（灵犀互娱一面）多个web worker如何保证顺序？        还好当时面试官只是提了一嘴，没让我解答。        这个问题属于上面的问题的延申版本，其实没了解过具体方式也能猜个七七八八（类比文件切片上传之类的）。要想保证顺序，最简单的方式就是在给不同web worker分配任务时附带上一个唯一编号，在web worker处理完返回结果时也将这个编号一起发回给主线程，在主线程中按顺序重组。        查了一下，webworker自身也提供了all和race等方法，这些其实就是在promise的基础上封装的（想来也正常，毕竟不同线程，肯定要异步返回）。有一个很详细的知乎文章，有兴趣的uu们自行查阅哈：https://zhuanlan.zhihu.com/p/41431253#:~:text=web-worker4.（快手二面）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##百度##面经#

全在泡着，泡泡泡，泡的都要巨人观了。。。京东零售前端有牛友们泡开吗？？百度能力平台部前端有牛友们泡开吗？？快手增长前端有牛友们泡开吗？？4399前端有牛友们泡开吗？？灵犀互娱前端有牛友们泡开吗？？顺丰前端有牛友们泡开吗？？国庆都要到了，能不能泡开几个啊，每天看一遍流程真的很累啊，想过个好节铁汁泡开佬们评论分享下tl吧#百度秋招提前批进度##百度##京东##京东零售##快手##4399#