大疆前端校招面试指北，各路英雄来相会！
大疆前端校招面试指北，各路英雄来相会！
讲真，大疆前端面试不难，都是很基础的，就是时间长，等的捉急。一面是电话面，两个面试官轮流问；二面是视频面，是三个面试官一起微信视频，视频面还是蛮累的，上下左右都得顾上；终面是去的现场面，就跟一个面试官聊了十几分钟人生。
1. meta标签
meta标签：提供给页面的一些元信息（名称/值对）， 比如针对搜索引擎和更新频度的描述和关键词。
name：名称/值对中的名称。常用的有author、description、keywords、generator、revised、others。 把 content 属性关联到一个名称。 http-equiv：没有name时，会采用这个属性的值。常用的有content-type、expires、refresh、set-cookie。把content属性关联到http头部。 content： 名称/值对中的值， 可以是任何有效的字符串。 始终要和 name 属性或 http-equiv 属性一起使用。 scheme： 用于指定要用来翻译属性值的方案。
2. css哪些属性可以继承
字体相关：line-height, font-family, font-size, font-style, font-variant, font-weight, font 文本相关： letter-spacing, text-align, text-indent, text-transform, word-spacing 列表相关：list-style-image, list-style-position, list-style-type, list-style 颜色：color
3. css3有哪些新属性
（1）边框：
-
border-radius：圆角边框，border-radius:25px; -
box-shadow：边框阴影，box-shadow: 10px 10px 5px #888888; -
border-image：边框图片，border-image:url(border.png) 30 30 round;
（2）背景：
background-size：规定背景图片的尺寸，background-size:63px 100px;background-origin：规定背景图片的定位区域，背景图片可以放置于 content-box、padding-box 或 border-box 区域。background-origin:content-box;- CSS3 允许您为元素使用多个背景图像。background-image:url(bg_flower.gif),url(bg_flower_2.gif);
（3）文本效果：
text-shadow：向文本应用阴影，可以规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色。text-shadow: 5px 5px 5px #FF0000;word-wrap：允许文本进行换行。word-wrap:break-word;
（4）字体：CSS3 @font-face 规则可以自定义字体。
（5）2D 转换（transform）
-
translate()：元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数。 transform: translate(50px,100px); -
rotate()：元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。transform: rotate(30deg); -
scale()：元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数。transform: scale(2,4); -
skew()：元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数。transform: skew(30deg,20deg); -
matrix()： 把所有 2D 转换方法组合在一起，需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。transform:matrix(0.866,0.5,-0.5,0.866,0,0);
（6）3D 转换
-
rotateX()：元素围绕其 X 轴以给定的度数进行旋转。transform: rotateX(120deg); -
rotateY()：元素围绕其 Y 轴以给定的度数进行旋转。transform: rotateY(130deg);
（7）transition：过渡效果，使页面变化更平滑
-
transition-property：执行动画对应的属性，例如 color，background 等，可以使用 all 来指定所有的属性。 -
transition-duration：过渡动画的一个持续时间。 -
transition-timing-function：在延续时间段，动画变化的速率，常见的有：ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier 。 -
transition-delay：延迟多久后开始动画。
简写为：transition: [<transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay>];
（8）animation：动画
使用CSS3 @keyframes 规则。
-
animation-name: 定义动画名称 -
animation-duration: 指定元素播放动画所持续的时间长 -
animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)： 指元素根据时间的推进来改变属性值的变换速率，说得简单点就是动画的播放方式。 -
animation-delay: 指定元素动画开始时间 -
animation-iteration-count:infinite | <number>：指定元素播放动画的循环次 -
animation-direction: normal | alternate： 指定元素动画播放的方向，其只有两个值，默认值为normal，如果设置为normal时，动画的每次循环都是向前播放；另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。 -
animation-play-state:running | paused：控制元素动画的播放状态。
简写为： animation:[<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>]
这里只列出了一部分，详情可以去看w3school的CSS3 教程。
4. 闭包是什么，什么时候闭包会消除?
因为作用域链，外部不能访问内部的变量和方法，这时我们就需要通过闭包，返回内部的方法和变量给外部，从而就形成了一个闭包。
JavaScript是一门具有自动垃圾回收机制的编程语言，主要有两种方式：
-
标记清除（最常用）
垃圾收集器在运行的时候会给存储在内存中的所有变量都加上标记（可以使用任何标记方式）。然后，它会去掉环境中的变量以及被环境中的变量引用的变量的标记。而在此之后再被加上标记的变量将被视为准备删除的变量，原因是环境中的变量已经无法访问到这些变量了。最后，垃圾收集器完成内存清除工作，销毁那些带标记的值并回收它们所占用的内存空间。
引用计数
引用计数（reference counting）的含义是跟踪记录每个值被引用的次数。当声明了一个变量并将一个引用类型值赋给该变量时，则这个值的引用次数就是1。如果同一个值又被赋给另一个变量，则该值的引用次数加1。相反，如果包含对这个值引用的变量又取得了另外一个值，则这个值的引用次数减1。当这个值的引用次数变成0 时，则说明没有办法再访问这个值了，因而就可以将其占用的内存空间回收回来。这样，当垃圾收集器下次再运行时，它就会释放那些引用次数为零的值所占用的内存。
导致问题：会导致循环引用的变量和函数无法回收。
解决：将用完的函数或者变量置为null。
5. 怎么理解js是单线程的
主要说一下异步以及事件循环机制，还有事件队列中的宏任务、微任务。
-
macrotask：主代码块，setTimeout，setInterval、setImmediate等。 -
microtask：process.nextTick（相当于node.js版的setTimeout），Promise 。process.nextTick的优先级高于Promise。
6. 有哪些排序算法，时间复杂度是多少？什么时候快排的效率最低？
排序算法 | 最坏事件复杂度 | 平均时间复杂度 | 稳定度 | 空间复杂度 |
|---|---|---|---|---|
冒泡排序 | O(n^2) | O(n^2) | 稳定 | O(1) |
插入排序 | O(n^2) | O(n^2) | 稳定 | O(1) |
选择排序 | O(n^2) | O(n^2) | 稳定 | O(1) |
快速排序 | O(n^2) | O(n*log2n) | 不稳定 | O(log2n)~O(n) |
二叉树排序 | O(n^2) | O(n*log2n) | 不一定 | O(n) |
堆排序 | O(n*log2n) | O(n*log2n) | 不稳定 | O(1) |
整个序列已经有序或完全倒序时，快排的效率最低。
7. 原生ajax的请求过程
创建全平台兼容的XMLHttpRequest对象：
function getXHR(){
var xhr = null;
if(window.XMLHttpRequest) {// 兼容 IE7+, Firefox, Chrome, Opera, Safari
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");// 即MSXML3
} catch (e) {
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");// // 兼容 IE6, IE5，很老的api,虽然浏览器支持,功能可能不完善,故不建议使用
} catch (e) {
alert("您的浏览器暂不支持Ajax!");
}
}
}
return xhr;
}Ajax请求数据的过程：
var xhr = getXHR();
xhr.open('GET', url/file,true); //设置请求方式，url，以及是否异步
xhr.onreadystatechange = function() { //设置回调监听函数
if(xhr.readyState==4){
if(xhr.status==200){
var data=xhr.responseText;
console.log(data);
}
};
xhr.onerror = function() {
console.log("Oh, error");
};
xhr.send(); //发送请求8. http状态码，cookie字段，cookie一般存的是什么，session怎么存在的？
这部分可以参考我的博客：HTTP协议知识点总结
9. http请求方式有哪些？
- HTTP1.0定义了三种请求方法： GET, POST 和 HEAD方法。
- HTTP1.1新增了五种请求方法：OPTIONS, PUT, DELETE, TRACE 和 CONNECT 方法。
- 更多请看：HTTP请求方法
10. 怎么用原生js实现一个轮播图，以及滚动滑动
之前我使用轮播图都是用的antd的组件，所以我大致说了一下思路，用定时器去实现，以及如何实现平滑的滚动效果。
11. 用过哪些开源的组件
说了antd和element-ui。
12. 怎么实现上传下载的功能
主要说了下form表单和input标签。
13. react生命周期，以及diff算法，diff算法是对树的深度优先遍历还是广度优先遍历？
- 对React、Redux、React-Redux详细剖析
- 是深度优先遍历。 diff的实现
14. 强缓存和协商缓存
参考：HTTP协议知识点总结
15. react-router的原理
react-router就是控制不同的url渲染不同的组件。react-router在history库的基础上，实现了URL与UI的同步。
原理：DOM渲染完成之后，给window添加onhashchange事件监听页面hash的变化，并且在state属性中添加了route属性，代表当前页面的路由。
具体步骤：
- 当点击链接，页面hash改变时，触发绑定在 window 上的 onhashchange 事件；
- 在 onhashchange 事件中改变组件的 state中的 route 属性，react组件的state属性改变时，自动重新渲染页面；
- 页面随着 state 中的route属性改变，自动根据不同的hash给Child变量赋值不同的组件，进行渲染。
16. 怎么用无人机捕获天空上的鸟
这个题目我也不造啊，毕竟我没用过无人机，有知道的大神可以在评论中回答一下~
终面
- 做的项目中，哪个做的最深入最久
- 为什么要做前端，喜欢做前端么
- 未来的职业规划
- 了解大疆么，大疆的文化是什么
- 除了实习，还做过哪些项目
- 如果生活富足，衣食无忧，你会选择干什么
大概就是这样吧，在即将到来的三四月份黄金时间里，希望所有的前端党们都能找到自己心仪的工作，意向大疆的童鞋希望本篇文章对你有帮助。
有句话叫做“方法不对，努力白费”所有的前端大神都有自己的学习方法，而学web前端的学习也基本一致，而对于一个什么都不懂的初学者，根本不会知道该怎么学，这也是造成失败的最直接原因。所以学web前端一定要有人指点。