饿了么前端面经
饿了么前端笔试
一、HTML 与 CSS
- 简述题：请解释 HTML5 语义化标签（如<header>、<nav>、<article>、<section>、<footer>）的作用，以及在实际项目中使用它们的好处。
- 布局实现题：使用 CSS Flexbox 布局实现一个页面结构，要求包含一个顶部导航栏、中间主体内容区（分为左右两栏，左栏宽度为 25%，右栏宽度为 75%）和底部页脚。请写出 HTML 结构和 CSS 样式代码。
- 样式问题排查：给定一段 HTML 和 CSS 代码，其中存在样式显示不符合预期的问题（例如元素间距异常、文本颜色未生效等），请指出代码中的错误并给出正确的修改方案。
二、JavaScript 基础
- 代码输出题：给出一段包含闭包、作用域、原型链等概念的 JavaScript 代码，要求分析并写出代码的输出结果，并解释原因。例如：
function outer() { let a = 10; function inner() { let b = 20; return a + b; } return inner;}let func = outer();console.log(func());
- 函数实现题：编写一个 JavaScript 函数，实现对数组去重功能，要求返回一个新的不包含重复元素的数组。例如输入[1, 2, 2, 3, 4, 4, 5]，输出[1, 2, 3, 4, 5]。
- 事件处理题：在 HTML 页面中有一个按钮元素，当按钮被点击时，要在控制台输出 “按钮被点击了”，并且修改按钮的文本为 “已点击”。请使用 JavaScript 实现相关的事件绑定和处理逻辑。
三、JavaScript 高级特性
- Promise 与异步编程：描述 JavaScript 中 Promise 的作用和基本用法。编写一个使用 Promise 的示例代码，模拟异步加载图片的过程，当图片加载成功时，在控制台输出图片的尺寸信息，加载失败时输出错误信息。
- ES6 + 特性：简述 ES6 中let、const与var声明变量的区别。使用 ES6 的class语法定义一个简单的Person类，包含name和age属性，以及一个sayHello方法，用于在控制台输出 “Hello, 我是 [名字]，我 [年龄] 岁了”。
四、前端框架（以 Vue 为例，若有要求其他框架可替换）
- Vue 基础题：解释 Vue.js 中指令（如v - bind、v - model、v - if、v - for）的作用和使用场景。给出一个简单的 Vue 组件代码示例，包含数据绑定、事件处理和条件渲染。
- 组件化开发题：设计一个简单的 Vue 组件，用于展示商品列表。组件接收一个商品数组作为 props，每个商品对象包含name、price和imageUrl属性。在组件内部，使用v - for指令循环渲染商品列表项，每个列表项展示商品图片、名称和价格。
- Vue Router 与 Vuex：简述 Vue Router 在 Vue 项目中的作用，以及如何配置一个简单的路由。如果要在一个 Vue 电商项目中管理用户购物车状态，你会如何使用 Vuex 来实现？请简要描述实现思路和关键步骤。
五、性能优化与其他
- 前端性能优化：列举至少三种前端性能优化的方法，并简要说明其原理和作用。例如从代码压缩、图片优化、缓存策略等方面回答。
- 跨域问题：解释什么是跨域问题，以及在前端开发中常见的跨域解决方案有哪些（如 JSONP、CORS 等），请详细描述其中一种解决方案的实现原理和步骤。
- 算法与逻辑题：给定一个字符串，要求统计字符串中每个字符出现的次数，并按照出现次数从高到低的顺序输出字符及其出现次数。例如输入字符串 “hello world”，输出{ 'l': 3, 'o': 2, 'h': 1, 'e': 1, 'w': 1, 'r': 1, 'd': 1 }。
查看8道真题和解析
饿了么一面115人在聊