WSL2 Kali 换源与 binwalk/outguess 固件隐写分析实战
2026/9/30 3:02:58
- 教程
- 前端
【免费下载链接】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 仓库中的保加利亚语翻译版本文档（src/translations/bulgarian/README.md）展开，完整呈现该翻译版所承载的前端面试问题全集（含保加利亚语原题、代码片段与参考答案），并结合仓库的 Eleventy 构建配置、多语言数据与翻译索引页源码，说明这份文档如何在当前项目中作为独立页面被渲染、路由与链接。读者读完可获得：一套可直接用于候选人筛选的保加利亚语前端面试题库，以及基于该仓库源码结构理解多语言文档发布机制的方法。
一、文档定位：保加利亚语翻译版在整个仓库中的角色
Front-end Developer Interview Questions 的核心内容是「一份可用于甄别前端候选人的面试问题清单」，其英文主版本位于仓库根目录的 README.md，各语种翻译版则统一存放于 src/translations/ 目录下，保加利亚语版本即是其中之一。
从仓库的翻译索引数据 src/_data/translations.json 可以看到，保加利亚语（Bulgarian）与阿拉伯语、孟加拉语、中文等 33 种语言一起被登记在translations.all数组中，并映射到bulgarian/这一 URL 前缀；src/translations.njk 模板会遍历该数组，在/translations/页面以三列列表的形式渲染出所有语言版本的入口链接。
保加利亚语文档本身带有 Eleventy 的 Front Matter 元数据：
title: Въпроси за интервю за front-end разработчици layout: layouts/page.njk permalink: /translations/bulgarian/index.html lang : bg其中layout: layouts/page.njk指定了渲染模板，permalink决定了最终生成静态页面的路径，lang: bg声明了内容语言。这说明该文档并非孤立的 Markdown 文件，而是整站多语言发布流程中的一环：构建时由 Eleventy 读取并生成/translations/bulgarian/index.html页面。
二、仓库构建机制：翻译文档如何变成静态页面
config/eleventy.config.js 是当前仓库的构建入口配置，它确认了以下几点与翻译文档直接相关的实现事实：
- 输入目录与模板引擎：
dir.input为src，templateFormats包含njk、md、html，markdownTemplateEngine与htmlTemplateEngine均为njk，因此保加利亚语 README.md 中的 Markdown 会被解析，并作为 Nunjucks 模板内容注入布局。 - 页面布局：src/_includes/layouts/page.njk 继承自
layouts/default.njk，在页头渲染title与description（若有），主体通过{{ content | safe }}输出文档内容，并在页脚提供指向仓库源码的 "Edit this page" 链接。 - 构建产物：
dir.output为_site，构建后保加利亚语文档对应的输出路径即_site/translations/bulgarian/index.html；addPassthroughCopy('src/assets')会一并拷贝静态资源。 - 内容处理细节：Markdown 渲染使用
markdown-it，启用了html、breaks、linkify、typographer选项，并在 level 2 标题上自动生成带锚点的目录链接——这正是原文档「Съдържание」（目录）一节各章节锚点可跳转的原因。
三、题库全貌：九个板块的保加利亚语面试问题
保加利亚语文档的目录（Съдържание）将全部问题划分为九大板块，另加「参与者（Участници в проекта）」与「补充资源（Допълнителни ресурси）」两节。下文按板块完整梳理并给出中文注解。
3.1 参与者与资源出处（Участници в проекта）
文档说明题库主体源自 oksoclap 上由 Paul Irish（@paul_irish）整理的问题清单，并列出 @bentruyman、@cowboy、@ajpiano、@SlexAxton、@boazsender、@miketaylr、@vladikoff、@gf3、@jon_neal、@wookiehangover、@iansym 等早期贡献者。英文主仓库的 README.md 同样维护着一份庞大的 Contributors 列表（含各语言翻译贡献者，例如负责保加利亚语翻译的 Nikolay Kostov），仓库的 CONTRIBUTORS.md 也是贡献者信息的集中登记处。
3.2 综合问题（Общи въпроси）
这一板块考察候选人的学习习惯、工程思维与 Web 基础认知，共 19 问，包括：
- 昨天/本周学到了什么？
- 编码中什么让你兴奋或感兴趣？
- 最近遇到的技术挑战及解决过程？
- 在构建或维护网站时，你用过哪些性能优化技术？（英文版 src/questions/general-questions.md 中对应条目为 "can you explain some techniques you have used to increase performance"）
- 构建 Web 应用时，用户界面、安全性、功能、SEO、可维护性与技术之间如何相互关联？
- 谈谈你偏好的开发环境（操作系统、编辑器、浏览器、工具）。
- 你熟悉哪些版本控制系统？
- 创建网页时你的工作流程是怎样的？
- 如果有 5 个不同样式文件，你如何把它们集成进站点？
- 解释 progressive enhancement 与 graceful degradation 的区别。
- 如何优化页面资源加载？
- 浏览器在同一域名下一次并发下载多少资源？有哪些例外？
- 说出 3 种降低页面加载时间（感知或实际）的方法。
- 接手一个使用 Tab 缩进的项目，而你习惯用空格，你会怎么做？
- 描述如何构建一个简单的幻灯片页面。
- 如果今年只能精通一项技术，你会选什么？
- 解释标准与标准化组织的重要性。
- 什么是 FOUC（Flash of Unstyled Content）？如何避免？
- 解释 ARIA 与屏幕阅读器，以及如何让网站更具可访问性。
- 解释 CSS 动画与 JavaScript 动画各自的优缺点。
- CORS 是什么意思，它解决什么问题？
3.3 HTML 问题（HTML въпроси）
覆盖 HTML 基础与浏览器渲染机制，共 16 问：
doctype的作用是什么？- standards mode、almost standards mode 与 quirks mode 的区别？
- HTML 与 XHTML 的区别？
- 使用
application/xhtml+xml处理页面是否存在问题？ - 如何提供多语言内容的页面？
- 设计或开发多语言站点时需要警惕哪些事项？
data-前缀属性有什么用？- 将 HTML5 视为开放 Web 平台，它的构建块有哪些？
- cookie、sessionStorage、localStorage 的区别？
<script>、<script async>、<script defer>的区别？- 为什么建议把 CSS
<link>放在<head>中、把 JS<script>放在</body>前？你知道哪些例外？ - 什么是 progressive rendering？
- 为什么在
<img>标签中使用srcset属性？浏览器如何处理该属性？ - 你是否用过不同的 HTML 模板语言？
对比英文版 src/questions/html-questions.md，可见英文版新增了canvas与svg的区别、空元素（empty elements）等问题，而保加利亚语版保留了较早期的经典题目集合，这正是翻译版与主版本内容演进的客观差异。
3.4 CSS 问题（CSS въпроси）
覆盖 CSS 核心机制、布局与工程实践，共 33 问，要点包括：
- CSS 中 class 与 ID 的区别？
- "resetting" 与 "normalizing" 的区别？你会选哪个，为什么？
- 解释浮动（floats）及工作原理。
- 解释 z-index 与层叠上下文（stacking context）的形成。
- 描述 BFC（Block Formatting Context）及工作机制。
- 有哪些清除浮动（clearing）技术？各适合什么场景？
- 解释 CSS sprite，如何应用到页面中？
- 你偏爱的图像替换技术有哪些？各在什么场景使用？
- 如何处理跨浏览器样式差异？
- 如何为不支持部分 HTML5 能力的浏览器提供服务？用了哪些技术/流程？
- 有哪些方式在视觉上隐藏内容、但仅对屏幕阅读器可见？
- 是否用过网格系统？偏好哪种？
- 是否使用过 media queries 或移动端专属布局/CSS？
- 是否熟悉 SVG 的样式化？
- 如何优化页面打印效果？
- 编写高效 CSS 有哪些"陷阱"？
- CSS 预处理器的优缺点？喜欢与不喜欢什么？
- 如何使用非标准字体实现设计稿？
- 浏览器如何确定元素匹配某个 CSS 选择器？
- 描述伪元素（pseudo-elements）及用途。
- 解释 box model，如何让浏览器按不同 box model 渲染布局？
* { box-sizing: border-box; }做了什么？有什么优点？- 列出你记得的所有
display属性值。 - inline 与 inline-block 的区别？
- relative、fixed、absolute、static 定位的区别？
- CSS 中的 "C" 代表 Cascading，样式叠加的优先级如何？如何利用这一点？
- 你用过哪些 CSS 框架？会如何改进它们？
- 是否测试过 Flexbox 或 Grid 规范？
- responsive design 与 adaptive design 的区别？
- 是否处理过 retina 图形？用了哪些技术？
- 有没有理由用
translate()代替绝对定位，或反之？为什么？
英文版 src/questions/css-questions.md 在此基础上还包含选择器优先级（specificity）、nth-of-type/nth-child区别、px/em/rem、clearfix、block vs inline、Grid vs Flexbox、fixed/fluid/responsive 布局等扩展问题，可作为题库的补充升级来源。
3.5 JavaScript 问题（JS въпроси）
JS 板块是题库中最庞大的一块，覆盖语言机制、运行时与异步编程，完整问题清单如下：
- 解释事件委托（event delegation）。
- 解释 JavaScript 中
this如何工作。 - 解释原型继承（prototypal inheritance）如何工作。
- AMD 还是 CommonJS？
- 解释为什么
function foo(){ }();不能作为 IIFE 运行？需要怎么改？ null、undefined与未声明变量的区别？如何逐一检测？- 什么是闭包（closure）？如何使用、为什么使用？
- 匿名函数什么时候用？
- 你如何组织代码？（module 模式、经典继承？）
- host 对象与 native 对象的区别？
function Person(){}、var person = Person()、var person = new Person()的区别？.call与.apply的区别？- 解释
Function.prototype.bind。 - 什么情况下会使用
document.write()？ - feature detection、feature inference 与 UA string 的区别？
- 详细解释 AJAX。
- AJAX 的优缺点？
- 解释 JSONP 如何工作（以及为什么它不是真正的 AJAX）。
- 是否用过 JavaScript 模板？用了哪个库？
- 解释 "hoisting"。
- 解释 "event bubbling"。
- attribute 与 property 的区别？
- 为什么扩展 JavaScript 内置对象不是好主意？
- document 的 "load" 与 "DOMContentLoaded" 事件的区别？
==与===的区别？- 从 JavaScript 角度解释同源策略（same-origin policy）。
- 修复下面代码使其工作：
duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5] - 为什么叫三元运算符？"三元"（ternary）是什么意思？
- 什么是
"use strict";？使用的优缺点？ - 写一个循环到 100 的 for 循环：3 的倍数输出 "fizz"，5 的倍数输出 "buzz"，同时被 3 和 5 整除输出 "fizzbuzz"。
- 为什么通常应保持网站 global scope 不被污染？
- 为什么要用
load事件？它有什么缺点？知道哪些替代方案？ - 解释什么是 single page app，如何为搜索引擎优化它？
- 你对 Promise 及其 polyfill 的使用经验到什么程度？
- 用 Promise 替代 callback 的优缺点？
- 用编译到 JavaScript 的语言写代码有哪些优缺点？
- 调试 JavaScript 代码时用什么工具和技术？
- 你用什么语言构造遍历对象属性与数组元素？
- 解释 mutable 与 immutable 对象的区别（举一个 JavaScript 中的 immutable 对象例子；immutable 的优缺点；如何在代码中实现 immutable）。
- 解释同步与异步函数的区别。
- 什么是 event loop？call stack 与 task queue 的区别？
- 解释
function foo() {}与var foo = function() {}中foo用法的差异。 let、var、const创建变量的区别？
其中 fizzbuzz、duplicate 修复、IIFE、async/await、"use strict"、mutable/immutable、event loop 等题目在英文版 src/questions/javascript-questions.md 及其附属 Coding Questions 一节中均有对应的原题与变体，可以在主版本中找到英文参考。
3.6 jQuery 问题（jQuery въпроси）
保加利亚语版保留了历史上 jQuery 面试题板块（英文主版已将其移除，这同样是翻译版与主版本演进的差异），共 10 问：
- 解释 "chaining"。
- 解释 "deferreds"。
- 你能做哪些 jQuery 专属优化？
.end()做什么？- 如何以及为什么给绑定事件处理器命名空间（namespaced events）？
- 说出可以传给 jQuery 方法的 4 类不同值（selector 字符串、HTML 字符串、callback 函数、HTMLElement、对象、数组、元素数组、jQuery 对象等）。
- 什么是 effects（fx）queue？
.get()、[]、.eq()的区别？.bind()、.live()、.delegate()的区别？$与$.fn的区别？或者说$.fn是什么？- 优化这个选择器：
$(".foo div#bar:eq(0)")。
3.7 测试问题（Въпроси, свързани с тестване）
- 测试代码的优缺点？
- 用什么工具测试代码功能？
- 单元测试（unit test）与功能/集成测试（functional/integration test）的区别？
- 代码 lint 工具的目的是什么？
英文版 src/questions/testing-questions.md 还补充了"测试最佳实践"一问，可视为该板块的延伸。
3.8 性能问题（Въпроси, свързани с бързодействие）
- 用什么工具定位代码中的性能问题？
- 有哪些方法能改善网站滚动性能？
- 解释 layout、painting、compositing 的区别。
与英文版 src/questions/performance-questions.md 一一对应。
3.9 网络问题（Мрежови въпроси）
- 为什么传统上推荐从多个域名加载网站资源？
- 尽可能完整描述从输入 URL 到页面加载完成的整个过程。
- Long-Polling、Websockets 与 Server-Sent Events 的区别？
- 解释以下请求/响应头：
Expires、Date、Age、If-Modified-...的区别；Do Not Track；Cache-Control；Transfer-Encoding；ETag；X-Frame-Options。 - 什么是 HTTP 方法？列出你知道的所有 HTTP 方法并解释。
英文版 src/questions/network-questions.md 额外包含域名预解析（domain pre-fetching）与 CDN 两问，可作为补充。
3.10 编程问题（Въпроси, свързани с програмиране）
该板块直接给出代码片段并附参考答案，是文档中唯一带标准答案的实操板块，完整照录如下：
modulo(12, 5) // 2问题：实现一个求余函数，使
modulo(12, 5)返回 2。
"i'm a lasagna hog".split("").reverse().join("");问题：上面表达式返回什么？答案："goh angasal a m'i"
( window.foo || ( window.foo = "bar" ) );问题：
window.foo的值是什么？答案：若window.foo当前为 falsy 则为 "bar"，否则保持原值。（此题的英文原版同时出现在 src/questions/coding-questions.md）
var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar);问题：两处 alert 分别输出什么？答案：第一个 alert 输出 "Hello World"；第二个 alert 抛出 ReferenceError: bar is not defined（闭包作用域隔离所致，bar 在 IIFE 内声明，外部不可见）。
var foo = []; foo.push(1); foo.push(2);问题：
foo.length的值是多少？答案：2
对照英文主版的 src/questions/coding-questions.md，可看到更多同类题目：10 + '20'的类型转换、0.1 + 0.2 == 0.3、柯里化add(2)(5)、foo.x = foo = {n: 2}的赋值顺序、setTimeout与 Promise 微任务的输出顺序、四种.then()写法差异、IIFE 内var a = b = 3的隐式全局变量、return与换行导致的自动分号插入等——这些题与保加利亚语版编程题同源同构，可作为扩展练习。
3.11 趣味问题（Забавни въпроси）
- 你写过的最酷、最引以为傲的作品是什么？
- 你用的开发者工具中最喜欢什么？
- 你有业余项目吗？都是什么类型的？
- 你最喜欢 Internet Explorer 的哪一点？
- 你偏好怎么喝咖啡？
英文版 src/questions/fun-questions.md 现为 4 问（最近做的酷项目、开发者工具喜好、社区中激励你的人、业余项目），保加利亚语版保留了更多趣味性题目（IE 与咖啡），更适合作为面试收尾的轻松环节。
3.12 补充资源（Допълнителни ресурси）
文档末尾列出三份外部参考链接（原文为完整 URL，此处按仓库规范仅作文字说明，不展开外链）：
- Programmers Stack Exchange 上关于 Web 应用程序员应考虑的技术细节的讨论；
- NCZOnline 上《Interviewing the Front-End Engineer》一文；
- CSS-Tricks 上的 CSS 面试问题集。
四、使用方式与实战建议
4.1 在线阅读与本地构建
- 在线阅读：构建产物位于
/translations/bulgarian/index.html，从 src/translations.njk 生成的/translations/索引页可跳转到包括保加利亚语在内的所有语言版本。 - 本地构建：在当前仓库根目录执行
npm install后，通过 Eleventy（配置见 config/eleventy.config.js，依赖声明见 package.json）即可构建，输出目录为_site/，保加利亚语页面对应_site/translations/bulgarian/index.html。
4.2 面试使用建议
沿用文档开头的核心提示：不建议对同一候选人使用全部问题（那会耗费数小时）。更合理的做法是：
- 根据岗位技能矩阵（HTML/CSS/JS/性能/测试/网络）从对应板块中挑选 5～10 题；
- 利用文档中的开放性问题（如综合板块的工程流程、JS 板块的闭包与事件循环）引导讨论，观察候选人的思维方式而非只求标准答案；
- 用「编程问题」板块的带答案代码题做快速笔试，检验基础语法与作用域理解；
- 面试前可参考文档推荐的 Rebecca Murphey《Baseline For Front-End Developers》一文（原文以外部链接形式给出，此处仅说明其存在）作为提问前的背景阅读；
- 若需要更多英文原题与近年新增题目，直接对照主版本各分册： general-questions.md、html-questions.md、css-questions.md、javascript-questions.md、testing-questions.md、performance-questions.md、network-questions.md、coding-questions.md、fun-questions.md。
五、文档与仓库的事实关系小结
| 事实点 | 证据位置 |
|---|---|
| 保加利亚语是仓库登记的 33 种翻译语言之一 | src/_data/translations.json |
保加利亚语页面输出路径为/translations/bulgarian/index.html | src/translations/bulgarian/README.md 的 Front Matter |
翻译索引页遍历translations.all生成语言列表 | src/translations.njk |
| Markdown 经 markdown-it 渲染、标题自动生成锚点 | config/eleventy.config.js |
页面布局由layouts/page.njk提供标题与正文输出 | src/_includes/layouts/page.njk |
| 各板块英文原题与扩展题目 | src/questions/ 下的 9 个分册 |
综上，这份保加利亚语 README 是一份内容充实、可直接用于面试实操的完整题库文档：它继承了英文主版的九大知识域，保留了 jQuery 板块与带标准答案的编程题，并通过仓库的 Eleventy 多语言构建管线被发布为独立静态页面。对照主版本分册阅读，既能补全新增题目，也能在翻译与原文的差异中洞察题库的历史演进。
赞
- 教程
- 前端
【免费下载链接】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
相关推荐
vllm-omni CUDA Graph 加速实践：从 TTS 码预测器参考骨架到仓库生产实现
vllm omni CUDA Graph 加速实践：从 TTS 码预测器参考骨架到仓库生产实现 在 vllm omni 的 TTS 推理链路中，代码预测器（co
教程前端Front-end Developer Interview Questions 印地语译本全解析：覆盖 9 大主题的完整前端面试题库
Front end Developer Interview Questions 印地语译本全解析：覆盖 9 大主题的完整前端面试题库 本文以 印地语译本 htt
教程前端韩语版前端面试题库：基于 Front-end Developer Interview Questions 的完整面试问题分类指南
韩语版前端面试题库：基于 Front end Developer Interview Questions 的完整面试问题分类指南 本指南以开源仓库 Front
教程前端
上一篇：vLLM-Omni 部署 IndexTTS-2 实战：单卡 GPU 上的声音克隆 TTS 与情感控制
下一篇：@replexica/integration-directus 演进与实现全解：在 Directus CMS 中接入 Replexica AI 本地化引擎
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考