Frontend Development Interview Guide and Core Knowledge Points
This article compiles essential frontend interview questions, key knowledge areas, and detailed explanations covering HTML, CSS, JavaScript, browser engines, storage APIs, and best practices, helping beginners build a solid foundation and prepare effectively for technical interviews.
The author has gathered and summarized a collection of frontend interview questions, emphasizing that beginners should study the underlying principles thoroughly rather than relying on short‑term cramming.
Frontend is a rapidly evolving field; new standards, frameworks, and libraries appear frequently, so staying up‑to‑date is a crucial skill for any frontend engineer.
Interview Tips (source: github:@wintercn)
Interview questions increase in breadth and depth as the candidate’s level rises.
Question types include theory, algorithms, project details, technical vision, open‑ended questions, and work cases.
Interviewers may probe details until they reach the candidate’s limits, highlighting the need for long‑term learning.
Attitude matters; interviewers consider whether they would want to work with the candidate.
Senior developers should avoid confusing absolute and relative positioning; reliability is valued.
Core Frontend Knowledge Areas
<code>HTML&CSS:</code><p><code>Understanding of web standards, browser engine differences, compatibility, hacks</code></p><p><code>CSS fundamentals: layout, box model, selector specificity</code></p><p>HTML5, CSS3, Flexbox</p><br/><code>JavaScript:</code><p><code>Data types, operators, objects, functions, inheritance, closures, scope, prototype chain, events, RegExp, JSON, Ajax</code></p><p><code>DOM, BOM, memory leaks, cross‑origin, async loading, template engines, MVC, routing, modularization, Canvas, ES6, Node.js</code></p><br/><p><code>Other:</code></p><p><code>Responsive design, build automation, HTTP, offline storage</code></p><p><code>Web security, performance, refactoring</code></p><p><code>Team collaboration, maintainability, usability, SEO, UED, architecture</code></p><p><code>Career development, rapid learning ability</code></p>Key knowledge points every frontend engineer should master:
1. DOM structure – relationships between nodes and navigation.
2. DOM manipulation – adding, removing, moving, copying, creating, and finding nodes.
3. Events – usage and differences between IE and standard event models.
4. XMLHttpRequest – performing a complete GET request and error handling.
5. Strict vs. quirks mode – how to trigger and why it matters.
6. Box model – margins, paddings, borders, especially in IE8‑ and below.
7. Block vs. inline elements – CSS control and proper usage.
8. Float elements – usage, problems, and solutions.
9. HTML vs. XHTML – differences and preferred usage.
10. JSON – purpose, usage, and design.Sample Interview Questions and Answers
What is the purpose of and the difference between standards mode and quirks mode?
(1) The <!DOCTYPE> declaration must be the first line before the <html> tag, informing the browser which document standard to use. An incorrect or missing DOCTYPE triggers quirks mode.
(2) Standards mode renders and runs JavaScript according to the highest supported standards; quirks mode provides backward‑compatible rendering for older sites.Why does HTML5 only require ?
HTML5 is not based on SGML, so it does not need a DTD reference; however, a DOCTYPE is still required to trigger standards mode in browsers.List inline elements, block elements, and void elements.
Inline: a, b, span, img, input, select, strong
Block: div, ul, ol, li, dl, dt, dd, h1‑h6, p
Void: br, hr, img, input, link, meta, area, base, col, command, embed, keygen, param, source, track, wbrDifference between using link and @import for CSS.
(1) <link> is an XHTML tag that can load CSS and other resources; @import is a CSS rule that only loads CSS.
(2) <link> loads concurrently with the page; @import loads after the page is parsed.
(3) @import is supported from IE5 onward; <link> has broader compatibility.Explain browser engine concepts.
Browsers consist of a rendering engine (layout engine) and a JavaScript engine. The rendering engine parses HTML/CSS, builds the render tree, and paints the page. The JS engine parses and executes JavaScript. Historically they were tightly coupled, but modern browsers separate them.Common browser engines.
Trident (IE family), Gecko (Firefox), Presto (old Opera), WebKit (Safari), Blink (Chrome, derived from WebKit).What are the new features of HTML5 and which elements were removed?
* New features: canvas, video/audio, localStorage, sessionStorage, semantic elements (article, footer, header, nav, section), new form controls (date, email, etc.), web workers, WebSocket, Geolocation.
* Removed elements: presentational tags like <big>, <center>, <font>, and frameset-related tags.Difference between cookies, sessionStorage, and localStorage.
Cookie: sent with every HTTP request, max ~4KB, can have expiration.
sessionStorage: lives only for the page session, not sent to server, larger size (~5MB).
localStorage: persists across sessions, not sent to server, larger size.Drawbacks of using iframe .
* Blocks the main page's onload event.
* Search engines cannot index its content, hurting SEO.
* Shares connection pool with parent page, limiting parallel loads.How to disable autocomplete on an HTML5 form.
Set <code>autocomplete="off"</code> on the <code>form</code> element or on individual <code>input</code> fields.Overall, this guide provides a structured roadmap for frontend engineers to deepen their theoretical knowledge, practice coding skills, and prepare for comprehensive technical interviews.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
Practical DevOps Architecture
Hands‑on DevOps operations using Docker, K8s, Jenkins, and Ansible—empowering ops professionals to grow together through sharing, discussion, knowledge consolidation, and continuous improvement.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.