头条面经
涵盖前端、网络、算法等多方面知识,包括深拷贝、双向绑定、HTTP缓存、跨域处理、Vue原理、TCP/IP协议、Promise实现、设计模式及常见算法题,全面考察技术深度与综合能力。
什么是跨域
CORS(跨域资源共享)是W3C标准,允许浏览器向跨源服务器发送XMLHttpRequest请求,突破同源限制。它分为简单请求与非简单请求,后者需预检。支持所有HTTP方法,较JSONP更强大灵活。
Webpack性能优化
本文介绍Webpack性能优化策略:通过按需加载、Tree Shaking、Scope Hoisting减小打包体积;利用HappyPack、DllPlugin、缓存等提升打包速度;结合代码压缩、resolve优化、长缓存配置,显著提升构建效率与加载性能,适用于大型项目优化实践。(238字)
XSS攻击
XSS攻击利用网站对用户输入过滤不足,将恶意脚本注入网页,用户访问时执行,可盗取cookie、数据或劫持操作。主要分反射型(通过URL注入)和存储型(存入数据库)。防御方法包括转义字符、白名单过滤富文本、使用CSP策略限制资源加载,有效降低风险。
美团面经
本篇美团前端面经涵盖HTML、CSS、JavaScript核心知识,包括语义化标签、BFC、盒模型、flex布局、响应式适配、事件机制、原型链、闭包、异步编程、Vue原理、Vuex、浏览器缓存、跨域、HTTP协议、设计模式等高频面试题,全面系统,助你攻克大厂技术面。
前端工程化
Webpack是前端模块化打包工具,支持代码分割、模块化与静态分析。相比Grunt/Gulp,更注重模块处理。核心概念包括bundle、chunk、module。Loader用于解析非JS文件,Plugin扩展构建功能。构建流程含初始化、编译、依赖解析、输出等阶段。可通过SplitChunks提取公共代码、Tree-shaking去除无用JS(需ES6模块)、压缩资源、合理配置缓存(如chunkhash)优化性能。支持热更新提升开发效率,配合webpack-cli可自动生成配置。
重绘回流过程
浏览器渲染流程:解析HTML生成DOM树,解析CSS生成CSSOM,合并为渲染树,再经布局、绘制显示页面。DOM树包含所有元素,渲染树仅含可见内容。CSS阻塞渲染但不阻塞DOM解析。重绘因样式变化,回流因布局变化,回流必触发重绘。避免频繁操作样式与属性读取,提升性能。
NodeJS框架
Node.js基于事件驱动与单线程模型,通过Event Loop实现异步回调,利用libuv处理多线程任务。JavaScript单线程避免DOM冲突,Web Worker可启多线程。任务队列管理异步事件,配合setTimeout、setImmediate、process.nextTick控制执行顺序。Node通过child_process模块创建子进程实现并发。Express和Koa为常用框架:Express集成路由中间件,采用callback;Koa基于async/await或generator,结构轻量,错误处理更优,中间件为“洋葱模型”,流程清晰。
何为跨域
CORS(跨域资源共享)是W3C标准,允许浏览器向跨源服务器发起XMLHttpRequest请求,突破AJAX同源限制。需浏览器和服务器共同支持,主流浏览器均兼容。通信由浏览器自动完成,开发者无需特殊编码。核心在于服务器配置CORS响应头,如Access-Control-Allow-Origin等。请求分为简单和非简单两类,后者会先发送OPTIONS预检请求确认权限。相比仅支持GET的JSONP,CORS支持所有HTTP方法,更灵活安全。
虚拟滚动技术
虚拟滚动技术通过仅渲染可视区域内的DOM元素,大幅减少页面负载。即使列表包含数万个项,也只动态更新可见部分,滚动时实时替换内容,避免卡顿。相比一次性渲染或requestAnimationFrame分批插入,性能更优,是前端优化的面试加分项,如react-virtualized等库可实现该技术。