CSS
如何清除浮动？
答案及考察点（逐层递进）：
- 回答出
clear: both或overflow: hidden，解决掉问题； - 说出
clear: both的原理：
-
clear: left左侧不能有浮动元素；clear: right右侧不能有浮动元素；clear: both两侧都不能有浮动元素。
描述一下盒模型。
答案：见 MDN。
我们经常会使用 margin: 0 auto 来将一个 div 水平居中，请描述居中的原理。
答案：这条规则拆分开就是
margin-top: 0; margin-bottom: 0; margin-left: auto; margin-right: auto;
CSS 盒模型“margin-left + border-left + padding-left + content + padding-right + border-right + margin-right”的宽度要等于父元素的宽度，margin-left 和 margin-right 同为 auto，就会平均瓜分剩余的宽度，让元素居中。
为了适配移动端屏幕尺寸、分辨率等设备差异，通常适配的方案是什么？
- rem
- px -> vw（postcss）
在写一个通用组件的时候，你一般是如何解决 className 命名冲突的问题？
- css-module
JS 基础
什么是闭包？
闭包是一种能够在函数声明过程中将环境信息与所属函数绑定在一起的 数据结构。它是基于函数声明的文本位置的，因此也被称为围绕函数定义的静态作用域或词法作用域。闭包是一种函数式编程语言的特性。简单的表象就是函数内部可以访问函数外部作用域的变量，容易带来的误解往往是在循环中引用到循环变量的最后一个值，通常可以通过传参变为临时变量处理引用关系。
——《JavaScript 函数编程指南》
描述一下 JavaScript 中的原型链设计，并说下其在实际中的应用。
原型链主要是用于实现 JS 面向对象能力（封装、继承、多态）的一种机制，通过原型链模型可以实现继承。
每个 实例对象 都有一个私有属性 __proto__ ，其指向它的构造函数的原型对象 prototype ，而此构造函数的原型对象也有一个 __proto__ ，所以一层一层往上，直到指向顶端 Object 的原型对象，也就是 null。
ES6 新增 Object.getPrototypeOf() 和 Object.setPrototypeOf() 访问和设置原型对象。
ES6 中可以使用 class ，但是其本质只是语法糖。
- 《JavaScript 原型和原型链 - 知乎》
https://zhuanlan.zhihu.com/p/39549472 - 《继承与原型链 - MDN》https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain
描述一下浏览器中 JS 引擎的微任务机制。
JavaScript 有一个 Main Thread 主线程和 Call Stack 调用栈（执行栈），所有的任务都会被放到调用栈等待主线程执行。
JavaScript 单线程任务被分为同步任务和异步任务，同步任务会在调用栈中按照顺序等待主线程依次执行，异步任务会在异步任务有了结果后，将注册的回调函数放入任务队列中等待主线程空闲的时候（调用栈被清空），被读取到栈内等待主线程的执行。
执行顺序：每次单个宏任务执行完毕后，检查微任务（MicroTask）队列是否为空，如果不为空的话，会按照先入先出的规则全部执行完微任务（MicroTask）后，设置微任务（MicroTask）队列为 null，然后再执行宏任务，如此循环。
MacroTask（宏任务）：
- Script 全部代码；
- setTimeout、setInterval、setImmediate（浏览器暂时不支持，只有IE10支持，具体可见MDN）；
- I/O；
- UI Rendering；
MicroTask（微任务）：
- Process.nextTick（Node独有）；
- Promise；
- Object.observe（废弃）；
- MutationObserver；
Event Loop：
简单聊一聊 eventloop, 宏任务与微任务 - 知乎https://zhuanlan.zhihu.com/p/105903652
React
描述下 React 16 的 Fiber 架构，并说出其对比上一个版本的优势。
React Fiber 是对核心算法的一次重新实现。
在现有React中，更新过程是同步的，这可能会导致性能问题。（调用各个组件的生命周期函数，计算和比对Virtual DOM，最后更新DOM树）。
分片执行：React Fiber 一个更新过程被分为两个阶段（Phase）：第一个阶段 Reconciliation Phase 和第二阶段Commit Phase。
- 第一阶段 Reconciliation Phase，React Fiber 会找出需要更新哪些DOM，这个阶段是可以被打断的，重新执行，影响生命周期；
- 第二阶段Commit Phase，那就一鼓作气把DOM更新完，绝不会被打断。
React Fiber是什么 - 知乎https://zhuanlan.zhihu.com/p/26027085
React Fiber - 掘金https://juejin.im/post/5ab7b3a2f265da2378403e57
Deep In React之浅谈 React Fiber 架构(一)https://mp.weixin.qq.com/s/dONYc-Y96baiXBXpwh1w3A
React 15 vs React 16 Diff 算法差异
v15
分层求异；
Tree diff：
- React 对树的算法进行了简洁明了的优化，即对树进行分层比较，两棵树只会对同一层次的节点进行比较。
Component diff：
- 组件不一致直接删除，
Element diff：
- 当节点处于同一层级时，React diff 提供了三种节点操作，分别为：INSERT_MARKUP（插入）、MOVE_EXISTING（移动）和 REMOVE_NODE（删除）；
- 带上 key，便于区分；
v16
- 链表描述，四种 diff：
- TextNode(包含字符串和数字)；
- 单个 React Element(通过该节点是否有 $$typeof 区分)；
- 数组；
- 可迭代的 children，跟数组的处理方式差不多；
小程序
描述下小程序机制 & 原理，以及对比 H5 应用的优劣势。
参考：
微信，支付宝小程序实现原理概述 - SegmentFault 思否https://segmentfault.com/a/1190000018631528
安全
描述下 OAuth 机制。
OAuth是一个关于授权（authorization）的开放网络标准，在全世界得到广泛应用，目前的版本是2.0版。
- （A）用户访问客户端，后者将前者导向认证服务器。
- （B）用户选择是否给予客户端授权。
- （C）假设用户给予授权，认证服务器将用户导向客户端事先指定的"重定向URI"（redirection URI），同时附上一个授权码。
- （D）客户端收到授权码，附上早先的"重定向URI"，向认证服务器申请令牌。这一步是在客户端的后台的服务器上完成的，对用户不可见。
- （E）认证服务器核对了授权码和重定向URI，确认无误后，向客户端发送访问令牌（access token）和更新令牌（refresh token）
理解OAuth 2.0 - 阮一峰的网络日志https://www.ruanyifeng.com/blog/2014/05/oauth_2_0.html
描述下 HTTPS 原理。
网络传输的演化：
- 明文传输；
- 加密传输（双方都约定好密钥，但是如何传送密钥？对称加密 - 加密解密用同一个密钥）；
- RSA 非对称加密（私钥 + 公钥）；
- 中间人劫持，中间人用自己的密钥和公钥冒充通信者双方；
- 数字签名（CA 证书），需要操作系统信任证书；
流程：
- 浏览器发起 https 请求；
- 服务器返回 CA 证书 + 自己的公钥；
- 浏览器验证 CA 证书；
- 浏览器生成对称加密的私钥，通过公钥加密传输给服务器；
- 服务器获取密钥，用自己公钥解密，两者开始安全通信；
CSRF
跨站请求伪造：其原理是攻击者构造网站后台某个功能接口的请求地址，诱导用户去点击或者用特殊方法让该请求地址自动加载，通常是在 cookie 中加一个随机串，_csrf_token，发请求的时候带上；
算法 & 数据结构。
- 分而治之；
- 动态规划；
- 贪心算法；
- 回溯算法；
- 递归；
- 排序、搜索、随机算法；
无线应用
你有过性能优化的实战经验吗，请描述下你是如何优化的？
- 利用网络层特性缓存（请求头、PWA等）；
- 图片优化；
- 离线；
- 业务层优化（渲染时机，逻辑策略等）；
- 请求优化（预加载等）；
- 交互视觉优化（骨架图等）；
2391
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
