Skip to main content

Taobao HangZhou Interview Round 1

· 3 min read
Xiaohai Huang
  1. How do you decide when to run useLayoutEffect?

    Ans: useLayoutEffect is a version of useEffect that fires before the browser repaints the screen.

    • Measuring layout before the browser repaints the screen.
    • Blocks the browser from repainting.
  2. The execution order of useEffect and useLayoutEffect.

    Execution TimingRuns after the render is committed to the screen. This means it runs after the browser has painted changes to the screen.Runs synchronously after all DOM mutations. This means it runs before the browser has a chance to paint, making it suitable for reading layout from the DOM and synchronously re-rendering.
    Use CasesMost side effects (data fetching, subscriptions)DOM manipulation, measuring elements, critical layout updates
    PerformanceGenerally better performance due to async natureCan impact performance if used excessively, as it blocks the browser from repainting
Live Editor
  1. function chaining

    // new Monkey('xiaohai').eat('apple').sleep(3).eat('banana').eat('rice').sleep(1).eat('orange')
    // My name is xiaohai
    // Eating apple
    // ...sleep for 3 seconds
    // Eating banana
    // Eating rice
    // ...sleep for 1 seconds
    // Eating orange
    class Monkey {
    constructor(name) { = name;
    this.queue = [];
    console.log(`My name is ${name}`);

    // start all the tasks
    setTimeout(() => {
    }, 0);

    #onComplete = () => {
    const task = this.queue.shift();
    task && task();

    #enqueue = (task) => {
    this.queue.push(() => task(this.#onComplete));

    sleep(seconds) {
    this.#enqueue((next) => {
    setTimeout(next, seconds * 1000);

    return this;

    eat(food) {
    this.#enqueue((next) => {
    console.log(`Eating ${food}`);
    return this;
  2. HTTP 1 vs HTTP 2

    Protocol VersionHTTP/1.1HTTP/2
    MultiplexingNoYes, multiple requests can be sent over a single connection
    Stream PrioritizationNoYes, allows the client to prioritize requests
    Header CompressionNoYes, using HPACK compression
    Server PushNoYes, allows the server to send resources to the client proactively
    Binary ProtocolText-basedBinary, more efficient for parsing
    Connection ManagementConnection per request/responseSingle connection for multiple requests/responses
    PerformanceSlower due to multiple connections and latencyFaster due to multiplexing, header compression, and binary protocol
    SecuritySSL/TLS for encryptionTLS 1.2 or higher required, with additional features like ALPN for protocol negotiation
    CompatibilityWidely supported, but requires separate connections for each requestRequires HTTPS and modern browsers/servers
    Use CasesIdeal for simple, stateless requestsIdeal for complex, stateful applications with many small requests