大疆校招—大疆校招测评?

百度

二面三面都有手写代码的环节，对于我这种动手能力弱的人来说还是挺吃力。当时提前批投递的是深圳百度，总共只招五个前端，没过也很正常。后面正式批笔试过了，但是要去北京面试，也就直接放弃了。

1. 为什么要用flex布局，align-items和justify-content的区别

传统布局基于盒模型，非常依赖 display属性 、position属性 、float属性。而flex布局更灵活，可以简便、完整、响应式地实现各种页面布局，比如水平垂直居中。

align-items：定义在垂直方向上的对齐方式；

justify-content：定义在水平方向上的对齐方式。

2. webpack是怎么打包的，babel又是什么？

把项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。

babel将es6、es7、es8等语法转换成浏览器可识别的es5或es3语法。

3. saas和less不同于普通css的地方

• 定义变量，可以把反复使用的css属性值定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值；
• 嵌套写法，父子关系一目了然；
• 使用运算符，可以进行样式的计算；
• 内置一些颜色处理函数用来对颜色值进行处理，例如加亮、变暗、颜色梯度等；
• 继承：为多个元素定义相同样式的时候，我们可以考虑使用继承的做法；
• Mixins （混入）：有点像是函数或者是宏，当某段 CSS经常需要在多个元素中使用时，可以为这些共用的 CSS 定义一个Mixin，然后只需要在需要引用这些 CSS 地方调用该 Mixin 即可。

4. es 6模块和其他模块不同的地方

对比了一下es6模块和CommonJS模块：

区别CommonJSes6加载原理第一次加载模块就会执行整个模块，再次用到时，不会执行该模块，而是到缓存中取值。不会缓存运行结果，动态的去被加载的模块中取值，并且变量总是绑定其所在模块。输出值的拷贝（模块中值的改变不会影响已经加载的值）值的引用（静态分析，动态引用，原来模块值改变会改变加载的值）加载方式运行时加载（加载整个模块，即模块中的所有接口）编译时加载（只加载需要的接口）this指向指向当前模块指向undefined循环加载只输出已经执行的部分，还未执行的部分不会输出遇到模块加载命令import时不会去执行模块，而是生成一个动态的只读引用，等到真正用到时再去模块中取值。只要引用存在，代码就能执行。

5. 有没有用过es6的一些异步处理函数

Promise，generator，async await

6. redux怎么处理异步操作

可以引入Redux-thunk或者redux-promise这种中间件，可以延迟事件的派发。

其中的原理：是因为他们用了applymiddleware()包装了store的dispatch方法，拥有可以处理异步的能力。

7. 为什么reducer要是个纯函数，纯函数是什么？

纯函数：对于相同的输入，永远会得到相同的输出，而且没有任何可观察的副作用，也不依赖外部环境的状态。

原因：Redux只通过比较新旧两个对象的存储位置来比较新旧两个对象是否相同（浅比较）。如果你在reducer内部直接修改旧的state对象的属性值，那么新的state和旧的state将都指向同一个对象。因此Redux认为没有任何改变，返回的state将为旧的state。两个state相同的话，页面就不会重新渲染了。

因为比较两个Javascript对象所有的属性是否相同的的唯一方法是对它们进行深比较。但是深比较在真实的应用当中代价昂贵，因为通常js的对象都很大，同时需要比较的次数很多。因此一个有效的解决方法是作出一个规定：无论何时发生变化时，开发者都要创建一个新的对象，然后将新对象传递出去。同时，当没有任何变化发生时，开发者发送回旧的对象。也就是说，新的对象代表新的state。

8. 高阶函数是什么，怎么去写一个高阶函数

高阶函数：参数值为函数或者返回值为函数。例如map，reduce，filter，sort方法就是高阶函数。

编写高阶函数，就是让函数的参数能够接收别的函数。

9. vue跟react的区别是什么

没有用过vue，所以就只说了vue具有双向绑定，react是单向数据流。

参考： Vue.js与React的全面对比

10. nodejs处理了什么问题

可以处理高并发的I/O，也能与websocket配合，开发长连接的实时交互应用程序。

11. 响应式布局，怎么做移动端适配

使用媒体查询可以实现响应式布局。

移动端适配方案：

（1）meta viewport：让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。

1. <meta
3. name
4. =
5. "viewport"
7. content
8. =
9. "width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
10. >

width=device-width: 让当前viewport宽度等于设备的宽度

user-scalable=no: 禁止用户缩放

initial-scale=1.0: 设置页面的初始缩放值为不缩放

maximum-scale=1.0: 允许用户的最大缩放值为1.0

minimum-scale=1.0: 允许用户的最小缩放值为1.0

（2）媒体查询（响应式)

（3）动态 rem 方案

参考： 移动端是怎么做适配的？

二面

1. 怎么做一个实时的聊天系统

使用WebSocket和nodejs，《nodejs实战》这本书详细介绍了这个项目。

2. 当消息有延迟的时候，怎么保证消息的正确顺序

每个消息在被创建时，都将被赋予一个全局唯一的、单调递增的、连续的序列号（SerialNumber，SN）。可以通过一个全局计数器来实现这一点。通过比较两个消息的SN，确定其先后顺序。

3. 怎么做一个登陆窗口，input有哪些兼容性

使用form表单。

4. input按钮如何校验

使用正则表达式。

5. 如何实现水平垂直居中，relative、absolute、fixed

我说了三种方式：

（1）使用表格

1. .
2. container
3. {
4. width
5. :
7. 600px
8. ;
9. height
10. :
12. 600px
13. ;
14. background
15. :
17. #eee;
18. display
19. :
20. table
21. –
22. cell
23. ;
24. text
25. –
26. align
27. :
28. center
29. ;
30. vertical
31. –
32. align
33. :
34. middle
35. ;
36. }
37. .
38. center
39. {
40. background
41. :
42. blue
43. ;
44. }

（2）css3的transform属性

1. .
2. container
3. {
4. width
5. :
7. 100
8. %;
9. height
10. :
12. 400px
13. ;
14. background
15. :
17. #eee;
18. position
19. :
20. relative
21. ;
22. }
23. .
24. center
25. {
26. background
27. :
28. blue
29. ;
30. position
31. :
32. absolute
33. ;
34. top
35. :
37. 50
38. %;
39. left
40. :
42. 50
43. %;
44. transform
45. :
46. translate
47. (-
48. 50
49. %,
51. –
52. 50
53. %);
54. }

（3）flex布局

1. .
2. container
3. {
4. width
5. :
7. 100
8. %;
9. height
10. :
12. 400px
13. ;
14. background
15. :
17. #eee;
18. display
19. :
20. flex
21. ;
22. justify
23. –
24. content
25. :
26. center
27. ;
28. align
29. –
30. items
31. :
32. center
33. ;
34. }
35. .
36. center
37. {
38. width
39. :
41. 100px
42. ;
43. height
44. :
46. 100px
47. ;
48. background
49. :
50. blue
51. ;
52. text
53. –
54. align
55. :
56. center
57. ;
58. }

• relative：相对于自己的定位；
• absolute：相对于最近一级定位元素的定位；
• fixed：相对于窗口的定位。

6. 写一个函数，1s之后依次输出1,2,3,4,5

直接使用了let和定时器。

1. for
2. (
3. let
4. i
5. =
7. 1
9. ;
10. i
11. <
13. 6
14. ;
15. i
16. ++){
17. setTimeout
18. (()
20. =>
22. {
23. conosle
24. .
25. log
26. (
27. i
28. )
30. },
32. 1000
33. )
34. }

7. 事件队列（宏任务、微任务）

参考：：这一次，彻底弄懂 JavaScript 执行机制

8. 如何每隔三个数加一个逗号，还要考虑小数点的情况

这道题就是大疆的笔试题，当时候笔试题也是瞎写的，后面也没仔细看，没想到又成了一道面试题。

1. function
2. transform
3. (
4. number
5. ){
7. var
8. num
9. =
10. number
11. .
12. toString
13. ()
16. var
17. numArr
18. =
19. num
20. .
21. split
22. (
23. '.'
24. )
26. var
28. [
29. num
30. ,
31. dotNum
32. ]
34. =
35. numArr
37. var
38. operateNum
39. =
40. num
41. .
42. split
43. (
44. ''
45. ).
46. reverse
47. ()
49. var
50. result
51. =
53. [],
54. len
55. =
56. operateNum
57. .
58. length
60. for
61. (
62. var
63. i
64. =
66. 0
67. ;
68. i
69. <
70. len
71. ;
72. i
73. ++){
74. result
75. .
76. push
77. (
78. operateNum
79. [
80. i
81. ])
83. if
84. (((
85. i
86. +
87. 1
88. )
90. %
92. 3
94. ===
96. 0
97. )
99. &&
101. (
102. i
103. !==
104. len
105. –
106. 1
107. )){
108. result
109. .
110. push
111. (
112. ','
113. )
115. }
117. }
119. if
120. (
121. dotNum
122. ){
123. result
124. .
125. reverse
126. ().
127. push
128. (
129. '.'
130. ，
132. …
133. dotNum
134. )
136. return
137. result
138. .
139. join
140. (
141. ''
142. )
144. }
145. else
146. {
148. return
149. result
150. .
151. reverse
152. ().
153. join
154. (
155. ''
156. )
158. }
159. }

9. webpack有配置过吗？原理知道吗

参考前面。

10. 父子组件如何通信，子组件怎么跟父组件通信？

父组件把state作为props传递给子组件进行通信。

父组件写好state和处理该state的函数，同时将函数名通过props属性值的形式传入子组件，子组件调用父组件的函数，同时引起state变化。

11. 简单说一下pwa

面试的这个部门就是做pwa的，所以说了下自己对pwa的理解。

三面

1. 手写indexOf

1. function
2. indexOf
3. (
4. str
5. ,
6. val
7. ){
9. var
10. strLen
11. =
12. str
13. .
14. length
15. ,
16. valLen
17. =
18. val
19. .
20. length
22. for
23. (
24. var
25. i
26. =
28. 0
29. ;
30. i
31. <
32. strLen
33. ;
34. i
35. ++){
37. var
38. matchLen
39. =
40. i
41. +
42. valLen
44. var
45. matchStr
46. =
47. str
48. .
49. slice
50. (
51. i
52. ,
53. matchLen
54. )
56. if
57. (
58. matchLen
59. >
60. strLen
61. ){
63. return
65. –
66. 1
68. }
70. if
71. (
72. matchStr
73. ===
74. val
75. ){
77. return
78. i
80. }
82. }
84. return
86. –
87. 1
88. }

2. 实现 JS 的继承

1. function
2. A
3. ()
5. {
7. this
8. .
9. name
10. =
12. 'a'
13. ;
15. }
16. A
17. .
18. prototype
19. .
20. getName
21. =
23. function
25. ()
27. {
29. return
31. this
32. .
33. name
34. ;
35. }
36. function
37. B
38. ()
40. {
41. }
42. // B 如何继承 A

参考： JS实现继承的几种方式

3. 从url输入到页面显示会有哪些步骤

（1）DNS服务器解析域名，找到对应服务器的IP地址;

（2）和服务器建立TCP三次握手连接；

（3）发送HTTP请求，服务器会根据HTTP请求到数据服务器取出相应的资源，并返回给浏览器；

（4）浏览器处理响应

• 加载：浏览器对一个html页面的加载顺序是从上而下的。

当加载到外部css文件、图片等资源，浏览器会再发起一次http请求，来获取外部资源。

当加载到js文件，html文档会挂起渲染（加载解析渲染同步）的线程，等待js文件加载、解析完毕才可以恢复html文档的渲染线程。

• 解析：解析DOM树和CSSDOM树。
• 渲染：构建渲染树，将DOM树进行可视化表示，将页面呈现给用户。

4. method有哪些方法，分别是什么意思？post和put的区别

post：上传资源

put：修改资源

5. https有几次握手

6. http2比http1好的地方

主要是考察http2的几个特性。

参考：HTTP协议知识点总结

7. 页面刷新不出来，是有哪些问题

可以从第三题的每个步骤进行分析，大概是：

• 域名不存在，或者ip地址错误
• 网络问题，不能建立正常的tcp连接
• 服务器找不到正确的资源

8. 上一次系统性的学习是什么时候，怎么学习的

学习react的时候，看文档、博客，照着网上写了点小项目。

9. 你觉得项目中最自豪的是什么

10. 上家公司有哪些不好的地方

网易

网易是在杭州网易大厦面的，一天面完三轮，然后录用排序，择优录取的吧。我投的是网易考拉，哭唧唧，后面被拒了之后还伤心的卸载了考拉。之后正式批投了杭研，过了笔试，要去武汉面，本来海康也是在武汉面的，考虑到还要住一晚上，有点怕怕，就没去了。

1.css3动画

2. flex布局

3. 实现call

1. Function
2. .
3. prototype
4. .
5. call2
6. =
8. function
10. (
11. context
12. )
14. {
16. var
17. context
18. =
20. Object
21. (
22. context
23. )
25. ||
26. window
27. context
28. .
29. fn
30. =
32. this
34. var
35. args
36. =
38. []
40. for
42. (
43. var
44. i
45. =
47. 1
48. ;
49. i
50. <
51. arguments
52. .
53. length
54. ;
55. i
56. ++)
58. {
59. args
60. .
61. push
62. (
63. 'arguments['
65. +
66. i
67. +
68. ']'
69. )
71. }
73. var
74. res
75. =
77. eval
78. (
79. 'con('
81. +
82. args
83. +
85. ')'
86. )
88. delete
89. context
90. .
91. fn
93. return
94. res
95. }

4. 图片懒加载src

5. Promise异步

6. 水平垂直居中

7. 数组有哪些方法，哪些会改变原数组

改变原数组的方法：pop、push、reverse、shift、sort、splice、unshift，以及两个ES6新增的方法copyWithin 和 fill；

不改变原数组（复制）：concat、join、slice、toString、toLocaleString、indexOf、lastIndexOf、未标准的toSource以及ES7新增的方法includes；

循环遍历：forEach、every、some、filter、map、reduce、reduceRight 以及ES6新增的方法entries、find、findIndex、keys、values。

8. 操作dom有哪些方法

创建：

1. createDocumentFragment
2. ()
4. //创建一个DOM片段<br>
5. createElement
6. ()
8. //创建一个具体的元素<br>
9. createTextNode
10. ()
12. //创建一个文本节点<br>

添加：appendChild()

移出：removeChild()

替换：replaceChild()

插入：insertBefore()

复制：cloneNode(true)

查找：

1. getElementsByTagName
2. ()
4. //通过标签名称<br>
5. getElementsByClassName
6. ()
8. //通过标签名称<br>
9. getElementsByName
10. ()
12. //通过元素的Name属性的值<br>
13. getElementById
14. ()
16. //通过元素Id，唯一性

9. 左边定宽右边自适应

（1）左盒子左浮动，右盒子width=100%

（2）左盒子左浮动，右盒子margin-left=左盒子宽度

（3）左盒子左浮动，右盒子右浮动，设置calc（100vw-盒子宽度）

（4）父容器设置display=flex，右盒子flex：1

10. 事件代理

利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行。打个比方：一个button对象，本来自己需要监控自身的点击事件，但是自己不来监控这个点击事件，让自己的父节点来监控自己的点击事件。

11. 后端了解么

直接说了不了解，笑哭。

二面

1. 节流和防抖，手写一下代码

（1）防抖：

定义： 合并事件且不会去触发事件，当一定时间内没有触发这个事件时，才真正去触发事件。

原理：对处理函数进行延时操作，若设定的延时到来之前，再次触发事件，则清除上一次的延时操作定时器，重新定时。

场景： keydown事件上验证用户名，输入法的联想。

实现：

1. function
2. debounce
3. (
4. fn
5. ,
6. delay
7. )
9. {
11. var
12. timer
14. return
16. function
18. ()
20. {
22. var
23. that
24. =
26. this
28. var
29. args
30. =
31. arguments
32. clearTimeout
33. (
34. timer
35. )
36. timer
37. =
38. setTimeout
39. (
40. function
42. ()
44. {
45. fn
46. .
47. apply
48. (
49. that
50. ,
51. args
52. )
54. },
55. delay
56. )
58. }
59. }

（2）节流：

定义： 持续触发事件时，合并一定时间内的事件，在间隔一定时间之后再真正触发事件。每间隔一段时间触发一次。

原理：对处理函数进行延时操作，若设定的延时到来之前，再次触发事件，则清除上一次的延时操作定时器，重新定时。

场景： resize改变布局时，onscroll滚动加载下面的图片时。

实现：

当触发事件的时候，我们取出当前的时间戳，然后减去之前的时间戳(最一开始值设为0)，如果大于设置的时间周期，就执行函数，然后更新时间戳为当前的时间戳，如果小于，就不执行。

缺陷：第一次事件会立即执行，停止触发后没办法再激活事件。

1. function
2. throttle
3. (
4. fn
5. ,
6. interval
7. )
9. {
11. var
12. previousTime
13. =
15. +
16. new
18. Date
19. ()
21. return
23. function
25. ()
27. {
29. var
30. that
31. =
33. this
35. var
36. args
37. =
38. arguments
40. var
41. now
42. =
44. +
45. new
47. Date
48. ()
50. if
52. (
53. now
54. –
55. previousTime
56. >=
57. interval
58. )
60. {
61. previousTime
62. =
63. now
64. fn
65. .
66. apply
67. (
68. that
69. ,
70. args
71. )
73. }
75. }
76. }

当触发事件的时候，我们设置一个定时器，再触发事件的时候，如果定时器存在，就不执行，直到定时器执行，然后执行函数，清空定时器，这样就可以设置下个定时器。

缺陷：第一次事件会在n秒后执行，停止触发后依然会再执行一次事件。

1. function
2. throttle
3. (
4. fn
5. ,
6. interval
7. )
9. {
11. var
12. timer
14. return
16. function
18. (){
20. var
21. that
22. =
24. this
26. var
27. args
28. =
29. arguments
31. if
32. (!
33. timer
34. ){
35. timer
36. =
37. setTimeout
38. (
39. function
41. ()
43. {
44. fn
45. .
46. apply
47. (
48. that
49. ,
50. args
51. )
52. timer
53. =
55. null
57. },
58. interval
59. )
61. }
63. }
64. }

鼠标移入能立刻执行，停止触发的时候还能再执行一次。

1. var
2. throttle
3. =
5. function
6. (
7. func
8. ,
9. delay
10. ){
12. var
13. timer
14. =
16. null
17. ;
19. var
20. startTime
21. =
23. Date
24. .
25. now
26. ();
28. return
30. function
31. (){
33. var
34. curTime
35. =
37. Date
38. .
39. now
40. ();
42. var
43. remaining
44. =
45. delay
46. -(
47. curTime
48. –
49. startTime
50. );
52. var
53. context
54. =
56. this
57. ;
59. var
60. args
61. =
62. arguments
63. ;
64. clearTimeout
65. (
66. timer
67. );
69. if
70. (
71. remaining
72. <=
73. 0
74. ){
75. func
76. .
77. apply
78. (
79. context
80. ,
81. args
82. );
83. startTime
84. =
86. Date
87. .
88. now
89. ();
91. }
92. else
93. {
94. timer
95. =
96. setTimeout
97. (
98. func
99. ,
100. remaining
101. );
103. }
105. }
106. }

2. 知道哪些性能优化

3. react为什么比其他要快，虚拟dom知道吗

4. 写过什么组件

5. 平时怎么学习的

6. node，webpack了解么

7. 模块化，commonjs,es6模块

8. redux怎么实现的

hr面

1. 项目上有哪些难点，项目中学到了什么
2. 不喜欢跟什么样的人共事
3. 平时怎么学习
4. 为什么来杭州
5. 职业发展

搜狗

搜狗是内推的，面试也很迷，第一面到第二面中间隔了二十几天，然后二面完了也毫无反馈。

一面

1. 说一下项目，整个网络过程，从前端到后台

2. Ajax 底层实现，readystate 有哪些

0-（未初始化）还没有调用send()方法

1-（载入）已调用send()方法，正在发送请求

2-（载入完成）send()方法执行完成，已经接收到全部响应内容

3-（交互）正在解析响应内容

4-（完成）响应内容解析完成，可以在客户端调用了

3. 状态码有哪些，100,307

4. OSI七层模型

5. TCP三次握手

6. SSL握手过程

7. jQuery 有哪些方法

8. display 有哪些属性，说一下flex的属性

9. Es6的async awiat ，generator

10. Map有哪些方法

Map的方法：set, get, has, delete, clear

遍历方法：

keys()：返回键名的遍历器。

values()：返回键值的遍历器。

entries()：返回所有成员的遍历器。

forEach()：遍历 Map 的所有成员。

参考： Set 和 Map 数据结构

11. 正则用过吗？exec, 匹配一个手机号

12. css3动画了解吗，怎么写一个loading动画

13. 怎么实现跨域,cors涉及哪些请求字段

14. 编程: 判断两个网络地址是否属于同一个子网掩码

用与运算符就可以了。当时是在牛客网的面试系统上写的，一直AC不出，也是很迷了额。

15. 怎么上传文件

二面

1. 怎么计算在一个页面上的停留时间

方案1：websocket，前端开个长连接，后台统计长连接时间。

方案2：ajax轮询，隔几秒发一个查询，后台记录第一与最后一个查询间隔时间。

方案3： 关闭窗口或者跳转的时候会触发window.onbeforeunload函数，可以在该函数中做处理（有兼容性问题）；统计完数据记录到本地cookies中，一段时间后统一发送。

2. 给你一亿个数，是连续的，怎么找出两个不存在的数

用bitmap就能搞定了，存在为1，不存在为0。

3. 一个搜索框的输入联想，会遇到什么问题？如果第一个请求延迟，第二个请求先到，请问怎么处理？

键盘输入太快，每次输入都去联想，需要多次发送请求，会导致用户体验太差，可以使用防抖优化。

在前端做判断，判断此时的值是否与返回的值相同，不同就丢弃，相同就显示在页面。

4. Http的缓存

5. 二维码怎么工作的，扫描pc端的二维码，怎么让pc端登录？

• pc端随机生成一个含有唯一uid的二维码，并与服务器建立一个长连接；
• 手机扫描二维码，解析出二维码中的uid，并把这个uid和手机端的用户密码进行绑定，上传给服务器；
• 服务器获得客户端信息之后，pc端的长连接轮询操作会获得该消息，显示该账号的信息；
• pc端会再开一个长连接与手机端保持通信，等待手机端确认登陆后，获得服务器授权的token，就可以在pc端登陆进行正常通信了。

6. Promise 做什么的，有哪几种状态

异步处理的，有三个状态：resolve，pending，reject。

7. 项目有哪些难点，怎么处理的

8. 遇到过哪些性能优化

电信IT研发中心

当时听说电信对学历要求很高，本科基本都是211起的，想着自己本科太渣，就直接放弃了网上的笔试。之后电信来了学校宣讲会，跟朋友吃完饭看到了，就去说凑凑热闹，刚好有笔试也就做了。做完之后笔试居然考了最高分，比第二名高出二十分，手动捂脸额。一面完分数也挺高的，有95分，运气爆棚。重点是今年电信开的薪资实在太高了，目前还在纠结选哪个。

1. Xhtml和html的区别

• XHTML 元素必须被正确地嵌套。
• XHTML 元素必须被关闭。
• 标签名必须用小写字母。
• XHTML 文档必须拥有根元素。

2. 遇到过哪些兼容性问题

3. 浏览器内核有哪些，移动端用的是哪个

• Trident内核：IE,MaxThon,TT,The Word,360,搜狗浏览器等。[又称为MSHTML]
• Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等；
• Presto内核：Opera7及以上。[Opera内核原为：Presto，现为：Blink]
• Webkit内核：Safari,Chrome等。[Chrome的:Blink(Webkit的分支)]

对于Android手机而言，使用率最高的就是Webkit内核。

4. 怎么实现标签页的通信

5. Cookie、session,localstorage，sessionstorage

6. React 和jquery 之间的区别，哪个好用

7. 怎么实现继承

8. Es6,es7有哪些特性

9. 怎么跨域

10. Commonjs用的js哪个特性?

因为js之前只能在浏览器运行，为了能让js能在服务器上运行，所以设计了commonjs规范，而且js之前没有模块化的概念。

11. 选择器优先级

12. 伪类知道吗，有哪些

13. 块级元素有哪些，怎么转成行内元素

14. 一个完整的http请求，页面渲染过程，js和css文件怎么渲染

二面

一面问的都很常规的，不知道为啥给了这么高的分。二面的时候三个面试官，总共就问了三个问题，然后就说面试结束了，不超过五分钟。

1. TCP怎么工作的

三次握手

2. OSI七层模型，路由器工作在哪一层？

网络层

3. 平时用什么语言，用过哪些框架

深信服

深信服给的薪资居然比电信还低，而且加班还严重，就直接拒了。

一面

1. 跨域，同源策略，webpack里面有个跨域的方式知道么

2. 怎么把es6转成es5，babel怎么工作的

• 解析：将代码字符串解析成抽象语法树
• 变换：对抽象语法树进行变换操作
• 再建：根据变换后的抽象语法树再生成代码字符串

3. 反向代理知道么，Nginx

4. 继承有哪些方式

5. 怎么实现一个sleep ，手写一个promise

6. 能写一个二叉树么，怎么去遍历

7. 深拷贝怎么写

（1）var new_arr = JSON.parse( JSON.stringify(arr) );

（2）for in 加递归

1. function
2. isObj
3. (
4. obj
5. )
7. {
8. //判断是否为对象或者函数，但不是null
10. return
12. (
13. typeof
14. obj
15. ===
17. 'object'
19. ||
21. typeof
22. obj
23. ===
25. 'function'
26. )
28. &&
29. obj
30. !==
32. null
33. }
34. function
35. deepCopy
36. (
37. obj
38. )
40. {
42. let
43. newObj
44. =
46. Array
47. .
48. isArray
49. (
50. obj
51. )
53. ?
55. []
57. :
59. {}
61. for
62. (
63. let
64. key
65. in
66. obj
67. )
69. {
70. newObj
71. [
72. key
73. ]
75. =
76. isObj
77. (
78. obj
79. [
80. key
81. ])
83. ?
84. deepCopy
85. (
86. obj
87. [
88. key
89. ])
91. :
92. obj
93. [
94. key
95. ]
97. }
99. return
100. newObj
101. }

（3）$.extend()

（4）函数库lodash，提供_.cloneDeep（）

8. 在公司除了完成上级交待的任务，还做了什么

9. 怎么实现垂直中间布局

10. Call和apply，哪个性能开销大

在思否上提问了，已有大神回答。

参考： call和apply的哪个性能更好

11. 正则写一个手机号，全局匹配是什么

12. 删除一个数组中的某个数

splice方法

13. 模块化介绍一下，什么是编译时优化

14. 有哪些网络安全名词，怎么防范

15. 平时怎么学习

二面

二面小哥哥问了几个问题之后，就一直跟我介绍深信服内部的一些管理、技术氛围、晋升机制什么的，全程都是笑脸额。

1. git push -u 是什么意思

绑定默认提交的远程版本库，加了参数-u后，以后即可直接用git push 代替git push origin master

2. git rebase解释下

有test和dev两个分支，分别有两个commit，此时执行下列命令：

1. git checkout test
2. git rebase dev

以dev为基准将test的提交进行回放，挨个的应用到dev上去，然后test的那些提交就会废弃。 等价于git merge dev。

git merge 和git rebase区别：

• merge不会修改提交历史，rebase会修改提交历史

。

• rebase只应用于本地没有提交的代码，如果应用到已经提交到远程的分支不要应用，不然会非常的麻烦，git merge 可以应用于远程分支。

3. linux命令，怎么打开一个文件

cat abc.txt

4. 你的上级给你review 代码时会提什么建议

5. 怎么看待加班和工作效率

6. get和post分别进行几次数据交互

get请求过程：（2次交互）

• 浏览器请求tcp连接（第一次握手）
• 服务器答应进行tcp连接（第二次握手）
• 浏览器确认，并发送get请求头和数据（第三次握手，这个报文比较小，所以http会在此时进行第一次数据发送）
• 服务器返回200 ok响应。

post请求过程：（3次交互）

• 浏览器请求tcp连接（第一次握手）
• 服务器答应进行tcp连接（第二次握手）
• 浏览器确认，并发送post请求头（第三次握手，这个报文比较小，所以http会在此时进行第一次数据发送）
• 服务器返回100 continue响应
• 浏览器开始发送数据
• 服务器返回200 ok响应

7. 怎么打断点，如何确定一个结果来自于哪个函数

ThoughtWorks

TW是内推的，做了内推作业后，就面了技术和文化面。技术面是在作业的基础上加两个功能，只写出来一个，后面一个没时间写了，然后就只讲了下思路。

文化面面了快一个小时，听说TW不加班，对女程序员还很友好，挺中意的公司，不过最后还是挂了额。

华为

华为的面试就不多说了，基本不问前端的，进去是随机分岗的。华为的面试阵仗是我见过的最大的，听说要招一万人，在万达那里面的，全是人啊，阔怕。现在正泡在offer池里，估计国庆后发正式offer吧。

二面碰到的是个女面试官，太恐怖了，一直在怼我，最怕碰到女面试官了，惨。

小米

小米是内推的，电话面了一面，国庆后要我去武汉现场面，那会学校刚好有事应该也不会去了。

1. redux主要做什么的，用过redux的一些中间件吗，简单说一下

2. react生命周期说一下，diff算法说一下

3. setstate时会合并修改，是在哪个函数里修改的？宏事件和微事件

setstate是异步更新的，通过一个队列机制实现state的更新，当执行setState时，会将需要更新的state合并后放入状态队列，而不会立即更新，队列可以高效的批量更新state。

4. let、const、var的区别；如果const定义的是个对象，能够修改对象的属性吗？

const实际上保证的并不是变量的值不得改动，而是变量指向的那个指针不得改动，可以给对象添加属性。如果真的想将对象冻结，应该使用Object.freeze方法。

5. Object.freeze和Object.seal的区别

Object.preventExtension：禁止对象添加新属性并保留已有属性;

Object.seal：在一个现有对象上调用 Object.preventExtensions(..) 并把所有现有属性标记为 configurable:false;

Object.freeze：在一个现有对象上调用 Object.seal(..) 并把所有“数据访问”属性标记为 writable:false。

6. 说一下防抖，应用场景是什么

7. 快速排序算法说下，基点怎么选？如果一个数组是已经排序好的怎么选基点？

• 数组元素随机，取固定基准；
• 数组元素已排序或逆序，取随机基准；
• 更好的方法：三数取中，选取数组开头，中间和结尾的元素，通过比较，选择中间的值作为快排的基准。

8. 算法的稳定性，冒泡、快排

9. lodash，underscore的库了解么？有哪些方法

10. 整个项目的架构，包括前端、后台、运营

11. sort的底层实现机制，看过源码么？

数组长度<=22时采用插入排序，大于22用快排。

12. 怎么调试bug？打过断点么？如果前端代码被压缩，如何去找到相应元素？

chromre控制台下，在 Scripts 面板下面有个 Pretty print 按钮(这种符号 {})，点击会将压缩 js 文件格式化缩进规整的文件，这时候在设定断点可读性就大大提高了。

写在最后

目前offer是：大疆和电信，前辈们如果有建议的话可以留下，感激不尽。

其他资料

这些都是我的学习笔记，也可以参考： END

作者：ddduanlian