奔三路 - 你30岁前的学习路!

奔三路学习网

当前位置: 主页 > 前端面试通 > 题库 >

大疆校招前端面试题,带答案

时间:2018-10-09 16:14来源: 作者:小邱
内含CSS3动画、排序、react等面试问题

内含CSS3动画、排序、react等面试问题

大疆是我校招面的第一家公司,从六月份投简历,然后笔试面试到拿到录用意向书,前后用了近四个月,来之不易啊。

一面二面

因为时间太久,就直接放在一起了,问的都是基础吧,讲真,大疆前端面试不难,都是很基础的,就是时间长,等的捉急。一面是电话面,两个面试官轮流问;二面是视频面,是三个面试官一起微信视频,视频面还是蛮累的,上下左右都得顾上;终面是去的现场面,就跟一个面试官聊了十几分钟人生。<br>

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. 闭包是什么,什么时候闭包会消除?

因为作用域链,外部不能访问内部的变量和方法,这时我们就需要通过闭包,返回内部的方法和变量给外部,从而就形成了一个闭包。<br>

Javascript是一门具有自动垃圾回收机制的编程语言,主要有两种方式:

  • 标记清除(最常用)

垃圾收集器在运行的时候会给存储在内存中的所有变量都加上标记(可以使用任何标记方式)。然后,它会去掉环境中的变量以及被环境中的变量引用的变量的标记。而在此之后再被加上标记的变量将被视为准备删除的变量,原因是环境中的变量已经无法访问到这些变量了。最后,垃圾收集器完成内存清除工作,销毁那些带标记的值并回收它们所占用的内存空间。

  • 引用计数

引用计数(reference counting)的含义是跟踪记录每个值被引用的次数。当声明了一个变量并将一个引用类型值赋给该变量时,则这个值的引用次数就是1。如果同一个值又被赋给另一个变量,则该值的引用次数加1。相反,如果包含对这个值引用的变量又取得了另外一个值,则这个值的引用次数减1。当这个值的引用次数变成0 时,则说明没有办法再访问这个值了,因而就可以将其占用的内存空间回收回来。这样,当垃圾收集器下次再运行时,它就会释放那些引用次数为零的值所占用的内存。

导致问题:会导致循环引用的变量和函数无法回收。<br>

解决:将用完的函数或者变量置为null。

5. 怎么理解js是单线程的

主要说一下异步以及事件循环机制,还有事件队列中的宏任务、微任务。

  • macrotask:主代码块,setTimeout,setInterval、setImmediate等。
  • microtask:process.nextTick(相当于node.js版的setTimeout),Promise 。process.nextTick的优先级高于Promise。

更详细可以看这篇博客:这一次,彻底弄懂 Javascript 执行机制,讲的非常清晰。

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

请求数据的过程:

8. http状态码,cookie字段,cookie一般存的是什么,session怎么存在的?

这部分可以参考我的博客:HTTP协议知识点总结

9. http请求方式有哪些?

  • HTTP1.0定义了三种请求方法: GET, POST 和 HEAD方法。
  • HTTP1.1新增了五种请求方法:OPTIONS, PUT, DELETE, TRACE 和 CONNECT 方法。
  • 更多请看:HTTP请求方法

10. 怎么用原生js实现一个轮播图,以及滚动滑动

之前我使用轮播图都是用的antd的组件,所以我大致说了一下思路,用定时器去实现,以及如何实现平滑的滚动效果。详情请看: 原生js实现轮播图

11. 用过哪些开源的组件

说了antd和element-ui。

12. 怎么实现上传下载的功能

主要说了下form表单和input标签。

13. react生命周期,以及diff算法,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. 怎么用无人机捕获天空上的鸟

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

终面

终面是去的现场,在深圳总部那边,基本就是闲聊了二十来分钟吧,面完还有hr小姐姐给我们介绍和参观了无人机,酷炫~

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

作者:好运连连拿offer
来源:牛客网
(责任编辑:admin)
顶一下
(1)
100%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
发布者资料
小邱 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2017-11-26 17:11 最后登录:2018-11-13 09:11

关注奔三路