BAT 要的是什么样的前端实习生？
面试季又到了，各位小鲜肉也在着手准备基本的面试、实习。但是，有小鲜肉的思想我确实有点不敢苟同。面试无非就是问一些问题，你能答出来就行，答不出来就 pass。那如果我知道你要问哪些问题，这不就行了吗？感觉这不就是做一场考试吗？
一个学期的课程，我用 7 天学完，题目我都会做，考试分数还比那些学了一个学期的要好得多。那我为什么还要上课呢？现在，侥幸你通过了面试，知道如何做算法题，但在实际工程领域，你这样的人能解决什么问题呢？
年轻人拥有着无限可能大概是这世界上最搞笑的一句话了。本来在这个世界上在某一个领域里做好一件事情都很难的，怎么就无限可能了呢？越是对世界缺少洞见，对自己缺乏了解，越是容易被这句话感动得热泪盈眶。
最近看了一下，基本的面试题目集，发现都是一问一答的形式，这个不是和 7 天速成一模一样了吗？知其然，不知其所以然。那么，我这里也和他们一样，也给大家一份面试题目集，不过，答案并没有写出来，而是在每篇文章里（有些，就直接归纳在下面），你能看懂多少，这个题目你就能解决多少。
而面试题目也会持续更新下去
最新的内容，请访问：front-end-interview
面试问题
浏览器内核
- 当输入一个网址时，整个过程是怎样的呢？
- 测速时候，你一般用 Date.now 还是使用 Performance?
- 浏览器渲染原理是什么，了解重排和重绘么？
- Onload 事件和 DomContentLoaded 事件有什么区别么？
缓存协议
- 基本的缓存头协议有哪些？
- cache-control 和 expires 有什么区别呢？
- 你能结合上面的缓存协议，来组合做一份优化吗？
CSS 布局
- 什么叫做盒模型？
- 实现垂直居中办法有哪些呢？
- 网格布局中，设置元素位置方式有哪几种?
- 如何设置行列间的间隔？
CSS3 动画
- translate(X,Y) 是如何对应于矩阵变换的？
等同于 matrix(1,0,0,1,X,Y);
- matrix 属性值一共有几个？分别代表什么含义？
matrix(a,b,c,d,e,f); 等同于
- bezier 曲线有了解么？其 4 个点分别有什么含义？
P0,P1 在一条直线上，P2,P3在一条直线上。其中，P2、P3 x,y 必须在 (0,1) 范围内。而 P0 为 (0,0)，P3 为 (1,1)
- 在 keyframe-Animation 中，我们常常使用 bezier 曲线做什么用？
确定每一帧动画的变换速率。一般是有设计给出，确定整体动画的变换速度。需要注意，每一帧动画，都可以设置独立的 Animation-time-function。
(CSS 剩下的就是实现效果)
浏览器安全
- 基本的浏览器安全问题有哪些？
- 对于 CSRF 来说有什么解决手段吗？
PWA 技术
- PWA 中最核心的文件是？
- SW 的生命周期是什么？
- Sw 是怎样更新的？
- PWA 怎么让你的网页打开最快，有什么优化策略？
- CacheStorage 有大小限制么？如果超出限制，浏览器会怎么处理？
前端直播技术
- 有哪些常用的直播协议
- 这些协议的延时性怎么样？
- 前端音视频处理技术用到了什么？
- MSE 基本架构了解吗？
- 音视频基本概念知道哪些？
- .mp4 和 MPEG 有区别吗？
- 流处理的 API 有哪些？
- 了解过字节序这个概念吗？
安全
- 基本的浏览器安全问题有哪些？
- 对于 CSRF 来说有什么解决手段吗？
通信
- 网页有哪些跨域方式的访问呢？
- 如何实现 xhr 和 websocket 的跨域
- Fetch 的底层架构是怎样的？
- HTTP2 和 HTTP1.x 比起来有什么优势吗？
- TCP 三次握手了解吗？
算法
- 了解的基本排序算法有哪些？
快排，桶排，冒泡，选择，插入
- 二叉树的前序，中序，后序算法有了解过吗？
- 有了解过 Hash Table 么？他是怎么每次都能有固定长度的 hash 值呢？
通过取余
- 这个 hash 长度有没有讲究？
最好为质数
- 怎么解决 Hash 碰撞呢？
开链法，线性探索，简单来说就是对于相同 hash 增加一个二维数组来记录重复。
- 如何检测括号有没有完整匹配？
通过堆栈来解决
- 一个单词是否是回文？
通过 split 拆分字符串，通过数组倒序来实现 ( split('').reverse().join(''))。
对一个数组进行去重，算法为 O(n)?
利用对象 key 唯一的特性，判断每个数组 val（Obj[val] ）是否一致即可。
- 如何统计字符串中出现次数最多的字符？
同样利用对象 key 的唯一特性来解决。
- 如何模拟一个 getElementsByClassName 的功能？
通过获取整个 tag ( getElementsByTagName("*"))，然后通过正则匹配（区分单词边界）ClassName 即可。
框架问题
- 了解过 redux 和 flux 的区别吗？
redux 比 flux 多了一个中间数据的管理--Reducer
- React 生命周期了解么？
componentWillMount => render => componentDidMount
- React 组件更新的声明周期是怎样的？ ComponentWillReciveProps => shouldComponentUpdate => componentWillUpdate => render => componentDidUpdate
全景相关
- 了解过 UV 映射吗？
简单来说就是贴图，用来将 2D 图片映射到 3D 坐标系中。首先确定 2D 的范围，然后将指定 2D 范围图片映射到 3D 坐标中。
- 有了解过如何利用 Three.js 实现一个 UV 映射么？
首先，通过 MeshPhongMaterial 将图片加载到纹理空间，利用 newVector2 确定纹理范围。最后，由 faceVertexUvs 来执行贴图操作。
- 球面 3D 移动原理知道是什么吗？
简单来说就是球坐标系。通过手机滑动来改变，相机的视角位置。基本的公式为
- 有没有试过陀螺仪来做交互呢？它有几个基本的旋转数据？
有三个旋转角 alpha、beta、gamma。绕着 Z 轴转动的夹角为 alpha，绕着 X 轴转动的夹角为 beta，绕着 Y 轴转动的夹角为 gamma。其通过 deviceorientation 事件来提供相应数据。
webpack 编译工具
- 使用 Webpack 来导出一个
demo.js的库，规定可以通过全局变量、require\import 等方式使用，应该设置哪些属性？
需要设置:
libraryTarget:'umd',
library:'demo'- 如何修改通过
import或者require引用的解析路径？
通过设置 resolve 属性值中的 alias、 modules 来完成。
- webpack plugin 和 loader 有什么区别吗？loader、plugin 常用来处理什么？
loader 主要是用来处理原始 sourceCode，比如 js、css、jsx 文件等。它通过函数式编程一层一层的处理。plugin 主要是处理非 Loader 以外的其它辅助文件。