序言
基于个人在公司的发展情形，以及对未来前端路的展望，这月开始零散请假安歇调度，并出去找公司试试水。
我方向探求头衔是中高等的前端职位，大厂的口试机会很大程度还是要看缘分。目前面了 2 家中小型创业公司，事情地点上海。
下面就回顾下口试中涉及的题目，在自己做总结复习的同时，能和各位前端道友共同互换进步。（以下题目答案可能有误，看见谅）
常用的布局办法？
我回答：流式布局。
我是 java 出身，对前端偏页面设计这块很薄弱，以是平时很少有干系的积累。
常用布局办法，分为如下几种：
静态（固定）布局：传统针对 pc 真个设计办法，常日限定页面宽度，让全体布局稳定。对付移动端，会利用其他域名来做新的布局设计。流式布局：也叫百分比布局。对元素模块的宽高设计百分比，这样能让页面在不同设备下，有“自适应”的调度，但如果在差异较大的设备尺寸下会显得“奇怪”。弹性布局：基于 flex css 的新特性，使得在当代浏览器中布局设计劳动力开释。相应式布局：以 bootstrap 为先驱，依赖 media 预备不同设备尺寸的设计，让网页适用多端。居中实现办法？
我回答：
水平居中：text-align、 margin、flex、position + float 、position + transform；
垂直居中：height+line-height 、 table 、position + margin、position + transform；
方法肯定不止这些，平时事情中我还是方向于调试为主，可以参考如下两个链接：
css 水平居中的几种实现办法css 垂直居中的几种实现办法相应式布局实现？
我回答：media 、rem
就平时开拓，都是抓个主流组件 UI 库搞吧搞吧，也没有特殊须要同时兼容 pc or 移动端。
真要我设计相应式布局，首先还是回归 bootstrap 看看最佳实践是怎么个办法；
除了对网格栅栏的设计外，另一方面还要找公司设计师一共指定 UI 风格，毕竟设计相差过大写代码也是痛楚的，还不如两套项目。
flex=1 什么意思？
我回答：没有用过，是类似 background 综合的写法。但表示用过 flex-direction 、flex-wrap、justify-content。
flex 是对弹性布局内 item 元素的 flex-grow、flex-shrink、flex-basis 的缩写，当然我平时没有分外设置过，没这方面的需求。类似针对 item 还有 order、align-self 之类的属性。
网页性能剖析？
我回答：利用 network 来看各个资源的加载，在构建端做文件大小，打包质量等管控。
后问，还有吗？
利用 chrome 浏览器性能剖析工具 performance ，结果录制得出报告，剖析全体资源的加载，到运行全体周期的情形。（当然实际开拓，很少对这方面有落地性的指标）
讲下页面重绘重排？
这是基于上面个问题的坑。
我回答：html 加载到浏览器后，会形成 dom 树，异步加载完 css 资源后会形成 css 树，两者结合天生
渲染树（render tree），浏览器针对其做元素的排列（重排），终极进行重绘。
涉及几何元素长宽，位置，dom 的修正都会引起重绘，反复的重排、重绘都会对浏览器性能造成开销。以是像主流框架都会内部实现一套虚拟 dom 机制。
浏览器剖析报告获取？
我回答：客户端没有故意识的拉出报告剖析，不过自己在 node 做事端有过类似的剖析。
之前在 node 端碰着性能问题，就结合 node 的 heapdump 模块拉出运行时的 dump 文件，扔到 chrome 等分析。实在都是 profile 文件，相信事理都是类似的。
说下浏览器缓存？
我回答：cookie loaclstorage ？但不是口试官须要的。
我现在搜索了下，除了平时我知道的 expires ，还有 cache-contro 、last-modified 、etag ，表示平时细节还是关注太少。
说下断点续传？
我回答：没用过，但核心是根据文件已读 length 来掌握做事器之后的资源吐出？
但实在是根据 range 和 content-range 两个要求头标识来做的掌握，并且做事器返回的状态码为 206 。
webpack 优化
我回答：由于自己团队是多页面开拓办法，随着项目的增大，打包韶光也到分钟级别，对常规的 webpack 几个 loader 等配置进行调优降到 40s，末了故意识的对业务模块打包办法，乃至降到数秒级别。
当然有实际这方面的文章落地，感兴趣的同学可以看下：
webpack 优化：2 款工具帮你找到构建速率“变慢”的缘故原由webpack 优化：6 种办法让构建韶光达到秒级webpack 实行顺序
我回答：没有关注过内部源码，不过试问是否是 entry 到 loader，再 plugins 终极到 output ，虽然我知道口试的点不是这个，但总比什么都不说的好。
数组利用过哪些 api
我回答：map、filter、slice、splice 之类。
水平数据构造转树形构造（手写代码）
又是一个接上一题的坑。
我回答：根据 for 循环+递归写了堆 js 代码。我能想象口试官看到这堆 7788 代码的心里活动（彩笔）
实在我内心已经知道不是口试官的用意。我实在想用 reduce ，但那时不好意思说出来，由于我平时没用过，当场如果用 reduce 写，我可能脑回路会中断。
下面是我回家实现的，大概思路如下：
异步方法用过哪些？promise 自己实现过吗？
我回答：async/await ，promise 之类。
promise 自己以前玩过，里面便是返回一个高阶函数。（当然如果那时叫我手写，我又要gg了）
setTimout 事理？
我回答：js 单线程的，对付 setTimout 之类方法会延后实行，当“普通”函数在堆栈中实行完后，末了调用 setTimout 方法。
当然如果回答中能冒出个 事宜轮询 关键字会更加分，可以参考如下文章：
从事宜轮询 Event Loop，看 microTask、macroTaskssr 实现
我回答：表示目前未用过 vue nuxt 等成熟 ssr 框架，我们的 pc 网站采取 koa + nunjucks/jade 直出页面做 seo 。（我以为无论利用什么效果都是一样的，无非是字符串渲染。）
后面表示，更方向于利用 vue 官网推举的 vue-server-renderer 之类的模块来对项目构建做集成之前有在这块做过 demo 。无法预估第三方框架带来的风险，会选择偏根本的核心方案。
当然，如果前后端技能栈统一就另当别论了。
vue 源码
我回答：环绕 vue 的 动态相应式数据 和 ast 模板 乱说一通，由于最近刚学习过 vue 源码，内心实在不慌的，但措辞组织我以为有待梳理。
团队新技能选型
我回答：参考社区生态、团队投票、新技能办理的问题、和团队踩坑能力等做了阐述。
项目工程化
我回答：恰好在公司我卖力从项目搭建，团队开拓规范，到 jenkins 持续继续发布全体流程。以是对此问题就有什么说什么，eslint、jspcd、jenkins 、团队约定之类用到的就都说了。
高流量应对处理
我回答：恰好我们公司架构调度，通过 aliyun 的 SLB 负载均衡实现 ECS 的水平扩容，然后能在高压时段紧急应对。
同时结合前周听到的 serverless 思想抛给口试官，希望得到一定的认可。（虽然我还没实践过）
总结
大致题目如上，可能还有部分遗漏。末了还是比较幸运的没有被口试官直接“赶走”，等到了 HR “收割”。这里还是感谢口试官的耐心，有时候我胡言乱语起来，自己都不知道在表述什么。
对付这次面经，大体三点：
看重平时根本积累。像浏览器缓存、css 常用的些实现等细节须要特意加深影象，口试不会给你个浏览器 or ide 利用 tab 来遐想试错，不然答不出很掉身份。学习源码。这个看觉悟吧，当碰着瓶颈自然就会往那方面研讨，真是让你说个 webpack 之类的道道，平时没研究过，光看别人的总结很随意马虎“看破”的。看重发展。团队、项目的现实状况更反应自我的代价，还是要勇于创新实践。惭愧，我现在还没有写过一个断点续传功能。期待下周能得到口试结果。
