Front-end Developer Interview Questions 前端面试题库全解析：基于意大利语版的高频考察点与作答指南-育师

教程
前端

【免费下载链接】Front-end-Developer-Interview-Questions

A list of helpful front-end related questions you can use to interview potential candidates, test yourself or completely ignore.

项目地址：https://gitcode.com/gh_mirrors/fr/Front-end-Developer-Interview-Questions

点击查看免费下载

本指南以开源仓库 Front-end-Developer-Interview-Questions 中的意大利语版文档为骨架，完整梳理其收录的通用、HTML、CSS、JavaScript、jQuery、编码实操与趣味问题共九大类考察点，并为每一类补充概念释义与作答思路。读完本文，你将掌握一份可直接用于面试候选人、技术自测或团队培训的标准化前端考察清单，同时理解该题库在仓库中的组织方式与多语言构建机制，便于结合英文原版题库进一步延伸使用。

一、文档定位与仓库背景

1.1 这份题库是什么

本仓库是一份面向前端开发者的面试问题清单，可用于考察候选人、测试自己，或者仅仅当作一份知识索引。仓库主文档 README.md 开篇即给出明确的定位声明：

"This repository contains a number of front-end interview questions that can be used when vetting potential candidates."

而意大利语版文档 src/translations/italian/README.md 则是该题库的完整意大利语翻译，其 Front Matter 声明了标题（Domande per il colloquio di lavoro per front-end）、布局（layouts/page.njk）、生成路径（/translations/italian/index.html）与语言标识（lang: it）。仓库共维护三十余种语言版本（阿拉伯语、孟加拉语、中文、日语、韩语、俄语等），全部注册在 src/_data/translations.json 中，意大利语条目对应的页面链接为italian/。

1.2 题库的起源

文档"Collaboratori Originali"一节记录了题库的来历：大部分问题源自 oksoclap 上的一场讨论，最初由 Paul Irish 创建，并得到以下开发者的贡献：@bentruyman、@cowboy、@ajpiano、@SlexAxton、@boazsender、@miketaylr、@vladikoff、@gf3、@jon_neal、@wookiehangover、@iansym。这也是本项目长期由 h5bp（HTML5 Boilerplate）社区维护的原因之一。

1.3 文档如何被构建成页面

从仓库结构看，该文档不仅是纯文本，还参与静态站点构建：

每个翻译 README 通过 Eleventy（配置文件见 config/eleventy.config.js）渲染为独立页面，意大利语版的 permalink 为/translations/italian/index.html；
src/translations.njk 作为翻译索引页，遍历translations.all数据，以三列列表展示所有语言入口；
构建配置中启用了EleventyI18nPlugin，默认语言为英文，说明各翻译文档与英文原版是并列共存的国际化内容体系。

1.4 与英文主库的关系及版本差异

对比可发现，意大利语版保留了历史版本的完整骨架（含已从英文主库单列或移除的 jQuery 分类），而英文主库的题库已按分类拆分到独立文件：通用问题、HTML 问题、CSS 问题、JavaScript 问题、编码题、趣味问题等，并新增了无障碍、测试、性能、网络等分类。阅读意大利语版时，可将其视为"经典版全览"，再对照英文分类文件获取更新内容。

二、使用这份题单的正确姿势

文档开头给出了三条关键使用建议，这决定了整份清单的定位与用法：

切勿对同一候选人问完所有问题——那样需要数小时，且缺乏重点；
按需挑选若干题目，针对性地考察你真正关心的技能维度；
注意大多数问题是开放式的——开放问题往往能引出有价值的讨论，比直接一问一答更能反映一个人的真实能力。

此外，文档推荐面试官在开始面试前阅读 Rebecca Murphey 的《Baseline For Front-End Developers》一文，把它作为判断候选人基线能力的参考框架。这份清单同样适合开发者用于自我检测：逐条自问"我能否清晰作答"，即可定位知识盲区。

三、通用问题（Domande Generali）

这一部分考察的是候选人的学习习惯、工程素养与横向视野，共 17 问：

你昨天/这周学到了什么？
编程的什么让你兴奋或感兴趣？
你遇到过什么技术挑战，是如何解决的？
在构建 Web 应用或网站时，你会考虑 UI、安全、性能、SEO、可维护性或技术选型中的哪些方面？
谈谈你偏好的开发环境（操作系统、编辑器、浏览器、工具等）。
你熟悉哪些版本控制系统（VCS）？
你能描述一下创建网页时的工作流程吗？
如果有 5 份不同的样式表，你会如何把它们最好地整合进网站？
你能描述"渐进增强（progressive enhancement）"与"优雅降级（graceful degradation）"的区别吗？
你会如何优化网站的静态资源（assets）？
浏览器对单个域名会同时下载多少资源？有哪些例外？
说出 3 种减少页面加载时间的方法（感知加载时间或实际加载时间）。
如果你加入一个用 Tab 缩进而你习惯用空格的项目，你会怎么做？
描述你会如何创建一个简单的幻灯片页面。
如果让你精通一门技术，你会选哪门？
解释标准和标准制定机构的重要性。
什么是 FOUC（无样式内容闪烁）？如何避免？
解释什么是 ARIA 和屏幕阅读器，以及如何让网站具备可访问性。
解释 CSS 动画与 JavaScript 动画各自的优缺点。

关键概念速记

渐进增强 vs 优雅降级：渐进增强从"可用基础版本"出发，为现代浏览器逐层添加增强能力；优雅降级则先构建完整体验，再为旧浏览器提供降级方案。前者是如今更主流的设计思路。
FOUC（Flash of Unstyled Content）：由于 CSS 加载延迟，页面先以无样式状态闪现再"跳变"到最终样式。常见避免手段包括把样式表放在<head>中、内联关键 CSS、合理设置缓存。
ARIA 与可访问性：ARIA（Accessible Rich Internet Applications）通过role、aria-*属性向辅助技术描述页面语义；结合语义化 HTML 标签、键盘导航与焦点管理，才能让屏幕阅读器用户获得完整体验。
浏览器并发连接数：HTTP/1.1 时代浏览器对同一域名通常有 6 个左右的并发连接上限（各浏览器不同），例外包括对 HTTPS、子域名的不同策略；这也是"域名分片"和 HTTP/2 多路复用出现的原因。
CSS 动画 vs JS 动画：CSS 动画声明式、可被浏览器优化（如合成层），适合简单过渡；JS 动画（如 Web Animations API、requestAnimationFrame）控制力强，适合复杂时间线。如今趋势是两者结合。

四、HTML 问题（Domande su HTML）

共 13 问，覆盖文档结构、多语言、存储与脚本加载等基础但高频的考点：

doctype的作用是什么？
标准模式（standard mode）与怪异模式（quirks mode）的区别是什么？
HTML 与 XHTML 的区别是什么？
以application/xhtml+xml提供页面会有什么问题？
你如何向用户提供多语言内容的页面？
在设计或开发多语言站点时需要注意什么？
data-属性有什么用途？
如果把 HTML5 视为开放 Web 平台，它的"积木"（building blocks）有哪些？
描述cookie、sessionStorage与localStorage的区别。
描述<script>、<script async>与<script defer>的区别。
为什么通常建议把 CSS<link>放在<head>中、把 JavaScript<script>放在</body>之前？你知道有哪些例外吗？
什么是渐进渲染（progressive rendering）？
你使用过不同的 HTML 模板语言吗？

关键概念速记

doctype：声明文档类型，触发浏览器进入标准模式；缺失时浏览器可能以怪异模式渲染，导致盒模型等行为不一致。
标准模式 vs 怪异模式：怪异模式是浏览器为兼容旧页面保留的"宽容渲染"模式，盒模型计算与 IE5 一致；标准模式按 W3C 规范渲染。
多语言站点：涉及lang属性、字符编码、字体与排版方向（如 RTL）、本地化文案、URL 结构与 hreflang 等。
data-属性：用于在 HTML 元素上携带自定义数据，供 CSS/JS 读取，是"无侵入式"传递状态的手段。
三种客户端存储：cookie 随请求发送、容量小（约 4KB）、有过期机制；localStorage 持久、容量大（约 5MB）；sessionStorage 仅在当前标签页会话有效。
script 三种加载方式：普通脚本同步阻塞解析；async下载完成后立即执行（不保证顺序）；defer在解析完成后按文档顺序执行。
渐进渲染：优先渲染首屏/关键内容，再填充其余部分，是提升感知性能的重要策略（如骨架屏、分批渲染、懒加载）。

五、CSS 问题（Domande Specifiche su CSS）

共 19 问，聚焦布局、兼容性、性能与工具链：

描述什么是 CSS "reset" 文件及其作用。
描述 Float 及其工作原理。
有哪些清除浮动（clearing）的技术？分别适用于什么场景？
解释 CSS 雪碧图（sprite），你会如何在页面或站点中实现它？
你偏好的图片替换（image replacement）技术有哪些？什么时候用哪种？
CSS 属性 hack、按条件引入 .css 文件，还是其他方式？你如何为功能受限的浏览器提供页面？使用了哪些技术/流程？
有哪些在视觉上隐藏内容（同时仅对屏幕阅读器可用）的方法？
你用过网格系统（grid system）吗？最喜欢哪个？
你使用或实现过媒体查询（media queries）或移动端专属的 CSS/布局吗？
你对 SVG 样式化熟悉吗？
你会如何优化网页的打印样式？
写出高效 CSS 有哪些"技巧"？
使用 CSS 预处理器（SASS、Compass、Stylus、LESS）有哪些优缺点？如果用过，描述你喜欢的和不喜欢的点。
你会如何实现使用非标准字体的网页视觉稿？（如 Webfonts：Google Webfonts、Typekit 等服务）
解释浏览器如何确定哪些元素匹配某个 CSS 选择器。
解释你对盒模型（box model）的理解，以及如何用 CSS 告诉浏览器以不同盒模型渲染布局。

关键概念速记

CSS reset vs normalize：reset 将默认样式全部清零（如margin: 0），normalize 则保留各浏览器一致的合理默认值。现代项目更倾向于 normalize 或两者结合。
Float 与清除：float 使元素脱离正常文档流并靠左/右排列，父容器会因此高度塌陷；清除方法包括clear: both、父容器overflow: hidden、clearfix 伪元素方案。
雪碧图：把多个小图标合并为一张大图，通过background-position定位，减少 HTTP 请求数；HTTP/2 时代使用场景有所缩减，但仍适用于部分场景。
隐藏内容供屏幕阅读器使用：常见方案有clip/position: absolute组合、text-indent负值等"sr-only"技巧；不能简单使用display: none，因为辅助技术也会跳过它。
选择器匹配：浏览器从右向左解析选择器（先找最右部分），再沿祖先链向上匹配，因此过深的层级和过多的后代选择器会影响性能。
盒模型：标准盒模型content-box（width 只含内容）与border-box（width 含 padding 和 border）；box-sizing: border-box能让宽度计算更直观。

六、JavaScript 问题（Domande Specifiche su JS）

这是题量最大、含金量最高的一部分，共 38 问，外加一道代码题：

解释事件委托（event delegation）。
解释this在 JavaScript 中如何工作。
解释原型继承（prototypal inheritance）如何工作。
你如何测试自己的 JavaScript 代码？
AMD 与 CommonJS 的区别？
什么是哈希表（hashtable）？
解释为什么function foo(){ }();不能作为一个 IIFE 运行？需要怎样修改才能成为正确的 IIFE？
null、undefined与"未声明（undeclared）"变量有什么区别？你会如何检查这些状态？
什么是闭包（closure）？你如何/为何使用它？
匿名函数的典型用途是什么？
解释"JavaScript 模块模式"（module pattern）及何时使用它。如果能提到干净的命名空间（namespacing）是加分项。如果你的模块没有命名空间呢？
你如何组织代码（模块模式、经典继承等）？
宿主对象（host objects）与原生对象（native objects）的区别？
function Person(){}、var person = Person()与var person = new Person()的区别？
.call与.apply的区别？
解释Function.prototype.bind。
你何时优化代码？
你能解释 JavaScript 中继承如何工作吗？
你何时会使用document.write()？（大多数广告使用它，尽管其使用备受诟病）
特性检测（feature detection）、特性推断（feature inference）与 UA 字符串检测的区别？
尽可能详细地解释 AJAX。
解释 JSONP 如何工作（以及为什么它并非真正的 AJAX）。
你用过 JavaScript 模板引擎吗？用过哪些（Mustache.js、Handlebars 等）？
解释"提升"（hoisting）。
描述事件冒泡（event bubbling）。
"attribute" 与 "property" 的区别？
为什么扩展 JavaScript 内置对象不是个好主意？
为什么扩展内置对象又是个好主意？
document 的 load 事件与 ready 事件的区别？
==与===的区别？
你会如何从浏览器窗口的 URL 中获取 query string 参数？
解释 JavaScript 的同源策略（same-origin policy）。
描述 JavaScript 中的继承模式。
[1,2,3,4,5].duplicate(); // [1,2,3,4,5,1,2,3,4,5]这段代码能得到什么？
描述 JavaScript 中的记忆化（memoization，避免重复计算）技术。
为什么叫"三元表达式（Ternaria）"？"三元"一词表示什么？
什么是函数的元数（arity）？
什么是"use strict";？使用它的优缺点是什么？

关键概念速记

事件委托：利用冒泡机制，把子元素的事件处理委托给公共祖先统一监听，减少监听器数量，也便于动态元素的事件绑定。
this的指向：取决于调用方式——普通函数调用指向全局/undefined（严格模式）、方法调用指向所属对象、构造调用指向新实例；箭头函数不绑定自己的this。
IIFE：function foo(){ }();因语句以function开头会被解析为函数声明而报错；改为(function foo(){ })();用括号包成表达式即可立即执行。
null/undefined/ undeclared：null是显式赋的空值；undefined是已声明未赋值的状态；undeclared 是根本未声明（访问会抛 ReferenceError）。检查时分别可用=== null、typeof x === 'undefined'、typeof对未声明变量返回"undefined"而不抛错。
闭包：函数与其词法作用域的组合，用于封装私有状态、实现柯里化、回调中保留上下文等。
模块模式：通过 IIFE 返回对象，实现私有变量与命名空间隔离；"无 namespace"时需约定命名或借助模块加载器。
new的行为：Person()普通调用（this为全局，严格模式为 undefined）；new Person()创建新对象并把this绑定到它，返回该对象。
call/apply/bind：三者都能指定this；call传参列表、apply传参数数组、bind返回绑定了this的新函数（不立即执行）。
hoisting：var声明与函数声明会被提升到作用域顶部，但var的赋值不会；let/const有暂时性死区。
attribute vs property：attribute 是 HTML 源码中的属性字符串，property 是 DOM 对象的属性；二者大部分情况下同步，但某些属性（如 value、checked）行为不同。
==vs===：==会进行类型转换后比较，===要求类型与值都相等；规范建议一律使用===。
同源策略：浏览器限制脚本只能访问同协议、同域名、同端口的资源，防止跨站数据窃取；跨域需借助 CORS、JSONP 或代理。
三元表达式：条件 ? A : B，因操作数为三个（条件、真值分支、假值分支）而得名。
函数元数（arity）：函数形参的数量，可通过Function.length查看。
严格模式：消除部分静默错误（如给只读属性赋值、重复形参名）、使this为 undefined、禁用with等；代价是与旧代码的兼容性问题。

七、jQuery 问题（Domande Specifiche su jQuery）

共 11 问。该类问题是历史版本的组成部分，考察对经典 DOM 库 API 的熟练度：

解释"链式调用"（chaining）。
解释 deferreds。
有哪些 jQuery 专属优化你可以实施？
.end()是做什么的？
你会如何（以及为什么）给事件处理器添加命名空间？
说出 4 种可以传给 jQuery 方法的不同值。（选择器文本、HTML 文本、回调函数、HTMLElement、对象、数组、元素数组、jQuery 对象等）
什么是特效队列（fx queue）？
.get()、[]与.eq()的区别？
.bind()、.live()与.delegate()的区别？
$与$.fn的区别？或者说$.fn到底是什么？
优化这个选择器：$(".foo div#bar:eq(0)")。

关键概念速记

链式调用：jQuery 方法大多返回 jQuery 对象本身，因此可以连续调用，让代码紧凑；配合.end()可回退到上一组被选择的元素。
deferreds：jQuery 对异步操作的状态封装（resolved/rejected/pending），配合.done()/.fail()管理回调，是 Promise 的前身。
选择器优化：$(".foo div#bar:eq(0)")的问题在于#bar已是 ID 选择器（唯一），div前缀与.foo限定属于冗余；$(".foo div#bar:eq(0)")应简化为$("#bar")或$("#bar:first")级别的高效写法。
bind/live/delegate：bind直接绑定（不适用于动态元素）；live/delegate通过事件委托支持动态元素，delegate限定委托祖先更高效；二者最终均被on取代。

八、编码题与参考答案（Domande con Codice）

这一节直接给出代码与答案，最适合用于现场笔试或自测：

1. 实现 modulo 函数，满足modulo(12, 5) // 2：

function modulo(a, b) { return a % b; }

2. 下面语句返回什么？

"i'm a lasagna hog".split("").reverse().join("");

答案："goh angasal a m'i"。split("")按字符拆分为数组，reverse()反转数组，join("")再拼接成字符串，等价于整串字符倒序。

3.window.foo的值是多少？

( window.foo || ( window.foo = "bar" ) );

答案："bar"（仅当window.foo为假值时才被赋值为"bar"；否则保持原值）。这利用了||的短路特性实现"默认值"初始化。

4. 下面两个 alert 的结果是什么？

var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar);

答案：第一个输出"Hello World"，第二个抛出ReferenceError: bar is not defined。bar被闭包内的 IIFE 作用域隔离，外部无法访问；第二个alert在访问未声明的bar时抛错。

5.foo.length的值是多少？

var foo = []; foo.push(1); foo.push(2);

答案：2。push每调用一次向数组尾部追加一个元素，length随之更新。

JavaScript 分类中还附带一道类似题目：

[1,2,3,4,5].duplicate(); // [1,2,3,4,5,1,2,3,4,5]

考察点在于：数组并没有内置duplicate方法，需要扩展Array.prototype——这恰好呼应了前文"扩展内置对象利弊"的讨论。实现思路是把数组与自身拼接：

Array.prototype.duplicate = function() { return this.concat(this); };

九、趣味问题（Domande per Divertimento）

用于在紧张的技术问答后缓和气氛、了解候选人的热情与个性，共 4 问：

你开发过的最棒的东西是什么？你最引以为豪的是什么？
你最喜欢的开发者工具功能有哪些？
你有个人项目吗？是什么类型的？
你最喜欢 Internet Explorer 的哪个特性？

这些问题没有标准答案，考察的是候选人对技术的真实热情、持续学习的习惯与个性契合度。

十、更多优质资源（Altre Ottime Risorse）

意大利语版文档在结尾推荐了三个经典资源，可作为题库之外的补充阅读方向：

程序员问答社区上关于"Web 应用程序员应考虑哪些技术细节"的讨论帖，适合构建系统性的考察维度；
NCZOnline 上的《Interviewing the Front-End Engineer》，提供了前端面试的框架性方法论；
CSS-Tricks 上的 CSS 面试题合集，可补充 CSS 专项题目。

十一、从源码结构看题库的扩展方向

若以意大利语版为起点继续深入，仓库还提供了大量可对照的素材：

英文原版按分类拆分的题库文件：通用问题、HTML 问题、CSS 问题、JavaScript 问题、编码题、趣味问题；
新分类覆盖：无障碍（Accessibility）、测试（Testing）、性能（Performance）、网络（Network）等，其中编码题包含var foo = 10 + '20'、0.1 + 0.2 == 0.3、add(2)(5)柯里化、Promise 链差异、事件循环输出顺序等进阶题目，可明显看出题库随前端技术演进的轨迹；
多语言体系：中文版、日文版等三十余种语言版本均注册于 src/_data/translations.json，翻译索引页负责聚合展示；
站点元信息（标题、描述、关键词、语言）统一维护在 src/_data/site.json，其中描述明确将这份清单定义为"可用于面试候选人、测试自己、或干脆无视它"。

结语：把题库变成自己的考察体系

从意大利语版文档可以清晰看到这份经典题库的设计哲学：问题覆盖面广、以开放式为主、强调讨论而非标准答案，并且明确反对"题海战术"。最有效的用法是——面试前根据岗位 JD 从通用、HTML、CSS、JS 等分类中各选 3～5 道组合成定制化考卷；平时则把整份清单当作技术自测表，逐条检验自己对前端基础知识的掌握程度。再结合英文主库持续新增的无障碍、测试、性能与网络分类，你完全可以把这份清单沉淀为一套属于自己团队的面试与成长体系。