面试问题归纳

阿里

  1. 对后端有了解吗?node 之类的、
  2. 我看你接触前端两年多,能告诉我你是怎么入行前端的吗?
  3. 过去学,html,css 有没有比较印象深刻的一些点啊?
  4. 有没有用 html 和 css 做出来什么作品啊?
  5. 移动端适配是响应式,还是通过其他方案?
  6. 能给我细讲一下 rem 和其他单位之间的区别吗?
  7. flex 布局和传统布局有什么区别?说了下双飞翼布局
  8. 双飞翼布局怎么保证三列的高度一致呢?
  9. 双飞翼布局具体怎么实现的?
  10. 假设用 flex 实现双飞翼布局,让三列等高?
  11. 说一下原型链吧(proto,prototype)?
  12. 知道拷贝对象吧,拷贝一个对象能做吗(浅拷贝,深拷贝)?
  13. 讲讲,怎么上手的 vue,以及为啥用 vue 而不用其他框架?
  14. 你对 vue 的源码了解吗,给我讲讲双向绑定原理怎么实现的,详细描述什么时候监听变化的,什么时候触发变化的?
  15. Vue 双向绑定?
  16. Vuex 整个触发过程(actions,state,view)?
  17. Vue 和 Vuex 有什么差别?
  18. 为什么你们的页面要用到 vue-router 呢?,如果没有 vue-router,你们还会做单页面应用吗? 说说性能优化?具体哪些优化的收益较大?
  19. 传输模型:浏览器输入 url 到整个页面显示出来经历的过程?能介绍多细就多细?
  20. 移动端 300 毫秒延迟,怎么解决的?
  21. 移动端点击穿透?
  22. 304 状态码是怎么样,怎么产生的?–》Etag 值怎么产生的?
  23. 异步的处理方式,都是怎么处理的?(Promise)–》ES7 中你知道用什么方法吗?(async 和 await)–》Generator 有了解吗?
  24. cookie 和 session 了解吗?
  25. 跨域怎么处理的呢?都知道什么方法?–> jsonp 和 CORS 那个更安全?
  26. 微信扫一扫二维码网页上登陆前后端过程?
  27. Vue 中 Compile 过程说一下?
  28. null 和 undefined 有什么区别?
  29. 你一般情况下怎么判断基本的数据类型?
  30. 怎么判断数组?
  31. 对数组的浅拷贝?—>深浅拷贝有什么区别?—>深拷贝一个数组怎么做呢
  32. 闭包你是怎么理解?—->项目中用过吗?
  33. 原型继承了解吗?我给你个场景,有一个 FUNA,FUNB,让 B 继承 A,用原型链怎么 B 继承 A 的属性?
  34. 不同选择器权重是怎么计算的?
  35. 前端性能优化?
  36. position 和 float 的区别?
  37. CORS 原理是什么?
  38. 跨域了解多少?
  39. 你对算法了解怎么样?常用的排序算法?—>快速排序的思路大概是什么样的?—>快速排序的时间复杂度
  40. 同一个对象节点上绑定多个事件,执行的顺序是怎样的?
  41. 你知道有没有什么事件不支持冒泡,捕获的?
  42. 事件模型您介绍下吗?
  43. 前端的设计模式你可以说下吗?
  44. 原型链和作用域链你的理解?
  45. JS 有没有了解过函数式编程?
  46. 你理解的前端专家需要掌握哪些东西?
  47. 前端架构你有了解吗?
  48. OSI 七层协议?
  49. http 和 https 有什么区别?
  50. https 使用上有什么注意点?
  51. https 和 http 性能有什么区别?
  52. 常见的排序方法,你都熟悉那些?
  53. 说下希尔排序的过程?
  54. 希尔排序的时间复杂度和空间复杂度多少?( 希尔排序的时间复杂度是:O(nlogn)~ O(n2),平均时间复杂度大致是 O(n√n))?
  55. 时间复杂度怎么推测的?
  56. 数据结构你对那些比较熟悉?
  57. 二叉树是什么啊?
  58. 平衡二叉树(AVL)有什么特点?
  59. 平衡二叉树(AVL)有什么好处?
  60. 平衡二叉树(AVL)和红黑树的区别?
  61. 平衡树的插入和删除的时间复杂度?

蚂蚁

h5 和 RN 的区别

  1. RN 具有更流畅的体验,更好的性能
  2. h5 内存释放不够明显,具有很多缓存,但是具有更灵活的布局
  3. RN 可以使用 Native 端的动画和 UI 组件
  4. 安装包 RN 比 h5 大很多
  5. 热更新能力 h5 也更容易,维护成本更低

RN 最关键的是有更好的交互体验,这点应该是所有老板甲方更注重的方面。 我觉得在原生 App 中内嵌部分经常更新的 h5 是完全没有问题的,可以快速的迭代,但是如果说整个应用都是基于 h5,使用 cordova 类似的工具来开发 app 的话我觉得还是比较不可取的。

略微说几个 h5 写 app 的弊端:

  1. ios 的左滑右滑
  2. 评论功能中页面上移,这在聊天界面的时候到还可以,但是新闻资讯评论的时候都是不会上移的
  3. 评论框被遮挡
  4. 各类原生功能开发麻烦
  5. 多个 tab 切换动画中中间的 tab 也会显示

RN 怎么链接原生库

Weex 和 RN 的选择

  1. 社区生态的差异
  2. bug 修复速度的差异
  3. Vue 和 React 的熟悉程度

移动端需要注意的点

  1. viewport
  2. canvas 根据 dpr 适配
  3. CSS 动画尽量使用 transform 和 opacity,不使用 position
  4. position:fixed 会在软键盘弹起的时候失效(IOS)
  5. audio 的 autoplay 在移动端失效,因为苹果和安卓都禁止了
  6. 浏览器后退不刷新可以监听 onpageshow
  7. 1px 问题,可以增加 after 或者 before 伪类,使用 scale 缩放等比例实现
  8. 滚动穿透,有弹出层出现时给 body 添加 fixed 属性并记录 scrollHeight,关闭弹层后去掉 fixed 会滚动到原先位置(无动画)。
  9. 图片模糊,可以使用 srcSet。

实现一个懒加载组件

第一种是懒加载 module:

获取load的函数手动import后获取module.default或者module依据是否为es-module),然后调用module.default的函数后设置state为resolved保存加载后的module更新视图

在loading阶段渲染loading组件如果获取加载组件失败则传值告诉loading组件并暴露retry方法来重新import懒加载组件

第二种是懒加载元素:

懒加载元素都是一般都是基于滚动的当滚动到视野内时开始渲染元素而在视野外则不渲染

其中的思路大概是监听一个滚动容器滚动的时候判断懒加载元素是否在视野
这里我觉得有必要做的性能优化有首先是滚动事件的节流和防抖其次是如果一个容器内有很多个懒加载元素那么我们也不可能在同一个父容器中绑定多个事件肯定是统一绑定一个事件但是在初始化懒加载元素的时候会往需要监听的元素列表中push然后触发滚动的时候在这个list中判断即可
其中最重要的就是对元素节点是否在可视区的判断这里判断的也就是元素的top+元素的高度是否在scrollHeightscrollHeight+滚动容器高度之间注意的是这里的滚动容器不一定是window
已经渲染过的组件记得要unshift

如果有一个新项目,怎么做架构设计

react 的性能优化

开发
1. SCUReact.MemoPureComponent
2. {...this.props}不要滥用会加重SCU的负担
3. 列表中的key不要为index
4. 拆分组件高可复用低耦合度
5. bind函数优化4种bind方式比较(class field比较好)
6. OffscreenCanvas使用web worker来执行canvas动画
7. css3动画来代替js动画
8. ReactDOM.unstable_batchedUpdate来合并hooks中在React自定义事件之外执行的函数中的setState


加载
1. 首屏优化避免白屏可以适当加个svg动画如果loading也是个组件可以使用prerender-spa-plugin
2. 动态polyfill从来加载最小体积的polyfill动态polyfill的原理是根据浏览器的UA头来返回合适的polyfill
3. SplitChunksPluginTree Shaking由于使用的是create-react-app默认都配好了所以其中都细节没有很深入去了解
4. Code Splitting可以使用最新的react.lazy和react.Suspense或者loadable
5. babel打包编译到ES2015+和ES5两个版本然后根据script的type为module和nomodule来加载相应的min.js
6. lazyLoadplaceholderreact-lazy-load react-placeholder
7. 不使用moment改而使用date-fns或者dayjs
blog comments powered by Disqus
目 录