Top Front-End Interview Answers: HTTP, Virtual DOM, Modules, and More

Introduction

About a week ago I posted a question on WeChat, gathered interview topics, and collaborated with teammates to write answers that provide ideas and reference material for interview preparation.

[Gaode Interview] How many HTTP requests can a single TCP connection send? (LVYOU)

HTTP 1.0 normally does not support persistent connections, so one request per TCP connection unless Connection: Keep-Alive is used, subject to limits described in the HTTP Authority Guide. HTTP 1.1 enables persistent connections, allowing unlimited requests over the same TCP connection. HTTP/2 adds multiplexing, permitting concurrent requests on a single connection with no practical upper bound.

[Tencent Interview] What are the advantages of a Virtual DOM? (B_Cornelius)

Interviewers expect more than “DOM manipulation is slow”. They want to hear the problem VDOM solves: reducing costly engine switches and re‑flows. The DOM and JS engines run on the same thread; each DOM API call incurs a pause, parameter conversion, possible layout/repaint, and a switch back to JS. VDOM batches changes, computes a diff, and applies only the necessary updates, minimizing re‑flows, repainting, and overall performance cost.

Virtual DOM does not trigger immediate layout and repaint.

It batches frequent modifications, then compares and patches the real DOM once.

It limits repaint and layout to the changed parts of a large DOM tree.

[ByteDance Interview] Differences between CommonJS and ES6 module imports? (Huo Xiaoye)

CommonJS is the original Node.js module system; ES6 modules are a language‑level specification. In browsers, ES6 modules are still not fully supported, so tools like Webpack transpile import/export to CommonJS. Main differences:

CommonJS exports a copy of a value; ES6 exports a live reference.

CommonJS loads modules at runtime; ES6 modules are statically resolved at compile time.

CommonJS allows a single export; ES6 can export multiple bindings.

CommonJS uses dynamic syntax that can appear inside conditionals; ES6 syntax must be at the top level.

In CommonJS, this refers to the current module; in ES6 modules this is undefined.

Cookie, Token, and Session Differences

The interview expects you to discuss the origins, principles, and drawbacks of Cookies, Sessions, and Tokens, then compare them. Mention recent events such as Chrome 80 blocking third‑party cookies, and be ready to cite related articles.

How to Choose an Image Format (PNG, WebP, etc.)

JPEG : lossy compression, no transparency, no animation, supported by all browsers, best for complex colors/photos.

GIF : lossless compression, supports transparency and animation, works in all browsers, suited for simple colors and animated graphics.

PNG : lossless compression, supports transparency, no animation, universal support, ideal when transparency is required.

APNG : lossless, supports transparency and animation, supported by Firefox, Safari iOS, Safari, good for semi‑transparent animated images.

WebP : lossy compression, supports transparency and animation, supported by Chrome, Opera, Android Chrome, suitable for complex images where size matters.

SVG : lossless, supports transparency and animation, works in all modern browsers (IE 8+), perfect for simple vector graphics and scalable UI.

How to Measure First Paint and White‑Screen Time

First‑paint can be measured via native WebView callbacks: webViewDidFinishLoad on iOS and onPageFinished on Android. “White screen” has several definitions—no content, network error, loading state, or missing images. Different detection methods include:

Count DOM nodes; if below a threshold, treat as white screen.

Detect specific error codes returned by the backend.

Identify custom markers that indicate loading or failure states.

Differences Between Mini‑Programs and H5

Rendering: Mini‑programs usually use native rendering, but can also embed a WebView for H5 pages, creating a hybrid solution.

Mini‑programs have a dual‑thread architecture: one thread renders the view (index.js) and a service‑worker‑like thread runs business logic (index.worker.js), offering performance advantages over a single‑bundle H5 approach.

How to Determine if 0.1 + 0.2 Equals 0.3

The question probes understanding of floating‑point precision. Explain that IEEE‑754 64‑bit representation causes tiny rounding errors, leading to 0.1 + 0.2 !== 0.3. Discuss common solutions such as using a tolerance check, libraries like math.js, or arbitrary‑precision arithmetic.

Not specific to ECMAScript.

IEEE‑754 stores numbers in 64 bits with an 11‑bit exponent.

Three stages of precision loss occur during arithmetic.

Understanding the V8 Engine and JavaScript Execution

When a script runs, V8 creates an execution stack and a global execution context, allocating memory for variables (initially undefined). Functions create their own execution contexts, which are pushed onto the stack. If a function calls another, the callee’s context is added on top. When a parent returns early, its context is popped, but a closure preserves its variables for the child.

V8 is single‑threaded; asynchronous APIs (e.g., setTimeout, fetch) are off‑loaded, and callbacks are queued. Once the call stack is empty, the event loop moves callbacks from the task queue to the stack for execution.