This article has been machine-translated from Chinese. The translation may contain inaccuracies or awkward phrasing. If in doubt, please refer to the original Chinese version.

ByteDance Frontend First Round Interview

• How did you learn frontend development?
  • MDN, bootcamps, “Professional JavaScript for Web Developers” (the Red Book), etc. Systematic study for about two months.

Networking

• What happens when you enter a URL in the browser?
  • Parse the URL, look up the local hosts file, find the corresponding IP address through DNS resolution, etc.
  • Three-way handshake to establish TCP connection. For HTTPS, there’s also a TLS handshake.
  • Server receives the request and returns a response.
  • Browser parses the response to generate the HTML tree and CSSOM tree (DOM tree! I said it wrong!!)
• Can you elaborate on the DNS lookup process?
  • Digging my own grave here… I answered that it first checks the local hosts file. If there’s a matching IP, it returns directly. Then it checks the router, then goes to the DNS server.
  • “So you’re not very familiar with root servers, right?” (Yep, doomed.)
• TCP connection
  • Connection-oriented, byte-stream-based, provides reliable transport service, requires three-way handshake.
  • Elaborate on the three-way handshake (blah blah blah, digging another hole)
  • You mentioned that two-way handshake is insecure. Why?
    • With only two handshakes, the server doesn’t know if the client’s ability to receive packets is normal.
  • Explain the last handshake (didn’t explain clearly earlier, couldn’t remember well, ugh. Need to write a detailed blog post about this later.)
• Difference between TCP and UDP
  • UDP is connectionless, unreliable, and transmits data faster.
  • UDP is used in scenarios where packet loss doesn’t matter much.
  • Anything else? (…)
• Have you studied TCP congestion control? Tell me about it.
  • Congestion window, timeout retransmission, slow start and fast retransmit (oops, mixed up fast retransmit and fast recovery)
  • Should be: slow start, congestion avoidance, additive increase/multiplicative decrease, fast retransmit, fast recovery.

HTML Related

• DOM tree and CSSOM tree construction process (the hole I dug earlier)
• Does loading JS and CSS resources affect the page? (Do they block?)
  • JS resources: talked about async and defer.
  • When are CSS resources parsed? Do they block DOM node construction? (Doomed, I think they’re parallel.)
    • Does it block parsing or rendering?

Frontend Security Knowledge

• XSS, CSRF, SQL injection, DoS and DDoS
  • Elaborate on prevention measures (sanitize user input, escape characters, never blindly trust user input)
  • How to prevent CSRF? (Only knew about HTTPS, totally incoherent. Need to review!)
• Talk about cross-origin
• Cross-origin solutions?
  • Mainly talked about CORS, simple requests and preflight requests
    • Explain simple requests, non-simple requests, and preflight requests
  • Didn’t go into detail about JSONP and others

Review -> Web Development Security Journey

CSS Related

• CSS selector specificity (8 types, I only named 4, couldn’t remember the names of the others… clearly weak in CSS)
  • Type, class and ID selectors, attribute selectors, pseudo-classes and pseudo-elements, combinators, inline styles
  • Inline styles > ID > Class > Type… see CSS Selectors
• CSS vertical and horizontal centering (didn’t answer well either, need to seriously study CSS)
  • flex
  • margin auto

JS Related

• Classic basic data types
• How to determine a variable’s type
  • I answered typeof with some special caveats (later realized oh right, there’s also Object.prototype.toString())
• Talk about the prototype chain
• A question: write out the relationship between p and Person (as many as possible) — my answer below

function Person() {}
let p = new Person();
// 写出p与Person的关系（尽可能多） ↓我的回答
console.log(p.__proto__ === Person.prototype); // true
console.log(p.constructor === Person); // true
console.log(Person.prototype.__proto__ === Object.prototype); // true
console.log(p instanceof Person); // true
console.log(p instanceof Object); // true

• Another question: determine the output

function Foo() {
  getName = function () {
    console.log('1');
  };
  return this;
}
Foo.getName = function () {
  console.log('2');
};
Foo.prototype.getName = function () {
  console.log('3');
};
var getName = function () {
  console.log('4');
};
// 判断以下输出
Foo.getName();
getName();
new Foo().getName();
getName();

• The answer is 2 4 3 1

Coding Problem

Binary tree level-order traversal (solved instantly)

Questions for the Interviewer

• Department business/tech stack (the interviewer answered in great detail)
  • Imaging domain, ByteDance’s imaging apps like CapCut, Ulike, etc. Not just pages but also cross-platform projects. They have an internal cross-platform framework to research. Also some B-side work. Security might involve Go. Frontend tech stack is mainly React + Node + TS.
• Evaluation of me / areas for improvement
  • Basic understanding is there, but some knowledge points aren’t detailed enough. Need to dig deeper into topics. (Need to write more code basically.)