阿里饿了么26可转正实习启动啦！

️每人可投递一次，包含两个志愿，快快行动起来吧！

热招岗位：研发类、算法类、数据类、设计类等，大量岗位等你来投！

🌍base北京/上海/杭州

📌岗位面向2025年11月-2026年10月期间毕业并拿到毕业证的海内外应届毕业生

🔹投递方式：https://talent.ele.me/campus/qrcode/home?code=P5368qSwikRqDddjIvppesioCxERb1ens38Sj14pu_o%3D

📚 内推简历优先处理，可帮查看进度、推动流程！大家投递完可以在评论区打上姓名缩写+岗位，我来确认有没有内推成功喽

饿了么前端笔试

一、HTML 与 CSS

1. 简述题：请解释 HTML5 语义化标签（如<header>、<nav>、<article>、<section>、<footer>）的作用，以及在实际项目中使用它们的好处。
2. 布局实现题：使用 CSS Flexbox 布局实现一个页面结构，要求包含一个顶部导航栏、中间主体内容区（分为左右两栏，左栏宽度为 25%，右栏宽度为 75%）和底部页脚。请写出 HTML 结构和 CSS 样式代码。
3. 样式问题排查：给定一段 HTML 和 CSS 代码，其中存在样式显示不符合预期的问题（例如元素间距异常、文本颜色未生效等），请指出代码中的错误并给出正确的修改方案。

二、JavaScript 基础

1. 代码输出题：给出一段包含闭包、作用域、原型链等概念的 JavaScript 代码，要求分析并写出代码的输出结果，并解释原因。例如：

function outer() {    let a = 10;    function inner() {        let b = 20;        return a + b;    }    return inner;}let func = outer();console.log(func());

1. 函数实现题：编写一个 JavaScript 函数，实现对数组去重功能，要求返回一个新的不包含重复元素的数组。例如输入[1, 2, 2, 3, 4, 4, 5]，输出[1, 2, 3, 4, 5]。
2. 事件处理题：在 HTML 页面中有一个按钮元素，当按钮被点击时，要在控制台输出 “按钮被点击了”，并且修改按钮的文本为 “已点击”。请使用 JavaScript 实现相关的事件绑定和处理逻辑。

三、JavaScript 高级特性

1. Promise 与异步编程：描述 JavaScript 中 Promise 的作用和基本用法。编写一个使用 Promise 的示例代码，模拟异步加载图片的过程，当图片加载成功时，在控制台输出图片的尺寸信息，加载失败时输出错误信息。
2. ES6 + 特性：简述 ES6 中let、const与var声明变量的区别。使用 ES6 的class语法定义一个简单的Person类，包含name和age属性，以及一个sayHello方法，用于在控制台输出 “Hello, 我是 [名字]，我 [年龄] 岁了”。

四、前端框架（以 Vue 为例，若有要求其他框架可替换）

1. Vue 基础题：解释 Vue.js 中指令（如v - bind、v - model、v - if、v - for）的作用和使用场景。给出一个简单的 Vue 组件代码示例，包含数据绑定、事件处理和条件渲染。
2. 组件化开发题：设计一个简单的 Vue 组件，用于展示商品列表。组件接收一个商品数组作为 props，每个商品对象包含name、price和imageUrl属性。在组件内部，使用v - for指令循环渲染商品列表项，每个列表项展示商品图片、名称和价格。
3. Vue Router 与 Vuex：简述 Vue Router 在 Vue 项目中的作用，以及如何配置一个简单的路由。如果要在一个 Vue 电商项目中管理用户购物车状态，你会如何使用 Vuex 来实现？请简要描述实现思路和关键步骤。

五、性能优化与其他

1. 前端性能优化：列举至少三种前端性能优化的方法，并简要说明其原理和作用。例如从代码压缩、图片优化、缓存策略等方面回答。
2. 跨域问题：解释什么是跨域问题，以及在前端开发中常见的跨域解决方案有哪些（如 JSONP、CORS 等），请详细描述其中一种解决方案的实现原理和步骤。
3. 算法与逻辑题：给定一个字符串，要求统计字符串中每个字符出现的次数，并按照出现次数从高到低的顺序输出字符及其出现次数。例如输入字符串 “hello world”，输出{ 'l': 3, 'o': 2, 'h': 1, 'e': 1, 'w': 1, 'r': 1, 'd': 1 }。