字节-前端实习-二面面经

#发面经攒人品##牛客AI配图神器#1.简单介绍一下项目
2-9都是项目技术拷打,主要问选择xx技术的原因
10.图片性能加载问题
11.除了intersectionobserver,在这种监听上还有没有其他的一些方法?
12.说一下 Jsbridge 它的原理
13.RBAC 的背后的设计的思想(通过中间层做解耦和抽象)
14.AI agent 怎么使用的?平时在自己开发的项目里面,怎么去落地自己的 AI 实践?
15.在 AI 使用过程中就比较令人自己令自己比较难受的地方,或者说是希望大模型比较要改进的地方在哪?
16.有没有尝试过 workflow 这种有固定的大模型工具。
17.有没有用现在比较火的那种skill,这种沉淀一些自己的方法论。
18.算法题:全排列、字符串(空格分割、换行转二维数组)
19.输出题:同名函数优先级
20.平常学前端的一些渠道
21.有看过优秀项目的源码吗?比如说 react Vue 这种。
22.那其他的,比如说一些技术的前沿的一些东西。软件与行业,包括前端,也包括其他的方向的。有没有遇到过令你眼前一亮的项目
23.那为什么要做前端这个行业呢?
全部评论
楼主oc了吗
点赞 回复 分享
发布于 05-20 22:08 重庆
这面试估计要2小时啊
点赞 回复 分享
发布于 05-06 23:45 北京
看着问的还挺多呀
点赞 回复 分享
发布于 05-02 21:01 北京

相关推荐

面试时间:4.27下午2点 时长50min暑期最后一次面试了,这场面完暑期就结束了,问题比较少,八股和项目也很少,更多是一些底层或者开放的问题,但是回答的感觉很不好,感觉要折戟在这里了,让我进一次字节吧,求求求求求求求求求求求求求求求求,唉,好伤心1. 自我介绍2. 为什么选择前端方向3. 你现在最熟悉、最常用的是哪个 AI 模型4. 你平时除了用 AI 写代码,还会怎么用 AI5. 流式响应和普通请求响应的主要区别是什么6. 为什么你的 AI 对话项目选择用 SSE7. SSE 相比普通请求模式,有哪些优点和缺点8. AI 对话这种高频流式返回场景,前端会遇到哪些性能问题9. 你是怎么做 SSE 渲染性能优化的10. requestAnimationFrame在你的优化方案里是怎么用的11. 列表和数组这两种数据结构,在“判断某个值是否存在”这个场景下,应该选哪个12. 从底层存储和缓存角度看,数组和链表有什么差别13. 为什么你会觉得链表更快,你的依据是什么14. 一个数组里取最大的 K 个数,怎么做15. 如果不用排序,最大的 K 个数还能怎么做16. 手撕:快排  (原本是栈实现队列的,但是js里没有这两个类型就换了快排)17. 100 个人里有 1 个带病毒的人,只有 2 张试纸,怎么尽量少检测次数找出来18. 反问
查看17道真题和解析
点赞 评论 收藏
分享
作为前端开发者,做AI项目不仅能提升技术视野,更是未来竞争力的关键。以下是精选的GitHub项目及实现思路,覆盖不同难度和方向。------🎯 四大值得投入的AI项目方向1. AI增强型UI/UX - 最易上手让传统界面具备AI能力,如智能表单、内容生成、代码辅助等。2. AI Agent应用 - 技术深度构建能理解意图、使用工具、自主决策的智能体。3. 本地AI应用 - 隐私优先利用WebGPU在浏览器中运行模型,完全本地化。4. AI工具平台 - 产品思维将AI能力封装为可复用的工具或平台。------🚀 精选GitHub项目与简单实现1. alibaba/page-agent - GUI Agent标杆项目地址: github.com/alibaba/page-agent技术栈: TypeScript, 纯前端Star: 9.6k+ (2026年4月)核心价值:用自然语言控制网页,如“点击登录按钮”、“填写表单”。简单实现思路:// 1. 监听用户自然语言指令const command = "点击搜索框并输入'前端AI项目'";// 2. 解析指令为DOM操作const actions = parseToDOMActions(command);// 输出: [{type: 'click', selector: '.search-input'},//        {type: 'type', selector: '.search-input', text: '前端AI项目'}]// 3. 执行操作actions.forEach(action => {const element = document.querySelector(action.selector);if (action.type === 'click') element.click();if (action.type === 'type') element.value = action.text;});适合场景:SaaS后台、复杂表单、自动化测试工具。2. ai-website-cloner-template - AI逆向工程项目地址: github.com/xxx/ai-website-cloner-template (具体地址见搜索结果)技术栈: Next.js 16, React 19, TypeScript, Tailwind CSS v4核心价值:用AI分析网站并生成可维护的组件化代码。简单实现思路:// 1. 爬取目标网站const html = await fetch('https://target-site.com').then(r => r.text());// 2. AI分析结构(伪代码)const analysis = await ai.analyze({prompt: `将以下HTML转换为React组件结构,提取设计系统`,html: html});// 3. 生成组件// 输出: Button.tsx, Header.tsx, Card.tsx等适合场景:快速原型、设计系统提取、代码迁移。3. CanIRun.AI - 硬件检测工具项目地址: 具体地址见搜索结果技术栈: 纯前端,Web API核心价值:检测用户设备能否运行特定AI模型。简单实现思路:// 1. 检测GPU信息const gpuInfo = await navigator.gpu?.requestAdapter();const gpuMemory = gpuInfo?.memory; // 显存大小// 2. 模型需求数据库const modelRequirements = {'stable-diffusion-xl': { vram: 8, ram: 16 },'llama-3-8b': { vram: 6, ram: 8 }};// 3. 匹配评估function canRunModel(modelName) {const req = modelRequirements[modelName];return gpuMemory >= req.vram;}适合场景:AI工具站、模型推荐平台。4. Local LLM项目 - 浏览器运行大模型技术栈: Vue 3, TypeScript, @mlc-ai/web-llm核心价值:完全在浏览器中运行LLM,无需服务器。简单实现思路:// 使用 @mlc-ai/web-llm 库import { WebLLM } from "@mlc-ai/web-llm";// 1. 初始化引擎const engine = new WebLLM();await engine.reload("Llama-3-8B-Instruct-q4f32_1");// 2. 本地推理const response = await engine.chat.completions.create({messages: [{ role: "user", content: "你好" }],});适合场景:隐私敏感应用、离线AI助手。5. rag-react-agent - RAG+Agent实战项目地址: github.com/ewhue/rag-react-agent技术栈: React, LangChain, ChromaDB核心价值:基于RAG和ReAct的智能客服系统。简单实现思路:// 1. RAG检索const relevantDocs = await vectorStore.similaritySearch(userQuery, 5);// 2. ReAct Agent决策const agent = new ReActAgent({tools: [searchTool, calculateTool, answerTool],llm: openaiLLM});// 3. 执行推理链const result = await agent.run(`用户问: ${userQuery},相关文档: ${relevantDocs}`);适合场景:知识库问答、智能客服、文档助手。------📈 项目选择建议项目类型技术难度学习价值适合人群GUI Agent⭐⭐理解DOM操作自动化初级-中级网站克隆⭐⭐⭐AI代码生成、逆向工程中级本地LLM⭐⭐⭐⭐WebGPU、模型优化中高级RAG Agent⭐⭐⭐⭐检索增强、Agent架构中高级AI工具平台⭐⭐⭐产品思维、工程化中级------🛠️ 快速启动建议1. 从GUI Agent开始:技术栈熟悉,效果直观,1周可出原型2. 结合现有业务:为你的产品添加AI功能,如智能搜索、内容生成3. 关注WebGPU:这是前端AI的未来,Chrome 113+已支持4. 利用AI SDK:Vercel AI SDK、LangChain.js降低开发门槛最佳学习路径:1. 先做 page-agent 类项目,理解AI与DOM交互2. 再做 rag-react-agent,掌握RAG+Agent完整流程3. 最后挑战 Local LLM,深入浏览器AI底层这些项目不仅能写在简历上,更能让你真正理解前端如何与AI深度结合——这将是未来3年前端工程师的核心竞争力。
哪些AI项目值得做?
点赞 评论 收藏
分享
评论
4
13
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务