web前端面试题大全

涵盖各类常见及重点面试问题

在求职web前端岗位时，面试是关键的一环。下面为大家汇总一些常见的web前端面试题。

html相关问题

首先是html语义化标签的使用。面试官可能会问，为什么要使用语义化标签？使用语义化标签可以提高代码的可读性和可维护性，比如在搜索引擎优化方面，搜索引擎能更好地理解页面结构。例如，使用header标签表示页面头部，footer标签表示页面底部。另外，还可能会问到html5的新特性，像新增的语义化标签（article、section等）、表单元素（date、email等）以及本地存储（localstorage和sessionstorage）。

css相关问题

css盒模型是常考的知识点。它由内容区、内边距、边框和外边距组成。面试官可能会让你计算一个元素的实际宽度，比如一个元素宽度为200px，内边距为10px，边框为5px，外边距为20px，那么它的实际宽度就是200 + 10×2 + 5×2 = 230px。还有css布局，像浮动布局、flex布局和grid布局。以flex布局为例，面试官可能会问如何实现水平和垂直居中，使用display: flex和justify-content: center、align-items: center就可以实现。

javascript相关问题

javascript的作用域是重点。有全局作用域、函数作用域和块级作用域。例如，在es6之前只有全局作用域和函数作用域，使用var声明的变量会存在变量提升问题。而es6引入了let和const，它们具有块级作用域。另外，闭包也是常考内容。闭包是指有权访问另一个函数作用域中的变量的函数。比如下面的代码：

function outer() {  var num = 10;  function inner() {    console.log(num);  }  return inner;}var fn = outer();fn();

这里的inner函数就是一个闭包，它可以访问outer函数中的num变量。

浏览器相关问题

浏览器渲染机制是重要考点。浏览器会先解析html构建dom树，再解析css构建cssom树，然后将两者合并成渲染树，最后进行布局和绘制。还可能会问到跨域问题，跨域是指浏览器从一个域名的网页去请求另一个域名的资源时，由于浏览器的同源策略会受到限制。解决跨域的方法有jsonp、cors等。以jsonp为例，它的原理是利用script标签的src属性不受同源策略限制，通过动态创建script标签来实现跨域请求。

框架相关问题

如果应聘的岗位涉及前端框架，如vue.js，可能会问到vue的响应式原理。vue通过object.defineproperty()方法来实现数据劫持，当数据发生变化时，会触发相应的setter方法，从而更新视图。还可能会问到vue的生命周期钩子函数，比如created钩子函数会在实例已经创建完成之后被调用，通常用于数据的初始化。