Web开发高频面试题及实战答案.docxVIP

Web开发高频面试题及实战答案

一、HTML/CSS基础

问：为什么要做HTML语义化？项目里怎么用的？

答：主要是让代码有“意义”——一是SEO友好，比如article比div更易被搜索引擎识别内容；二是维护方便，同事看headernav就知道是导航区，不用猜div的作用。项目里我会把页面拆成：顶部用header，导航栏用nav，主体内容用main，文章列表用article，侧边栏用aside，底部用footer，避免全堆div。

问：Flex布局实现“左侧300px固定，右侧自适应”，写关键代码？

答：父容器用flex，左侧定宽，右侧用flex:1占满剩余空间：

.container{

display:flex;/*开启Flex布局*/

height:500px;

}

.left{

width:300px;

background:#f0f0f0;

margin-right:20px;/*间距按需加*/

}

.right{

flex:1;/*占满剩余宽度*/

background:#e0e0e0;

}

实际项目里做后台管理系统的侧边栏+主内容区常用这写法。

问：CSS优先级怎么算？!important能随便用吗？

答：优先级从高到低是：内联样式（style属性）ID选择器（#box）类/伪类/属性选择器（.red/:hover）元素选择器（div）。

!important会强制提升优先级，但不建议常用——比如多个样式都加！important，又得比原优先级，反而乱。项目里一般只在覆盖第三方样式（比如ElementUI）时临时用。

二、JavaScript核心

问：原型和原型链是什么？举个例子

答：JS里每个对象都有__proto__（隐式原型），指向它的“爸爸”——原型对象（prototype）；原型对象也有自己的__proto__，一层一层往上找直到null，这就是原型链。

比如用构造函数创建对象：

functionPerson(name){

=name;

}

Ptotype.sayHi=()=console.log(hi);//原型上的方法

constliLei=newPerson(李雷);

liLei.sayHi();//能调用到原型上的sayHi，因为liLei.__proto__===Ptotype

liLei.toString();//原型链往上找，Ptotype.__proto__是Ototype，所以能调用toString

实际用的时候，原型链主要用来实现继承，比如数组的push、map方法都在Atotype上，所有数组都能通过原型链调用。

问：闭包在项目里用过吗？解决什么问题？要注意什么？

答：用过，闭包就是“函数套函数，内层函数能访问外层函数的变量”。比如做防抖节流时用闭包存定时器：

//防抖：输入框停止输入1秒后再请求接口

functiondebounce(fn,delay){

lettimer=null;//闭包保存timer，不会每次调用都重置

return(args)={

clearTimeout(timer);

timer=setTimeout(()=fn(args),delay);

};

}

constsearchDebounce=debounce(fetchSearchData,1000);

注意点：闭包会让变量常驻内存，不用的时候要手动清空，比如上面的防抖函数，如果组件卸载了，最好clearTimeout(timer)，不然可能内存泄漏。

问：事件循环机制？宏任务和微任务有哪些？写段代码说输出顺序

答：JS是单线程，事件循环就是“先执行同步代码，再清空微任务队列，最后执行一个宏任务，再清空微任务队列……循环”。

宏任务：script（整体代码）、setTimeout、setInterval、DOM事件回调、ajax请求；

微任务：Promise.then/catch/finally、async/await（await后面的代码算微任务）、queueMicrotask。

代码例子：

console.log(1);//同步

setTimeout(()=console.log(2),0);//宏任务

newPromise((resolve)={

console.log(3);//同步（Promise构造函数里的是同步）

resolve();

}).then(()=console.log(