阿里、网易、滴滴共十次前端面试碰到的问题

以下是根据十次阿里、网易、滴滴前端面试中高频出现的问题，结合技术要点整理的总结：

• HTML5新增内容或API及使用

  新增语义化标签：<header>、<footer>、<article>、<section>等，用于提升代码可读性和SEO。

  新增API：Canvas绘图、Web Storage（localStorage/sessionStorage）、Geolocation地理定位、Web Workers多线程、WebSocket实时通信。

  多媒体支持：<audio>、<video>标签替代Flash。

• input和textarea的区别

  input是单行文本输入框，textarea是多行文本输入框。

  input通过value属性获取值，textarea通过子节点或value属性获取内容。

  input的type属性支持多种类型（如text、password、email），textarea仅支持文本输入。

• 用div模拟textarea的实现

  设置div的contenteditable="true"属性使其可编辑。

  通过CSS控制样式（如边框、内边距），并监听input事件动态调整高度以实现自适应。

• 移动设备忽略数字识别为电话号码的方法

  在<meta>标签中添加：<meta name="format-detection" content="telephone=no">。

  或对数字使用<span>包裹并设置样式：style="-webkit-touch-callout: none;"。

• 左右布局：左边定宽、右边自适应（3种方法）

  Flexbox布局：父容器设display: flex，左镇没差子元素width: 200px，右子元素flex: 1。

  浮动+margin：左元素float: left; width: 200px，右元素margin-left: 200px。

  Grid布局：父容器设display: grid; grid-template-columns: 200px 1fr。

• CSS3新特性

  过渡（transition）、动画（animation）、变形（transform）。

  弹性盒子（Flexbox）、网格布局（Grid）。

  圆角（border-radius）、阴影（box-shadow）、渐变（linear-gradient）。

• BFC与IFC

  BFC（块级格式化上下文）：触发条件包括overflow: hidden、float不为none、display: inline-block等。特性为避免浮动元素重叠、清除浮动、防止外边距合并。

  IFC（行内格察袭式化上下文）：由行内元素组成，御皮水平排列，垂直对齐由vertical-align控制。

• 水平居中实现方式

  行内元素：父元素text-align: center。

  块级元素：margin: 0 auto（需指定宽度）。

  Flexbox：父元素display: flex; justify-content: center。

  Grid：父元素display: grid; place-items: center。

• 1像素边框问题

  原因：高分辨率屏幕下，物理像素与CSS像素比例导致边框变粗。

  解决方案：使用transform: scaleY(0.5)缩放或border-image渐变实现。

• 图片懒加载

  通过监听滚动事件，判断图片是否进入视口（getBoundingClientRect().top < window.innerHeight），进入后替换src属性为真实地址。

  使用IntersectionObserver API优化性能，避免频繁计算。

• 页面加载进度条

  利用document.onreadystatechange事件，结合readyState状态（loading、interactive、complete）更新进度。

  或通过监听<img>等资源的load事件估算进度。

• 事件委托

  将事件监听器绑定到父元素，通过event.target判断触发子元素，减少事件绑定数量，提升性能。

• 实现extend函数

  function extend(target, ...sources) { sources.forEach(source => { for (let key in source) { if (source.hasOwnProperty(key)) { target[key] = source[key]; } } }); return target;}

• 跨域问题及解决方式

  原因：浏览器同源策略限制。

  解决方案：

  JSONP（仅限GET请求，利用<script>标签不受同源限制）。

  CORS（服务端设置Access-Control-Allow-Origin）。

  代理服务器（如Nginx反向代理）。

• JSONP与postMessage原理

  JSONP：动态创建<script>标签，请求服务端返回函数调用（如callback({data})）。

  postMessage：HTML5 API，允许跨窗口通信（如window.postMessage(data, targetOrigin)）。

• 拖拽功能实现

  监听mousedown、mousemove、mouseup事件，计算拖拽元素位置并更新DOM。

  示例：将最后一个节点插入到第一个和第二个节点之间，需修改parentNode.insertBefore(draggedNode, referenceNode)。

• setTimeout与requestAnimationFrame

  setTimeout：延迟执行，最小延迟为4ms（HTML5规范），可能因主线程阻塞导致卡顿。

  requestAnimationFrame：与浏览器刷新率同步（通常60fps），适合动画，节省CPU资源。

• 手写parseInt实现

  function myParseInt(str) { let result = 0; for (let i = 0; i < str.length; i++) { const char = str[i]; if (char >= '0' && char <= '9') { result = result * 10 + (char.charCodeAt(0) - '0'.charCodeAt(0)); } else { break; } } return result;}

• 分页器组件优化

  点击“下一页”时，服务端返回数据前先检查总页数或剩余数据量，避免无效请求。

  前端可缓存已加载数据，通过比较当前页与总页数判断是否可加载。

• ES6特性

  箭头函数、模板字符串、解构赋值、let/const、默认参数、Promise、async/await、模块化（import/export）。

• JS模块化实践

  CommonJS（Node.js）、AMD（RequireJS）、ES6模块（import/export）。

  Webpack支持多种模块化规范，可打包为单个文件或按需加载。

• Promise实现原理

  通过状态机（pending、fulfilled、rejected）管理异步操作，链式调用通过then方法返回新Promise实现。

• Gulp功能实现

  基于Node.js的流式构建工具，通过编写任务（Task）实现文件压缩、合并、编译（如Sass转CSS）等。

• 前端框架优势（vs jQuery）

  数据驱动：如Vue/React通过虚拟DOM和响应式系统减少直接DOM操作。

  组件化：提高代码复用性和可维护性。

  生态支持：路由（Vue Router/React Router）、状态管理（Vuex/Redux）等。

• Vue双向数据绑定实现

  通过Object.defineProperty（Vue 2）或Proxy（Vue 3）劫持数据变化，触发视图更新。

  发布-订阅模式管理依赖关系，数据变化时通知订阅者更新。

• 单页应用路由实现

  Hash模式：监听hashchange事件，根据window.location.hash更新视图。

  History模式：利用history.pushState修改URL，监听popstate事件实现路由切换。

• 常用优化方法

  代码压缩（Webpack）、图片压缩（WebP格式）、CDN加速、懒加载、缓存策略。

• URL输入到页面渲染过程

  DNS解析获取IP地址。

  TCP三次握手建立连接。

  发送HTTP请求，服务端返回HTML。

  浏览器解析HTML构建DOM树，解析CSS构建CSSOM树，合并为渲染树。

  布局（Layout）计算元素位置，绘制（Paint）生成像素，复合（Composite）合成图层。

• 缓存优化策略

  HTTP缓存：Cache-Control（max-age）、Expires（强缓存），Last-Modified/If-Modified-Since、ETag/If-None-Match（协商缓存）。

  Service Worker：离线缓存，拦截请求返回缓存资源。

• DOM节点过多优化

  使用虚拟滚动（如React Window）仅渲染可视区域节点。

  减少嵌套层级，避免频繁重排（Reflow）和重绘（Repaint）。

• 高频问题

  项目模块划分、个人职责、技术难点及解决方案。

  性能优化实践（如首屏加载时间优化）。

  安全性措施（如XSS防御：转义用户输入；CSRF防御：Token验证）。

• 职业规划

  强调技术深度与广度平衡，如深耕前端同时了解后端或移动端。

• 团队期望

  注重技术氛围、代码质量、团队协作，如代码审查（Code Review）、知识分享。

• 反问面试官

  团队技术栈、项目方向、对候选人的核心期望。

• 算法与数据结构：阿里云等岗位可能考察，需掌握排序、链表、树等基础算法。
• 项目深度：对简历中提到的技术（如Webpack、Promise）需理解原理，避免仅停留在使用层面。
• 实战积累：通过开源项目或个人博客提升技术影响力，增加面试竞争力。