web前端经典面试题

涵盖基础、框架、性能等多方面问题

在web前端面试中，常涉及多类经典问题，了解这些能让我们在面试中更有把握。下面为大家详细介绍几类常见的面试题目。

html基础类问题

html基础问题是面试的常客。比如，“请简述html5的新特性”。html5增加了许多新特性，像语义化标签（如header、nav、article、section、footer等），这些标签使代码结构更清晰，便于搜索引擎理解页面内容。还有本地存储功能（localstorage和sessionstorage），可以在客户端存储数据，减少与服务器的交互。再如，“如何实现html元素的水平和垂直居中”，对于行内元素，可以使用text-align: center和line-height等于元素高度来实现水平和垂直居中；对于块级元素，可以使用flex布局或者绝对定位与负外边距结合的方法。

css布局与样式类问题

css的布局和样式也是重点考察内容。例如，“请说明盒模型的组成”。盒模型由内容区（content）、内边距（padding）、边框（border）和外边距（margin）组成。内容区是元素实际显示的内容，内边距是内容区与边框之间的距离，边框围绕着内容区和内边距，外边距则是元素与其他元素之间的距离。又如，“css中flex布局和grid布局有什么区别”，flex布局是一维布局模型，主要用于在一个方向上排列元素，适合处理单行或单列的布局；而grid布局是二维布局模型，可以同时在行和列两个方向上进行布局，更适合复杂的网格布局。

javascript基础与应用类问题

javascript是前端开发的核心，相关问题必不可少。比如，“解释一下javascript中的闭包”。闭包是指有权访问另一个函数作用域中的变量的函数。简单来说，即使该函数已经执行完毕，其作用域内的变量也不会被销毁，而是会被闭包引用。例如：

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

再如，“如何实现数组去重”，可以使用es6的set数据结构，它可以自动去除重复的值，代码如下：

var arr = [1, 2, 2, 3, 4, 4];var uniquearr = [...new set(arr)];console.log(uniquearr); // 输出 [1, 2, 3, 4]

前端框架类问题

现在前端框架应用广泛，常考问题如“vue.js中组件之间如何通信”。vue组件通信方式有多种，比如父组件向子组件传递数据可以通过props属性；子组件向父组件传递数据可以通过自定义事件；非父子组件之间通信可以使用事件总线（event bus）或者vuex状态管理库。以props为例：

// 父组件// 子组件

性能优化类问题

性能优化是前端开发的重要环节。常见问题如“如何优化网页的加载速度”。可以从多个方面入手，如压缩代码（包括html、css、javascript代码），减少http请求（合并文件、使用雪碧图等），使用cdn加速静态资源的加载，对图片进行优化（压缩图片大小、使用合适的图片格式等）。例如，将多个css文件合并成一个文件，减少浏览器的请求次数，从而提高页面加载速度。