教程前端【免费下载链接】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点击查看免费下载本文以仓库中 阿拉伯语版面试题库 为骨架系统梳理这份由 H5BP 社区维护的前端候选人考察清单的完整结构、九大题型分类与全部核心问题并结合 src/questions 下的英文原版题库与 Eleventy 构建配置说明多语言版本的发布机制与 RTL 布局实现。读完本文你将掌握如何按岗位需求快速筛选题目、理解每道题的考察意图并能基于仓库源码复现或二次开发一套属于自己的多语言前端面试题库站点。这份题库是给谁用的用途与使用原则阿拉伯语版开篇即明确了这份文档的定位它是一份用于筛选前端岗位候选人的面试题集合由 H5BPHTML5 Boilerplate社区长期维护。使用上有两条核心原则不要对同一位候选人使用全部题目——原文档明确不建议将所有问题用在同一名候选人身上因为完整过一遍会耗时数小时正确做法是根据岗位要求从清单中挑选一部分题目定向考察候选人是否具备所需技能。多数问题没有标准答案——原文档特别提醒很多题目是开放式的比起唯一正确答案它们更容易引出有价值的讨论让你比预期更深入地了解一个人的实际能力。这与英文版 README.md 的定位完全一致英文版同样强调选择清单中的少数几项即可帮助你筛出所需技能并注明许多问题是开放式的能带来比直接回答更有价值的讨论。从仓库结构看这份题库被组织为两种形态src/questions/下的英文原版 Markdown 文件以及src/translations/下覆盖三十多种语言的翻译版本阿拉伯语版即是其中之一。内容总览九大题型分类阿拉伯语版将全部问题组织为九个板块与英文原版一一对应板块阿拉伯语文档位置英文原版一般问题أسئلة عامةsrc/translations/arabic/README.mdgeneral-questions.mdHTML 问题أسئلة HTML同上html-questions.mdCSS 问题أسئلة CSS同上css-questions.mdJavaScript 问题أسئلة JS同上javascript-questions.md软件测试问题Testing同上testing-questions.md性能问题Performance同上performance-questions.md网络问题Network同上network-questions.md编程题أسئلة برمجة同上coding-questions.md趣味问题أسئلة مسلية同上fun-questions.md这套分类覆盖了前端面试的完整维度从工程素养与学习习惯一般问题到 HTML/CSS/JS 三大语言基础再到测试、性能、网络等专项能力最后用编程题检验动手能力、用趣味问题活跃气氛。下文逐类展开完整继承阿拉伯语版的所有题目。一般问题考察工程素养与思维方式这一类问题不直接考语法而是通过候选人的回答判断其学习习惯、问题解决能力、工作流程与行业视野。阿拉伯语版完整收录如下附考察要点昨天/这周你学到了什么学习主动性编程中最让你兴奋或感兴趣的是什么内在动机最近遇到的技术挑战是什么你是怎么解决的问题拆解与复盘能力构建或维护新站点时你用过哪些提升性能的技术能否描述你最近用过的 SEO 最佳实践或技巧关于前端安全你处理过哪些常见问题或最新问题近期项目中你为提升代码可维护性做了哪些具体事谈谈你偏好的开发环境。你熟悉哪些版本控制系统能否描述你创建网页时的工作流程如果有 5 份不同的样式表你会怎样把它们最好地整合进站点能否解释 progressive enhancement 与 graceful degradation 的区别你会如何优化网站的 assets/resources静态资源浏览器从同一域名同时下载多少资源例外情况有哪些注现代浏览器通常对同一域名有并发连接数上限且通过多域名分片可提升并行度说出三种降低页面加载时间的方法感知加载或实际加载。如果加入一个项目团队用 Tab 缩进而你用空格你会怎么做协作与规范描述你如何创建一个简单的幻灯片页面。如果今年只能精通一项技术你会选什么解释标准与标准组织standards bodies的重要性。什么是 FOUCFlash of Unstyled Content无样式内容闪烁如何避免解释 ARIA 与屏幕阅读器screenreaders以及如何构建无障碍accessible网站。解释 CSS 动画与 JavaScript 动画各自的优缺点。CORS 代表什么它解决的是什么问题阿拉伯语版这部分的覆盖面与英文原版一致英文原版 general-questions.md 还额外补充了如何与老板/合作者处理分歧用什么资源学习前端最新进展做好前端开发者需要哪些技能描述从输入 URL 到页面加载的过程SSR 与 CSR 的差异及静态渲染、再水合等进阶问题可用于更深层次的考察。HTML 问题考察标记语言的深度理解HTML 板块聚焦文档语义、多语言处理、浏览器渲染机制与 Web 存储阿拉伯语版完整问题如下doctype是做什么的全标准模式full standards mode、近似标准模式almost standards mode与怪异模式quirks mode有什么区别HTML 与 XHTML 有什么区别以application/xhtmlxml提供页面会有什么问题如何提供包含多种语言内容的页面在设计或开发多语言站点时要注意哪些问题data-属性有什么用途将 HTML5 视为开放的 Web 平台它的构建基石building blocks是什么解释cookie、sessionStorage与localStorage的区别。解释script、script async与script defer的区别。为什么通常建议把 CSSlink放在head之间、把 JSscript放在/body之前以及有哪些例外什么是 progressive rendering渐进式渲染你用过不同的 HTML 模板语言templating languages吗英文原版 html-questions.md 在此基础上补充了srcset图片响应式属性、canvas与svg的区别、HTML 空元素empty elements等问题。这批题目非常适合考察候选人是否理解浏览器如何解析、渲染文档以及如何为多语言、无障碍场景编写正确语义的 HTML。CSS 问题从盒模型到布局体系的完整考察CSS 板块是阿拉伯语版中题目最密集的板块之一完整覆盖选择器、布局、层叠、性能与工程化CSS 中 class 与 id 有什么区别CSS 的 resetting 与 normalizing 有什么区别你选哪个为什么解释 Floats 及其工作原理。解释 z-index 以及 stacking context层叠上下文是如何形成的。解释 BFCBlock Formatting Context块级格式化上下文及其工作原理。有哪些清除浮动clearing技术各自适合什么场景解释 CSS sprites你会在页面或站点中如何实现它们你偏好哪些图片替换image replacement方法什么场景用哪种如何修复特定浏览器的样式问题如何让你的页面在特性受限旧浏览器中正常工作你使用哪些方法/流程有哪些不同的方法可以隐藏内容、同时只对屏幕阅读器可见你用过 grid 系统吗如果用过你偏好哪一个你用过 media queries 或专门的移动端布局吗你熟悉 SVG 样式设计吗如何优化页面的打印样式写出高效 CSS 时有哪些常见坑使用 CSS 预处理器preprocessors的优缺点是什么描述你使用过的 CSS 预处理器的优点与缺点。如何使用非系统字体实现网页设计稿web design comp解释浏览器如何确定某个元素匹配哪个 CSS selector。描述 pseudo-elements伪元素并讨论它们的用途。解释 box model盒模型以及如何用 CSS 让浏览器以不同盒模型渲染你的布局。* { box-sizing: border-box; }是做什么的有什么好处列出你能想到的所有display属性值。inline 与 inline-block 有什么区别position属性中 relative、fixed、absolute 与 static 各有什么不同CSS 中的 C 代表 Cascading层叠。样式分配优先级如何确定你如何利用这一特性你在生产环境或本机用过哪些 CSS 框架你会如何改进/改造它们你用过或试过 CSS Flexbox 或 Grid 吗responsive design 与 adaptive design 有什么区别你处理过 retina 图形吗什么时候、用了什么方法有什么理由让你用translate()而不是 absolute positioning或反之为什么英文原版 css-questions.md 还补充了选择器优先级specificity、nth-of-type()与nth-child()的区别、px/em/rem 字号差异、CSS Grid 与 Flexbox 的取舍、fixed/fluid/responsive 布局差异等题目可与阿拉伯语版互为补充。JavaScript 问题语言机制与运行时核心JS 板块是考察深度最集中的部分阿拉伯语版覆盖事件、作用域、原型、异步与模块化等主题解释 event delegation事件委托。解释 JavaScript 中this如何工作。解释 prototypal inheritance原型继承如何工作。你如何看待 AMD 与 CommonJS解释为什么function foo(){ }();不能作为 IIFE 工作需要如何修正才能构成正确的 IIFEnull、undefined与 undeclared 变量有什么区别你会如何检查这些状态什么是 closure闭包如何/为什么使用它匿名函数anonymous functions的典型用例是什么你如何组织你的代码module pattern、classical inheritance 等host objects 与 native objects 有什么区别function Person(){}、var person Person()与var person new Person()有什么区别Function.call与Function.apply的区别是什么解释Function.prototype.bind。你什么时候会使用document.write()feature detection、feature inference 与 UA string 之间有什么区别尽可能详细地解释 Ajax。使用 Ajax 的优缺点是什么解释 JSONP 如何工作以及为什么它其实不是真正的 Ajax。你用过 JavaScript templating 吗如果用过用了哪个库解释 hoisting变量提升。描述 event bubbling事件冒泡。attribute 与 property 有什么区别为什么扩展内置 JavaScript 对象是坏主意document load 事件与 document DOMContentLoaded 事件有什么区别与有什么区别解释与 JavaScript 相关的 same-origin policy同源策略。让下面的代码正常工作duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]为什么叫 Ternary三元运算符Ternary 这个词指什么什么是use strict使用它的优缺点是什么写一个循环迭代到 100在 3 的倍数输出 fizz、5 的倍数输出 buzz、3 和 5 的公倍数输出 fizzbuzz。为什么一般来说让 global scope全局作用域保持干净不动是个好主意为什么可能用 load 这类事件这个事件有缺点吗你知道哪些替代方案为什么可能用它们解释什么是 single page app以及如何让它对 SEO 友好。你对 Promises 及/或其 polyfill 的使用经验如何使用 Promises 替代 callbacks 有哪些优缺点用编译到 JavaScript 的语言写代码有哪些优缺点你用什么工具和方法调试 JavaScript 代码你用什么语言结构遍历对象属性与数组元素解释 mutable 与 immutable objects 的区别。JavaScript 中什么是 immutable object 的示例immutability不可变性的优缺点是什么你如何在代码中实现 immutability解释 synchronous 与 asynchronous functions 的区别。什么是 event loop事件循环call stack 与 task queue 有什么区别解释function foo() {}与var foo function() {}中foo用法的区别。英文原版 javascript-questions.md 还包含事件捕获、类型强制转换type coercion、let/var/const差异、ES6 class 与 ES5 构造函数、箭头函数、高阶函数、解构、模板字符串、柯里化、展开/剩余语法、while与do-while、event.target与event.currentTarget、preventDefault()与stopPropagation()等大量补充题目构成一份完整的 JS 深度面试清单。编程题现场手写代码检验真功夫编程题板块给出了带代码片段的实操题是面试中最适合现场演练的部分。阿拉伯语版完整保留如下题目附答案要点1.foo的值是多少var foo 10 20;要点数字与字符串相加触发类型转换结果为字符串1020。2. 如何让下面的代码正常工作add(2, 5); // 7 add(2)(5); // 7要点考察柯里化currying与闭包add需支持一次性接收两个参数或返回一个可再次调用的函数。3. 下面代码的返回值是什么im a lasagna hog.split().reverse().join();要点考察字符串方法链式调用结果为反转后的字符串goh angasal a mi。4.window.foo的值是什么( window.foo || ( window.foo bar ) );要点考察||的短路求值window.foo初始为undefinedfalsy因此执行赋值最终值为bar。5. 下面两个 alert 的输出是什么var foo Hello; (function() { var bar World; alert(foo bar); })(); alert(foo bar);要点考察闭包与作用域第一个 alert 输出Hello World第二个 alert 中bar在函数外部不可见会抛出ReferenceError。6.foo.length的值是什么var foo []; foo.push(1); foo.push(2);要点push后数组包含两个元素foo.length为2。7.foo.x的值是什么var foo {n: 1}; var bar foo; foo.x foo {n: 2};要点考察引用赋值与连续赋值求值顺序bar仍指向原对象因此bar.x为{n: 2}而foo.x为undefinedfoo已被重新指向新对象。8. 下面的代码输出什么console.log(one); setTimeout(function() { console.log(two); }, 0); console.log(three);要点考察事件循环与宏任务调度输出顺序为one、three、two——setTimeout即使延迟为 0 也属于异步宏任务会等同步代码执行完后再执行。英文原版 coding-questions.md 还补充了0.1 0.2 0.3浮点精度题、四种 Promise 链式写法对比、(function(){ var a b 3; })()的隐式全局变量题以及return换行导致的 ASI自动分号插入陷阱题可作为编程题的扩充题库。软件测试、性能与网络问题专项能力考察这三个板块问题数量少但针对性强分别考察测试素养、性能调优意识与网络协议理解。软件测试Testing——阿拉伯语版收录测试代码的优缺点是什么你用什么工具测试代码功能unit test单元测试与 functional/integration test功能/集成测试有什么区别code style linting tool代码风格检查工具的目的是什么英文原版 testing-questions.md 补充了测试最佳实践有哪些。性能Performance——阿拉伯语版收录你用什么工具定位代码中的性能问题有哪些方法可以改善网站的滚动scrolling性能解释 layout、painting 与 compositing 之间的区别。英文原版 performance-questions.md 与此完全一致。网络Network——阿拉伯语版收录传统上为什么从多个域名提供站点静态资源更好尽可能详细描述从输入网站 URL 到页面加载完成的整个过程。Long-Polling、Websockets 与 Server-Sent Events 有什么区别解释以下请求/响应头If-Modified-...、Expires、Date、Age的区别Do Not TrackCache-ControlTransfer-EncodingETagX-Frame-Options什么是 HTTP methods列出你认识的所有 HTTP 方法并解释它们。英文原版 network-questions.md 补充了域名预解析domain pre-fetching与 CDN 两个话题。趣味问题面试收尾的暖场环节面试接近尾声时这类轻松问题有助于了解候选人的性格、热情与社区参与度。阿拉伯语版收录你最近做过什么很酷的项目你喜欢所用开发工具中的哪些方面在前端社区中谁激励着你你有个人项目pet projects吗是哪一类你在 Internet Explorer 中最喜欢的功能是什么你喜欢怎么喝咖啡英文原版 fun-questions.md 收录了前四条阿拉伯语版额外补充了后两条颇有趣味性。仓库如何把阿拉伯语版发布成站点RTL 与国际化的实现阿拉伯语版并不仅仅是一份 Markdown 文档它在仓库中还被配置为一个可独立发布的站点页面。从 src/translations/arabic/README.md 的 front matter 可以看出title: أسئلة مقابله شخصية في تطوير واجهةالويب layout: layouts/page.njk rtl: true permalink: /translations/arabic/index.html lang : ar四个字段分别定义了页面的阿拉伯语标题、使用的模板、输出路径、语言标识而rtl: true是关键——它让页面启用从右到左的排版。结合 布局模板 可以看到rtl变量被用于给body添加rtl类body class{% if rtl %}rtl {% endif %}从而切换 RTL 样式同时html langar正确声明了语言配合 assets/css/variables.css 与 content.css 中的 RTL 规则完成视觉排版。页面的渲染链路如下Eleventy配置文件以src为输入目录将src/translations/arabic/README.md按 front matter 指定的layouts/page.njk模板渲染page.njk 继承 default.njk后者负责输出完整的 HTML 骨架、内联压缩后的 CSS 与 JS、SEO metaOpen Graph、Twitter Card、schema.org Article 标记以及跳转链接。配置中启用了EleventyI18nPlugindefaultLanguage: en说明站点整体以英语为默认语言、阿拉伯语作为翻译语言共存。仓库通过 site.json 与 translations.json 维护站点元数据与翻译导航导航组件 会把各语言版本串成多语言入口。如果你要查看所有可用语言的列表可以直接浏览 src/translations 目录——它覆盖了从阿拉伯语、中文、法语到越南语等三十余种语言全部以同名README.md存放。项目渊源与贡献者阿拉伯语版在文末记录了这份文档的来历它始于2009 年由 paul_irish、bentruyman、cowboy、ajpiano、SlexAxton、boazsender、miketaylr、vladikoff、gf3、jon_neal 等开发者共同发起此后陆续收到来自超过100 位开发者的贡献。仓库中的 contributors.json 与 maintainers.json 以结构化数据形式维护了贡献者与维护者名单英文 README.md 则列出了当前维护者 roblarsen 以及按 ALL-CONTRIBUTORS 规范记录的全部贡献者表格包含翻译Translation、文档Documentation、基建Infrastructure等贡献类型标注——阿拉伯语版正是这套多语言协作体系的组成部分。总结如何使用这份题库要高效使用这套题库建议遵循以下路径按岗位裁剪从九大板块中挑选与目标岗位最相关的 35 个板块而非全部 150 道题一次问完。开放式引导对没有标准答案的问题追问为什么你怎么验证有没有替代方案借讨论评估深度。动手题现场写编程题板块如柯里化add、事件循环输出顺序、数组复制适合在白板或共享编辑器现场演练检验真实编码能力。对照双语扩展以阿拉伯语版 README 为快速清单需要更多深挖时对照英文原版 src/questions 下对应文件两份内容互为补充。借力多语言生态如果你的候选人团队是多语言的可以直接复用 src/translations 下现成的三十余种语言版本无需自行翻译。无论你是面试官要筛选前端候选人还是开发者想用来自测查漏补缺这份从 2009 年延续至今、由上百位开发者共同维护的题库都是一份经过实战检验的参考资源。赞分享教程前端【免费下载链接】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点击查看免费下载相关推荐vllm-omni CUDA Graph 加速实践从 TTS 码预测器参考骨架到仓库生产实现vllm omni CUDA Graph 加速实践从 TTS 码预测器参考骨架到仓库生产实现 在 vllm omni 的 TTS 推理链路中代码预测器co教程前端韩语版前端面试题库基于 Front-end Developer Interview Questions 的完整面试问题分类指南韩语版前端面试题库基于 Front end Developer Interview Questions 的完整面试问题分类指南 本指南以开源仓库 Front教程前端Kine监控与运维Prometheus指标收集与健康检查全攻略Kine监控与运维Prometheus指标收集与健康检查全攻略 Kine作为一款轻量级的Kubernetes存储后端允许将Kubernetes数据存储在My云原生后端上一篇5分钟终极指南用ncmdumpGUI轻松解密网易云音乐NCM文件下一篇PPTTimer5分钟掌握专业演讲时间管理的终极免费工具创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考