前端面试会问到的问题

掌握这些，面试不再愁

前端面试中，面试官会从多个维度考察求职者的能力。以下为大家详细介绍前端面试常问到的问题。

基础知识类问题

这类问题主要考察对 html、css、javascript 等基础技术的掌握程度。比如，面试官可能会问：“请简述 html5 有哪些新特性？”，html5 新特性包括语义化标签（如 article、section 等）、本地存储（localstorage 和 sessionstorage）、多媒体元素（video 和 audio）等。还可能问：“css 中盒模型是怎样的？”，盒模型由内容区（content）、内边距（padding）、边框（border）和外边距（margin）组成。像在实际项目中，合理运用盒模型才能准确布局页面元素。

框架与库相关问题

如今前端开发中，vue、react 等框架和库使用广泛。面试官会问：“vue 的响应式原理是什么？”，vue 通过 object.defineproperty() 方法实现数据劫持，当数据发生变化时，会触发相应的更新操作。对于 react，可能会问：“react 中的生命周期函数有哪些，分别在什么阶段执行？”，例如 componentdidmount 会在组件挂载后执行，适合进行网络请求等操作。比如在开发一个电商商品列表页面时，使用 react 框架，就需要利用生命周期函数来获取商品数据并渲染页面。

性能优化问题

性能优化是前端开发的重要环节。面试官可能会问：“如何优化网页的加载速度？”，可以从压缩代码（包括 html、css、javascript）、合并文件、使用 cdn 加速、优化图片（压缩图片大小、选择合适的图片格式）等方面回答。例如，在一个新闻网站项目中，通过压缩图片和代码，能显著提升页面的加载速度，给用户更好的体验。还可能问：“如何进行 css 性能优化？”，可以减少内联样式、避免使用行内样式、优化选择器等。

项目经验问题

面试官通常会让求职者介绍自己参与过的项目。会问：“在项目中遇到过哪些难题，是如何解决的？”，比如在一个多页面应用中，遇到页面切换卡顿的问题，通过分析发现是大量 dom 操作导致的，于是采用虚拟列表技术，只渲染可见区域的 dom 元素，解决了卡顿问题。还会问：“项目中使用了哪些技术栈，为什么选择它们？”，在开发一个社交类小程序时，选择使用 vue 框架，是因为它简单易用、学习成本低，且有丰富的生态系统。

跨域问题

跨域是前端开发中常见的问题。面试官可能会问：“什么是跨域，有哪些解决方法？”，由于浏览器的同源策略，不同源的页面之间无法直接进行数据交互，这就是跨域。解决方法有 jsonp（只支持 get 请求）、cors（跨域资源共享，需要服务器端配合设置响应头）、代理服务器等。比如在开发一个前后端分离的项目时，前端和后端部署在不同的域名下，就需要解决跨域问题，可采用 cors 方法，在服务器端设置响应头允许跨域请求。