README.md

更新 List:

• 2018.5.09: CSS 手机端下适配问题
• 2018.4.14: IndexedDB 技术问题更新
• 2018.4.01: 框架问题更新

BAT 要的是什么样的前端实习生？

标签 ： 面试 前端

---

面试季又到了，各位小鲜肉也在着手准备基本的面试、实习。但是，有小鲜肉的思想我确实有点不敢苟同。面试无非就是问一些问题，你能答出来就行，答不出来就 pass。那如果我知道你要问哪些问题，这不就行了吗？感觉这不就是做一场考试吗？

一个学期的课程，我用 7 天学完，题目我都会做，考试分数还比那些学了一个学期的要好得多。那我为什么还要上课呢？现在，侥幸你通过了面试，知道如何做算法题，但在实际工程领域，你这样的人能解决什么问题呢？

年轻人拥有着无限可能大概是这世界上最搞笑的一句话了。本来在这个世界上在某一个领域里做好一件事情都很难的，怎么就无限可能了呢？越是对世界缺少洞见，对自己缺乏了解，越是容易被这句话感动得热泪盈眶。

最近看了一下，基本的面试题目集，发现都是一问一答的形式，这个不是和 7 天速成一模一样了吗？知其然，不知其所以然。那么，我这里也和他们一样，也给大家一份面试题目集，不过，答案并没有写出来，而是在每篇文章里（有些，就直接归纳在下面），你能看懂多少，这个题目你就能解决多少。

而面试题目也会持续更新下去

最新的内容，请访问：front-end-interview

或者也可以关注我的公众号：前端小吉米 ，获得一手的前端预研文章。

面试问题

浏览器内核

• 当输入一个网址时，整个过程是怎样的呢？

• 测速时候，你一般用 Date.now 还是使用 Performance?

• 浏览器渲染原理是什么，了解重排和重绘么？

• Onload 事件和 DomContentLoaded 事件有什么区别么？

缓存协议

• 基本的缓存头协议有哪些？

• cache-control 和 expires 有什么区别呢？

• 你能结合上面的缓存协议，来组合做一份优化吗？

• 通常像离线存储数据库比如 local storage、IndexedDB 存储有上限值吗？如果超过了，浏览器会怎么处理？

• 在 indexedDB 里面查找数据有几种方式？

• 什么情况下需要更新 IndexedDB？更新 indexedDB 有什么需要注意的么？

CSS 布局

• 什么叫做盒模型？

• 实现垂直居中办法有哪些呢？

• 网格布局中，设置元素位置方式有哪几种?

• 如何设置行列间的间隔？

• rem 如果动态适配手机端

rem 依据是�根节点 html 的 font-size 属性来设置。默认下，以 iphone-375px 宽度作为标准适配。html 里面依次为基准设置一个 font-size: 37.5px; 固定值为标准。后续子节点，参考为 1px = 1/37.5 rem. �随着手机屏幕宽度不同，�比如达到 396px，通过 JS 动态修改 html.font-size 属性为 39.6px 即可。

那么原始设置的 1px(375):1px(396) = 375:396 = 1:1.056 �这样就可以很容易的实现 不同手机宽度下的放大或者缩小效果。

另外，还有根据 DPR 在某些安卓机下，实现 0.5px 的效果，实现方式也是计算比例，�类似我就不多说了。

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

• 能简单描述一下 React 中间件运行方式吗？

全景相关

• 了解过 UV 映射吗？

简单来说就是贴图，用来将 2D 图片映射到 3D 坐标系中。首先确定 2D 的范围，然后将指定 2D 范围图片映射到 3D 坐标中。

• 有了解过如何利用 Three.js 实现一个 UV 映射么？

首先，通过 MeshPhongMaterial 将图片加载到纹理空间，利用 new Vector2 确定纹理范围。最后，由 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 以外的其它辅助文件。