讲真，大疆前端面试不难，都是很基础的，就是时间长，等的捉急。一面是电话面，两个面试官轮流问；二面是视频面，是三个面试官一起微信视频，视频面还是蛮累的，上下左右都得顾上；终面是去的现场面，就跟一个面试官聊了十几分钟人生。

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. 有哪些排序算法，时间复杂度是多少？什么时候快排的效率最低？

整个序列已经有序或完全倒序时，快排的效率最低。

7. 原生ajax的请求过程

创建全平台兼容的XMLHttpRequest对象：

function getXHR(){var xhr = null;if(window.XMLHttpRequest) {// 兼容 IE7+, Firefox, Chrome, Opera, Safarixhr = 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变量赋值不同的组件，进行渲染。

参考：react-router的实现原理

16. 怎么用无人机捕获天空上的鸟

这个题目我也不造啊，毕竟我没用过无人机，有知道的大神可以在评论中回答一下~

终面

1. 做的项目中，哪个做的最深入最久
2. 为什么要做前端，喜欢做前端么
3. 未来的职业规划
4. 了解大疆么，大疆的文化是什么
5. 除了实习，还做过哪些项目
6. 如果生活富足，衣食无忧，你会选择干什么

大概就是这样吧，在即将到来的三四月份黄金时间里，希望所有的前端党们都能找到自己心仪的工作，意向大疆的童鞋希望本篇文章对你有帮助。

有句话叫做“方法不对，努力白费”所有的前端大神都有自己的学习方法，而学web前端的学习也基本一致，而对于一个什么都不懂的初学者，根本不会知道该怎么学，这也是造成失败的最直接原因。所以学web前端一定要有人指点。如果你处在迷茫期，找不到方向。可以加入我们的前端学习交流qun： 784783012 。有任何不明白的东西随时来问我。