2024年Web前端最新“寒冬”三年经验前端面试总结（含头条、百度、饿了么，2024年最新12道web前端高级面试题目及答案

最后

推荐一些系统学习的途径和方法。

每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

HTML 和 CSS：

• 垂直居中方法

• 三栏布局

• 选择器权重计算方式

• 清除浮动的方法

• flex

• 什么是BFC、可以解决哪些问题

• position属性

• 如何实现一个自适应的正方形

• 如何用css实现一个三角形

手写题

手写题每个公司都会有，范围也比较固定，如果之前好好准备的话，应该没什么问题。

• 防抖和节流

• 深拷贝

• 数组去重、数组乱序

• 手写call、apply、bind

• 继承（ES5/ES6）

• sleep函数

• 实现promise

• 实现promise.all

• 实现promise.retry

• 将一个同步callback包装成promise形式

• 写一个函数，可以控制最大并发数

• jsonp的实现

• eventEmitter(emit,on,off,once)

• 实现instanceof

• 实现new

• 实现数组flat、filter等方法

• lazyMan

ES6

现在基本上都会使用ES6开发。ES6也成为了一个面试必考点。一般面试官都会问用过ES6的哪些新特性，再针对你所回答的进行深入的提问。

• let、const、var区别

• 箭头函数与普通函数的区别

• 变量的结构赋值

• promise、async await、Generator的区别

• ES6的继承与ES5相比有什么不同

• js模块化（commonjs/AMD/CMD/ES6）

浏览器相关知识

浏览器相关知识几乎是每个公司都会问到的考点，里面涉及的东西也比较多。其中缓存、http2、跨域必问。

• 从输入URL到呈现页面过程

• 强缓存、协商缓存、CDN缓存

• HTTP2

• HTTP状态码

• 三次握手与四次挥手

• 跨域（JSONP/CORS）

• 跨域时如何处理cookie

• 垃圾回收机制

web安全

一般我都会从xss和csrf说起。

• https

• 什么是xss，如何预防

• 什么是csrf，如何预防

• 为什么会造成csrf攻击

事件循环

事件循环绝对是一个必考题。其中涉及到宏任务、微任务、UI渲染等的执行顺序，浏览器端的必须要掌握，node端的有精力的最好也能掌握。

框架（vue）

因为我一直用的都是vue框架，所以问的也都是跟vue相关的。vue中的高频题也不外乎双向绑定、虚拟dom、diff算法这些。

• watch与computed的区别

• vue生命周期及对应的行为

• vue父子组件生命周期执行顺序

• 组件间通讯方法

最后

推荐一些系统学习的途径和方法。

每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

HTML 和 CSS：