web高级前端面试题

涵盖技术、框架、性能等多方面难题

在web高级前端面试中，往往会涉及到多个维度的问题，以考察候选人的综合能力。下面就为大家详细介绍一些常见的面试题类型。

html与css相关问题

面试官可能会询问一些关于html语义化标签的使用。比如，为什么要使用语义化标签？答案是语义化标签能让代码结构更清晰，有利于搜索引擎优化，也方便开发者维护。像在制作文章页面时，使用article标签包裹文章内容，section标签划分文章章节，能让页面结构一目了然。另外，css布局也是常考内容，例如如何实现一个三栏布局，且中间栏宽度自适应。可以使用flex布局，代码如下：

css

.container {

display: flex;

}

.left, .right {

width: 200px;

}

.middle {

flex: 1;

}

javascript基础与高级特性

基础方面，可能会问到数据类型的判断。比如，如何准确判断一个变量是数组类型？可以使用array.isarray()方法。高级特性中，闭包是重点考察内容。闭包是指有权访问另一个函数作用域中变量的函数。举个例子：

javascript

function outer() {

let num = 10;

function inner() {

console.log(num);

}

return inner;

}

let fn = outer();

fn(); // 输出10

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

前端框架相关问题

如果熟悉vue框架，可能会被问到vue的响应式原理。vue通过object.defineproperty()方法对数据对象的属性进行劫持，当属性值发生变化时，会触发相应的setter方法，通知所有依赖更新。对于react框架，可能会考察虚拟dom的概念。虚拟dom是一种轻量级的javascript对象，它是真实dom的抽象表示。react通过比较虚拟dom的差异，只更新需要更新的真实dom部分，提高了渲染效率。

性能优化问题

性能优化是高级前端必须掌握的技能。常见的优化方法有压缩代码、合并文件、使用cdn等。比如，在html中引入外部css和javascript文件时，可以将多个文件合并成一个，减少http请求。另外，图片优化也很重要。可以将大尺寸图片压缩成合适的大小，或者使用webp格式的图片，它具有更高的压缩率。

项目经验与问题解决能力

面试官通常会让候选人分享一个自己参与过的项目，并询问在项目中遇到的问题及解决方法。比如，在一个大型项目中，可能会遇到组件之间通信复杂的问题。可以使用事件总线、vuex（vue项目）或redux（react项目）等状态管理工具来解决。在描述项目时，要清晰地说明项目的目标、自己承担的角色以及最终取得的成果。