前端基础面试难题集锦

涵盖多方面的前端面试难题解析

前端面试中，基础问题往往是考察重点，同时也存在一些容易让人犯错的难题。下面为大家整理了几类常见的前端基础面试难题。

html相关难题

在html面试中，常被问到语义化标签的使用。例如，很多人对<article>和<section>的区别不清楚。<article>表示一个独立的、完整的内容块，比如一篇博客文章、论坛帖子等；而<section>则是对页面进行分块，用于组织相关内容。案例：在一个新闻网站中，每篇新闻报道应该用<article>包裹，而新闻的分类（如体育新闻、娱乐新闻）可以用<section>来划分。

css相关难题

css的盒模型是面试的高频考点。盒模型由内容区、内边距、边框和外边距组成。很多人在计算元素的实际宽度和高度时会出错。比如，一个元素设置了width: 200px，padding: 10px，border: 5px，那么它的实际宽度是200 + 10×2 + 5×2 = 230px。另外，浮动和清除浮动也是难点。当元素设置浮动后，父元素会出现高度塌陷的问题。解决方法可以使用clear: both属性或者bfc（块级格式化上下文）。案例：在一个图片列表中，图片设置了浮动，为了避免父元素高度塌陷，可以在父元素中添加overflow: hidden来触发bfc。

javascript相关难题

javascript的作用域和闭包是面试的重点和难点。作用域分为全局作用域和函数作用域。闭包是指有权访问另一个函数作用域中的变量的函数。例如：

function outer() {    var a = 10;    function inner() {        console.log(a);    }    return inner;}var closure = outer();closure(); // 输出10

这里的inner函数就是一个闭包，它可以访问outer函数作用域中的变量a。另外，异步编程也是常见的考点，如回调地狱问题。可以使用promise、async/await来解决。

浏览器渲染机制相关难题

浏览器的渲染机制包括解析html、构建dom树、解析css、构建cssom树、合并dom树和cssom树生成渲染树、布局和绘制等步骤。面试中常问的问题是重排和重绘。重排是指当dom的变化影响了元素的布局信息时，浏览器需要重新计算元素的布局；重绘是指当dom的变化只影响了元素的外观时，浏览器只需要重新绘制元素。案例：当改变元素的宽度时，会触发重排和重绘；而改变元素的颜色时，只会触发重绘。

跨域相关难题

由于浏览器的同源策略，不同源的页面之间无法直接进行数据交互。常见的跨域解决方案有jsonp、cors等。jsonp是利用了script标签的src属性不受同源策略限制的特点。例如：

<script>    function callback(data) {        console.log(data);    }</script><script src="http://example.com/api?callback=callback"></script>

服务器返回的数据会包裹在callback函数中，从而实现跨域数据交互。cors是一种现代的跨域解决方案，需要服务器端设置响应头。例如，服务器端设置access - control - allow - origin: * 来允许所有源的请求。