phone screen：JS基本概念，const/var/let，闭包，什么是事件监听 etc
hr call：地里很多，比如let const var区别；stack和queue区别；作用域；apply；
主要考察JS的基本功, scope, hoisting, and closure
call是什么
什么是closure
一个html image怎么知道他load了还是没load
stack和queue的区别
var和let/const有什麽区别
how to simulate a stack data structure in js
dom是什么data structure 如果complete binary DOM tree depth是多少
什麼是event delegation
Array和Object的區別
foreach and map
Explain how this works in JavaScript
Explain how prototypal inheritance works
Why you might want to create static class members?
bq: 常规问题，介绍一下project, 你对front-end是什么感觉。HR比较在意有没有用过plain JS2.
- 30分钟的call
- 前二十分钟主要讲一讲之前的工作和项目经历， 因为太话痨被强行打断。
- 最后十分钟左右是JS相关的八股文， 如下：
- apply和call的区别
- 说说this是怎么回事
- var和const的区别
- 了解DOM吗， DOM在页面中是以什么数据结构储存的
- 解释事件委托
- 事件监听是怎么实现的
- 如何找到dom树中叶节点的深度
之前从没听过美国找工作还要考八股文的， 最后一题答得有点崩， 不知道Js里是不是有api可以直接找到叶节点的深度， 就随便说了用dfs记录层数，知道答案的朋友麻烦告诉我一下
js里可以call parent的，直接从leaf往parent找就可以了
differences between var, let, const
event delegation
this keyword
difference between queue and stack
how to simulate a stack in javascript
time complexity to traverse a balanced tree
call and apply
what is dom
bind
what are the advantages of using es6 maps over objects
【phone&vo面筋】
event emitter
AnimateRight
animationEl ，传入 (element, duration, distance)
给定一个element，需要手写animation让element在duration的时间里向右移动一定距离
这道题之前有看到过面经但是找不到答案，最后用requestAnimationFrame写的，
但面试官不是很满意，问了很多follow up question，比如为什么要写这种方式，还有哪种方式可以实现，它们之间的trade off是什么等等
roman to integer
Flatten Array
optimize a function
https://bigfrontend.dev/problem/implement-memoizeOne
https://bigfrontend.dev/problem/ ... emoization-function
to be or not to be
debounce
throttle
memorization
Observable
Render
hover
Decode
Two-way binding
curry (带placeholder的curry还是basic的？先问了basic， followup是placeholder)
DOMStore
Node in 2 dom tree
Invert a tree
serialize tree
Json -> DOM Tree 113. Virtual DOM I
Dom tree height
Level traverse
Chaining like JQuery
get DOM tags
Next right sibling
一 【hover】这里题目应该是：Given a large image and a small image how would you position the small image over the large image on hover. Also each of the images should go to different URLs.
相关题目和链接：
1. Given a picture, how would you hide/show a child picture on hovering on this parent?
https://www.glassdoor.com/Interv ... ent-QTN_1502329.htm
2. How would you ensure clicking on this picture would go to a specific link?
https://www.glassdoor.com/Interv ... ink-QTN_1502330.htm
3. How would you ensure the child is positioned in the top right of the parent picture?
https://www.glassdoor.com/Interv ... ure-QTN_1502331.htm
二 【Json -> DOM Tree】对应bfe题号是：113. Virtual DOM I
附上链接：https://bigfrontend.dev/problem/Virtual-DOM-I
补充内容 (2022-01-20 13:37 +8:00):
三【animation right】 bfe上没有对应
可以参考 紫野小小苏 的 animationEl ，传入 (element, duration, distance)
给定一个element，需要手写animation让element在duration的时间里向右移动一定距离
这道题之前有看到过面经但是找不到答案，最后用requestAnimationFrame写的，
但面试官不是很满意，问了很多follow up question，比如为什么要写这种方式，还有哪种方式可以实现，它们之间的trade off是什么等等
原帖链接： https://www.1point3acres.com/bbs/thread-805214-1-1.html
四 【render】
Given a string and a style array render HTML pretty much like a rich text editor.
For example: 'Hello, world', [[0, 2, 'i'], [4, 9, 'b'], [7, 10, 'u']] Output: <i>Hel</i>l<b>o, w<u>orl</u></b><u>d</u>
有的，网址是这个： https://bigfrontend.dev/problem/two-way-binding
render: Given a string and a style array render HTML pretty much like a rich text editor.
For example: 'Hello, world', [[0, 2, 'i'], [4, 9, 'b'], [7, 10, 'u']] Output: <i>Hel</i>l<b>o, w<u>orl</u></b><u>d</u>
dom api是用treeWalker吧
对的, 但我后来看bfe里的discussion有人用parentNode做也行得通
所有coding 题号
#BFE-125
#BFE-28
#BFE-17
BFE 19 对应cloned tree
#BFE-101
#BFE-161
GetTextBetweenNodes
店面1：memo + render 函数（render比较难，大概是给一个json结构让你还原出一个dom node ,bfe里的virtual dom
店面2：identical dom tree + excludes 都比较简单
一面白人大叔，45min，问了cloned binary tree/让文字在container里自动换行/js实现缓存功能 及各种follow up；最后5min反向BQ；前端不考leetcode
FE 18 improve a function,
16 Event emitter
screen: BFE 原题： Improve a Function 和 Find the node in identical A/B DOM tree
1. event emitter
2. clearAllTimeout
3. debounce
都是地里高频题，BFE上有题目和代码。因为都是楼主写熟的了题，follow up也打上了
【3rd round】vo
1. memorization
2. curry
中年白人男面试官，一边写码一边问一些很细的follow up
1. DOMStore： 主要注意new新的instance的时候会生成一个新的local store。
2. clearAllTimeout：主要注意implementation中会不会有memory leak。保存过的timer id要记得在function call完成之后删掉，在clearTimeout之后也要删掉。还有记得error handling。
onsite: coding round1:
第一题 DOM store(不能用symbol)
第二题 implement unit test:
it()
expect()
toBe()
it("should be an equal number", () => {
expect(1).toBe(1);
})
// logs: "success: should be an equal number "
// or "failure: should be an equal number" if expect(1).toBe(2)
coding round 2:
1. implement throttle 和bfe上的要求有出入
2. debounce
3. clearAllTimeout 要求o(1)
Phone：
1. Improve a function (followup: 时间复杂度)
2. AnimateRight (问了巨细的八股，包括setInterval和requestAnimationFrame区别等)
还问了style.left和transform:translate实现动画的区别；requestAni怎么手动设置频率；通过时间戳实现的话用requestAni在隐藏浏览器tab一段时间后回来会跳帧，怎么解决
VO：
1. Identical DOM (followup: 使用parentNode和不使用的时间复杂度)
2. Virtual DOM II (followup: Virtual DOM III)
Coding：第一题是一个encrypted message需要initial key才能decrypt，decrypted后会给下一个key来解密下一条message. 因为找不到原题，大概回忆了一下，只能动Decryption class其他不能动
const decryption = new Decryption(initialKey) function decryptAndGetNextKey(encrypted, key, callback) { let [nextKey, decryptedMessage] = blackBoxDecryptionFunction (encrypted, key) callback({ nextKey, message: decryptedMessage }) } decryption.decrypt(encrypted1, message => console.log(message)) decryption.decrypt(encrypted2, message => console.log(message))
是让你写
class Decryption {
}
第二题 implement classNames() BFE 125
两道题，都是bfe。
1. v dom I render，follow up是加上functional component
2. event emitter，问了一些call apply的区别，需要不需要传this，error handling怎么做之类的
2. System Design: Design a typehead， 经典题了
3. BFE 17 Dom store
使用js function 实现 animation(element, duration, distance)，在一段时间内让一个元素向右移动一定的距离。我一开始说用transition，他说不要用。那思路就是一秒60帧，然后每帧移动多少距离，每帧是多少毫秒，最后setInterval改element style的right属性
4. BQ基本就是聊聊之前做了啥还有一些很常见的BQ问题比如deadline啊同事关系一类的
system design主要考前端知识广度，UI, UX, API, Data structure, Data fetching, Performance, Layout, Monitoring, A11y, I18n, Build, Cross Platform, Rendering etc. 会追问其中某一个领域...
Autocomplete/Typeahead
News Feed
Live commenting
Poll widget
Image zoom
Dashboard with map
Carousel
Messenger
我准备onsite大部分时间是花在system design上面 我自己大概准备了10道system design，会把其中的核心功能写出来。。。有涉及到API，简单的就写个helper，复杂的就用mswjs，IDE我用codesandbox
请问system design应该怎么准备呀？
我本来是按照后端那种比较general的系统设计准备的，但实际上这次面试官主要问一些component props， debounce， cache， error handling，optimization这些前端工作中比较常见的问题
call是什么
什么是closure
一个html image怎么知道他load了还是没load
stack和queue的区别
var和let/const有什麽区别
how to simulate a stack data structure in js
dom是什么data structure 如果complete binary DOM tree depth是多少
什麼是event delegation
Array和Object的區別
foreach and map
Explain how this works in JavaScript
Explain how prototypal inheritance works
Why you might want to create static class members?
bq: 常规问题，介绍一下project, 你对front-end是什么感觉。HR比较在意有没有用过plain JS2.
网友评论