前端面试题总结

乘著风
411 阅读8分钟

整理了一下之前参加的，阿里、腾讯、微软等大厂前端面试题和体验, 希望对打算换工作的同学有些帮助。

微软

online:电话面试

电话面试，需要在电脑旁，通过微软teams软件，并利用在线编辑软件在线答题

  1. React哪个阶段发请求
  2. DidMount异步请求未结束，组件被卸载了怎么办
  3. 如何实现一个可以停止的Promise
  4. 使用过underscore或者loadash吗
  5. 实现一个Filter函数，将多叉树结构中节点含有目标属性的节点及其父元素过滤出来，比如仅保留单数的树
  6. RN 拆包的性能提高数据？
  7. RN 做过的基础组件

onsite:现场面试

安排了5个人，面了4位，中午二面完事，有礼貌的女面试官还请吃微软食堂，食堂会议室环境都非常好。 前三面不懂前端，问的项目的设计模式，算法一道题，最后那位熟悉前端聊得还行，然后就没有然后了。

  • 部分有序数组，查找目标值的下标
  • 无序数组查找a[j]-a[i]最大差，并且要求j>i
  • React引入非React第三方插件
  • React生命周期
  • React16
  • 进程和线程的理解
  • url输入到显示的过程
  • 非React项目引入React， React项目引入JQuery如何配置

阿里

电话面试

  1. 怎样实现响应式
1. rem;
2. initial-scale;
  1. 如何解决1px问题？
小于按1px处理；
特殊的时候在UI走查需要修改，再利用media query处理
  1. 如何实现跨域
1. jsonp  不能post
2. iframe 可以post
3. cors 后端添加白名单
  1. cors 如何携带cookie?
网页端中，对于跨域的 XMLHttpRequest 请求，需要设置withCredentials 属性为 true。
  1. 怎样获取元素的样式
行内样式：document.getElementById('dom').style.fontSize;
实际样式：window.getComputedStyle(getElementById('dom')).fontSize;
  1. dom的0级事件，2级事件？
0级事件：onclick，多个0级事件会被覆盖；
2级事件：addEventListener，不会覆盖；
  1. js 捕获，冒泡，绑定事件第三个参数？
第三个参数useCapture，是否为捕获模型，默认值是fasle, 不使用捕获，而是冒泡。

如果是捕获的话，事件会从顶级响应，最后执行点击元素的回调。

阻止冒泡，父级，被点击的元素需要使用冒泡模型，并e.stopPropagation()

面试

  1. css盒模型
  2. border-box模型，border算在width里吗
  3. position
  4. 响应式方案
  5. viewport怎么理解的？
  6. viewport 的width=640会怎样？
  7. 让一个元素向右移动100px都有几种办法？
  8. transfrom都有哪些
  9. 动画过渡怎样设置
  10. 重绘，重排有什么区别？怎样在实际中运用的？
  11. 闭包的理解？有实际使用吗？
  12. 函数节流？手写
  13. 怎样控制this指向？bind,apply的区别？比如在React类中调用封装好的函数节流方法，如何保证this，如何判断当前函数this指向类而不是window.
  14. setTimeout返回值是什么？
  15. get, post的区别
  16. 如何控制浏览器缓存
  17. 什么情况会跨域，端口不同会吗？
  18. cors跨域与其他方式的区别
  19. jsonp跨域的原理？
  20. typeof 的返回值有哪些？
  21. 如何判断a是A类的实例？
  22. 如何判断一个数是NaN？
  23. 事件传递的两个阶段？先冒泡还是先捕获？
  24. 如何实现事件代理？手写，什么场景应用？
  25. node与amd模块化区别？
  26. webpack如何使用的？
  27. React 多入口配置如何使用webpack实现？
  28. vue如何实现双向数据绑定？

baidu

  1. BFC
  2. 垂直居中
  3. 浮动元素的display是什么
  4. 三栏布局
  5. 位移动画
  6. 两栏布局，左侧高度根据右侧高度一致，右侧自适应
  7. js文件加载顺序
所有 <script> 标签引进的 JavaScript 会按照他们引入的顺序依次被解析，在没有使用 defer 或者 async 的情况下，只有在解析完前面 <script> 元素中的代码之后，才会开始解析后面 <script> 元素中的代码。
由于浏览器会先解析完不使用 defer 属性的<script> 元素中的代码，然后再解析后面的内容，所以一般应该把<script> 元素放在页面最后，即主要内容后面， </body> 标签前面。
使用 defer 属性可以让脚本在文档完全呈现之后再执行,延迟脚本总是按照指定它们的顺序执行。
-使用 async 属性可以表示当前脚本不必等待其他脚本，也不必阻塞文档呈现。不能保证异步脚本按照它们在页面中出现的顺序执行。
  1. rem根节点如何计算
  2. 如何实现将下划线命名改成驼峰
  3. 实现webpack插件的思路
  4. Flux
  5. 纯函数，原生js哪些是纯函数
  6. 模块化区别

第二轮

  1. 跨域
1. iframe;
2. jsonp;
3. cors;
4. 服务端代理；
  1. React Native性能打点；
  2. RN 兼容性问题；
  3. RN 性能问题；
  4. RN 拆包的方案和收益；
  5. 实现requireJS
  6. 性能优化
1. 减少请求数
2. 减少请求体
3. 渲染优化
  1. 如何减少请求数，缓存
  2. 如何减少请求体，压缩静态文件
  3. 如何检查运行时间过长的函数
  4. 如何实现高保真，响应式
  5. Vue组件间通信方式
  6. Vue如何在全局增加一个方法；
  7. Vue如何控制组件样式不污染全局
  8. Vue第三方插件如何结合局部样式？
一个组件添加使用两个css标签，一个scope，一个不是，都加上同样的父容器选择器，来覆盖第三方组件样式
  1. 如何实现React 服务器渲染
  2. 如何实现数据持久化
  3. XSS攻击

腾讯

  1. “你简历的项目经验写的比较少，这是一份简单的面试题，先做一下”，
  3. setTimeout事件循环题
  4. new 运算符做了什么
  5. 闭包题
  6. 循环，作用域题
  7. cookie, sessionStorage, localStorage区别
  8. TCP，UDP区别
  9. 实现快排
  10. 后续也没有针对面试题问，提到算法在实际上不怎么用到，根据项目经验问的
  11. http,https区别
1、https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。

2、http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。

3、http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
  1. rem根节点的字体大小计算
  2. initial-scale响应式的缺陷
  3. 1像素问题
  4. RN响应式
  5. RN 路由表
  6. RN 缺点
  7. RN 调研
  8. RN 性能考核点
  9. web 性能考核点
  10. 服务器渲染中请求如何处理
  11. RN，web长列表的优化
  12. 网络请求数据过大如何优化
  13. 下拉刷新如何实现
  14. RN js, Native 通讯遇到的问题

爱奇艺

  1. setState触发render的时机
  2. 实现promise 特性链式，合并分叉
  3. TCP 三次握手
  4. 客户端Js Bridge
  5. http缓存
1. 强缓存(Expires/Cache-Control),不走网络
2. 协商缓存(Last-Modified  /  If-Modified-Since), 200/304
  1. vue react区别
相同：
1. 使用 Virtual DOM
2. 提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。

不同：
react 需要主动更新数据，更灵活，
vue 是被动的数据绑定
jsx,html模板
  1. css梯形
//结合border:
height: 0;
width: 100px;
border-top: 100px solid red;
border-right: 37px solid yellow;
border-left: 37px solid green;
  1. css浮动
  2. this存在几种指向
a.如果是一般函数,this指向全局对象window;

b.在严格模式下"use strict",为undefined.

c.对象的方法里调用,this指向调用该方法的对象.

d.构造函数里的this,指向创建出来的实例.
  1. vue双向绑定怎么实现
v-module双向绑定
v-bind/: 单向绑定

vue是通过Object.defineProperty()来实现数据劫持的。

Object.defineProperty是es5不能shim的，所以vue不支持IE8

Object.defineProperty是什么？


数据劫持+发布订阅
  1. react 优化
  2. 函数节流，高数防抖
  3. 垂直水平居中
  4. 你的工作环境(系统，编辑器)
  5. 遇到问题如何解决
  6. 获取知识来源，论坛

饿了么

  1. js变量类型
  2. es6新变量：Symbol
  3. 原型链
  4. jquery链式调用
  5. jquery元素缓存
  6. jQuery，React区别
  7. React HOC
  8. React 生命周期及作用
  9. React setState做了什么
  10. React 优化
  11. React 组件通信几种
  12. Redux 数据流转
  13. es6新特性及其应用
  14. 跨域方式
  15. 模块化介绍
  16. TypeScript 特性
  17. 事件循环, 结合题目
  18. webpack的应用
  19. http缓存

头条

  1. 如何实现锚点的平滑滚动？
1. setInterval逐渐移动scrollTop;
2. html, body{ scroll-behavior:smooth; }
3. transform:translateY滚动页面
  1. 多列元素，平均分配，宽高相等，整体垂直居中的综合css题
主要考核结合flex, css2等经验；具体答案略；
  1. node环境中，如何判断3个npm镜像哪个快？
Promise.race();
  1. 如何实现Promise.race?或如何判断三个异步请求先结束
略
  1. 如何实现“千位分割”，比如203030,返回203,030;
1. 正则；
2. 遍历；
  1. 你们项目有前端性能监控吗？
前端性能统计的数据大致有以下几个：

白屏时间：从打开网站到有内容渲染出来的时间节点；
首屏时间：首屏内容渲染完毕的时间节点；
用户可操作时间节点：domready触发节点；
总下载时间：window.onload的触发节点。

可以使用Navigation.timing 统计到的时间数据来计算一些页面性能指标，比如DNS查询耗时、白屏时间、domready等等。如下：

DNS查询耗时 = domainLookupEnd - domainLookupStart
TCP链接耗时 = connectEnd - connectStart
request请求耗时 = responseEnd - responseStart
解析dom树耗时 = domComplete - domInteractive
白屏时间 = domloadng - fetchStart
domready时间 = domContentLoadedEventEnd - fetchStart
onload时间 = loadEventEnd - fetchStart
avatar
文章
阅读
粉丝