余姚网站建设62752762,陕西交通建设集团公司网站,做企业官网需要什么手续,百度网站开发业务关注若川视野#xff0c;回复pdf 领取资料#xff0c;回复加群#xff0c;可加群长期交流学习滴滴前端实习面经滴滴是我投简历之后第二家面试的公司#xff0c; 国庆节前两三天投的简历#xff0c; 国庆后复工第一天就给我打了电话约一面。那时候… 关注若川视野回复pdf 领取资料回复加群可加群长期交流学习滴滴前端实习面经滴滴是我投简历之后第二家面试的公司 国庆节前两三天投的简历 国庆后复工第一天就给我打了电话约一面。那时候因为还没什么面试经验所以一面有些紧张很多题虽然是八股题 但因为都是第一次答所以有些磕巴和不全面(后来就成老油条了)。总结一下:一面问的都是常规基础题 主要考察对知识掌握的广度初级前端需要的技能栈基本都有所涉及(不超出简历所写的技能范围)。二面的时候 因为面试官对我的简历比较感兴趣所以将近一半时间都在问项目 还有我自己和前端无关的一些动手折腾的经历。大概考虑到自己还是存在比较明显的项目经验短板所以加了三面把我推给了搞开源框架的小程序负责人这一面比较难 会扣细节谈认识然后开屏幕共享手撕中等难度的JavaScript题编程题和算法题。注意 面试题只给出整体思路以及某些需要特别注意的地方部分会附上一些个人推荐的文章链接但答题细节不做全部展开。一面滴滴的面试非常准时视频会议的入口在开始前十几分钟前才以短信的形式发过来。两点钟的面试对面一点五十九分打开摄像头。面试官是一个小姐姐很漂亮人也很温柔 听鼻音是感冒了但依然会很耐心地和你说不要紧张问题没答好还会帮着给提示总之面试体验非常nice啦让我这个面试经验几乎为零的小菜鸡不至于太紧张。1. css部分1.1 盒模型开头面的好几家都连续问到了这个问题所以这道基础之基础题可以多看争取回答的滴水不漏。关键点: 不要漏掉IE的怪异盒模型1.2 怎么实现一个水平居中先说自己实际中常用的就两种flex三板斧绝对定位然后补充说一些其它的有些比较trick了解就好: absolute margin负值/cacl/50%/translate、writing-mode text-align、基于视口、grid三板斧Tips: 《CSS揭秘》有谈到克服解决居中问题的历史循序渐进比满天飞的罗列居中方法的文章有意思的多如果觉得死记硬背记不全可以从历史演变的角度来理解记忆。垂直居中-《CSS揭秘》-微信读书早期方法表格布局法/行内块法/绝度定位 → translate → 视口单位 → Flexbox → Grid再就是些奇技淫巧: 快狗打车-:before搭配vertical-align:middle2. JS部分2.1 JavaScript有哪些数据类型基本数据类型undefined、null、boolean、number、string、symbol引用数据类型object、array、functionTips: 千万不要漏掉nullundefinedSymbol2.2 JavaScript是单线程还是多线程本质考察的是消息队列和事件循环首先JavaScript是单线程这是它的核心特征现在和未来都不会改变即使加入Web Worker但子线程完全受主线程控制不会改变JavaScript单线程的本质为了统筹调度唯一主线程上的各种任务引入消息队列和时间循环机制有需要的话可以展开详述不过这就是另一个大坑了......JS部分除了这两道应该还问了几道JavaScript相关题暂时想不起来了3. 浏览器部分3.1 项目中有遇到过跨域的问题吗你是怎么解决的我当时回答的有些支离破碎, 这里直接给出一位朋友的公众号文章吧(欢迎点关注哈~)前端时光屋-跨域解决方案3.2 现在使用的浏览器是单进程还是多进程讲了一遍Chrome架构的发展史:单进程浏览器时代(存在的几个问题) → 多进程浏览器时代(新加入了哪些进程) → 面向服务架构的时代(工作内容以及有什么意义)3.3 描述一下浏览器渲染过程这里只给出骨架HTML解析 → 字节流Bytes转为Tokens → 生成node节点 → 构造DOM树 → 同时请求CSS和JavaScript文件 → 响应CSS数据, 构建CSSOM → 响应并执行JavaScript → 继续构建DOM → 构建布局树 → 分层 → 分块→ 合成(包括光栅化)4. 计网部分4.1 常见状态码有哪些先从整体讲起状态码含义1××指示信息–表示请求已接收继续处理2××成功–表示请求已被成功接收、理解、接受3××重定向–要完成请求必须进行更进一步的操作4××客户端错误–请求有语法错误或请求无法实现5××服务器端错误–服务器未能实现合法的请求平时遇到比较常见的状态码有:200301302304400401403404422 500然后逐个讲说到304的时候提到了检查缓存这个时候小姐姐开始灵魂追问(属于自己把自己带进坑了)4.2 追问: 是在命中强缓存还是协商缓存的时候才返回304呢?协商缓存生效返回304和Not Modified4.3 追问: 那聊聊浏览器缓存推荐文章浏览器缓存4.4 三握手的过程直接放一篇写的非常好的文章通俗大白话来理解TCP协议的三次握手和四次分手4.5 OSI七层模型我一直背的是五层模型其实很多地方都用的OSI标准学校课本也是但我不记得了......安利一波阮一峰老师的TCP/IP协议入门(很基础但讲的非常清晰)互联网协议入门一阮一峰互联网协议入门二阮一峰回答的时候不知怎么的扯到了HTTPS(又一次把自己带偏)4.5 追问: HTTPS位于哪一层呢HTTPS所处的安全层插入在TCP和HTTP之间连接了传输层和网络层但并不会影响到上层的 HTTP 协议也不会影响到下层的 TCP/IP5. Git部分5.1 用过哪些Git命令balabala说了一大通~对于Git还是挺有信心的因为参与过几个项目的PR包括github某大名鼎鼎的女装项目(大误Git闯关游戏也基本通关了自以为问题不大现在想想估计就是给接下来的问题挖了坑吧5.2 怎么切换到新分支git checkout咯创建 切换分支就是git checkout -b new branch5.3 手上的代码还不足够commit需要暂存当前工作并返回上一个commit应该用哪个Git命令前面讲了很多我用过的命令小姐姐估计特意挑了一个我没说的这个情景没答上来因为确实不记得有对应的处理命令了。瞎说了一个git add到缓冲区然后checkout到另一个分支。小姐姐提示说这样不行哦会污染当前的工作区状态然后给出了正确操作:git stash 还建议我回去可以了解一下git方面推荐一篇从实践里总结出来的好文(非全面归纳)可惜自己当初没有细看前端瓶子君-珍藏多年的 Git 问题和操作清单6. 框架框架题基本被我水掉了因为我这段时间用的都是ReactVue还是一年多前对着文档写过东西中间一直没捡回来所以和滴滴目前Vue为主的技术栈不太吻合和小姐姐也不太聊的上来中间甚至还有一小段尴尬的沉默......最后还是象征性地问了一个八股题6.1 React和Vue的区别可以围绕的角度: 数据绑定、数据渲染、生命周期、使用场景、开发风格、操作粒度等等.....还可以提一嘴Vue3做出的改变7. 分析输出这两道题因为是现场给出的都找不到原题了this指向题是我根据记忆大概重写的异步分析题是在网上找的类似的7.1 this指向分析var myObject {foo: bar,func: function() {var self this;console.log(this.foo); console.log(self.foo); (function() {console.log(this.foo); console.log(self.foo); }());}
};
myObject.func();输出bar
bar
undefined
bar7.2 异步分析在网上找了一道题比小姐姐出的面试题要难一丢丢这道题比起原面试题多了async/wait少了一个setTimeout(面试题里有两个定时器)能正确分析出这道题对于异步最基础的认知应该就没问题了async function foo() {console.log(foo)
}
async function bar() {console.log(bar start)await foo()console.log(bar end)
}
console.log(script start)
setTimeout(function () {console.log(setTimeout)
}, 0)
bar();
new Promise(function (resolve) {console.log(promise executor)resolve();
}).then(function () {console.log(promise then)
})
console.log(script end)输出结果放在这里分析完了可以核对:script start
bar start
promise executor
script end
foo
bar end
promise then
setTimeout8. 算法部分这道算法是剑指offer原题小姐姐出题的时候也直说了是剑指offer上的在一个 n * m 的二维数组中每一行都按照从左到右递增的顺序排序每一列都按照从上到下递增的顺序排序。请完成一个函数输入这样的一个二维数组和一个整数判断数组中是否含有该整数。这道题用二分查找法或者坐标系法(原书解法)都可以搞定直接放LeetCode链接二维数组中的查找二面二面的是个能明显感觉到技术很强的小哥哥后来加了微信才知道小哥哥已经在滴滴工作四五年了1. 聊项目这一块都是对着简历里写的东西问的不只有项目还有自己以前做的各种奇奇怪怪的折腾和开发经历不展开来说只把问题记录一下吧~1.1 你用lua脚本的写的一个小应用介绍一下1.2 追问: 怎么实现这里面的广告拦截1.3 展示一下字体设计1.4 组件库项目的设计思路2. async有用过吗 它是怎么实现异步的介绍了Promise和GeneratorGenerator底层实现机制--协程协程执行流程协程如何与Promise配合封装执行生成器代码(参考co)回到async/wait的语法糖3. ES6怎么兼容低版本的浏览器正确思路应该是从Babel和AST结合去展开讲比如Babel将 ES6 源码转换为 AST然后再将 ES6 语法的 AST 转换为 ES5 语法的 AST最后利用 ES5 的 AST 生成 JavaScript 源代码对了当然也不要忘记去讲Polyfill推荐参考:Babel文档-Babel/polyfill(已经拆分为core-js和regenerator-runtime)但我那时候一下子只想到了Babel所以选择了两个我自己熟悉的角度切入(后来发现其实跑题了......)我经常会用Babel去帮助深入理解一些ES6的特性举了两个例子:for循环中的let的隐蔽作用域 编译成ES5是什么样子ES6怎样去编译class后端开发了解过吗答: 大二学了java但掌握的很浅然后正在学习node……有用过TS吗答: typescript也正在待学习清单上……小哥哥继续问: 尽可能说一下对TS了解答: (胡言乱语)TS增加了泛型 更向java靠拢……实在扯不下去了小哥哥看我不怎么了解也没问下去了连续水了node和typescript的问题出现两块这么大的空白感觉已经有点崩了4. 你简历上写了对V8有过了解那么说说JavaScript和C有什么区别一开始没有get到重点只说了JavaScript是动态的(不需要检查数据类型)弱类型(支持隐式类型转换)的语言而C是静态(需要检查数据类型)的弱类型(支持隐式类型转换)的语言。然后小哥哥提醒可以说说两者在编译上的区别吗追问: JavaScript和C在编译上的区别本质就是考察JavaScript编译原理这里直接放一个对比图吧5. 追问: 你说C编译生成了一个exe文件那这个exe文件里具体存储的是什么呢这个不是很了解......(不敢深入说)6. 说一说你对JIT的认识细节不再赘述这里面可以讲的太多 直接上总图三面第三面是加面(滴滴的前端实习本来只有两面)二面的小哥哥把我推给了滴滴小程序部门的leader这位大佬主导开发了滴滴一个开源框架mpx但其实给人感觉特别平易近人1. react有一些新特性比如fiber谈谈你对react fiber的认识常规问题愿意的话可以讲的非常深入2. 说说你对打包器的了解讲了讲以前手动封装一个JavaScript打包器的经历2.1 追问: 怎么引入依赖这个没答好babel/parser 解析入口文件(已经过时 需要拆分)获取 AST使用 babel/parser 解析并读取器解析入口文件使用 babel/parserJavaScript解析器解析代码生成 AST抽象语法树解析 AST解析入口文件内容获取所有依赖模块 dependencies推荐阅读如何用 Babel 为代码自动引入依赖3. 你在简历里写到用styled-components实践了CSS in JS谈一谈你的认识先讲一下ES6的标签模板然后讲styled-components相对CSS mosules的优势比如可以直接写JavaScript逻辑代码 而且不必再采用内联样式解决了一些CSS modules中很机械的写法比如类名不能使用连接符className写法固定的问题4. 性能优化这个可以说的太多太多了先从自己的经验切入扯了一些实际用到过的比如从DOMFragment转移到虚拟DOM啦 把耗时操作分解到微任务和延时队列啦will-change和requestAnimationFrame啦webpack首屏优化啦script的defer和async啦懒加载啦balabala挺多的实践经验讲完了然后系统归纳优化方案加载阶段减少关键资源(HTML、JavaScript、CSS)个数减少关键资源大小降低关键资源的 RTT 次数交互阶段减少 JavaScript 脚本执行时间避免强制同步布局避免布局抖动尽可能利用 CSS 合成动画避免频繁的垃圾回收关闭阶段如何安全退出再送一张图5. 手写: 组合继承冴羽大佬的博客里对这个梳理的很好但那篇文章更多像是红宝书的读书笔记所以建议直接反复阅读红宝书上继承的部分(写的非常精彩)参考范例引用自冴羽的博客JavaScript深入之继承的多种方式和优缺点function Parent (name) {this.name name;this.colors [red, blue, green];
}
Parent.prototype.getName function () {console.log(this.name)
}
function Child (name, age) {Parent.call(this, name);this.age age;
}
Child.prototype new Parent();
Child.prototype.constructor Child;
var child1 new Child(kevin, 18);
child1.colors.push(black);
console.log(child1.name); // kevin
console.log(child1.age); // 18
console.log(child1.colors); // [red, blue, green, black]
var child2 new Child(daisy, 20);
console.log(child2.name); // daisy
console.log(child2.age); // 205.1. 追问: 分析你写的组合继承中的原型链这个很简单说明白就好了7. 手写: async这个网上的资料很多我就不把自己写的贴出来了: )8. 算法: 三数之和给你一个包含 n 个整数的数组 nums判断 nums 中是否存在三个元素 abc 使得 a b c 0 请你找出所有满足条件且不重复的三元组。这道题在LeetCode原题上稍有改动条件里的 a b c 0 改成了 a b c target不过都是差不多的啦~思路: 双指针夹逼 二分法加速照例放上LeetCode链接三数之和至此三轮实习生面试所有能回忆起来的内容结束推荐阅读知乎问答一年内的前端看不懂前端框架源码怎么办我在阿里招前端我该怎么帮你文末有福利如何拿下阿里巴巴 P6 的前端 Offer如何准备阿里P6/P7前端面试--项目经历准备篇大厂面试官常问的亮点该如何做出如何从初级到专家(P4-P7)打破成长瓶颈和有效突破若川知乎问答2年前端经验做的项目没什么技术含量怎么办末尾你好我是若川江湖人称菜如若川历时一年只写了一个学习源码整体架构系列~(点击蓝字了解我)关注若川视野回复pdf 领取优质前端书籍pdf回复加群可加群长期交流学习我的博客地址https://lxchuan12.gitee.io 欢迎收藏觉得文章不错可以点个在看呀^_^另外欢迎留言交流小提醒若川视野公众号面试、源码等文章合集在菜单栏中间【源码精选】按钮欢迎点击阅读也可以星标我的公众号便于查找
