web前端面试总结

最近在找高级web前端开发的工作,面试了好几家公司。总结一下面试问题。

基础技术问题

  1.  React中定义组件的时候,在构造函数中,为什么需要使用super?

  2. JS中基本数据类型和对象类型,内存分配有什么不同?

  3. Redux的reducer为什么要返回一个新对象?它的对象比较过程,在哪里实现的?

  4. Angular1.x 它的指令是什么?实现一个指令有那几个工作?

  5. 讲一下事件循环的过程。

  6. XSS和CSRF攻击。

  7. 页面性能优化方面的经验。

  8. 浏览器输入url按下回车键,会发生什么?

  9. js作用域方面的知识点,能说多少说多少。

  10. React高阶组件的理解。

  11. React 16有什么新特性。fiber是什么?user state 怎么理解,作用是什么?解决了一个什么问题。

  12. React 的diff算法的过程是什么?

  11. Vue和React 组件间通信方式有哪些?

  12. React可以通过什么方式达到Vue的slot功能?

  13. Promise 是什么?它内部怎么实现的?

  14. JS箭头函数不能做什么?

  15.  如何做移动端适配? px2rem是怎么实现的?

  16. Vue的数组操作,是怎么实现双向数据绑定的?原理是什么?

  17. WebSocket遇到过什么坑?怎么解决?

      ---- 服务端无法监测出因为中间链路断开导致都连接断开,所以要采用ping pong机制来销毁无用连接。

      ---- Web端选择WebSocket连接时,为了时间负载均衡,在前端随机选择一个连接地址,每个websockets连接地址是随机的。因此ws协议要在服务端支持跨域。

  18. Webpack配置文件中的hash,chunkhash,contenthash 分别是什么

  19. 讲一下React组件的生命周期。

  20. 实现一个EventBus

  21. 实现一个左中右三栏的页面布局,左右宽度固定,中间宽度随浏览器变大而变大。

  22. 实现一个footer布局。如果content比较少,footer固定在页面底部。如果content高度比较大,footer位于content最下方,随页面而滚动。

  23. 会nodejs吗?在哪些场景下会用到?

  24. ES6相关知识知道哪些?Proxy知道吗?WeakMap跟Map有什么区别?什么时候可以用到WeakMap?

  25. DNS解析过程是怎么样的?

  26. WebSocket是什么?它跟HTTP有什么不一样?建立连接的过程是怎么样的?

  27. React作用对VDOM的diff 计算之后,是怎么渲染成真实DOM的?能不能减少DOM的重绘和重排

      --- vdom是一个缓冲区,会拦截掉一些不必要对dom操作。但是diff之后,patch到dom树上时,还是使用多次dom操作。

      --- vdom有两个作用,一个是dom到复用,避免dom的频繁生成和销毁。另一个是diff算法能够比较出最小的dom操作数量。

  28. 外联的js件和css文件对DOM渲染会造成什么影响。

  29. 什么是变量提升?什么是函数提升?

      --- 函数提升优先级高于变量提升。

      --- 函数提升,就是代码在编译解释但时候,会把函数定义提升到整个代码片段的最上方。

      --- 变量提升,只会提升声明,不会提升赋值操作。

  30. 你们服务端为什么不用nodejs?nodejs跟java有区别是什么?

      --- nodejs 单线程,非组赛异步IO。 java 多线程 组赛同步。

      --- nodejs 脚本语言,灵活,但不好维护。

  31. HTTP header中跟缓存相关的有哪些字段,作用是什么?

  32. java中常用的线程池有哪些?

  33. http2.0 的文件头有哪些字段?

  34. Angular1.x  Vue  React 有什么不同点?分别适用什么场景,如果做技术选型?

      ---  实现原理上各不相同。

      ---  组件化的支持程度上的差异。React 组件化支持程度更高。

      --- HTML模版和JSX的使用差异。

      --- 生态。ReactNative Weex

      --- 双向数据绑定和单向数据流,推崇的理念的差异。

      React 比较适合多人配合开发的大型项目。可维护性更高。组件化程度更高,对TypeScript支持也更好。

      

    

  35. webview中的页面如何复用组件?

      ---  使用next.js框架,天生就支持多页和服务端渲染,同时能够多页中复用React组件。

  36. 跨域通信的知识点有哪些?

      --- http response header 增加access control 字段

      --- iframe proxy 。postMessage机制,

      --- jsonp

   

      

  37. 讲一讲你github上的项目,都解决是什么问题?

  38. H5推广页面,遇到的坑?

      --- H5推广页面遭遇羊毛党薅羊毛的问题。采用网易滑动验证码。解决。

      --- 业务上,通过转账记录识别出羊毛党,禁止体现。

                  --- 倒计时问题,手机锁屏后setInterval停止。

   39. this指向什么?

var o = {
	a:function(){
		[1,2,3].forEach(()=>{
			console.log(this)
		});
	}
}

var o = {
	a:function(){
		[1,2,3].forEach(function(){
			console.log(this)
		});
	}
}

  40. 利用ES5做继承的时候,function A(){}   function B(){}    B.prototype=new A();  到底做了一件什么事?

    41. function foo(a,b){console.log(a,b)} ;  foo.bind({},1,2)(); 输出什么?bind函数的其他参数

  42. 箭头函数的理解。

  43. Promise对象的理解。 

      44.  Redux 三大原则。---  1. 单一数据源 2.状态是只读的  3. 状态修改由纯函数完成。

  45. Immutable.js  可以优化React的性能,它是优化在哪个阶段?

  46. for in 和for of的区别

  47. a = ['a', 'b', 'c']   b = ['e', 'f', 'g']  合并两个数组,不产生新数组。---- 利用push.apply实现

  48. number转成二进制。---- toString实现

  49. Promise.all 有一个错误时候,结果是什么? --- 马上报错。

  50. Function.prototype.foo = '111'; Object.prototype.foo = '222'; 这两个属性什么时候会生效。

  51. VDOM 怎么理解的?答案:1.多端渲染 2.便于维护

  52. React/vue 在渲染列表时,使用key有什么作用?

  53. 浏览器中js文件执行顺序。比如script标签等。

  54. 网易滑动验证码等原理是什么?

  55. ServiceWoker你用来做什么?它是怎么更新的。

             1. 做离线应用,断网的情况下,页面仍然能打开,可以继续浏览本地的聊天记录。

                 2. 它的更新主要是自动检测到文件变化,触发install事件。SkipWait

  56. Web前端安全性的知识点。 CSRF, XSS 等

  57. Immutable为什么能优化React性能?答案要点:对象子属性会被复用。

  58. webpack 使用过程中遇到的问题。

             1. webpack只能将所有代码从入口文件开始,打包成若干个文件,无法做到原目录输出。

  59. redux 怎么使用多个store。

      答:1. react16  之前不行,只能使用combineReducer   

      2. react16之后,可以使用React.createContext创建多个context,每个Provder中指定context和store,connect函数中也要指定context

编程题

    1. 实现一个轮播图(头条二面)

    2. 有序整数数组,找出两个和等于88的整数

     3. 对字符串数组进行分组。例如arr = ["abc",'bca','jksd','bhbj'] 。 思路就是计算hash值

     4. 有一个字符串 str = "2[a]3[b]" ,写一个函数,将其转换成aabbb, 其他用例:如:   2[3[a]4[b2[x]]]

业务理解问题

1.你们产品的Qps有多少,你们文件系统服务有多少G的数据。你们日活用户是多少,注册用户是多少。

2.工作中遇到的最大的挑战是什么?

3. leader的理解。

4. 前端跟服务端的侧重点是什么

5. 如何通过工程化 去规范开发 。

6. 未来前端发展趋势是怎么理解的?

7. WebIM登录过程是怎么样的,如何防止中间人攻击。

8. 淘宝网为什么打开这么快?它背后的技术有哪些有没有思考过?

9. 文件模块是怎么设计的?有没有参考业界主流的解决方案?为什么不参考?

10. 文件存储为什么使用MongoDB GridFS?而不是使用其他的分布式文件系统的方案?

11. 为什么前端框架变化这么快,有这么多框架和技术。然而服务端java却一直很稳,没有出现这么多框架呢

12. 推  拉  两种模式适用的场景, 如何理解的。

13. 移动端app如何保活?

14. 如果发现一个接口压力测试QPS上不去,但是服务器的CPU利用率却很低。你怎么排查这个问题?

     --- IO 的问题

15. 如果让你设计一套通信协议,你会考虑哪方面的问题?

     --- 性能,安全,可靠。

主动性相关的问题

  1. 在之前做过的项目中,有没有什么功能或改进点是由你提出来的?

    ----- 利用阿里云的函数计算功能作为国内获取服务器列表的 proxy

    ----- 利用阿里云oss存储静态文件。

  2. 当你觉得公司某个访问量比较少的网站,页面打不开了,你会怎么做?

  3. 有没有关注过前端现在刚出现的一些新技术,有什么看法。

  

  

管理方面的认知问题

  1. 如果团队成员目前的技术栈是React,有同事觉得vue比较好,想在项目中使用vue,你会怎么做?

  2. 新员工培养方面的经验,以及如何团队激励怎么做。

  3. 当你不认可老板的需求的时候,怎么办?

  4. 怎么理解Leader这个岗位?

      --- 项目管理。对产品能够有足够对认知,能够识别项目需求,以及能对产品作出未来规划。 除完成需求外能够识别出项目长远的技术规划。

      --- 进度管理。保障项目进度,合理安排员工工作,尽量避免加班,减少非必要加班。

      --- 工作分派。需求分解,难点识别。

      --- 建立代码规范和开发规范。通过技术手段和制度手段,建立开发规范和编码规范 , 不定时对员工代码进行review。

      --- 增强团队凝聚力。能够成为团队的主心骨。对不同部门的资源调度进行协调。

      --- 激励团队。能够最大化对发挥每个团队成员对主动性,进而提高团队工作激情和效率。

 

 

HR面问题

  1. 几家公司离职的原因是什么?

  2. 几家公司的薪资结构是怎么样的?期望薪资是多少?

  3. 对我们公司有什么看法。

  4. 对未来的发展规划是怎么样的?

  5. 更期望找一份什么样的工作?对于新工作更看重什么?

  6. 你有什么问题想问我的吗?

原文地址:https://www.cnblogs.com/lhp2012/p/11061253.html