<p></p> <p><span style="color:#fe2c24;">需要传达的内容：</span></p> <ul><li>基本信息：你叫xxx，xx毕业开始做前端，做了多少年</li><li>职业经历：我在<strong>xxx、xxx公司</strong>(一线互联网大厂)呆过，选择在xx公司担任高阶(前端)；</li></ul> <p><span style="color:#fe2c24;">技术特长：</span></p> <ul><li>对xx方面特别感兴趣 or 擅长，曾经做过xxx技术项目(轮子、性能优化、解决过复杂问题)；</li><li>当下在做什么，特别擅长的点</li><li></li><li>核心：简单明了，把基本情况和核心竞争力传达清楚</li></ul> <p><span style="color:#fe2c24;">怎么突出重点，让自己更有吸引力</span></p> <ul><li>一线互联网大公司：字节、阿里、腾讯、shopee等</li><li>有技术深度的经历：性能优化、解决疑难杂症、优质开源项目作者、有深度的技术博客/分享</li><li>性能、稳定性、开发效率提升</li><li>重要业务冲刺 owner</li></ul> <p><span style="color:#fe2c24;">避免 </span> </p> <ul><li>事无巨细，抓不到重点 </li><li>平淡如水： </li><li>逻辑混乱</li></ul> <p style="margin-left:0;text-align:left;"><span style="color:#000000;">举例：</span></p> <p style="margin-left:0;text-align:left;"><span style="color:#000000;"> 面试官好，我叫汤姆丁，拥有3年前端开发经验，其中有将近2年带团队经验。是实干型开发选手，vue/react等主流前端框架业务开发是完全没有问题的。node，python搭建简单的服务端写接口也是没问题。node的话使用egg，</span><span style="background-color:#ffffff;"><span style="color:#000000;">Sequelize（斯Q奶）。python的话用flask这些框架开发服务端。目前工作约20%左右在团队管理上，80%左右还是业务开发。技术上较大的成果就是，把公司业务梳理一遍，使用微前端重构。团队管理上除了技术规范，还有文档沉淀，每月复盘，提测规范等等这些流程的完善。</span></span></p> <p style="margin-left:0;text-align:left;"></p> <h6 style="margin-left:0pt;text-align:left;"><strong><span style="color:#1a1a1a;">如何做优化</span></strong></h6> <p style="margin-left:0;text-align:left;"><span style="color:#000000;"> 除了常规的资源优化，体制压缩，gzip，懒加载这些，让可以在nginx那开通一下http2，还有根据业务做一些缓存，使用indexdp。其实这些难就难在怎么定义指标，进行业务，代码逻辑层面的优化，才是难点。我初步是打算Lighthouse配合 sentry 来指定一个流程。比如首页多少秒打开合格，弱环境下要多少秒等。如果有动画是要多少帧等，因为帧数是关电脑hz的，跟配件有关。</span></p> <p style="margin-left:0;text-align:left;"></p> <h6 style="margin-left:0pt;text-align:left;"><strong><span style="color:#ff0000;">vue双向绑定原理</span></strong></h6> <p style="margin-left:0;text-align:left;"><span style="background-color:#ffffff;"><span style="color:#;"> Vue采用数据劫持 结合 发布者-订阅者的方式来实现数据的响应式，通过Object.defineProperty来劫持数据的getter、setter，在数据变动时发布消息给订阅者，订阅者收到消息后进行相应的处理，通过原生js提供的监听数据的API，当数据发生变化的时候，在回调函数中修改DOM。 </span></span></p> <p style="margin-left:0;text-align:left;"><span style="background-color:#ffffff;"><span style="color:#;">缺点:</span></span></p> <p style="margin-left:0;text-align:left;"><span style="background-color:#ffffff;"><span style="color:#;"> 一次性递归到底开销很大，如果数据很大，大量的递归导致调用栈溢出、 不能监听对象的新增属性和删除属性 无法正确的监听数组的方法。要使用$set</span></span></p> <h6 style="margin-left:0pt;text-align:left;"><span style="color:#fe2c24;"><strong>vue2和vue3的区别</strong></span></h6> <p style="margin-left:0;text-align:left;"><span style="color:#;"> 除了语法，api，比如setUp，最大的不一样就是双向绑定从vue2的defineProperty改成了</span><span style="background-color:#fafafa;"><span style="color:#;">proxy，可以监听数组了，弊端是ie8之类的低版本兼容问题</span></span></p> <h6 style="margin-left:0pt;text-align:left;"><strong><span style="color:#1a1a1a;">什么是闭包</span></strong></h6> <p style="margin-left:0;text-align:left;"><span style="color:#;"> 闭包本质还是函数，通俗来讲就是把操作函数暴漏出去，然后细节放在内部。避免污染，增加安全性。简单举个例子，函数a里面定义一个函数B， 外部一个变量引用了函数A，就创建了一个闭包。现在很少用了，因为会占内存，用不好还会造成内存泄漏。比如vue中的数据劫持observer就用到了闭包</span></p> <h6 style="margin-left:0pt;text-align:left;"><strong><span style="color:#1a1a1a;">原型链</span></strong></h6> <p style="margin-left:0;text-align:left;"><span style="color:#;"> 他的本质还是对象，但是呢有个上下文，是用他来创建私有变量拿数据的，不同地方调用方法，this.xx就拿上一个。继承等等。反正这么处理的根本原因还是不想做全局污染。因为现在mvvc框架原因，业务上很久没有单独处理过这个了。</span></p> <h6 style="margin-left:0pt;text-align:left;"><strong><span style="color:#1a1a1a;">vue性能优化</span></strong></h6> <p style="margin-left:0;text-align:left;"><span style="color:#;"> 除了常规的懒加载，还有keep-alive缓存组件。更多需要多使用函数式组件，还有不要设计太深的响应式数据。组件的颗粒度不能设计太细.，v-if-for不要同时使用。</span></p> <h6 style="margin-left:0pt;text-align:left;"><strong><span style="color:#1a1a1a;">vue计算属性和watch</span></strong></h6> <p style="margin-left:0;text-align:left;"><span style="color:#;"> computed有缓存功能拿不到this,watch主要是监听data里面的定义的量多个属性影响一个属性时，建议使用 computed。 价格，根据订单数量，优惠券等，显示价格当某个值发生变化，引起一系列的业务时，建议使用 watch。 比如input搜索，请求接口（记得做防抖），渲染列表。就可以监听input Value值。</span></p> <h6 style="margin-left:0pt;text-align:left;"><strong><span style="color:#1a1a1a;">vue3增加了哪些特性</span></strong></h6> <p style="margin-left:0;text-align:left;"><span style="color:#;"> vue3整体下来感觉更贴进react那种了，比如定义数据使用ref，不再用this.data 还有setpup可以划分逻辑，也支持jsx了</span></p> <h6 style="margin-left:0pt;text-align:left;"><strong><span style="color:#1a1a1a;">React如何避免重复渲染（如何优化）</span></strong></h6> <p style="margin-left:0;text-align:left;"><span style="background-color:#fafafa;"><span style="color:#;"> 以前用shouldComponentsUpdate里面做判断，return false等。现在基本用hook，useMemo。useCallback。</span></span></p> <p style="margin-left:0;text-align:left;"><span style="background-color:#fafafa;"><span style="color:#;"> useMemo场景：父的state变化，用useMemo可避免子重复渲染</span></span></p> <h6 style="margin-left:0px;text-align:left;"><strong><span style="color:#;">用useCallback这个函数重新生成了的话，子组件会不会重新渲染</span></strong></h6> <p style="margin-left:0;text-align:left;"><span style="color:#;"> 会，让他不会的就用useRef作为useMemo的依赖</span></p> <h6 style="margin-left:0pt;text-align:left;"><strong><span style="color:#1a1a1a;">UmiJs和dva、roadhog是什么关系？</span></strong></h6> <p style="margin-left:0;text-align:left;"><span style="color:#;"> roadhog 是基于 webpack 的封装工具，目的是简化 webpack 的配置 umi 可以简单地理解为 roadhog + 路由，思路类似 next.js/nuxt.js，辅以一套插件机制，目的是通过框架的方式简化 React 开发 dva 目前是最纯粹的数据流，和 umi 和 roadhog 之间并没有相互的依赖关系，可以分开使用也可以一起使用。</span></p> <h6 style="margin-left:0px;text-align:left;"><span style="color:#;">React 中 keys 的作用是什么？</span></h6> <p style="margin-left:0;text-align:left;"><span style="color:#;"> 住要是避免重复计算，增加性能。因为react用到的是diff算法，吧树形结构按层级分解，只比较同级元素。所以列表，循环时候要给个key。</span></p> <h6 style="margin-left:0pt;text-align:left;"><strong><span style="color:#1a1a1a;">react diff 原理</span></strong></h6> <p style="margin-left:0;text-align:left;"><span style="color:#;"> 把树形结构按照层级分解，只比较同级元素。所以需要给列表结构的每个单元添加唯一的 key 属性，方便比较，节约性能。基于这个，开发的时候可以重写 shouldComponentUpdate 提高 diff 的性能。当然现在大部分是使用</span><span style="background-color:#fafafa;"><span style="color:#;">useMemo。useCallback。去优化了。</span></span></p> <h6 style="margin-left:0pt;text-align:left;"><strong><span style="color:#1a1a1a;">React.Children.map和js的map有什么区别？</span></strong></h6> <p style="margin-left:0;text-align:left;"><span style="color:#;"> JavaScript中的map不会对为null或者undefined的数据进行处理，而React.Children.map中的map可以处理React.Children为null或者undefined的情况。</span></p> <h6 style="margin-left:0pt;text-align:left;"><strong><span style="color:#1a1a1a;">React高阶组件</span></strong></h6> <p style="margin-left:0;text-align:left;"><span style="color:#;"> 高阶组件本质还是组件，</span><span style="background-color:#fafafa;"><span style="color:#;">只是一个包装了另外一个 React 组件的 组件。可以通俗理解成，一个函数里可能有好几种组件。这种形式通常实现为一个函数，本质上是一个类工厂。运用场景，多个组件都用到同一段逻辑时候，就需要吧共同逻辑提取出来，</span></span><span style="color:#;">利用高阶组件的形式将这段逻辑整合到每一个组件中, 从而减少代码的逻辑重复 。</span></p> <p style="margin-left:0;text-align:left;"><span style="color:#;"> 需要代码重用时, react如果有多个组件都用到了同一段逻辑, 这时,就可以把共同的逻辑部分提取出来,利用高阶组件的形式将这段逻辑整合到每一个组件中, 从而减少代码的逻辑重复 。又或者需要组件增强优化时, 比如我们在项目中使用的组件有些不是自己写的, 而是从网上撸下来的,但是第三方写的组件可能比较复杂, 有时不能完全满足需求, 但第三方组件不易修改, 此时也可以用高阶组件,在不修改原始组件的前提下, 对组件添加满足实际开发需求的功能</span></p> <h6 style="margin-left:0pt;text-align:left;"><strong><span style="color:#1a1a1a;">哈希和非哈希的区别</span></strong></h6> <p style="margin-left:0;text-align:left;"><span style="color:#;"> 有井号没井号，一个是用window里面的</span><span style="background-color:#fafafa;"><span style="color:#;">pushState一个是用onpopstate做进退</span></span></p> <h6 style="margin-left:0pt;text-align:left;"><strong><span style="color:#1a1a1a;">箭头函数</span></strong></h6> <p style="margin-left:0;text-align:left;"><span style="color:#;"> 好处就是不用管this了，谁调用就是谁的上下文，不能使用new，没有arguments，也没有原型和super等等。</span></p> <h6 style="margin-left:0pt;text-align:left;"><strong><span style="color:#1a1a1a;">重绘与重排的区别</span></strong></h6> <p style="margin-left:0;text-align:left;"><span style="color:#;"> 重排：渲染树中的元素结构，尺寸、属性这些发生改变时候，浏览器就会重新渲染。</span></p> <p style="margin-left:0;text-align:left;"><span style="color:#;"> 重绘：页面某些元素发生变化，浏览器就会对元素进行重绘，比如background这些。如果是opacit既出发重排也出发重绘</span></p> <h6 style="margin-left:0pt;text-align:left;"><strong><span style="color:#1a1a1a;">强缓存和协商缓存</span></strong></h6> <p style="margin-left:0;text-align:left;"><span style="color:#;"> 强缓存就是根据header的字段，Expires和Cache-Control来判断是否过期再请求服务器，坏处就是服务器更新了，如果还没过期就会主动请求。而协商缓存就是从服务器判断是否重新请求。前端你可以在头部meat标签设置，多少秒刷新文档等。作用就是对http请求缓存，减少请求次数，达到优化效果。</span></p> <h6 style="margin-left:0pt;text-align:left;"><strong><span style="color:#1a1a1a;">防抖/节流</span></strong></h6> <p style="margin-left:0;text-align:left;"><span style="color:#;"> 防抖：让 事件 在触发后 N 秒后执行，如果在 N 秒内重新触发，则 重新计算 时间。input的搜索等</span></p> <p style="margin-left:0;text-align:left;"><span style="color:#;"> 节流 ： 在规范时间内，只能触发一次函数，如果多次触发不会执行。比如支付按钮等。</span></p> <h6 style="margin-left:0pt;text-align:left;"><strong><span style="color:#1a1a1a;">事件循环Event loop， 宏任务、微任务</span></strong></h6> <p style="margin-left:0;text-align:left;"><span style="color:#;"> 浏览器的事件循环：执行js代码的时候，遇见同步任务，直接推入调用栈中执行，遇到异步任务，将该任务挂起，等到异步任务有返回之后推入任务队列中，当调用栈中的同步任务全部执行完成，将任务队列中的任务按顺序一个个推入执行，重复执行这一系列的行为， 异步任务又分为宏任务和微任务。</span></p> <p style="margin-left:0;text-align:left;"><span style="color:#;">宏任务： 任务队列中的任务称为宏任务，每个宏任务都包含一个微任务队列</span></p> <p style="margin-left:0;text-align:left;"><span style="color:#;">微任务： 等宏任务中的主要功能都完成后，渲染殷勤不急着去执行下一个宏任务，而是执行当前宏任务中的微任务</span></p> <p style="margin-left:0;text-align:left;"><span style="color:#;">宏任务包括：执行script标签内部代码、setTimeout、ajax请求</span></p> <p style="margin-left:0;text-align:left;"><span style="color:#;">微任务包括：pormise、MutonObserver、Object.observer</span></p> <h6 style="margin-left:0pt;text-align:left;"><strong><span style="color:#1a1a1a;">创造promise实例后，它会立即执行,有等待，失败，成功</span></strong></h6> <h6 style="margin-left:0pt;text-align:left;"><strong><span style="color:#1a1a1a;">严格模式的限制</span></strong></h6> <ul><li style="margin-left:0px;text-align:left;"><span style="color:#;">变量必须声明后再使用</span></li><li style="margin-left:0px;text-align:left;"><span style="color:#;">函数的参数不能有同名属性，否则报错</span></li><li style="margin-left:0px;text-align:left;"><span style="color:#;">不能使用 with 语句</span></li><li style="margin-left:0px;text-align:left;"><span style="color:#;">禁止 this 指向全局对象</span></li></ul> <h6 style="margin-left:0pt;text-align:left;"><strong><span style="color:#1a1a1a;">数组去重</span></strong></h6> <ol><li style="margin-left:0px;text-align:left;"><span style="color:#;">1.利用双重for循环，再利用数组方法splice方法去重（es5常用）</span></li><li style="margin-left:0px;text-align:left;"><span style="color:#;">2.set去重:准备一个数组，数组解构newset,再准备一个函数存放数组的变量作为函数的判断值，return</span></li><li style="margin-left:0px;text-align:left;"><span style="color:#;">Array.from(new set(arr))即可</span></li><li style="margin-left:0px;text-align:left;"><span style="color:#;">3.数组方法indexof</span></li><li style="margin-left:0px;text-align:left;"><span style="color:#;">4.数组方法sort Obj[a]-Obj[b]</span></li></ol> <h6 style="margin-left:0pt;text-align:left;"><strong><span style="color:#1a1a1a;">跨域</span></strong></h6> <p style="margin-left:0;text-align:left;"><span style="color:#;"> 最稳妥最常见的就是服务器开允许访问。剩下就是jsonp,现在很少了每个接口都需要特定处理，一般都用反向代里，proxy这些。我们目前是采用node中间件进行转发。跟nginx反向代理差不多。当然C端的项目原则上是不允许跨域的。而且生产环境也是全部关闭，安全性问题。真需要跨部门也是通过接口去处理，比如小程序内部打开h5进行下单之类</span></p> <h4 style="margin-left:0pt;text-align:left;"><strong><span style="color:#1a1a1a;">如何管理团队等</span></strong></h4> <p style="margin-left:0;text-align:left;"><span style="color:#;"> 其实我觉得最大的困难有亮点，第一人才培养，第二就是达成共识。第三文档沉淀。1和3都很好理解，字面意思。第二点达成共识呢，我举个理想的场景。整个团队大家都有明确目标，然后一起使劲往同一个方向前进。又比如领导有需求下来了，大家能明白这个需求的意义，而不是单纯的完成任务。大概就是这种感觉。</span></p> <p style="margin-left:0;text-align:left;"><span style="color:#;">我为了完成上面三个几个目标，做了以下几个措施：每月(项目)复盘，多写注释，拆解需求。复盘包获代码量，还有收集遇到的问题，还有一些技术方案收集。当然代码量不是越高越好，越高就证明复用性可能没做好就帮忙深入去看看。因为组员性格情况可能不同，所以这些可以线上进行。然后再整理一下变成文档沉淀下来。踩过很多坑，分享啥的，最后组员都不积极，采用这种，然后偶尔写写文章。当然根据每个人性格采取</span></p> <p style="margin-left:0;text-align:left;"><span style="color:#;">然后就是需求拆解了这个，举个最简单的例子，产品那边的需求不单单是怎么做怎么做，整个项目有背景的需要说明，然后我会协助拆解成任务，比如登录页，为什么用短信短信验证码，为什么使用按钮要隐藏起来，因为我们只想要客户买，不想让他用等等。当然是极端例子哈，一些简单常规的肯定不讲了。这样拆分后呢，时间评估就准很多了，因为所有都有个对比，比如登录页一天，商品列表页更简单应该半天就好等等。效率自然就高了。</span></p> <p style="margin-left:0;text-align:left;"><span style="color:#;">当然还经历很多，都是一个大前端团队去接任务，后面慢慢改成分成业务组，当然这些我一个人肯定处理不来，需要总监他们协助。反正很深的感悟就是，这些没有标准答案，也没想像中发发任务，故时间，开分享会这么简单。要因人而异，因地适宜</span></p> <h5 style="margin-left:0pt;text-align:left;"><strong><span style="color:#1a1a1a;">为什么要微前端重构项目</span></strong></h5> <p style="margin-left:0;text-align:left;"><span style="color:#;">因为之前公司好几个后台管理系统，每个管理系统都有相同的功能，这样维护起来费时费力，所以我重新梳理了业务逻辑，使用react/umi搭建项目，利用git </span><span style="color:#;">submodule去维护跨项目之间共同的代码方法。使项目更清晰明了，维护成本大大降低。</span></p> <h5 style="margin-left:0pt;text-align:left;"><strong><span style="color:#1a1a1a;">微前端遇到了什么问题</span></strong></h5> <ol><li style="text-align:left;"><span style="color:#;">图片资源丢失，在子应用部署到服务器后，他的路径是找在基座上面的。所以会丢失，采用，base64，太大就网络图片形式</span></li><li style="text-align:left;"><span style="color:#;">路由跳转，子路由跳子路由，后面做了路由的守卫，统一封装了跳转方法，采用了基座那里存起来的history.push 等等</span></li><li style="text-align:left;"><span style="color:#;">数据的传递，跨modal之间调用。利用window</span></li></ol> <h5 style="margin-left:0pt;text-align:left;"><strong><span style="color:#1a1a1a;">做了哪些亮点：</span></strong></h5> <p style="margin-left:0;text-align:left;"><span style="color:#;">最大得亮点还是在业务梳理，推广微前端这个。遇到</span></p> <ol><li style="text-align:left;"><span style="color:#;">配合git submode 抽离很多带业务的页面，方法，样式等。跟组件不同，他是带有很多业务的，会有请求后端接口的一些逻辑。</span></li><li style="text-align:left;"><span style="color:#;">文档的收集，每周收集便利的，和踩过的坑，有分享会演变而来</span></li></ol> <p style="margin-left:0;text-align:left;"><span style="color:#;">核心原理使用react-dnd这个，然后呢一开始的理想是很丰满的，颗粒度非常小，后面越做阻力越大，比如一些层级，如果用定位的话，不好维护。最后是我们跟产品制定好规则，分两一种，一种是页面模板，一种是组件，比如banner，导航栏，可以选择样式类型，然后自己拼成页面，导出来的是一个数组，如果需要后台会生成对应代码，单独部署，就是先去仓库拉去模板代码。然后利用node-fs编写配置文件。再把整体项目打包出来，或者根据钩子，生成到gitlat上。这种场景多半用于需要单独部署维护的项目，比如是某个客户买了我们产品。需要独立部署</span></p> <h4 style="margin-left:0pt;text-align:left;"><strong><span style="color:#1a1a1a;">工作中最大的瓶颈</span></strong></h4> <p style="margin-left:0;text-align:left;"><span style="color:#;">其实还是需要回到人才还有达成共识上面，我做的每月复盘，都是曲线救国，如果他本人不愿意或者摆烂的，就需要指定好情况，当他当作单一的生产单位。然后怎么让技术部门逆推去推动商务，就是赚钱。</span></p> <p style="margin-left:0;text-align:left;"><span style="color:#;">技术上面的话因为不是开发框架又不是手撕底层原理这种，相对棘手的还是类似指定性能优化这种需要根据业务制定，但市场又没有很完善很开源的产品。这种就比较复杂。</span></p> <p style="margin-left:0;text-align:left;"><span style="color:#;">------答案2适用于非管理------</span></p> <p style="margin-left:0;text-align:left;"><span style="color:#;">我个人执行力还有业务开发是完全没问题的，目前的瓶颈在于怎么把个人的能力扩散到团队中，影响和带动他人，为团队带来更多结果和更高收益。</span></p> <h6 style="margin-left:0pt;text-align:left;"><strong><span style="color:#1a1a1a;">低版本的兼容</span></strong></h6> <p style="margin-left:0;text-align:left;"><span style="color:#;">app: 19还是20年把，setupWebViewJavascriptBridge ios升级，要区分安卓或者ios特殊处理，低版本兼容。</span></p> <p style="margin-left:0;text-align:left;"><span style="color:#;">A标签包裹图片，不用A标签的href跳转，点击事加进行window.location.href跳转没出发</span></p> <h6 style="margin-left:0pt;text-align:left;"><strong><span style="color:#1a1a1a;">前端安全：</span></strong></h6> <p style="margin-left:0;text-align:left;"><span style="color:#;">一般攻击手段有xss,csrf,DDoS.xss现在较少了。一般就行方等严格项目有要求，我们都是用转义方式来避免xss攻击。csrf得话采用token，DDoS是服务器那边得，一般采取ip禁止</span></p> 讯享网
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/178625.html