Skip to the essay
ShemolByteDance Frontend Engineering Camp Coding Test
笔试 / 实习找工 / 字节

ByteDance Frontend Engineering Camp Coding Test

Multiple-choice plus coding problems. Just jotting down the main topics.

Multiple choice

Mostly data structures and algorithms, computer networks, and html/css/js basics.

Data structures and algorithms

Flashback to the DSA exam in freshman or sophomore year…

Sorting questions: bubble sort, quicksort, and so on. Two or three of them, I think.

One very easy question on algorithm complexity.

Binary-tree traversal also felt like two or three questions.

And one about stacks.

Computer networks

What's the unreliable transport-layer protocol?

UDP.

There was also a DNS-message question

I only remember option A: QR=0 means query, QR=1 means response.

html,css,js

How do you unify margin and padding across browsers?

CSS Reset

css
* {
  margin: 0;
  padding: 0;
}

There's also Normalize.css, I think — need to study that later.

There was also a CSS float question: which usage is wrong

The options had

A. float:

B. float: none

C. float: left

D. float: right

Anyway picking A is correct

How do you clear a parent element's height collapse

I forgot what the options were. I haven't really looked this up yet.

  1. Clear with an ::after pseudo-element.
  2. Modern approach: display: flow-root.
  3. Trigger a BFC: the overflow property. Downside: overflow: hidden's actual job is "hide overflowing content". If you have dropdowns, shadows, tooltips, etc. that need to "overflow" the parent, they get clipped.
Which of the following is an application of BFC:

BFC (Block Formatting Context).

BFC uses:

  1. Clear inner floats (the most common one): the parent has floated children (float: left/right) and collapses in height. Set the parent to overflow: hidden; or display: flow-root;.
  2. Stop vertical margin collapse: in normal flow, the vertical margins (margin-top and margin-bottom) of two adjacent sibling block elements "collapse" into the larger of the two. Wrap one of them (or each of them) in a new parent and trigger a BFC on that parent (e.g. overflow: hidden;).
  3. Adaptive two-column / three-column layout: one side fixed width, the other filling the rest? (e.g. left menu float: left, right main content fills remaining width). Left element float: left; (fixed width). Right main content triggers a BFC (e.g. overflow: hidden; or display: flow-root;).

Another interview phrasing might be: "which of the following properties can trigger a BFC?"

Common triggers:

  • overflow: hidden; / auto; / scroll; (the classic hack)
  • display: flow-root; (the most modern, semantically correct "BFC trigger")
  • float: left; / right; (a floated element creates a BFC itself)
  • position: absolute; / fixed; (absolutely positioned elements create a BFC)
  • display: inline-block;
  • display: table-cell;
  • Flex/Grid children (flex item / grid item)

Next time you see overflow: hidden; or display: flow-root; in an interview question, if they're there to fix height collapse, margin collapse, or a two-column layout — that's a BFC application.

requestAnimationFrame in js

I looked at the JS Red Book and didn't really get it. Later.

Output order of setTimeout and Promise.then() in js

When js runs, it splits work into three kinds:

  • Sync tasks (Synchronous Code): code that runs immediately on the call stack
  • Microtasks: run right after the current sync work finishes. Callbacks in Promise.then() and .catch() are the most common microtasks.
  • Macrotasks: only after sync work and all microtasks are done do we pull one from the queue. Callbacks in setTimeout() and setInterval() are macrotasks.
css
console.log('1. 同步代码:开始');

// 安排一个宏任务
setTimeout(() => {
  console.log('2. 宏任务:setTimeout 1');
}, 0);

// new Promise 的执行器是同步的
new Promise((resolve, reject) => {
  console.log('3. 同步代码:Promise Executor');
  
  // 在 Promise 内部安排一个宏任务
  setTimeout(() => {
    console.log('4. 宏任务:setTimeout 2 (在Promise内部)');
    resolve(); // 在这个宏任务中,Promise 状态变为 fulfilled
  }, 0);

}).then(() => {
  // 当 promise被 resolve() 时,这个 .then() 才会被放入微任务队列
  console.log('5. 微任务:Promise.then 1');
});

// 安排一个立即 resolve 的 Promise
Promise.resolve().then(() => {
  console.log('6. 微任务:Promise.then 2');
});

console.log('7. 同步代码:结束');
  1. Run console.log('1. 同步代码:开始')
  2. Hit setTimeout 1, put its callback on the macrotask queue
  3. Hit new Promise, immediately run its executor synchronously. Run console.log('3. 同步代码:Promise Executor').
  4. Hit setTimeout 2, put its callback on the macrotask queue.
  5. Hit Promise.resolve().then(), this Promise is resolved immediately, put its .then callback on the microtask queue.
  6. Run console.log('7. 同步代码:结束').
  7. Drain the microtask queue.
  8. Take the first macrotask and run it.
  9. Check the microtask queue again.
  10. Run the next macrotask. In that same task, resolve() is called. resolve() fires the associated .then, putting that callback on the microtask queue.
  11. Drain the microtask queue.

Coding problems

Still not that used to ACM mode. Need to grind more on Nowcoder later.

Given a set of equations and values of A, B, C, how many real solutions does the system have
Form:
X² + A²Y² + C = 0
Y² + Z² + B = 0
Z² + A = 0

Felt like a math problem… just compute them and then casework.

Among k-digit integers, how many have digits summing to m.
E.g. k=2, m=3, the three numbers 12, 21, 30 each have digits summing to 3
python
import functools

def solve_digit_sum(k:int,m:int)->int:
	@functools.lru_cache(None)
	def count_sequences(digits:int,target_sum:int)->int:
		if target_sum < 0:
			return 0
			
		if target_sum > 9*digits:
			return 0
			
		if digits == 0:
			return 1 if target_sum==0 else 0
			
		total_ways = 0
		for d in range(10):
			total_ways += count_sequences(digits - 1,target_sum - d)
		
		return total_ways
		
		
	if k<=0:
		return 0
		
	final_count = 0
	
	for d1 in range(1,10):
		final_count += count_sequences(k-1,m-d1)
		
	return final_count

There was also a problem that seemed to be:

"Cost" is defined as the maximum edge weight on that simple path. An undirected weighted simple graph, connected. Count how many different node pairs (u, v) have a minimum cost of k.

But it felt too hard. I'm putting it aside for now.