2019 上半年前端实习面经
August 09, 2019
前言
坐标杭州,我在上半年陆续找过一些前端实习,记录面经于此,供大家分享,现正在准备秋招。
涂鸦智能
电话面试
Promise 如何实现链式调用
- Promise.then
实现 Promise2 在 Promise1 之后调用
- async await
- Promise.all
for...in 和 for...of 的区别
- for...in 遍历键名(Key)并转化为字符串,for...of 遍历键值(Value)
- for...in 语句以任意顺序遍历一个对象自有的、继承的、可枚举的、非 Symbol 的属性
- for...in 更适合遍历对象,for...of 更适合遍历数组。
js
for (let i in [1, 2, 3]) {console.log(typeof i); // stringconsole.log(i); // '1', '2', '3'}var triangle = { a: 1, b: 2, c: 3 };function ColoredTriangle() {this.color = "red";}ColoredTriangle.prototype = triangle;var obj = new ColoredTriangle();for (var prop in obj) {if (obj.hasOwnProperty(prop)) {// 如果去了 hasOwnProperty() 这个约束条件会怎么样?console.log(`obj.${prop} = ${obj[prop]}`); // obj.color = red}}
js
for (let i in [1, 2, 3]) {console.log(typeof i); // stringconsole.log(i); // '1', '2', '3'}var triangle = { a: 1, b: 2, c: 3 };function ColoredTriangle() {this.color = "red";}ColoredTriangle.prototype = triangle;var obj = new ColoredTriangle();for (var prop in obj) {if (obj.hasOwnProperty(prop)) {// 如果去了 hasOwnProperty() 这个约束条件会怎么样?console.log(`obj.${prop} = ${obj[prop]}`); // obj.color = red}}
简述 Set 和 Map
- Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。
- Set 对象允许你存储任何类型的唯一值
Set 有哪些遍历方法
js
et.prototype.values()Set.prototype.keys() // 等于 Set.prototype.values()Set.prototype.entries() // [value, value]数组Set.prototype.[Symbol.iterator]()// 以上全部返回一个新的迭代器对象Set.prototype.forEach()for ... of
js
et.prototype.values()Set.prototype.keys() // 等于 Set.prototype.values()Set.prototype.entries() // [value, value]数组Set.prototype.[Symbol.iterator]()// 以上全部返回一个新的迭代器对象Set.prototype.forEach()for ... of
解构赋值失效的情况
js
let [x = 1] = [undefined];x; // 1let [x = 1] = [null];x; // null
js
let [x = 1] = [undefined];x; // 1let [x = 1] = [null];x; // null
一面
请分别用 CSS、JS、React 实现动画:方块从屏幕左下角运动到右上角
- CSS:translate + animation
- JS:requestAnimationFrame / setTimeout
- React:需要获取 Ref
这里涉及到性能优化层面,首先我需要知道 CSS 的最终表现分为以下四步:
- Recalculate Style
- Layout
- Paint Setup and Paint
- Composite Layers
由于 transform 是位于 Composite Layers 层,而 width、left、margin 等则是位于 Layout 层,在 Layout 层发生的改变必定导致 Paint Setup and Paint & Composite Layers,所以相对而言使用 transform 实现的动画效果肯定比 position 这些更加流畅。
浏览器也会针对 transform 等开启 GPU 加速。
无限滚动列表的性能优化
- 设置一个可视区域,超过可视区域,直接删除 DOM
Typescript
- interface(接口)和 type(类型别名)的区别
- 都可以互相继承(&,extnds)
- interface 能够声明合并
- type 可以声明基本类型别名,联合类型,元组等类型
- type DiffName = string
- type Pet = Dog | Cat
- TS class 相对于 ES6 class 的拓展
- readOnly 只读属性
- abstract 抽象类包含抽象方法,必须在子类中实现,且子类使用 extends
- private、protected
闭包
- 基本定义和应用
- 闭包是指有权访问另一个函数作用域中的变量的函数
- 能够保证一些变量不被回收,持续引用
- 私有化变量,方法封装
- 模拟块级作用域
简述防抖和节流,应用场景
说一下 Node 常用的模块
- path、fs、stream、http、util
实现 EventEmitter
,以及应用场景
- NodeJS 是基于异步事件驱动的架构,需要一个事件调度中心
- stream、fs、net、http 都继承于 EventEmitter
发布-订阅模式和观察者模式的区别
- 发布-订阅模式,发布者和订阅者不需要彼此了解,有消息队列的存在
- 观察者模式主要以同步方式实现,发布-订阅 模式主要以异步方式实现
- Subject 还保留了 Observers 的记录
如何实现脚手架
- 思路:通过 process.argv 获取参数,下载 Github 对应的模板,修改模板内容
- 发布:
npm login
npm publish
介绍 Redux 的原理和流程
介绍 Mobx 的原理,如何实现数据的监听
- proxy
Redux 中为什么要直接替换数据源,而不是修改
- redux 通过比较对象的引用来判断是否同一个对象,如果是,则继续使用旧的 state,所以不会有任何的变化
了解过 immutable.js 吗
Antd 按需加载的原理
js
import { Button } from 'antd';ReactDOM.render(<Button>xxxx</Button>);↓ ↓ ↓ ↓ ↓ ↓var _button = require('antd/lib/button');require('antd/lib/button/style');ReactDOM.render(<_button>xxxx</_button>);
js
import { Button } from 'antd';ReactDOM.render(<Button>xxxx</Button>);↓ ↓ ↓ ↓ ↓ ↓var _button = require('antd/lib/button');require('antd/lib/button/style');ReactDOM.render(<_button>xxxx</_button>);
二面
平常学习前端的途径
- 书籍(JS 高程,你不知道的 JS 系列、深入浅出 NodeJS…)、Medium、大牛博客、掘金
为什么从事前端
在项目中,如何解决 Bug
谈谈 HTTP
- OSI 七层
- 三次握手和四次挥手
- HTTP 和 HTTPS
- HTTP2
- websocket
- 报文
- 起始行,首部,实体
- 缓存
- 请求方法
- GET、POST、DELETE、PUT、OPTIONS、HEAD、CONNECT、TRACE、PATCH
- 状态码
- 跨域
- 简单请求和复杂请求
- HTTP 是无状态:HTTP 协议是无状态协议。无状态是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息,则它必须重传,这样可能导致每次连接传送的数据量增大。另一方面,在服务器不需要先前信息时它的应答就较快。
- HTTP 是媒体独立的:这意味着,只要客户端和服务器知道如何处理的数据内容,任何类型的数据都可以通过 HTTP 发送。客户端以及服务器指定使用适合的 MIME-type 内容类型。
- HTTP 是无连接:无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求,并收到客户的应答后,即断开连接。采用这种方式可以节省传输时间。
51 信用卡
电话面试 + 一面
webapck
- 写过 loader 和 plugin 吗?
- tree shaking
- splitChunks
React 的按需加载如何实现
- 通过 webpack 的动态导入 (dynamic imports)
- React.Suspense
React 的 HOC
- 属性代理
- 渲染劫持
tsx
const HOC = WrappedComponent =>class extends WrappedComponent {render() {if (this.props.isRender) {return super.render();} else {return null;}}};
tsx
const HOC = WrappedComponent =>class extends WrappedComponent {render() {if (this.props.isRender) {return super.render();} else {return null;}}};
React 怎么和 Redux 结合
- 通过 react-redux 的 connect 高阶函数
Redux 的 stroe 存储在 React 何处
- Context
首屏加载时间怎么看
- DomContentedLoaded
- DomContentedLoaded 是否和 Raect 生命周期里的 render 同步
路由鉴权
- 开两个 Tab 页,其中一个 Tab 页更改了权限,怎么保持另一个 Tab 页权限同步
缓存机制
- 强缓存
Expires
表示一个绝对时间,允许客户端在这个时间之前不去检查(发请求)Cache-Control
public
客户端和CDN
代理服务器都可以缓存private
客户端可以缓存max-age=60
缓存内容将在 60 秒后失效no-cache
每次请求都需要经过服务端的协商缓存no-store
禁用缓存 - 返回值200(from disk/memory cache)
- 特征
- 不会发送 HTTP 请求
- 协商缓存
If-Modified-Since/Last-modified
资源的最后修改时间- 粒度是秒级,如果在毫秒内更改内容,则无法生效
If-None-Match/Etag
根据实体内容生成的一段 hash 字符串- 返回值
304 Not Modified
- 特征
- 会访问服务器
协商缓存是由服务端决定吗
- 是
协商缓存是由服务端返回资源吗
- 不是,从客户端缓存中读取
如何使 304 中携带 response
- 放置于 response headers
SPA 应用打包出来的 index.html 是否存在缓存
CDN
- 什么是 CDN
- CDN 主要部署什么资源
- CDN 如何更新资源
移动端机型适配
- JS + REM
- VW + VH
如何判断 DRP
- 浏览器:
window.devicePixelRatio
- CSS:
@media -webkit-min-device-pixel-ratio
百应科技
电话面试
React 的生命周期
- v16.3 之前
- v16.3 之后,引入 Fiber 架构
简述 Redux 的工作流程
Redux 如何实现异步操作
- Redux-thunk 是一个允许你编写返回一个函数而不是一个 action 的 actions creators 的中间件。如果满足某个条件,thunk 则可以用来延迟 action 的派发(dispatch),这可以处理异步 action 的派发(dispatch)。
Mobx 如何转化可观察对象为原生数组
- slice()
一面
说说你对 Koa 洋葱模型的理解
如何加快 webpack 的构建速度
- DllPlugin、HappyPack
什么是类型声明文件(.d.ts)
你在 TS 中用到哪些语法
- 装饰器 Decorators
- 作用于类,指向类的构造函数
- 作用于方法,参数为实例对象,方法名,属性描述符
- 泛型
- 类型约束(type)
- 类型断言 (as)
- keyof typeof 操作符
- 接口
- 枚举
- 映射类型(ReadOnly,Partial)
- 索引签名
- 类及其继承
二面
你的个人优势是什么
输入一个 URL 发生了什么
了解过动态规划吗
说说时间复杂度和空间复杂度 什么是 IPv4 和 IPv6 ,世界上一共有多少个 IP 地址
简述 OSI 七层模型
简述 HTTPS,什么是对称加密,非对称加密
亲宝宝
笔试
先做了一套笔试题,限时半个小时,比较简单,主要考察基础,还记得的题目有
列出 CSS 选择器的优先级
- !important > id > 类、伪类、属性 > 元素、伪元素
- 行内样式 > 内联样式 > 外联样式
介绍 position 的各个属性
- 不要忘了 static、sticky
display: none
和 visibility: hidden
的区别
new Boolean(false) && true
返回什么,并解释
手写代码,找出一个字符串中出现次数最多的那个字符
以下代码段会出现什么内容?
html
<script>alert(typeof a);</script><script>function a() {a = 3;}</script>
html
<script>alert(typeof a);</script><script>function a() {a = 3;}</script>
一面
简述 React Hooks
什么是 Virtual DOM
- React 在 16.8 版本为我们正式带来了 Hooks API。什么是 Hooks?简而言之,就是对 函数式组件 的一些辅助,让我们不必写 class 形式的组件也能使用 state 和其他一些 React 特性。
简述 Diff 算法的实现过程
ES6 class 的 static 属性在构造函数的原型上吗
- 不是,在构造函数本身上
三次握手,四次挥手
ACK
:确认序号有效SYN
:发起一个新连接FIN
:释放一个连接- 三次握手,最主要目的是保证连接是双工的,可靠更多的是通过重传机制来保证的
- 四次挥手,当 Client 发送 FIN,仅表示 Client 不再发送数据,Server 可能还要发送数据,所以必须把 ACK 和 FIN 分开发送
判断一个对象是否是数组如何判断一个数组
instanceOf
Array.isArray()
Object.prototype.toString.call()
二面
谈谈你对 PV / UV 的理解,该如何去实现
- PV (page view),即页面浏览量,一个访问者在 24 小时内到底看了你网站几个页面,不重复计算
- UV (unique visitor),即唯一访问者,指你的网站 24 小时内有多少不同 IP 地址的访问
如何判断页面来源
- 通过请求头中的 referrer 字段
简述 JWT
- Header
js
{"alg": "HS256","typ": "JWT"}
js
{"alg": "HS256","typ": "JWT"}
- Payload
js
{"sub": "1234567890","name": "John Doe","admin": true}
js
{"sub": "1234567890","name": "John Doe","admin": true}
- Signature
js
HMACSHA256(base64UrlEncode(header) + "." + base64UrlEncode(payload), secret);
js
HMACSHA256(base64UrlEncode(header) + "." + base64UrlEncode(payload), secret);
- Header 和 Payload 串型化的算法是 Base64URL。
JWT 作为一个令牌(token),有些场合可能会放到 URL(比如 api.example.com/?token=xxx)。Base64 有三个字符+、/和=,在 URL 里面有特殊含义,所以要被替换掉:=被省略、+替换成-,/替换成_ 。这就是 Base64URL 算法。
图片懒加载的实现手段
如何保证懒加载的图片会占据原有空间,不会引起页面重排
未来前端的职业规划