一、JS 事件循环异步执行顺序核心考点题目给出 console.log 同步代码、setTimeout、Promise.then 的执行顺序并说明原因。正确输出1 → 4 → 3 → 2。核心原理JS 是单线程语言依靠事件循环实现异步非阻塞执行规则为黄金定律优先执行主线程所有同步代码同步代码执行完毕一次性清空微任务队列微任务清空后执行一个宏任务循环往复直至任务队列清空。任务分类同步任务普通 console.log、变量赋值等阻塞式代码微任务Promise.then/catch、async/await 后续代码优先级更高宏任务setTimeout/setInterval、Ajax、I/O 操作一次仅执行一个。本题中console.log(1)、console.log(4)为同步任务先执行Promise.then进入微任务队列同步结束后立即执行setTimeout进入宏任务队列最后执行。这是前端笔试必考的基础考点务必牢记执行规则。二、数据统计函数按类型汇总金额题目给定 transaction 数组编写函数按 type 统计 coins 总和javascriptconst transaction [ { type:subscription, product_id:com.ai.transcribe.oneweek.pro, coins:10 }, { type:consumable, product_id:com.ai.transcribe.coins1, coins:100 }, { type:subscription, product_id:com.ai.transcribe.onemonth.pro, coins:50 }, { type:subscription, product_id:com.ai.transcribe.oneyear.pro, coins:100 }, { type:consumable, product_id:com.ai.transcribe.coins2, coins:200 } ]; function calcCoinsByType(transactions) { const map new Map(); for (let item of transactions) { const current map.get(item.type) || 0; map.set(item.type, current item.coins); } return Object.fromEntries(map); } // 输出{ subscription: 160, consumable: 300 }核心思路使用 Map 存储类型与总金额的映射遍历数组累加对应类型金额最后转为对象返回。考察数组遍历、Map 数据结构、数据聚合的基础能力是日常开发中数据处理的常见场景。三、开发常用高阶函数高阶函数是指接收函数作为参数或返回函数的函数前端开发高频使用的有数组操作类map映射、filter过滤、reduce聚合、sort排序性能优化类防抖debounce、节流throttle解决高频触发问题函数编程类柯里化函数、偏函数实现参数复用与逻辑解耦。高阶函数能简化代码、提升复用性是前端模块化开发的基础工具。四、async/await 与 Promise 的区别和联系核心结论async/await 是 Promise 的语法糖二者底层逻辑完全一致。联系async 函数返回值自动包装为 Promiseawait 后续只能跟 Promise暂停执行等待状态变更。区别Promise依赖.then/.catch 链式调用复杂逻辑易出现 “回调链”可读性较差async/await用同步写法写异步代码逻辑扁平化异常处理可结合 try/catch更符合线性思维。简单来说Promise 是异步编程的基础async/await 让异步代码更直观易维护。五、并行请求函数实现题目实现 fetchUrls 并行请求多个 URL忽略错误返回结果数组。完善代码javascriptasync function fetchUrls(urls) { const tasks urls.map(async (url) { try { const res await fetch(url); return await res.text(); } catch { return null; // 请求失败返回null不阻塞整体流程 } }); return Promise.all(tasks); }核心思路用 map 批量创建 Promise 任务try/catch 捕获单个请求异常通过 Promise.all 等待所有任务完成实现并行请求且不中断。这是前端并发请求、批量接口调用的常用方案。六、跨域问题CORS详解跨域定义浏览器同源策略限制协议、域名、端口任意一个不同即为跨域。同源策略是浏览器安全基石防止恶意网站窃取数据、发起非法请求。常用解决方案开发环境Vite/Webpack 反向代理生产环境Nginx 反向代理、后端配置 CORS 响应头其他JSONP仅支持 GET已少用、postMessage。跨域是前后端分离开发的高频问题理解原理才能快速定位解决方案。七、Promise 未捕获错误调试方案运行中未捕获的 Promise rejection 易导致页面异常推荐四步调试法控制台定位查看红色报错点击文件 行号直接跳转代码开启异步栈追踪F12-Settings 勾选 Async stack traces显示完整异步调用链路全局监听错误通过unhandledrejection事件拦截所有未捕获异常断点调试Sources 面板在 Promise/await 处打断点逐步排查请求、参数、解析问题。这套方案能快速定位异步错误提升调试效率。八、HTTP 与 HTTPS 的区别及安全原理核心区别HTTP明文传输数据易被窃听、篡改默认端口 80HTTPSHTTPTLS 加密协议默认端口 443传输数据加密处理。HTTPS 安全保障混合加密非对称加密交换密钥对称加密传输数据兼顾安全与效率CA 证书认证权威机构颁发证书验证服务器身份防止钓鱼数据完整性校验Hash 算法验证数据未被篡改。HTTPS 已成为 Web 应用标配是网络安全的基础保障。九、Node 文件处理常用函数Node.js 中 fs 模块是文件处理核心高频 APIfs.readFile读取文件内容fs.writeFile写入文件覆盖原有内容fs.appendFile追加内容到文件末尾fs.mkdir创建目录适配文件管理、日志存储等场景。十、常见 HTTP 状态码及处理方案开发中高频状态码处理400请求参数错误核对参数格式、个数、字段名401鉴权失败检查 Token 有效性、过期时间刷新接口免鉴权配置404接口不存在核对请求地址与请求方法504网关超时排查服务端响应速度、第三方接口延迟。状态码是接口调试的重要依据快速对应问题能提升开发效率。十一、浏览器输入 URL 到页面展示全流程URL 标准化补全协议、域名非 URL 跳转搜索引擎重定向处理301 永久重定向、302/307 临时重定向DNS 解析域名转 IP依次查浏览器、系统、Host、运营商缓存TCP 三次握手建立可靠连接TLS 握手HTTPS 场景下建立加密通道请求响应发送 HTTP 请求服务端返回资源浏览器渲染构建 DOM 树、CSSOM 树合成渲染树完成布局、绘制、合成显示。这是前端核心底层原理贯穿网络、渲染全流程。十二、浏览器首屏加载体验优化提升首屏速度的实战手段资源优化图片懒加载、小图转 Base64、选用 WebP/AVIF 压缩格式代码优化路由懒加载、按需加载组件缓存优化强缓存 协商缓存减少重复请求体验优化骨架屏、加载占位降低用户等待焦虑。十三、图片浏览 Web App 技术实现考量技术栈Vue3/ReactTailwind CSSVite兼顾效率与性能适配策略响应式布局兼容多端设备图片策略懒加载、格式优化、分类检索、防爬取权限管理未登录拦截、私密图片加密、双层防护。覆盖技术选型、用户体验、安全防护全维度符合实战项目开发逻辑。十四、原题展示
