前端面试问题

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

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