前端面试问题

考验你的前端开发知识体系以及常见的行为面试题。

1. 常用排序算法的时间空间复杂度是怎么样的 Algorithm
2. 请解释原型机成（Prototypal Inheritance）?JavaScript
3. 请说明JavaScript中的`this` JavaScript
4. Closure 是什么？JavaScript
5.`var` vs `let` vs `const`JavaScript
6. 向5岁小孩解释Promise JavaScript
7. Map vs Object vs Set vs Array JavaScript
8. `==` 和 `===`的区别是什么？JavaScript
9. 请解释不同的 CSS `position` property 的原理 CSS
10. `block` 和 `inline`的区别是什么?CSS
11. HTTP 是如何工作的 ? 什么是 HTTP/2?Network
12. HTTPS 的工作原理?Network
13.Event Delegation是什么？DOM
14. 请说明AMD，CommonJS 和 ES modules之间的区别。JavaScript
15. `Array.prototype.forEach()` vs `Array.prototype.map()`JavaScript
16. `instanceOf` 是如何工作的? 和`typeOf`的区别是？JavaScript
17. JavaScript的 `new` 到底做了些什么？JavaScript
18. 请解释 `macrotask` 和 `microtask`JavaScript
19. `Connection:Keep-Alive`做了些什么？Network
21. 浏览器的地址栏中输入地址过后都发生了什么？Browser
21. DNS是什么? Network
22. 什么是 HTTP Cache? 其如何工作?Network
23. Webview 和 Native Client如何通信交互?Webview
24. 请解释TCP的 3-Way Handshake Network
25. 3:15的时候时针和分针的夹角是多少度？Fun
26. 什么是CDN? 其有何好处?Network
27. 请说明Box Model CSS
28. 如何检测页面的崩溃？Browser
29. Express 和Koa有何区别？JavaScript Library
30. 请说明Vue instance的生命周期 Vue
31. Node.js有什么优缺点？Node.js
32. 请说明`async` 和 `await`JavaScript
33. Cookie vs localStorage vs sessionStorage Browser
34. 什么是CSRF? 如何防止?Security
35. 请解释常见的HTTP response status code Network
36. 什么是XSS?如何避免?Security
37. 你送出去的或者收到的礼物中最好的是？行为
38. React应用的性能如何改善？React
39. Pseudo Class 和 Pseudo Element是什么?CSS
39. 能否解释React Fiber 是什么?React
41. Vue.js中的`keep-alive` 有什么用？Vue.js
42. Repaint 和 Reflow有什么区别?Browser
43. Web Workers 和 Service Workers 是什么? WebAPI
44. Javascript的Garbage collection是如何工作的？JavaScript
45. memory leak是什么？如何避免？JavaScript
46. 请分别说明在Browser和Node.js中的Event Loop JavaScript
47. 什么是Virtual DOM? 其工作原理是什么?JavaScript
48. 什么是HOC(Higher Order Component)?JavaScript React
49. Redux的好处和坏处是什么？Redux
50. 什么是React Hooks? 有何优劣?React
51. SSR是什么?有什么优劣？JavaScript
52. webpack的 loader和plugin分别是什么？Webpack
53. WeakSet 和 WeakMap是什么？JavaScript
54. 什么是微前端（Micro Frontends）? 其要解决什么问题？架构
55. 请说明一些性能指标(performance metrics)Performance
56. 如何搜集你的web app上发生的Error？架构
57. 请说明常用的HTTP request method Network
58. HTTP请求是什么样的？Network
59. 什么是 Array-Like Objects?JavaScript
60. 我们什么时候需要non-strict mode?JavaScript
61. NPM package如何打包发布？JavaScript
62. Promise是什么? 如何让多个Promise按顺序resolve？JavaScript
63. 什么是Factory Pattern?JavaScript
64. ES6 Class 和 ES5实现的区别是什么?JavaScript
65. 什么是Decorator Pattern？JavaScript
66. 如何找出web app的性能瓶颈？Performance
67. setTimeout 和 setInterval的区别是？JavaScript
68. 请说明web中经常使用的图片格式的区别。General
69. 什么Proxy Pattern?JavaScript
70. 什么是Observer Pattern?JavaScript
71. 图像的懒加载如何实现？架构
72. 如何在你的项目中进行unit test 和 e2e test?架构
73. 如何在你的项目中做SEO?General
74. CSS中的@import 是如何工作的？CSS
75. 什么是Process？什么是Thread General
76. for...in 和 Object.keys的区别是?JavaScript
77. `for ... of` 和 `forEach`的区别是什么？JavaScript
78. 你是否有过离开你的舒适区？行为
79. Webpack的HMR(Hot Module Replacement)是如何工作了？Webpack
80. Long Polling vs Sever-Sent Event vs WebSocket Network
81. 前端路由(client-side routing)的实现原理是?WebAPI
82. reset.css 和 Normalize.css的区别是？CSS
83. 如何用CSS实现固定比率的元素？CSS
84. 如何CSS实现三角形？CSS
85. 你创作的最好的事物是什么？行为
86. 你最骄傲的事情是？行为
87. 有没有经历过失败。行为
88. 有没有和其他成员通力合作并取得很好成果的经历？行为
89. 是否处理过冲突？行为
90. 你如何提供反馈和接受反馈？行为
91. 你曾经得到的最好的建议是什么？行为
93. 为什么选择我们公司？行为
93. 为什么选择了前端开发？行为
94. 能否回顾一下现在的项目。行为
95. 是否有处理过很大压力的时候。行为
96. 有没有设定目标并且最终达成的经历？行为
97. 是否有设定目标但未达成的经验。行为
98. 你是否有完成过超出你职责范围的工作？行为
99. 你如何迎接挑战？行为
100. 是否有激励自己以及组员的经历。行为
101. 你的team现在最烦恼的事情是什么？行为
102. 当你作出的决定是错误的时候，你如何接受评价？行为
103. 如果你的进度被其他组的成员拖累了怎么办？行为
104. 你想要去什么team？行为
105. 有没有过不同意上司意见的时候？行为
106. 请描述下你当前的工作职责。行为
107. 你尝试过的最大挑战是？行为
108. 最适合你的工作环境是怎样的？行为
109. 请告诉我你做过的最重要的决定。行为
110. 请说说你的强项和短处。行为
111. 你最近感兴趣的最新web技术是什么？行为
112. 如何让你的web app适应不同的屏幕尺寸？架构
113. 如何实现retina hairline(0.5px line in CSS)?CSS
114. 什么是CSS pixel 和 device pixel?CSS
115. 什么是单点登录Single Sign-On? 如何实现?架构
116. 什么是Singleton Pattern?JavaScript
117. 什么是JWT(JSON Web Token)?JavaScript
118. 什么是Skeleton Screen? 如何实现?架构
119. script标签的属性`async` 和 `defer`的区别是什么？浏览器
120. 你从之前等工作经历中学到了什么？行为
121. 如何实现垂直居中？CSS Amazon
122. 请说明常用的CSS相对长度单位 CSS
123. Open Redirect 问题是什么？如何避免？Security
124. 前端的分页如何实现？Architecture
125. 请说明EventTarget.addEventListener() 的第三个参数 WebAPI
126. 平时是如何debug的？General Amazon
127. 请简要说明以下CSS keywords: initial/inherit/unset/revert CSS
129. 请说明position:sticky CSS
129. 如何在CSS中实现正方形？CSS
130. modules 和普通script的区别是？JavaScript
131. cache-control:no-cache 和 cache-control:no-store的区别是什么?HTTP
132. 对称加密(Symmetric Encryption)和非对称加密(Asymmetric Encryption)的区别是什么?Security
133. MVC、MVVM和Flux的区别是什么？Architecture
134. Array.prototype.sort()是否是stable的？JavaScript
135. Cookie有哪些属性?HTTP
136. 网页应用如何自适应？CSS
137. `flex:1` 代表什么意思?CSS
138. 能否说明下Block Formatting Context ?CSS
139. 如果你来带领一个大型项目时，你会设定哪些原则？General
140. 请说明CSS中的`clear`。CSS
141. Object.freeze() 是做什么用的？JavaScript
142. 熟悉webpack吗? 它是如何工作的？DevTool
143. 自适应的原理是什么？CSS
144. Vue和React的区别是什么？你的话如何选择 Framework
145. 如何实现login(用户验证)?Auth
146. 'use strict' 是做什么用的 JavaScript
148. 什么是Same-Origin policy？如何分享Cross-Origin资源？HTTP
148. base64 是什么？network
149. 请讲讲 Unicode 和 UTF-8 General
150. 请说明HTTP message的结构 HTTP
151. touch设备的tap有300ms延迟是怎么回事？如何解决 Mobile
152. Generator是什么？适合用在哪些时候？JavaScript
153. 为什么0.1 + 0.2 !== 0.3 ? 如何处理浮点数精度问题？JavaScript
154. 如何在你的网页应用中添加离线支持？JavaScript
155. 请问如何提升显示多个图片的网页的性能 performance
156. `transform:translateZ(0)`有什么用?CSS
157. 羊会被吃掉吗？Fun
158. 目前正在学习什么技术？以后的学习计划是什么？Behavior
159. `git merge` 和 `git rebase`的区别是什么？General
160. 如何将HTML页面转换为图片？General
161. 请解释iterator以及 generator JavaScript
162. function declaration和 function expression的区别是什么？JavaScript
163. How do you troubleshoot when user reports a blank screen on you web page?General
164. `null` 与 `undefined` 的区别是什么？如何区分使用？JavaScript
165. What is the different between '^1.2.3' and '~1.2.3' in package.json NPM
166. Tell us the differences about <b> <strong> <i> <em>HTML
167. please briefly introduce yourself General
168. What is the difference between `display:none` and `visibility:hidden`CSS
169. What is the response body of HTTP status code 304?Network
170. Do you have any questions to ask about our company, team or anything?Behavioral
171. Tell us your approach if you're asked to build a Design System for your team and company? SystemDesign
172. What is the difference between TCP and UDP?Network
173. Explain the cookie attribute: "SameSite".Network