校招｜网易有道前端一面面经

网易有道前端一面面经问题解答1. 说说项目，项目中遇到了哪些问题，有没有考虑过如何优化项目

项目介绍：简要说明项目背景、功能和技术栈。
遇到的问题：
性能问题：如页面加载速度慢、首屏渲染时间长。
兼容性问题：不同浏览器或设备上的显示差异。
代码维护性差：随着项目规模扩大，代码结构变得复杂。
优化方案：
性能优化：使用代码分割、懒加载、压缩资源文件、减少HTTP请求等方式提升加载速度。
兼容性处理：通过Polyfill或特性检测解决浏览器兼容性问题。
代码重构：采用模块化开发、遵循单一职责原则，提高代码可维护性。

2. rem与em的区别

em：相对于当前元素的字体大小计算。若未设置字体大小，则继承父元素的字体大小。
rem：相对于根元素（<html>）的字体大小计算，适合用于响应式布局。

3. 移动端如何适配

视口设置：在HTML头部添加<meta name="viewport" content="width=device-width, initial-scale=1.0">。
媒体查询：使用CSS媒体查询针对不同屏幕尺寸调整样式。
弹性布局：采用Flexbox或Grid布局实现灵活的页面结构。
REM/VW单位：结合rem或vw单位实现比例缩放。

4. 盒模型

盒模型组成：内容（content）、内边距（padding）、边框（border）、外边距（margin）。
标准盒模型：宽度和高度仅包含内容区域，总宽度=width + padding + border + margin。
IE盒模型：宽度和高度包含内容、内边距和边框，总宽度=width + margin。
切换模式：通过box-sizing: content-box（默认）或box-sizing: border-box设置。

5. 垂直居中和水平居中的不同实现方式

水平居中：
行内元素：text-align: center。
块级元素：margin: 0 auto（需指定宽度）。
Flexbox：display: flex; justify-content: center。
垂直居中：
单行文本：line-height等于容器高度。
Flexbox：display: flex; align-items: center。
绝对定位：position: absolute; top: 50%; transform: translateY(-50%)。

6. 如何让一个div自动旋转(rotate)div { animation: rotate 2s linear infinite;}@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}7. let、const、var的区别

var：函数作用域，存在变量提升，可重复声明。
let：块级作用域，不存在变量提升，不可重复声明。
const：块级作用域，声明时必须初始化且不可重新赋值（对象内容可修改）。

8. call、apply、bind的区别和使用

call：立即调用函数，参数逐个传递。func.call(context, arg1, arg2);
apply：立即调用函数，参数以数组形式传递。func.apply(context, [arg1, arg2]);
bind：返回新函数，绑定上下文和部分参数，需手动调用。const newFunc = func.bind(context, arg1);newFunc(arg2);

9. JS的map和weakMap了解过吗

Map：键值对集合，键可以是任意类型，可枚举。
WeakMap：键必须是对象，弱引用（不阻止垃圾回收），不可枚举。

10. HTTP缓存

强缓存：通过Expires或Cache-Control头控制，直接使用本地缓存。
协商缓存：通过Last-Modified/If-Modified-Since或ETag/If-None-Match头验证资源是否更新。

11. Cache Control

常用指令：
max-age：缓存有效期（秒）。
no-cache：需协商缓存验证。
no-store：禁止缓存。
public/private：缓存作用范围。

12. Vue生命周期

创建阶段：beforeCreate、created。
挂载阶段：beforeMount、mounted。
更新阶段：beforeUpdate、updated。
销毁阶段：beforeDestroy、destroyed。

13. Vue双向绑定的原理

数据劫持：通过Object.defineProperty（Vue 2）或Proxy（Vue 3）监听数据变化。
发布-订阅模式：数据变化时通知依赖的视图更新。

14. $nextTick用过吗

作用：在下次DOM更新循环结束后执行回调，用于获取更新后的DOM。
场景：在数据变化后操作DOM元素。

15. 数据存储的方式有哪些，以及他们的区别

Cookie：存储少量数据，随请求发送到服务器，可设置过期时间。
localStorage：持久化存储，不随请求发送，容量较大（5MB）。
sessionStorage：会话级存储，关闭标签页后清除，容量同localStorage。
IndexedDB：客户端数据库，支持大量结构化数据存储。

16. Promise用过吗，它的基础语法是什么const promise = new Promise((resolve, reject) => { if (成功) { resolve(value); } else { reject(error); }});promise.then(res => console.log(res)).catch(err => console.error(err));17. Promise的API有哪些，他们的具体作用

Promise.resolve：返回一个已解决的Promise。
Promise.reject：返回一个已拒绝的Promise。
Promise.all：所有Promise成功时返回结果数组，任一失败则立即拒绝。
Promise.race：任一Promise完成（成功或失败）时返回结果。
Promise.allSettled：所有Promise完成后返回结果数组（无论成功或失败）。

18. 实现Promise.allfunction promiseAll(promises) { return new Promise((resolve, reject) => { const results = []; let count = 0; promises.forEach((promise, index) => { Promise.resolve(promise) .then(res => { results[index] = res; count++; if (count === promises.length) resolve(results); }) .catch(err => reject(err)); }); });}19. 以下代码会输出什么let a = 10;function fn() { console.log(a); // 报错：a未定义（暂时性死区） let a = 20;}fn();20. 求输出顺序代码setTimeout(() => { console.log(2); }, 0); // 宏任务，最后执行Promise((resolve, reject) => { console.log(1); // 同步任务，立即执行 resolve();}).then(res => { console.log(3); }); // 微任务，在同步任务后执行// 输出顺序：1 → 3 → 221. [1,2,3] + 3会输出什么以及为什么

输出："1,2,33"。
原因：数组调用valueOf方法未返回原始值，隐式调用toString()转为"1,2,3"，再与字符串"3"拼接。

22. 数组去重的实现

Set方法：const unique = [...new Set(arr)];
filter方法：const unique = arr.filter((item, index) => arr.indexOf(item) === index);

23. 反问面试官

可询问技术栈、团队文化、项目方向或面试流程等问题，展现主动性和兴趣。

您可能感兴趣问答

Collapsible

热门标签

热点问答