教程前端【免费下载链接】Front-end-Developer-Interview-QuestionsA 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/spanish/README.md 为核心骨架系统梳理这份面向招聘者与求职者的前端面试题库从通用问题、HTML/CSS/JavaScript 专项到代码演练、测试、性能、网络与趣味问题。读完本文你将掌握该文档的完整题单与出题逻辑同时了解这些题目在仓库主题库src/questions/与 Eleventy 静态站点构建体系中的对应关系可直接用于候选人评估、自我测验或题库二次开发。一、文档定位一个仓库多种语言的面试题单Front-end Developer Interview Questions 是一个以「面试题清单」为核心的开源项目项目主页文档 README.md 明确写道这些前端面试题可用于筛选候选人、自我测验或者干脆忽略它。仓库刻意强调一个使用原则——不建议在同一位候选人身上使用全部题目那会耗费数小时正确的做法是从清单中挑选若干条目针对性考察你需要的技能点同时许多题目是开放式的能引出比标准答案更能反映候选人真实能力的深入讨论。西班牙语文档正是这份主清单的完整翻译版其 frontmatter 配置了站点布局与独立路由--- title: GUÍA DE PREGUNTAS PARA ENTREVISTAS DE TRABAJO layout: layouts/page.njk permalink: /translations/spanish/index.html lang: es ---从配置可见该翻译页面复用 src/_includes/layouts/page.njk 布局继承 default.njk通过lang: es声明西班牙语并由 config/eleventy.config.js 驱动的 Eleventy 构建为独立页面。仓库的翻译目录体系记录在 src/_data/translations.json 中西班牙语Spanish与阿拉伯语、中文、日语等 33 种语言并列题目分类的站点导航数据则维护在 src/_data/questions.json包含 General、HTML、CSS、JavaScript、Testing、Performance、Network、Coding、Fun 九个内部章节另有外链的 Accessibility 章节。西班牙语文档的主体结构如下Índice目录9 个锚点章节9 大问题分类通用、HTML、CSS、JavaScript、代码、测试、性能、网络、趣味Contribuyendo贡献指南贡献者、贡献方式、许可证接下来按章节逐类展开全部题单并为每类题目补充「考核意图」与仓库溯源说明。二、Preguntas generales通用问题——考察学习力、工程观与软技能通用问题对应英文版 src/questions/general-questions.md不直接考语法而是考察候选人的持续学习习惯、问题解决路径、性能/SEO/安全意识和团队协作方式。完整题单如下¿Qué aprendió ayer/esta semana?你昨天/本周学到了什么——考察学习持续性¿Qué es lo que le entusiasma o le interesa de la programación?编程中最让你兴奋/感兴趣的是什么¿Podría describir algún problema técnico que haya resuelto recientemente y cómo lo resolvió?描述最近解决的一个技术难题及解法¿Podría describir algunas técnicas que haya utilizado al momento de construir un nuevo sitio web o dar mantenimiento a uno existente para incrementar su rendimiento?建站或维护时用过哪些性能优化手段¿Podría explicar algunas prácticas o técnicas de SEO que haya utilizado recientemente?最近用过的 SEO 实践或技巧¿Qué puede decir acerca de técnicas comunes o problemas que haya resuelto recientemente respecto a la seguridad de aplicaciones front-end?前端安全方面的常见技术或近期解决的问题¿Qué acciones ha realizado en proyectos recientes para mejorar la manteniabilidad de su código?为提升代码可维护性做过哪些动作Hable acerca de tu ambiente de desarrollo preferido.聊聊你偏好的开发环境¿Puede describir el proceso que sigue cuando crea una página web?描述你创建网页的流程¿Qué sistemas de control de versiones ha utilizado?用过哪些版本控制系统¿Podría describir el proceso que sigue cuando creas una página web?描述创建网页的流程——原文在此重复出现属文档原貌保留Si tuviera cinco hojas de estilo distintas, ¿cómo las integraría a su página web?若有 5 份样式表如何整合进站点——考察 CSS 组织与构建意识¿Puede describir la diferencia entreProgressive EnhancementyGraceful Degradation?渐进增强与优雅降级的区别——经典基础概念¿Cómo optimizaría los recursos de un sitio web?如何优化站点资源¿Cuántos recursos se pueden descargar simultáneamente de un mismo dominio? ¿Cuáles son las excepciones?同一域名下浏览器并发下载多少资源例外有哪些Mencione tres formas para disminuir el tiempo de carga de una página (tiempo real o percibido).列举三种缩短页面加载时间的方法含实际或感知时间Si se ha unido a un proyecto y los desarrolladores usan tabs y usted usa espacios, ¿qué hace?团队用 Tab、你用空格你会怎么办——考察协作与规范服从Describa como elaboraría una página con una galería sencilla.如何实现一个简单画廊页Si pudiera elegir una tecnología para dominar este año, ¿cuál sería?今年最想精通哪项技术Explique la importancia de estándares y los grupos que los definen.标准及其制定组织的重要性¿Sabe que es elFlash Of Unstyled Content?, ¿cómo lo evita?什么是无样式内容闪烁 FOUC如何避免Explique qué son lasAplicaciones de internet enriquecidas y accesiblesy los lectores de pantalla, además de cómo hacer una página web accesibleARIA 与屏幕阅读器是什么如何让网页可访问Explique las ventajas y desventajas de usar animaciones en CSS en comparación con animaciones hechas con JavaScript.CSS 动画与 JS 动画的优劣¿Qué significaCORSy a qué problema está relacionado?CORS 是什么解决什么问题¿Cómo manejaría una discrepancia con su jefe o compañero de trabajo?如何与上司/同事处理分歧¿Qué recursos usa para aprender acerca de las últimas novedades en desarrollo web y diseño?通过哪些资源学习最新技术¿Cuáles cree que son las habilidades necesarias para ser un buen desarrollador front-end?优秀前端需要哪些技能¿En qué rol le gustaría desempeñarse?你希望担任什么角色Explique la diferencia entrecookies,session storageylocal storage.cookie、sessionStorage、localStorage 的区别¿Podría explicar qué sucede cuando ingresa una URL en el navegador?输入 URL 后浏览器发生了什么——经典全链路问题¿Cuál es la diferencia entreSSRyCSR? Hable acerca de los pros y contras de cada uno.SSR 与 CSR 的区别及优劣¿Está familiarizado con el concepto deStatic Rendering?是否熟悉静态渲染¿Qué puede decir acerca de la re-hidratación?关于再水合/Rehydration 你能说些什么考核意图解读这一组问题覆盖「学习能力第 1–2 题、工程复盘第 3 题、性能/SEO/安全第 4–6 题、代码质量第 7 题、工具链第 8–10 题、经典原理第 11–19 题、无障碍与渲染机制第 20–22、28–29 题」等多个维度其中「输入 URL 到页面渲染」与「SSR/CSR/静态渲染/再水合」是当下最热门的考点几乎贯穿了现代前端框架的核心议题。三、Preguntas específicas de HTMLHTML 专项——语义、存储与加载策略HTML 章节对应英文版 src/questions/html-questions.md共 13 题聚焦文档语义、多语言站点、浏览器存储、脚本加载顺序、响应式图片与 SVG/canvas 边界¿Qué función cumple eldoctype?doctype 的作用¿Cómo distribuiría una página con contenido en varios lenguajes?如何为多语言内容服务页面¿Qué consideraciones se deben tener cuando se diseñan/desarrollan sitios multi-lenguajes?多语言站点设计/开发要注意什么¿Para qué son buenos los atributosdata-?data-*属性的用途Si consideramos HTML5 como una plataforma web abierta, ¿cuáles son los componentes que constituyen HTML5?作为开放 Web 平台的 HTML5 由哪些组件构成Describa la diferencia entrecookies,sessionStorageylocalStorage.三者区别——与通用章节呼应Describa la diferencia entrescript,script asyncyscript defer.三种 script 加载方式的区别Generalmente, ¿por qué es una buena idea agregar la etiquetalinkdentro de la etiquetaheady la etiquetascriptjusto antes de cerrar la etiquetabody. ¿Conoces algún caso excepcional?为何link放head、script放/body前有无例外¿Qué es el renderizado progresivo?什么是渐进式渲染¿Por qué usaría el atributosrcseten una imagen? Explique el proceso que sigue el navegador al evaluar el contenido de este atributo.为何用srcset浏览器如何评估该属性¿Ha usado algún lenguaje de plantillas HTML?用过 HTML 模板语言吗¿Cuál es la diferencia entre los elementoscanvasysvg?canvas 与 svg 的区别¿Qué son los elementos vacíos en HTML?什么是空元素仓库佐证有趣的是本仓库自身就是一个「HTML 模板语言 多语言站点」的实践案例——页面由 Eleventy Nunjucks 模板.njk生成见 src/_includes/layouts/page.njk并通过src/_data/translations.json管理 33 种语言入口因此「多语言站点注意事项」「模板语言」这两题在本仓库中能找到最直接的工程实例。四、Preguntas específicas de CSSCSS 专项——从盒模型到现代布局CSS 章节对应英文版 src/questions/css-questions.md是体量最大的专项之一覆盖选择器机制、布局模型、层叠上下文、响应式与移动优先、预处理器、现代布局体系等完整知识树¿Qué es la especificidad de los selectores CSS y cómo funciona?选择器优先级 specificity 及其机制¿Cuál es la diferencia entre normalizar y resetear el CSS?, ¿Cuál elegiría y por qué?normalize 与 reset 的区别及选择Describa qué son los floats y su funcionamiento.float 及其工作原理Describa elz-indexy como se decide el contexto de apilado de elementos.z-index 与层叠上下文Describa el contexto de formato de bloques (BFC) y como funciona.块级格式化上下文 BFC¿Cuáles son las técnicas para usar la propiedadcleary en qué contexto es apropiado utilizar cada una?clear 的多种用法与适用场景¿Cuál es su enfoque al desarrollar páginas que dan soporte a navegadores con capacidades limitadas? ¿Qué técnicas o procesos utiliza?如何支持能力受限的浏览器¿Cuáles son las distintas formas para esconder contenido, pero mantenerlo disponible únicamente para lectores de pantalla?如何隐藏内容但保留给屏幕阅读器——无障碍考点¿Ha usado algún sistema para cuadrículas (grids) y cuál prefiere?用过网格系统吗偏好哪种¿Ha usado o implementado media queries o reglas específicas para dispositivos móviles?媒体查询与移动端规则¿Está familiarizado con aplicar estilos a SVGs?SVG 样式¿Podría dar un ejemplo de una propiedadmediadistinta ascreen?除 screen 外举一个 media 媒体类型的例子¿Cuáles son algunos de los trucos para escribir CSS eficiente?高效 CSS 的要点¿Cuáles son las ventajas y desventajas de utilizar pre-procesadores CSS? Mencione lo que le agrada y desagrada de los pre-procesadores que ha usado.CSS 预处理器的优劣¿Cómo implementaría un diseño que usa fuentes que no son web-safe?如何实现非 Web-safe 字体¿Puede explicar cómo determina un navegador qué elementos coinciden con un selector de CSS?浏览器如何判定元素匹配选择器Describa los pseudo-elementos y discuta sus usos.伪元素及用途¿Puede explicar cómo entiende elbox model(modelo de cajas) y como podría, mediante CSS, hacer que un navegador renderize su esquema usando diferentes modelos de cajas?盒模型与不同盒模型的切换¿Qué sucede al usar* {box-sizing: border-box;}. ¿Qué desventajas supone su uso?全局box-sizing: border-box的效果与代价¿Qué es la propiedaddisplayde CSS? ¿Podría dar algunos ejemplos de su uso?display 属性及其示例¿Cuál es la diferencia entreinlineyinline-block?inline 与 inline-block¿Cuál es la diferencia entre los selectoresnth-of-type()ynth-child()?nth-of-type 与 nth-child¿Cuál es la diferencia entre las posicionesrelative,fixed,absoluteystaticpara un elemento dado?四种定位方式¿Cuáles frameworks de CSS has usado en desarrollo o producción? ¿Cómo los mejoraría?用过哪些 CSS 框架如何改进¿Ha utilizado CSS Grid?用过 CSS Grid 吗¿Podría explicar la diferencia entre desarrollar un sitio web para serresponsivey utilizar una estrategiamobile-first?响应式与移动优先策略的区别¿Ha trabajado con tecnología retina?, ¿qué técnicas utilizó?Retina 屏适配技术¿Hay alguna razón por la cual preferiría usartranslate()en vez de el posicionamiento absoluto? ¿Alguna razón para hacer lo contrario?translate 与绝对定位的取舍¿En qué casos es útil la propiedadclearfixde css?clearfix 的使用场景¿Cuál es ls diferencia entre usar px, em o rem para definir tamaños de fuente?px/em/rem 字体单位的区别¿Podría dar un ejemplo de una pseudo-clase de CSS y un posible caso de uso?伪类示例与用例¿Cuál es la diferencia entre un elemento a nivel de bloque y un elemento en línea? Mencione algunos ejemplos de cada tipo de elemento.块级与行内元素各举例¿Cuál es la diferencia entre CSS Grid y Flexbox? ¿En qué casos preferiría usar uno sobre el otro?Grid 与 Flexbox 的区别及选型考核意图解读这组题目从「层叠与选择器机制」到「布局模型盒模型/BFC/浮动/定位」再到「现代布局Grid/Flexbox与响应式」构成了一条完整的 CSS 能力进阶路径其中box-sizing、translate() vs absolute、nth-of-type() vs nth-child()等是面试中区分「会用」与「理解原理」的高频题。五、Preguntas específicas de JavaScriptJavaScript 专项——语言机制与 ES6 演进JavaScript 章节对应英文版 src/questions/javascript-questions.md是全文题量最大、深度最高的部分覆盖事件机制、this、原型链、闭包、作用域、异步模型、ES6 新特性、面向对象等核心语言机制Explique el event delegation.事件委托Explique cómo funcionathisen JavaScript. ¿Puede dar un ejemplo de una de las maneras en que trabajar conthisha cambiado desde ES6?this的绑定机制ES6 后有何变化Explique cómo funciona la herencia de prototipos (prototypal inheritance) en JavaScript.原型继承¿Cuál es la diferencia entre variablesnull,undefinedyundeclared? ¿Cómo comprobarías que una variable refiere a alguno de esos valores?null/undefined/undeclared 的区别与检测¿Qué es un closure y cuando, o por qué usaría uno?闭包的定义与用途¿Qué características del lenguaje puede utilizar para iterar sobre propiedades de un objeto y elementos de un arreglo?遍历对象属性与数组元素的语言手段¿Podría describir cuál es la principal diferencia entre el cicloArray.forEach()y el métodoArray.map()y por qué elegiría uno sobre el otro?forEach 与 map 的区别与选型¿Puede hablar de un uso típico para una función anónima?匿名函数的典型用途¿Cuál es la diferencia entre objetos huésped (host objects) y objetos nativos?宿主对象与原生对象¿Cuál es la diferencia entre:function Person(){},var person Person()yvar person new Person()?三种调用形态的区别Esplique las diferencias entre el uso defooenfunction foo(){}yvar foo function(){}.函数声明与函数表达式¿Qué hacenFunction.callyFunction.apply? ¿Cuál es la diferencia más notable entre las dos?call 与 apply¿Puede explicar el uso deFunction.prototype.bind?bind 的用途¿Cuál es la diferencia entre detección de capacidades, inferencia de capacidades y usar la cadena del user agent?能力检测、能力推断与 UA 字符串¿Puede explicar en qué consiste el hoisting?变量提升¿Qué es la coerción de tipos? ¿Cuáles son los errores más comunes al utilizarla en JavaScript?类型强制转换及其常见陷阱¿Puede hablar sobre event bubbling?事件冒泡Describa qué es event capturing.事件捕获¿Cuál es la diferencia entre un atributo y una propiedad?attribute 与 property¿Cuáles son los pros y contras de extender objetos nativos de JavaScript?扩展原生对象的利弊¿Cuál es la diferencia entrey?宽松相等与严格相等Explique la política de mismo origen (same-origin policy) y sus repercusiones en JavaScript.同源策略及其影响¿Por qué reciben el nombre de sentencias ternarias? ¿Qué significa la palabra ternaria?三目运算符名称的由来¿Qué esuse strict;? ¿Cuáles son las ventajas y desventajas de usarlo?严格模式Mencione las ventajas y desventajas de escribir Javascript a través de otro lenguaje que transpile a Javascript.使用转译语言编写 JS 的利弊¿Qué herramientas y técnicas usa para depurar código Javascript?JS 调试工具与技巧Explique la diferencia entre objetos mutables y objetos inmutables. Mencione un ejemplo de un objeto inmutable en javascript. Mencione las ventajas y desventajas de la inmutabilidad. ¿Cómo puede usar la inmutabilidad en su código?可变与不可变对象、示例、优劣与实现Explique la diferencia entre funciones síncronas y asíncronas.同步与异步函数¿Qué es elevent loop? ¿Cuál es la diferencia entre la pila de llamadas y la cola de tareas?事件循环、调用栈与任务队列¿Cuáles son las diferencias entre variables declaradas usandolet,varoconst?let/var/const¿Cuáles son las diferencias entre los constructores de clases de ES6 y los constructores de funciones de ES5?ES6 class 与 ES5 构造函数¿Podría mencionar un caso de uso para la nueva sintaxis de funciones flecha (arrow functions)? ¿Qué diferencia tiene respecto a las funciones tradicionales?箭头函数¿Qué ventaja tiene utilizar la sintaxis de funciones flecha (arrow functions) para un método en un constructor?构造函数方法用箭头函数的优势Defina qué es una función de orden superior (higher order function).高阶函数¿Podría dar un ejemplo de desestructuración (destructuring) de un objeto o arreglo?解构¿Cómo se puede generar un string con lostemplate literalsde ES6?模板字符串¿Podría dar un ejemplo de una función curry? ¿Qué ventajas tiene usarla?柯里化¿Cuáles son los beneficios de usar el operadorspready cómo se diferencia del operadorrest?展开与剩余参数¿De qué manera puede compartir código entre archivos?跨文件共享代码¿Por qué necesitaría crear un miembro estático en una clase?静态成员¿Cuál es la diferencia entre los cicloswhileydo-whileen JavaScript?while 与 do-while¿Qué es una promesa? ¿En qué casos y cómo usaría una?Promise 的概念与使用¿Cómo podría utilizar los principios de la programación orientada a objetos en JavaScript?OOP 原则在 JS 中的应用仓库佐证英文主题库在 src/questions/javascript-questions.md 中还额外补充了两道事件 API 差异题event.targetvsevent.currentTarget、event.preventDefault()vsevent.stopPropagation()以及一组「Coding questions」小节——可见西班牙语文档忠实保留了 JS 章节的原始体量而英文版后续迭代补充了更多追问项如const对象属性可否修改、数组遍历的其它方法可作为对照阅读的扩展线索。六、Preguntas sobre código代码演练——四道经典题与完整代码代码章节对应英文版 src/questions/javascript-questions.md 末尾的 Coding questions以及独立的 src/questions/coding-questions.md提供 4 道可实际运行的代码题1. 让duplicate函数生效返回数组自身内容的复制拼接duplicate([1,2,3,4,5]) // [1,2,3,4,5,1,2,3,4,5]常见解法是arr.concat(arr)也可用展开语法[...arr, ...arr]。这道题考察对数组方法与原数组不可变性的理解。2. FizzBuzz——100 次循环打印Haga un cicloforde100iteraciones que imprimafizzen los múltiplos de3,buzzen los múltiplos de5yfizzbuzzen los múltiplos de3y5即3 的倍数打印fizz5 的倍数打印buzz同时是 3 和 5 的倍数打印fizzbuzz。注意判断顺序——应先判断「同时整除 3 与 5即 15 的倍数」否则会被前面的分支短路。这是经典的筛选与分支逻辑题。3. 判断以下代码的返回值console.log(hello || world) console.log(foo bar)hello || world返回hello||返回第一个真值foo bar返回bar返回最后一个真值操作数。此题考察 JavaScript 逻辑运算符的短路求值与「返回操作数而非布尔值」这一易混淆特性。4. 编写一个立即调用函数表达式IIFEEscriba una función auto-invocada (IIFE)典型写法为(function(){ ... })()考察函数表达式、作用域隔离与语法形态的掌握。延伸阅读若想获得更多代码演练素材主仓库的 src/questions/coding-questions.md 收录了十余道带代码片段的题目例如var foo 10 20; // 考察字符串拼接结果为 1020console.log(0.1 0.2 0.3); // 考察浮点精度falseadd(2, 5); // 7 add(2)(5); // 7 // 考察柯里化/函数重载(function(){ var a b 3; })(); // a 是函数局部变量undefinedb 是隐式全局变量3以及event loop顺序console.log(one)→Promise.resolve().then→setTimeout、Promise 链四种写法的差异、return换行陷阱foo1返回对象、foo2因自动分号插入返回undefined等进阶题。七、Preguntas sobre pruebas de código测试问题——质量保障的五问测试章节对应英文版 src/questions/testing-questions.md从投入产出权衡、工具选型、测试层级、静态检查与最佳实践五个维度提问Menciona ventajas y desventajas de realizar pruebas en el código测试代码的优缺点¿Qué herramientas usarías para probar la funcionalidad de tu código?用什么工具测试功能¿Cuál es la diferencia entre una prueba unitaria y una prueba funcional o de integración?单元测试与功能/集成测试的区别¿Cuál es el propósito de usar herramientas para verificar los estilos usados en el código?代码风格检查工具的目的¿Cuáles son algunas de las mejores prácticas al realizar pruebas?测试最佳实践考核意图解读这组问题重点不是「会不会写测试」而是「是否有测试意识与分层能力」——单元测试保证局部正确性集成/功能测试验证模块间协作Lint 工具风格检查在测试之前就把一类错误挡在门外。八、Preguntas sobre rendimiento性能问题——渲染管线的三层追问性能章节对应英文版 src/questions/performance-questions.md共 3 题聚焦性能问题定位、滚动优化与浏览器渲染管线¿Qué herramientas usarías para detectar un error en el rendimiento de tu código?用什么工具定位性能问题——如浏览器 DevTools Performance 面板、Lighthouse 等¿De qué formas podrías mejorar el rendimiento del scrolling en tu sitio web?如何改善滚动性能——如requestAnimationFrame、减少布局抖动 layout thrashing、必要时使用will-change与合成层优化Menciona las diferencias entre los términoslayout,paintingycompositing.layout/布局、painting/绘制、compositing/合成三者的区别——对应浏览器渲染管线中样式计算后的三个关键阶段考核意图解读第三题是浏览器渲染原理的核心考点——layout计算几何尺寸、painting绘制像素、compositing将图层合成输出能准确区分三者说明候选人理解「为什么某些属性触发重排、某些只触发重绘、某些只触发合成」这一性能优化的底层逻辑。九、Preguntas sobre redes网络问题——从 URL 到 HTTP 缓存网络章节对应英文版 src/questions/network-questions.md共 8 题覆盖资源分发策略、请求链路、实时通信、HTTP 头与缓存机制、CDNTradicionalmente, ¿Por qué es mejor servir los recursos estáticos del sitio desde múltiples dominios?传统上为何将静态资源放在多个域名——利用浏览器对单域名的并发连接数限制避免同一域名下的请求排队Intenta explicar el proceso desde el momento en el cual ingresas una URL en el navegador hasta que termina de cargar la página en tu pantalla.从输入 URL 到页面加载完成的完整过程——DNS 解析、TCP 连接、TLS、HTTP 请求、HTML 解析、资源加载与渲染¿Cuáles son las diferencias entreLong-polling,websocketsyserver-sent events?长轮询、WebSocket、SSE 的区别——三种服务端推送方案Explique las siguientes cabeceras de peticiones y respuestas:解释以下请求/响应头Diferencias entreExpires,Date,AgeyIf-Modified-...Expires/Date/Age/If-Modified-* 的区别——HTTP 缓存与时间头体系Do Not TrackDNT 追踪禁止头Cache-Control缓存控制头——max-age、no-cache、no-store等指令Transfer-Encoding传输编码——如chunked分块传输Etag实体标签——配合 If-None-Match 做条件请求X-Frame-Options点击劫持防护——DENY/SAMEORIGIN¿Qué son los métodosHTTP? Mencione y explique los que conozca.HTTP 方法——GET/POST/PUT/DELETE/PATCH/HEAD/OPTIONS 等¿Qué es el pre-fetching de dominio y cómo contribuye al rendimiento de una página web?域名预解析 pre-fetching 及其性能收益——提前完成 DNS 解析¿Qué es un CDN y cuáles son los beneficios de usar uno?CDN 及其收益——就近分发、缓存、降低源站压力考核意图解读本组题从「为什么多域名放静态资源」这类传统工程实践到 HTTP 缓存头族的精细化辨析Expires/Cache-Control/ETag构成强缓存与协商缓存的完整拼图再到实时通信协议选型覆盖了前端网络面试的全部高频主题。十、Preguntas divertidas趣味问题——从代码热情到团队契合趣味章节对应英文版 src/questions/fun-questions.md共 4 题用于在技术考核之外了解候选人的热情、工具偏好、灵感来源与个人项目¿Qué es lo más genial que ha programado y qué es lo que más le enorgullece de ello?你做过最酷/最引以为豪的程序是什么¿Cuáles son sus características favoritas de las herramientas de desarrollo que usa?最喜欢的开发工具特性¿Quién le inspira en la industria de desarrollo web?行业中谁激励了你¿Tiene algún proyecto personal? ¿De qué se trata?有个人项目吗使用建议这类开放问题放在面试收尾阶段非常合适能缓解候选人的紧张情绪同时从「主动性」与「热情」维度补充硬技能考核的盲区。十一、文档历史与仓库溯源西班牙语文档在末尾「Contribuyentes」章节记录了项目起源该文档于2009 年由多位前端开发者协作创建包括 paul_irish、bentruyman、cowboy、ajpiano、SlexAxton、boazsender、miketaylr、vladikoff、gf3、jon_neal、sambreed 与 iansym文档同时注明项目已接收超过 100 名开发者的贡献。这一说法与仓库 README.md 中 ALL-CONTRIBUTORS 列表相互印证——其中可以看到多位西班牙语翻译贡献者的记录如 #translation-shnere、#translation-cpvalente、#translation-baumannzone、#translation-slara、#translation-pnevares 等这解释了西班牙语文档得以长期维护的社区基础。仓库还提供 CONTRIBUTORS.md 与 LICENSE.md 供进一步查阅。十二、如何把这个仓库变成你的面试题库本地浏览主题库入口仓库根目录 README.md 提供全部章节索引各分类独立维护于 src/questions/ 目录下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。西班牙语文档src/translations/spanish/README.md 为独立自洽的完整版题单可直接作为西语团队或西语候选人的面试依据。构建为站点本地预览仓库使用Eleventy静态站点生成器构建配置见 config/eleventy.config.js数据结构集中维护在 src/_data/ 目录site.json站点元信息标题、描述、关键词、语言questions.json题库章节导航含内链章节与外链的 Accessibility 章节translations.json33 种翻译语言的入口注册。layout: layouts/page.njk指向的页面模板src/_includes/layouts/page.njk会在页面顶部渲染title/description正文区域直接输出 Markdown 内容并附「Edit this page」编辑入口default.njk 则负责完整的 HTML 骨架、CSS/JS 内联注入与 schema.org/Open Graph/Twitter 卡片元数据——这意味着每道题、每个翻译页面在构建后都自带 SEO 元信息天然适合搜索引擎与 LLM 检索引用。使用原则提醒每次面试只选取少量题目聚焦岗位所需技能避免用完整清单轰炸候选人优先使用开放式问题引导讨论从「解题过程」而非「标准答案」判断能力可以结合 src/questions/coding-questions.md 的代码题做现场笔试演练并以测试、性能、网络章节的题目做分层递进追问。结语西班牙语版 src/translations/spanish/README.md 并非一个简单的翻译副本而是完整继承了仓库 2009 年以来沉淀的九大面试题体系从考察学习力与工程观的通用问题到 HTML/CSS/JavaScript 的专项原理题再到代码演练、测试、性能、网络与趣味问题的完整闭环。无论你是招聘方需要搭建结构化面试题库还是求职者希望系统性查漏补缺这份文档连同 src/questions/ 下的英文主题库都是一份可以直接落地的实战资源。赞分享教程前端【免费下载链接】Front-end-Developer-Interview-QuestionsA 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中文版全指南九大分类题库与考点解析前端工作面试问题Front end Developer Interview Questions中文版全指南九大分类题库与考点解析 导读 本文以 H5BP教程前端Front-end-Developer-Interview-Questions 前端 JavaScript 面试题全解析59 个核心考点与编码实战Front end Developer Interview Questions 前端 JavaScript 面试题全解析59 个核心考点与编码实战 本篇技术指教程前端Front-end Developer Interview Questions 印地语译本全解析覆盖 9 大主题的完整前端面试题库Front end Developer Interview Questions 印地语译本全解析覆盖 9 大主题的完整前端面试题库 本文以 印地语译本 htt教程前端上一篇CANN/GE DataFlow Python示例指南下一篇Sassy Starter移动端适配终极指南如何在移动设备上实现最佳性能创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考