面试问题归纳
阿里
- 对后端有了解吗?node 之类的、
- 我看你接触前端两年多,能告诉我你是怎么入行前端的吗?
- 过去学,html,css 有没有比较印象深刻的一些点啊?
- 有没有用 html 和 css 做出来什么作品啊?
- 移动端适配是响应式,还是通过其他方案?
- 能给我细讲一下 rem 和其他单位之间的区别吗?
- flex 布局和传统布局有什么区别?说了下双飞翼布局
- 双飞翼布局怎么保证三列的高度一致呢?
- 双飞翼布局具体怎么实现的?
- 假设用 flex 实现双飞翼布局,让三列等高?
- 说一下原型链吧(proto,prototype)?
- 知道拷贝对象吧,拷贝一个对象能做吗(浅拷贝,深拷贝)?
- 讲讲,怎么上手的 vue,以及为啥用 vue 而不用其他框架?
- 你对 vue 的源码了解吗,给我讲讲双向绑定原理怎么实现的,详细描述什么时候监听变化的,什么时候触发变化的?
- Vue 双向绑定?
- Vuex 整个触发过程(actions,state,view)?
- Vue 和 Vuex 有什么差别?
- 为什么你们的页面要用到 vue-router 呢?,如果没有 vue-router,你们还会做单页面应用吗? 说说性能优化?具体哪些优化的收益较大?
- 传输模型:浏览器输入 url 到整个页面显示出来经历的过程?能介绍多细就多细?
- 移动端 300 毫秒延迟,怎么解决的?
- 移动端点击穿透?
- 304 状态码是怎么样,怎么产生的?–》Etag 值怎么产生的?
- 异步的处理方式,都是怎么处理的?(Promise)–》ES7 中你知道用什么方法吗?(async 和 await)–》Generator 有了解吗?
- cookie 和 session 了解吗?
- 跨域怎么处理的呢?都知道什么方法?–> jsonp 和 CORS 那个更安全?
- 微信扫一扫二维码网页上登陆前后端过程?
- Vue 中 Compile 过程说一下?
- null 和 undefined 有什么区别?
- 你一般情况下怎么判断基本的数据类型?
- 怎么判断数组?
- 对数组的浅拷贝?—>深浅拷贝有什么区别?—>深拷贝一个数组怎么做呢
- 闭包你是怎么理解?—->项目中用过吗?
- 原型继承了解吗?我给你个场景,有一个 FUNA,FUNB,让 B 继承 A,用原型链怎么 B 继承 A 的属性?
- 不同选择器权重是怎么计算的?
- 前端性能优化?
- position 和 float 的区别?
- CORS 原理是什么?
- 跨域了解多少?
- 你对算法了解怎么样?常用的排序算法?—>快速排序的思路大概是什么样的?—>快速排序的时间复杂度
- 同一个对象节点上绑定多个事件,执行的顺序是怎样的?
- 你知道有没有什么事件不支持冒泡,捕获的?
- 事件模型您介绍下吗?
- 前端的设计模式你可以说下吗?
- 原型链和作用域链你的理解?
- JS 有没有了解过函数式编程?
- 你理解的前端专家需要掌握哪些东西?
- 前端架构你有了解吗?
- OSI 七层协议?
- http 和 https 有什么区别?
- https 使用上有什么注意点?
- https 和 http 性能有什么区别?
- 常见的排序方法,你都熟悉那些?
- 说下希尔排序的过程?
- 希尔排序的时间复杂度和空间复杂度多少?( 希尔排序的时间复杂度是:O(nlogn)~ O(n2),平均时间复杂度大致是 O(n√n))?
- 时间复杂度怎么推测的?
- 数据结构你对那些比较熟悉?
- 二叉树是什么啊?
- 平衡二叉树(AVL)有什么特点?
- 平衡二叉树(AVL)有什么好处?
- 平衡二叉树(AVL)和红黑树的区别?
- 平衡树的插入和删除的时间复杂度?
蚂蚁
h5 和 RN 的区别
- RN 具有更流畅的体验,更好的性能
- h5 内存释放不够明显,具有很多缓存,但是具有更灵活的布局
- RN 可以使用 Native 端的动画和 UI 组件
- 安装包 RN 比 h5 大很多
- 热更新能力 h5 也更容易,维护成本更低
RN 最关键的是有更好的交互体验,这点应该是所有老板甲方更注重的方面。 我觉得在原生 App 中内嵌部分经常更新的 h5 是完全没有问题的,可以快速的迭代,但是如果说整个应用都是基于 h5,使用 cordova 类似的工具来开发 app 的话我觉得还是比较不可取的。
略微说几个 h5 写 app 的弊端:
- ios 的左滑右滑
- 评论功能中页面上移,这在聊天界面的时候到还可以,但是新闻资讯评论的时候都是不会上移的
- 评论框被遮挡
- 各类原生功能开发麻烦
- 多个 tab 切换动画中中间的 tab 也会显示
RN 怎么链接原生库
Weex 和 RN 的选择
- 社区生态的差异
- bug 修复速度的差异
- Vue 和 React 的熟悉程度
移动端需要注意的点
- viewport
- canvas 根据 dpr 适配
- CSS 动画尽量使用 transform 和 opacity,不使用 position
- position:fixed 会在软键盘弹起的时候失效(IOS)
- audio 的 autoplay 在移动端失效,因为苹果和安卓都禁止了
- 浏览器后退不刷新可以监听 onpageshow
- 1px 问题,可以增加 after 或者 before 伪类,使用 scale 缩放等比例实现
- 滚动穿透,有弹出层出现时给 body 添加 fixed 属性并记录 scrollHeight,关闭弹层后去掉 fixed 会滚动到原先位置(无动画)。
- 图片模糊,可以使用 srcSet。
实现一个懒加载组件
第一种是懒加载 module:
获取load的函数,手动import后获取module.default或者module(依据是否为es-module),然后调用module.default的函数后设置state为resolved,保存加载后的module,更新视图。
在loading阶段渲染loading组件,如果获取加载组件失败则传值告诉loading组件并暴露retry方法来重新import懒加载组件。
第二种是懒加载元素:
懒加载元素都是一般都是基于滚动的,当滚动到视野内时开始渲染元素,而在视野外则不渲染。
其中的思路大概是:监听一个滚动容器,滚动的时候,判断懒加载元素是否在视野。
这里我觉得有必要做的性能优化有,首先是滚动事件的节流和防抖,其次是如果一个容器内有很多个懒加载元素,那么我们也不可能在同一个父容器中绑定多个事件,肯定是统一绑定一个事件,但是在初始化懒加载元素的时候会往需要监听的元素列表中push,然后触发滚动的时候在这个list中判断即可。
其中最重要的就是对元素节点是否在可视区的判断,这里判断的也就是元素的top+元素的高度是否在scrollHeight~scrollHeight+滚动容器高度之间,注意的是这里的滚动容器不一定是window。
已经渲染过的组件记得要unshift。
如果有一个新项目,怎么做架构设计
react 的性能优化
开发:
1. SCU,React.Memo,PureComponent
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. SplitChunksPlugin,Tree Shaking(由于使用的是create-react-app,默认都配好了,所以其中都细节没有很深入去了解)
4. Code Splitting,可以使用最新的react.lazy和react.Suspense或者loadable
5. babel打包编译到ES2015+和ES5两个版本,然后根据script的type为module和nomodule来加载相应的min.js
6. lazyLoad,placeholder(react-lazy-load, react-placeholder)
7. 不使用moment,改而使用date-fns或者dayjs。