前端高频面试题含口语化通俗解答以下整理了前端面试中常考的题目解答尽量口语化、不绕弯贴合面试时的表达习惯不用死记硬背理解就好适合快速梳理记忆。一、基础概念类1. 堆和栈的区别是什么通俗解答两者都是JS里存数据的地方核心区别就3点记好就行存的东西不一样堆存引用类型比如对象、数组栈存基本类型比如数字、字符串和引用类型的地址内存管理不一样栈是系统自动分配、自动释放不用我们管堆是动态分配的大小不固定也不会自动释放访问方式不一样栈能直接操作里面的值按值访问堆不能直接访问只能通过地址操作这也是深拷贝、浅拷贝出现的原因。补充堆是“先进后出”栈是“先进先出”不用深扣知道这个区别就行。2. 什么是微任务、宏任务JS的执行顺序是怎样的通俗解答两者都是异步任务区别就是执行优先级不一样记好例子和顺序就不会错微任务优先级高常见的有Promise的then/catch/finally、process.nextTickNode里的、MutationObserver监听DOM变化的宏任务优先级低常见的有setTimeout、setInterval、I/O操作比如请求接口、setImmediate、requestAnimationFrame做动画的执行顺序先执行所有同步代码 → 再执行异步代码异步里先执行所有微任务 → 最后执行宏任务记口诀同步先异步后微任务比宏任务快一步。二、浏览器相关类3. 浏览器优化有哪些方法通俗解答优化核心就是“减少请求、缩小体积、加快加载”分5类记简单好懂图片处理减少请求/缩小体积用雪碧图把小图片拼在一起、Base64把小图转成字符串嵌在代码里、字体图标代替图片安卓端用webp格式图片更小减小资源大小webpack优化压缩HTML、CSS、JS代码图片也压缩JS还能弄乱代码防止别人抄袭也能缩小体积优化网络连接用CDN简单说就是就近取资源比如你在上海就从上海的服务器拿不用跑北京速度更快优化资源加载CSS放head里先加载样式避免白屏乱跳JS放body底部避免阻塞页面加载异步加载JS、按需加载模块、图片懒加载滚动到才加载减少重绘回流重绘就是改样式比如改背景色回流就是改布局比如改宽高回流一定会引发重绘重绘不一定回流优化方法用CSS3硬件加速让GPU帮忙减少卡顿。4. DOM优化的方法有哪些通俗解答核心就是“少操作DOM、高效操作DOM”记10个关键方法面试说5-6个就够缓存DOM比如多次用document.getElementById先存成变量不用每次都查减少DOM深度和数量页面DOM别嵌套太多比如套10层div没用的DOM及时删批量操作DOM比如要加10个li先在内存里拼好再一次性插到页面别插10次批量操作CSS别一个个改style用class一次性改在内存中操作DOM比如用documentFragment文档片段操作完再插入页面DOM元素离线更新先把DOM隐藏display: none操作完再显示DOM读写分离别读一次写一次比如先查offsetWidth再改style再查再改先集中读再集中写事件代理比如列表的li都要加点击事件给父盒子加一个不用每个li都加防抖和节流避免事件频繁触发比如输入框实时搜索、滚动事件及时清理环境比如移除没用的事件监听、定时器避免内存泄漏。5. 浏览器的强缓存和协商缓存是什么区别在哪通俗解答两者都是浏览器的缓存本地存资源副本下次不用重新下载核心区别是“用不用问服务器”先记缓存的好处省流量、减轻服务器压力、页面加载更快强缓存不用问服务器浏览器直接用本地缓存不发请求给服务器靠HTTP响应头的Expires旧版本绝对时间或Cache-Control新版本相对时间比如max-age3600就是缓存1小时控制命中后状态码是200from cache协商缓存要问服务器浏览器发请求给服务器服务器判断缓存是否能用能用就返回304让浏览器用本地缓存靠Last-Modified资源最后修改时间或ETag资源唯一标识控制关键区别强缓存不发请求状态码200协商缓存发请求状态码304Cache-Control优先级比Expires高补充F5刷新会跳过强缓存走协商缓存CtrlF5强制刷新跳过所有缓存重新下载资源。三、安全相关类6. XSS攻击和CSRF攻击是什么怎么防御两者区别在哪通俗解答都是前端常见攻击记清楚“原理防御”不用记复杂术语口语化说就行1XSS攻击跨域脚本攻击原理不用登录通过合法操作比如评论框输入、URL输入往页面里注入恶意JS/HTML代码比如盗用Cookie、插广告攻击方式反射型代码在URL里一次性的、存储型代码存在服务器里比如评论存到数据库每次打开都触发防御核心是“编码过滤”比如对用户输入的内容转义、过滤掉Script/Style标签、移除onclick等危险事件属性。2CSRF攻击跨站请求伪造原理需要用户先登录A网站本地有A的Cookie没登出的情况下访问危险网站BB利用A的漏洞冒充用户请求A的接口比如冒充用户转账防御最常用的是Token验证服务器给客户端发一个Token客户端提交请求时带上服务器验证合法才处理还有隐藏令牌把Token放在请求头里、Referer验证只接受本站的请求。3两者区别是否需要登录XSS不用登录CSRF需要用户先登录目标网站原理不同XSS是往目标网站注入恶意代码篡改页面CSRF是冒充用户利用目标网站自身漏洞发请求。四、Vue相关类7. 如何实现Vue项目的性能优化通俗解答分3个阶段记编码、打包、用户体验每个阶段记几个关键方法面试足够用编码阶段少放无关数据到datadata里的数据会加getter/setter耗性能v-if和v-for不连用v-for绑定事件用事件代理SPA页面用keep-alive缓存组件路由懒加载、异步组件防抖节流第三方模块按需导入比如Element UI只导入需要的组件长列表、图片懒加载打包阶段压缩代码用Tree Shaking删掉没用的代码第三方模块用CDN加载抽离公共文件比如jquery只打包一次优化sourceMap用户体验加骨架屏减少白屏用PWA离线也能访问配合服务端开启gzip压缩、用缓存优化。8. Vue的SPA应用如何优化首屏加载速度通俗解答SPA首屏慢的核心是“加载资源太多、太慢”针对性优化记8个关键方法请求优化第三方类库用CDN就近取资源减少项目体积缓存优化静态资源设强缓存max-age设长一点加哈希值资源更新后能获取最新版本压缩优化开启gzip压缩缩小资源体积用http2支持多请求并发解决浏览器同域名请求限制懒加载路由懒加载首屏只加载当前路由的代码、图片懒加载体积优化第三方库按需导入用webpack-bundle-analyzer分析打包体积优化大模块代码分割异步加载不需要立即执行的代码资源优化用SVG图标体积小、清晰度高压缩图片加骨架屏/loading减少白屏感知。五、补充前端性能优化的核心思路通俗解答面试如果问通用的前端性能优化就围绕这几点说排查性能瓶颈优化图片、字体大小配合服务端用缓存、CDN、gzip减少HTTP请求、DNS查询优化关键渲染路径比如异步加载JSVue项目再加上专属的优化方法即可。