Web高频面试题及答案.docxVIP

Web高频面试题及答案

一、HTML基础

问题：项目里为什么要多用语义化标签（比如header、article），而不是全用div？

答案：实际开发中语义化标签主要解决三个问题：一是无障碍，比如屏幕阅读器能通过标签判断内容类型（读“导航栏”而不是“区块”），帮视障用户理解页面；二是SEO，有哪些信誉好的足球投注网站引擎爬取时，能通过语义标签快速识别页面核心内容（比如article里的内容会优先判断为正文）；三是团队协作，后续维护的同事看到header就知道是页头，不用翻代码找注释，比一堆div+class清晰多了。比如我们之前做官网，把新闻列表放在article里，比用div包裹的版本，百度收录速度快了近30%。

问题：HTML5的localStorage和sessionStorage有啥区别？项目里怎么选？

答案：最核心的是生命周期和作用域。localStorage存了之后除非手动删（代码或浏览器清除），否则一直在；sessionStorage关闭标签页就没了。作用域上，同个域名下的不同页面能共享localStorage，但sessionStorage只在当前标签页生效。

实际用的时候，比如用户登录状态，我们会存在localStorage（关浏览器再开还能保持登录）；而临时表单数据（比如用户填了一半的表单），就存在sessionStorage，万一不小心关了标签，重新打开还能恢复，但关浏览器就清掉，避免占内存。

二、CSS核心

问题：浮动（float）导致父元素塌陷，项目里常用的解决办法有哪些？

答案：最常用的有三种：

一是给父元素加clearfix类，写个伪元素清除浮动，兼容性好（能兼容到IE8），代码大概是.clearfix::after{content:;display:block;clear:both;}，我们老项目还在用这个；

二是给父元素加overflow:hidden，简单快捷，但有个坑——如果子元素有定位（比如position:absolute）超出父元素，会被隐藏，所以弹窗、下拉菜单这种场景不能用；

三是让父元素也浮动，但会导致父元素的父元素也塌陷，要一路浮上去，除非整个页面都用浮动布局，否则不推荐。现在新项目更倾向用Flex布局，直接避免浮动塌陷问题。

问题：CSS优先级怎么算？如果内联样式和！important冲突了怎么办？

答案：优先级从高到低大概是：!important（突破优先级）内联样式（style属性）ID选择器（#box）类/伪类/属性选择器（.red/:hover）元素/伪元素选择器（div::before）通配符（*）。

但要注意，!important不能乱用，比如内联样式写style=color:red!important，然后样式表写#box{color:blue!important}，这时候谁在后面谁生效？因为优先级相同（都带！important），就按代码顺序，后定义的覆盖前的。项目里一般只有改第三方组件样式（比如ElementUI）时才用！important，自己写的代码尽量靠选择器优先级控制，不然后续难维护。

三、JavaScript深入

问题：Promise的三种状态是什么？async/await比Promise链式调用好在哪？

答案：Promise三种状态：pending（等待中）、fulfilled（成功）、rejected（失败），状态一旦变了就不能再改（比如从pending变fulfilled后，再调用reject也没用）。

实际写代码时，async/await主要是解决“回调地狱”的可读性问题。比如用Promise调接口，要先拿用户信息，再拿用户订单，得写.then嵌套：getUser().then(user=getOrder(user.id).then(order={...}))；用async/await就是constuser=awaitgetUser();constorder=awaitgetOrder(user.id);，跟写同步代码一样，同事看的时候不用一层一层扒.then。另外错误处理更方便，Promise要在.catch里处理，async/await直接用try/catch包起来，多个请求的错误能统一处理。

问题：什么是闭包？项目里什么时候会用到？

答案：闭包简单说就是“函数套函数，内层函数能访问外层函数的变量”，而且外层函数执行完，这些变量也不会被销毁。

项目里常用的场景：一是做私有变量，比如封装工具函数时，不想让变量暴露出去。比如我们写了个计数器工具，functioncreat