秋招记录-百度
2023-07-10 12:01:31
什么情况下会触发卡顿
主线程阻塞：JavaScript 执行时间过长或复杂计算未分块。
渲染性能问题：频繁重排（Reflow）或重绘（Repaint），如动态修改 DOM 布局。
资源加载延迟：大尺寸图片、未压缩的脚本或样式表阻塞渲染。
硬件加速缺失：未利用 GPU 加速的动画（如 transform/opacity 外属性）。
防抖的逻辑及作用
逻辑：触发事件后延迟执行，若期间再次触发则重置计时，仅最后一次触发生效。
应用场景：搜索框输入联想、窗口 resize 事件优化。
代码示例：
function debounce(fn, delay) { let timer; return function() { clearTimeout(timer); timer = setTimeout(() => fn.apply(this, arguments), delay); };}Vue2 与 Vue3 的区别及 Vue3 优点
响应式原理：Vue2 用 Object.defineProperty，Vue3 用 Proxy（支持动态属性、数组索引修改）。
Composition API：逻辑复用更灵活，替代 Options API 的分散式代码。
性能优化：编译时优化（如静态节点提升）、更小的包体积。
Composition API 与 Options API 的区别
Options API：按 data、methods 等选项组织代码，适合简单场景。
Composition API：通过 setup() 函数组合逻辑，支持自定义 Hook（如 useMouse），适合复杂组件。
meta 标签与 viewport 属性
meta 标签：定义页面元数据（如 charset、viewport、description）。
viewport 常用值：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">不设置 device-width：移动端可能按桌面宽度渲染，导致页面缩放异常。
前端学习方法
基础巩固：精通 HTML/CSS/JavaScript 核心（如闭包、原型链）。
框架实践：通过项目掌握 Vue/React 的响应式原理和生态工具。
性能优化：学习代码分割、懒加载、缓存策略。
上线文件类型
静态资源：index.html、main.[hash].js、style.[hash].css。
资源映射：sourceMap 文件（生产环境通常移除）。
HTML 引入 CSS 的位置
<head> 内：避免页面渲染时样式未加载导致的闪烁（FOUC）。
行内样式：仅用于动态样式或快速原型开发。
link vs @import
link：支持并行加载，可定义 favicon 等资源。
@import：阻塞渲染，仅用于 CSS 内部导入。
Promise 优势
链式调用：避免回调地狱（Callback Hell）。
错误处理：通过 .catch() 统一捕获异常。
手写防抖
参考问题 2 的代码示例。
两数之和算法
哈希表解法：
function twoSum(nums, target) { const map = new Map(); for (let i = 0; i < nums.length; i++) { const complement = target - nums[i]; if (map.has(complement)) return [map.get(complement), i]; map.set(nums[i], i); }}
HTML 语义化
好处：提升可访问性（屏幕阅读器）、SEO 优化、代码可读性。
常用标签：<header>、<main>、<article>、<section>、<nav>。
搜索引擎信息提取
关键路径：解析 <title>、<meta name="description">、结构化数据（Schema.org）。
内容抓取：优先抓取 <h1>-<h6> 和语义化标签内的文本。
浏览器存储类型
Cookie：服务器可控，容量小（4KB），带请求头。
LocalStorage/SessionStorage：客户端存储，容量大（5MB），LocalStorage 持久化。
IndexDB：浏览器端 NoSQL 数据库，支持事务和索引。
Flex 布局父元素属性
display: flex、justify-content（主轴对齐）、align-items（交叉轴对齐）、flex-direction。
伪元素 vs 伪类
伪元素：::before、::after，创建虚拟元素。
伪类：:hover、:nth-child()，匹配特定状态。
ES6 新增特性
let/const、箭头函数、模板字符串、解构赋值、Promise、Module。
箭头函数限制
无 this 绑定（继承外层作用域）、无 arguments 对象、不能用作构造函数（无 prototype）。
构造函数执行过程
创建实例对象，绑定 this 到实例，执行函数体，返回实例（若未显式返回对象）。
作用域问题示例
输出：
var a = 1;function foo() { console.log(a); // undefined（变量提升） var a = 2;}foo();手写节流函数
首次触发立即执行：
function throttle(fn, delay, immediate = true) { let timer, lastCall = 0; return function(...args) { const now = Date.now(); if (immediate && !lastCall) { fn.apply(this, args); lastCall = now; } else { clearTimeout(timer); if (now - lastCall >= delay) { fn.apply(this, args); lastCall = now; } else { timer = setTimeout(() => { fn.apply(this, args); lastCall = Date.now(); }, delay - (now - lastCall)); } } };}括号匹配算法
栈解法：
function isValid(s) { const stack = []; const map = { '(': ')', '{': '}', '[': ']' }; for (const char of s) { if (map[char]) stack.push(char); else if (stack.pop() !== char.match(/[({[]/)) return false; } return !stack.length;}npm 依赖区别
- dependencies：生产环境依赖（如 react）。
- devDependencies：开发环境依赖（如 webpack）。
- Git 冲突解决
- 步骤：git pull 后手动修改冲突文件 → git add → git commit。
- 长连接替代方案
- 轮询：定时发送 HTTP 请求（效率低）。
- Server-Sent Events (SSE)：单向服务器推送。
项目设计
结构搭建：模块化（按功能拆分）、组件化（复用 UI）、状态管理（Vuex/Redux）。
代码库设计：目录规范（如 src/components）、Git 分支策略（Git Flow）。
科研经验总结
问题解决：分阶段调试、日志记录、单元测试。
优化方向：性能瓶颈分析（Chrome DevTools）、算法复杂度优化。
部门业务沟通
了解团队技术栈（如百度使用 Vue/React）、项目规模、应届生培养计划。
总结：百度秋招面试覆盖前端核心知识（JavaScript、框架、性能）、算法与工程能力，需注重基础扎实度和项目深度。
热门标签
