- CSS 居中完全指南
- 数组扁平化
- 优雅处理前端异常
- 前端跨域
- 前端缓存
- web 安全之 XSS
- web 安全之 CSRF
- CommonJS 与 ESM
- Virtual Dom && Diff原理，极简版
- 如何合理地设计State
- 深入 JS 系列
- 前端综合考察清单
// 评测题目: 无
Array.prototype.func1 = () => console.log(1)
Array.func2 = () => console.log(2)
const a = new Array();
a.func1(); // 1
a.func2(); // undefined
const b = new Array();
this.ref = a
this.ref = b
class Array {
constructor() {
this.func1 = this.func1.bind(this);
this.func4 = this.func1.bind(this);
// this.func1 === this.func4
}
func1() {
// this1 === a // true
}
static func2() {
// this2 === a // false // this2 = Array
}
func3 = () => {
// this3 === a //
}
func5() {
// this5
}
render() {
return <div onClick={this.func5} />
}
}
all([promise1, promise2, ... ]).then((res) => { const [res1, res2] = res; }).catch(e => { ... })
function all(promises) {
return new Promise((resolve, reject) => {
const res = [];
promises.forEach(promise => {
// res.push(promise.then(resolve => resolve()))
promise.then(data => {
res.push(data)
if (res.length === promises.length) {
resolve(res);
}
}).catch(reject);
})
})
}
- 给你两个有序整数数组 nums1 和 nums2，请你合并num1和nums2，返回一个有序数组。
说明：初始化 nums1 和 nums2 的元素数量分别为 m 和 n 。不能使用sort
var nums1 = [1,2,3,7], m = 3;
var nums2 = [2,5,6], n = 3;
输出: [1,2,2,3,5,6]
/**
* @param {number[]} nums1
* @param {number} m
* @param {number[]} nums2
* @param {number} n
* @return {void} Do not return anything, modify nums1 in-place instead.
*/
var merge = function(nums1, m, nums2, n) {
};
- 使用闭包实现一个counter函数，全局下每次调用返回值 +1
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3
const counter = (() => {
let a = 0
return () => ++a
})()
- 冒泡排序、二分查找
- 实现Promise.all
快手工程效能部
一面：
-
聊项目，聊如何技术选型，如何架构
-
react 纯函数组件和 class 组件什么区别，组内如何制定使用哪种方式开发
期间提到了 react hooks -
react hooks 利弊、原理
-
使用 react hooks 多 state 如何处理？处理方案：拆分有关联的 state 到自定义 hooks 中
-
虚拟 dom 树原理
-
react 的负作用，讲一下什么情况下使用 setState 这一套 react 的流程会有负作用，如何解决。
一开始我反复问负作用啥意思，没太理解他的问题，后来我回答的主要是动画相关的，很多动画需要使用requestAnimation 直接操作 dom，如果使用 state 渲染，性能反而更低，因为会触发子组件重新渲染。而且经过虚拟 dom 再渲染动画会卡顿。 -
看到简历说近期主要工作是性能优化，说一下前端性能优化的点
-
如何统计前端性能，都有哪些时间点可以统计
白屏时间、用户可以操作的时间、资源加载完的时间、TCP 时间、请求时间等等 -
EventLoop 的各种题（10道左右）、宏任务、微任务
各种 setTimeout、while、Promise 判断输出时间啥的
其中一道题：什么时间输出 end（答案是不会输出，都被 while 阻塞了）
setTimeout(function(){
t = false;
}, 1000);
while(t){ }
console.log('end')
- script 标签相关问题
被我反问了，我说你是要问 defer async 啥的么，我就开始巴拉巴拉说了一下，他说这题太简单了换一个。 - 如果页面中有一个 script 脚本阻塞住了，会影响渲染么
我一开始说如果是放在 body 标签最下面就不会
面试官给了个例子， 下面 abc 是否会渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>abc</div>
<script>
while(true){}
</script>
</body>
</html>
无法渲染，被阻塞了，引申问了问啥会阻塞。
- 接着上面的问题 onLoad 与 domContentLoaded 区别，domContentLoaded在 react 中和 componentdidmount 谁先执行
- 装饰器、HOC 原理、实际应用
写一个保存页面滚动条位置的 HOC，要求再回到这个页面的时候可以回到滚动位置 - web 中软键盘的兼容性问题
二面：
- 简单聊了一下项目，redux、ssr
- ssr 中初始化数据是怎样的流程
- redux 保存的数据用户刷新就消失了，怎么处理，比如用户登录信息存在哪里
- 用户登录如何做鉴权、cookie/session/token
- virtual dom 原理，如何渲染到页面的
- virtual dom 真的比直接操作 dom 快么？为什么？什么情况下virtual dom不如直接操作 dom
- 既然 virtual dom 渲染不都是更好的方案，首屏是否会因此变慢？如何优化？
- diff 算法了解多少，如何做对比如何做节点替换
- Node 堆、栈、v8、libuv
- js 解释器、编译器
- Node 流如何处理
- CommonJs 和 ES6 Module 什么区别，如何编译运行的
- CommonJs 中两个文件都引用同一个文件，这个文件会执行两次么，为什么。
- 红黑树了解么
- websocket封装成promise调用
ws.send({id:xx, value:xx})
ws.on(‘message’, (response) => {
console.log(response.id, response.value)
})
封装一个MyWs类，使其能够这样使用：
let myWs = new MyWs(ws)
myWs.send(data).then((response) => {
console.log(response.id, response.value)
})
myWs.send({'phone': 111 }).then((response) => {
console.log('手机号为111的姓名是', reponse.name)
})
myWs.send({'phone': 222}).then((response) => {
console.log('手机号为222的姓名是', reponse.name)
})
- 手写二叉树、二叉树广度优先遍历
- 二叉树一开始写成链表了，就着链表问了点问题
- 原型链
prototype和__proto__什么区别
三面：
-
自我介绍
-
知识广度：问了 node；linux；shell 脚本；nginx；java；redis mongodb 等等问的都比较浅
-
世面上有很多组件库，为什么很多团队还要自己开发组件库
-
自己开发组件库如何维护，这个问的比较多，组件库实现细节，维护细节，如果后续没有精力维护了该怎么办。
-
问了三道算法题，都比较简单
- 第一题。实现一个
fn(intArr) => outArr
const intArr = [{ id: 'A', name: 'a1'}, {id: ''B', name: 'b1'}, {id:'A', name: 'a2'}] const outArr = [{ id: 'A', name: ['a1', 'a2']}, {id: ''B', name: 'b1'}]- 第二题。假设小王持有股票数组
const arr = [135,43,1,24,5, ..., 777]
规定现在必须卖一次再买一次，而且卖必须在买前面操作，求最大收益的买卖下脚标
- 第一题。实现一个
-
设计实现一个 markdown 编辑器，给你几分钟时间整理，说出详细步骤和注意点
主要围绕如何实时同步 view 来问的。
后续扩展问题 如何实现这样一个编辑即预览的markdown 编辑器 https://typora.io/img/beta.mp4
问了很多细节，如何分词、如何同步、怎么做草稿之类的 -
开始聊团队管理问题，太多了具体记不太清了，举几个例子
- 团队怎么和 pm 、后端撕逼（人家问的比较斯文）
- 给团队中两个人分配任务，第一周检查进度说都 ok，第二周两个人说 bug 比较多不能按时提测，如何解决这种问题。
- 接着上面的问题，如果其中一个人说自己的 bug 都清了，剩下的都是另一个人的 bug 跟他没关系，这种情况怎么做。
- 如何分配实习生资源
网友评论