前端高级工程师面试题

涵盖多领域，助力面试通关

在前端高级工程师的面试中，会涉及多个方面的考察。下面我们就来详细看看常见的面试题类型。

基础知识类

这部分主要考察对 html、css、javascript 等基础技术的掌握。比如，问你 html5 有哪些新特性。html5 新增了语义化标签，像 header、nav、article、section、footer 等，这些标签让页面结构更清晰，便于搜索引擎解析。还新增了本地存储（localstorage 和 sessionstorage），可以在浏览器端存储数据，减少与服务器的交互。在 css 方面，可能会问如何实现元素的水平和垂直居中。对于行内元素，可以使用 text-align: center 和 line-height 等于元素高度的方法；对于块级元素，水平居中可以用 margin: 0 auto，垂直居中在现代布局中可以使用 flexbox 或 grid 布局。

框架与库类

现在前端开发离不开各种框架和库，如 react、vue、angular 等。以 react 为例，可能会问你对虚拟 dom 的理解。虚拟 dom 是一种轻量级的 javascript 对象，它是真实 dom 的抽象表示。react 通过对比新旧虚拟 dom 的差异，只更新需要更新的真实 dom 节点，从而提高渲染效率。比如，当一个组件的状态发生变化时，react 会生成新的虚拟 dom，然后与旧的虚拟 dom 进行对比，找出差异并更新到真实 dom 上。

性能优化类

性能优化是前端开发的重要环节。常见的问题是如何优化网页的加载速度。可以从多个方面入手，如压缩代码，包括 html、css、javascript 的压缩，减少文件大小。使用 cdn 加速，将静态资源分发到离用户最近的节点，提高资源加载速度。还可以进行图片优化，选择合适的图片格式，如 jpeg 适合照片，png 适合图标等，并且对图片进行压缩。例如，一个电商网站，通过压缩代码和图片优化，页面加载速度从原来的 5 秒缩短到了 2 秒，大大提升了用户体验。

安全相关类

前端安全也是面试中常考的内容。比如，问你如何防范 xss（跨站脚本攻击）。可以对用户输入进行过滤和转义，避免恶意脚本注入。在输出数据时，使用安全的方式进行渲染，如使用 innertext 而不是 innerhtml。对于 csrf（跨站请求伪造），可以使用验证码、验证请求来源等方式进行防范。比如，一个论坛网站，通过对用户输入的内容进行过滤，有效防止了 xss 攻击，保障了用户信息安全。

项目经验类

面试官通常会让你介绍一个自己做过的项目。在介绍时，要清晰地阐述项目的背景、目标、使用的技术栈以及遇到的问题和解决方案。比如，你做过一个在线教育平台项目，背景是满足用户在线学习的需求，目标是提供优质的课程服务。使用了 react 框架搭建前端界面，node.js 作为后端服务。在项目中遇到了性能问题，通过代码分割和懒加载的方式解决，提高了页面的加载速度。