Java后端配套前端面试题及答案（贴合实战）.docx

Java后端配套前端面试题及答案（贴合实战）

一、基础核心题（HTML/CSS/JS）

问：为什么要使用HTML语义化标签？实际开发中你常用哪些？

答：主要是为了可读性和SEO——比如爬虫能更准确识别内容结构，团队协作时看标签就知道这是头部（header）还是正文（article），不用猜div的作用。常用的有header（页头）、nav（导航）、main（主内容区）、section（区块）、article（独立内容，比如博客文章）、footer（页脚），比如做Java后台管理系统时，侧边栏用aside，表格区域用table+thead/tbody，比全写div清晰多了。

问：CSS盒模型分哪两种？实际开发中怎么避免“怪异模式”？

答：两种是标准盒模型和IE怪异盒模型。标准盒模型的width只算内容区（content），padding和border会撑大盒子；怪异模式里width包含content+padding+border。避免的话很简单，只要在HTML文件最顶部加DOCTYPE声明就行，比如!DOCTYPEhtml，不管是配合Java后端的JSP还是纯前端项目，都得先加这个，不然浏览器可能乱解析。

问：JS里的原型链是什么？举个实际开发中用到的例子

答：简单说就是对象找属性的“链条”——比如你创建一个对象，访问它的某个属性时，如果自身没有，就会去它的原型（proto）上找，原型没有就去原型的原型找，直到null。比如做Java后端返回的用户列表渲染时，我会给数组加个自定义方法，比如Atotype.formatUser=function(){returnthis.map(u=+-+u.id)}，之后所有用户数组都能调用formatUser，这就是利用原型链实现的方法复用。

二、进阶场景题（异步/闭包/交互）

问：闭包在实际开发中怎么用？会有什么问题？

答：闭包就是“内部函数能访问外部函数的变量，且外部函数执行完后变量不被销毁”。比如做Java接口请求的防抖函数时会用——比如有哪些信誉好的足球投注网站框输入时，300ms内再输入就重新计时，这里就需要闭包保存定时器id：

functiondebounce(fn,delay){

lettimer=null;//闭包保存timer，不会被销毁

returnfunction(){

clearTimeout(timer);

timer=setTimeout(fn,delay);

}

}

//绑定到有哪些信誉好的足球投注网站框输入事件，调用Java的有哪些信誉好的足球投注网站接口

input.oninput=debounce(()=callJavaApi(/search),300);

问题就是如果闭包引用的变量太大（比如DOM元素），不手动清理会导致内存泄漏，比如组件销毁时要把timer清掉。

问：前端调用Java后端接口时，怎么处理异步？从回调到async/await你怎么过渡的？

答：最早用回调，比如用jQuery的ajax，嵌套多了就成“回调地狱”，比如先调登录接口，再用token调用户信息，再调权限接口，代码一层套一层；后来用Promise，把异步操作包成Promise对象，用.then链式调用，比回调清晰；现在全用async/await，把异步代码写成同步的样子，比如：

asyncfunctiongetUserInfo(){

try{

//先调Java登录接口拿token

constloginRes=awaitaxios.post(/java-api/login,{username:xxx,pwd:xxx});

//用token调用户信息接口

constuserRes=awaitaxios.get(/java-api/user,{headers:{token:loginRes.data.token}});

returnuserRes.data;

}catch(err){

//捕获接口错误，比如Java后端返回的401未授权

if(err.response.status===401){

location.href=/login;//跳登录页

}

}

}

这样代码跟写同步逻辑一样，比.then还清晰，实际项目里全这么用。

三、框架题（Vue/React，主流搭配Java后端）

问：Vue2和Vue3的响应式原理有啥区别？实际项目里怎么选？