ByteDance frontend engineer interviews emphasise JavaScript, DOM manipulation, CSS, accessibility, browser APIs, and UI component architecture.
All Roles
Software Engineer
Backend Engineer
Frontend Engineer
Full Stack Engineer
Mobile Engineer
Data Engineer
Data Scientist
ML Engineer
DevOps Engineer
DevOps Engineer
Product Manager
SRE
Security Engineer
Engineering Manager
Data Analyst
UX/UI Designer
QA Engineer
No verified questions yet for ByteDance.
coding
Hard
caching
#1
1. [OA] Debounce Function — Implement ByteDance's Input Handling
For seamless user interaction, ByteDance applications require a debounced input handler to manage user typing events efficiently. Your task is to create a debounced function that limits the rate at which a handler can fire.
Example 1:
Input:
Output:
Explanation: Ensures that the log function is triggered only when the user stops typing for 200ms.Constraints:
-
- Function can be called multiple times rapidly.
javascript
function debounce(func: Function, wait: number): Function;
Example 1:
Input:
debounce(console.log, 200); // Call it with 'test'
debouncedFunc('test'); Output:
Log occurs after 200ms after typing stopsExplanation: Ensures that the log function is triggered only when the user stops typing for 200ms.Constraints:
-
1 <= wait <= 1000 - Function can be called multiple times rapidly.
coding
Hard
stack queue
#2
2. [OA] Event Loop — Simulate ByteDance's Event Processing Queue
ByteDance often manages complex UI interactions that require event processing. This simulation will help understand how events are queued and processed reliably under high load.
Given a list of events, your task is to implement a function that simulates the processing of these events in the order they are queued while managing concurrent events.
Input: `[
Given a list of events, your task is to implement a function that simulates the processing of these events in the order they are queued while managing concurrent events.
javascript
function processEvents(events: string[]): void;
Input: `[
system design
Senior
api design
#3
3. [System Design] Client-side Router — Design an Efficient Client-side Routing System for ByteDance
As ByteDance seeks to improve user experience in its single-page applications (SPAs), it requires a client-side router that efficiently handles navigation and resolves dynamic paths. Your task is to design a lightweight routing system capable of lazy loading components.
Example 1:
Input:
Output: Navigates to home and renders
- The
- Components can be asynchronously loaded.
javascript
class ClientRouter {
addRoute(path: string, component: Function): void;
navigate(path: string): void;
getCurrentRoute(): string;
}
Example 1:
Input:
router.addRoute('/home', HomeComponent); router.navigate('/home');Output: Navigates to home and renders
HomeComponent.Constraints:- The
path should be unique for every route.- Components can be asynchronously loaded.
system design
Senior
api design
#4
4. [System Design] Virtual DOM — Design a Lightweight Virtual DOM for ByteDance
With ByteDance's applications needing lightweight component re-renders, you are tasked to design a lightweight Virtual DOM to optimize UI updates in high-frequency rendering scenarios.
Example 1:
Input:
Output: Updates the DOM to show 'Hello' inside a div with an id 'container'.Constraints:
- The
-
javascript
class VirtualDOM {
createElement(type: string, props: object, ...children: any[]): VNode;
render(vnode: VNode, container: DOMNode): void;
update(oldVNode: VNode, newVNode: VNode): void;
}
Example 1:
Input:
const vnode = virtualDOM.createElement('div', {id: 'container'}, 'Hello');
virtualDOM.render(vnode, document.getElementById('app'));Output: Updates the DOM to show 'Hello' inside a div with an id 'container'.Constraints:
- The
props object can contain various properties, including event listeners.-
children can be a mix of strings and VNode objects.Related ByteDance Frontend Engineer interview prep
Start practicing ByteDance questions
Sign up for free to access walkthroughs, AI-generated questions, and more.
Get Started Free