【大疆】前端岗-校招面试指北，各路英雄来相会！

大疆前端面经 0 65

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对象：

代码语言：javascript

复制

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请求数据的过程：

代码语言：javascript

复制

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. 怎么用无人机捕获天空上的鸟

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

终面

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

发表评论 取消回复

发表评论取消回复