HTML+JS 前端面试题及详细答案（真实面试版）

HTML+JS前端面试题及详细答案（真实面试版）一、HTML面试基础题（高频）1.说说HTML5新增的常用语义化标签，以及使用语义化标签的好处答案：常用语义化标签：header、nav、main、section、article、aside、footer、figure、figcaption。核心好处：结构清晰：代码可读性高，开发者一眼能区分页面头部、导航、主体、侧边栏、底部等模块，方便团队维护。利于SEO：搜索引擎爬虫可以精准识别页面结构和内容权重，提升网页收录和排名。适配无障碍访问：屏幕阅读器可精准解析页面模块，方便残障用户浏览网页。标准化规范：替代了传统大量div布局，代码更简洁、规整，符合前端开发规范。2.行内元素、块级元素、行内块元素的区别？各自常见标签有哪些？答案：（1）块级元素独占一行，宽度默认100%父级宽度，可设置宽高、内外边距。常见：div、p、h1-h6、ul、li、ol、section、header。（2）行内元素同行显示，宽度由内容撑开，无法设置宽高、上下边距，仅可设置左右内外边距。常见：span、a、em、i、strong、u。（3）行内块元素同行显示，同时支持设置宽高、内外边距，兼具行内和块级元素特点。常见：img、input、button、textarea。3.img标签的alt和title属性区别？答案：alt：图片加载失败时的替代文本，核心作用是辅助SEO、适配无障碍阅读，属于必填属性，鼠标悬浮无提示。title：鼠标悬浮在图片上时显示的提示文字，仅做交互提示，不影响图片加载和SEO，非必填。4.HTML中href和src的区别答案：src：用于引入外部资源，是替换当前标签内容，浏览器会主动加载资源、解析渲染。常用于img、script、iframe。href：用于建立链接关联，是关联外部资源，不会替换当前标签内容。常用于a、link引入css。5.什么是懒加载？HTML原生懒加载如何实现答案：懒加载是延迟加载技术，页面初始加载时只加载可视区域的图片、视频资源，滚动到对应位置再加载剩余资源，用于优化首屏加载速度、减少网络请求、节省带宽。HTML5原生实现：给img、iframe标签添加loading="lazy"属性即可，无需手写JS。二、JavaScript核心基础面试题1.var、let、const的区别？答案：（1）变量提升var存在变量提升，声明前调用值为undefined；let、const无变量提升，存在暂时性死区，声明前调用直接报错。（2）作用域var仅支持全局作用域、函数作用域，无块级作用域；let、const支持块级作用域（{}内部生效）。（3）重复声明var允许重复声明变量；let、const禁止重复声明。（4）修改特性var、let声明的变量可修改赋值；const声明的是常量，基本数据类型不可修改，引用数据类型（对象、数组）可修改内部属性/元素。使用建议优先使用const，仅需修改变量时用let，杜绝使用var。2.什么是暂时性死区？答案：在代码块中，使用let、const声明变量前，该变量已被绑定在当前块级作用域内，无法访问、赋值，这段区间就是暂时性死区。核心目的：避免变量提升带来的诡异报错，让代码逻辑更严谨。示例：PlainText

console.log(a);//报错Cannotaccess'a'beforeinitialization

leta=10;3.JS的数据类型有哪些？如何判断数据类型？答案：八大数据类型基本类型（7种）：String、Number、Boolean、Undefined、Null、Symbol、BigInt引用类型（1种）：Object（包含普通对象、数组、函数、正则等）判断方式typeof：适合判断基本类型（除null），null返回object，数组/对象/正则均返回object，无法细分引用类型。instanceof：专门判断引用类型，可区分数组、普通对象、函数。Ototype.toString.call()：最精准，可判断所有数据类型。4.null和undefined的区别？答案：undefined：代表未定义。变量声明未赋值、函数无返回值、对象不存在的属性，默认都是undefined。null：代表空对象。是主动手动赋值的空值，用于清空对象、释放变量引用。补充：typeofnull结果为object，是JS最初的bug，不影响正常开发；日常开发中，未知的空值用null，未初始化的变量可默认undefined。5.深拷贝和浅拷贝的区别？如何实现深拷贝？答案：浅拷贝只拷贝对象第一层属性，多层引用类型会共用同一内存地址，修改新对象深层属性，会影响原对象。常见方式：Object.assign、扩展运算符...、数组slice()。深拷贝递归拷贝对象所有层级，新旧对象完全独立，内存地址互不干扰，修改任意一方不会影响另一方。深拷贝实现方式简单场景：JSON.parse(JSON.stringify(obj))，缺点：无法拷贝函数、undefined、Symbol，会丢失循环引用。完整场景：手写递归深拷贝函数，兼容所有数据类型、循环引用。项目场景：使用Lodash库的cloneDeep方法。6.讲讲JS的原型和原型链答案：原型（prototype）每个函数都有一个prototype属性，是一个对象，用于存放公共方法和属性，供所有实例共享，节省内存。原型链（__proto__）每个实例对象都有__proto__属性，指向构造函数的prototype。当访问对象的属性/方法时，自身没有就会顺着__proto__向上查找，直到Ototype，这条查找链路就是原型链。顶端：所有对象的原型链最终指向Ototype，Ototype.__proto__为null。7.this指向问题（面试高频）答案：this的指向在调用时确定，和定义位置无关，五种常见场景：普通函数调用：this指向window（浏览器）/global（node），严格模式下指向undefined。对象方法调用：this指向调用该方法的对象。构造函数调用：this指向new创建的实例对象。箭头函数：没有自身this，继承外层作用域的this，且无法被call、apply、bind修改。call/apply/bind绑定：this指向手动绑定的第一个参数。8.call、apply、bind的区别答案：三者均用于修改函数this指向，核心区别在传参方式和执行时机：call：立即执行函数，参数逐个传递（this,p1,p2...）。apply：立即执行函数，参数以数组形式传递（this,[p1,p2]）。bind：不立即执行，返回一个绑定好this的新函数，参数可分次传递，常用于定时器、事件回调绑定this。9.什么是闭包？闭包的作用和优缺点答案：闭包定义内层函数访问外层函数的变量/参数，且外层函数执行完毕后，内层函数依然可以持有外层变量，这种组合就是闭包。简单说：函数嵌套函数，内层引用外层变量，形成闭包。核心作用保存私有变量，实现变量私有化，避免全局变量污染。延长变量的生命周期。实现模块化、柯里化、防抖节流等功能。优缺点优点：私有化变量、灵活控制作用域、封装工具方法。缺点：变量常驻内存，容易造成内存泄漏，需手动置空释放。10.事件循环（宏任务、微任务）执行机制答案：JS是单线程语言，为了实现异步非阻塞，依靠事件循环调度任务，执行顺序：同步代码优先执行→清空所有微任务→执行一轮宏任务→循环往复。宏任务（耗时较长）script整体代码、setTimeout、setInterval、ajax、DOM事件。微任务（优先级更高）Promise.then/catch/finally、async/await、queueMicrotask。面试核心口诀：同步先执行，微任务清空，再跑宏任务。11.async/await和Promise的关系答案：Promise是异步编程的解决方案，解决了回调地狱问题，但链式调用依然存在代码嵌套问题；async/await是基于Promise的语法糖，让异步代码写法同步化，代码更简洁易懂。async修饰函数，返回值是Promise对象。await只能在async函数内使用，用于等待Promise执行完成，阻塞后续代码。异常捕获：需配合try/catch捕获异步错误。12.什么是防抖和节流？实际应用场景答案：防抖频繁触发事件时，只在最后一次触发后延迟执行一次，中途触发会重置计时器。场景：输入框搜索联想、窗口resize、表单输入验证。节流频繁触发事件时，固定时间内只执行一次，保证单位时间内执行频次。场景：滚动监听、鼠标移动、按钮频繁点击、页面拖拽。三、JS手写实操面试题（必问）1.手写简单防抖函数答案代码：PlainText

functiondebounce(fn,delay=300){

lettimer=null;

returnfunction(...args){

//每次触发清空计时器，重置延迟

if(timer)clearTimeout(timer);

timer=setTimeout(()=>{

fn.apply(this,args);

timer=null;

},delay);

}

}2.手写简单节流函数答案代码：PlainText

functionthrottle(fn,interval=300){

letflag=true;

returnfunction(...args){

if(!flag)return;

flag=false;

setTimeout(()=>{

fn.apply(this,args);

flag=true;

},interval);

}

}3.手写简易深拷贝函数答案代码：PlainText

functiondeepClone(obj){

//处理基本类型和null

if(obj===null||typeofobj!=='object')returnobj;

//处理数组和对象

letnewObj=Array.isArray(obj)?[]:{};

//遍历递归拷贝

for(letkeyinobj){

if(obj.hasOwnProperty(key)){

newObj[key]=deepClone(obj[key]);

}

}

returnnewObj;

}4.手写Promise简易版答案代码：PlainText

classMyPromise{

constructor(executor){

this.status='pending';

this.value=null;

this.reason=null;

this.onFulfilledCb=[];

this.onRejectedCb=[];

constresolve=(value)=>{

if(this.status==='pending'){

this.status='fulfilled';

this.value=value;

this.onFulfilledCb.forEach(fn=>fn());

}

}

constreject=(reason)=>{

if(this.status==='pending'){

this.status='rejected';

this.reason=reason;

this.onRejectedCb.forEach(fn=>fn());

}

}

try{

executor(resolve,reject);

}catch(err){

reject(err);

}

}

then(onFulfilled,onRejected){

onFulfilled=typeofonFulfilled==='function'?onFulfilled:val=>val;

onRejected=typeofonRejected==='function'?onRejected:err=>{throwerr};

if(this.status==='fulfilled'){

onFulfilled(this.value);

}

if(this.status==='rejected'){

onRejected(this.reason);

}

if(this.status==='pending')