2024年最新好的始终在后面，虾皮、快手、拼多多均失利，终拿字节 offer，2024前端网络编程总结篇

学习笔记

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue等等

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

HTML/CSS

**HTML：**HTML基本结构，标签属性，事件属性，文本标签，多媒体标签，列表 / 表格 / 表单标签，其他语义化标签，网页结构，模块划分

**CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式

HTML5 /CSS3

**HTML5：**HTML5 的优势，HTML5 废弃元素，HTML5 新增元素，HTML5 表单相关元素和属性

**CSS3：**CSS3 新增选择器，CSS3 新增属性，新增变形动画属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

JavaScript

**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

作者：flytam

来源：https://juejin.cn/post/6855649603497230350

年中的时候因个人原因，打算离开腾讯，到外面看看，投了若干简历，最终面试了字节跳动、虾皮、快手、拼多多这4家公司。有的喜有的忧，本文是对本次面试的一个总结。

快手

快手是最早约的面试，在boss直聘上投完大概几天就约了。也是我本次第一家面试的公司。时间某个工作日的晚上8点，那天早早溜回家面试了，是在牛客网上进行的

主要问的问题如下：

• react16新增了哪些生命周期、有什么作用，为什么去掉某些15的生命周期（写过码看过文档都能答上了）

• fiber怎样的，如何实现异步渲染（链表/可中断）

• redux和redux-saga的区别和原理

• 项目中用到的saga-duck是个什么东西

• useEffect的实现原理（坦白说自己没看过react的实现，就说了下preact的实现）

• 异步渲染和旧版的diff的区别

• babel实现转码的过程（词法/语法分析）

• 项目的技术栈怎么选型（这种问题好几次都被问到，感觉我真的不太知道怎么答）

• 小程序底层实现原理了解多少（说了下双线程模型/预加载webview）

• 项目nodeJs应用异常退出如何处理(pm2/uncaughtException事件等)、日志上报怎么做（输出重定向到文件，elk服务传传到kibana）

• graphic schema怎么设计（说了下我对于项目中的理解，资源维度，感觉回答不太好）

• 有哪些技术驱动业务的案例（说了下这个插件的思路和webpack一些优化）

最后写了一道算法：最大乘积子序列，有正负数的情况。应该对应于这个leetcode题目。这里我理解错题意以为这个序列是可以不连续的，而且对于理解错的题意也用了一种错误的写法，用了o(n2)的一种实现。然后面试官提示说o(n)，最后还是没做出来。这个题目其实自己在之前的刷题的时候自己也是比较顺利能解出来了，这里有点可惜，面试临场代码能力还是有待加强

最后面试官大概讲了下部门情况，他们那边是深圳快影前端团队，目前规模还不大，正在大力招人。最后还问了下我如何看待目前部门工程化建设不足的问题，我表示这是一个很好的机会去挑战自己（hhh）。

当时这次面试之前，差不多两年没面试了（上一次面试还是2018年的8月），很多地方自己感觉也是表现不太好。虽然面试官最后说了认为我是一个比较优秀的同学，让我当时迷之自信误以为会有下一轮。过了一周没有任何答复后，去boss直聘上问了下hr，答复说算法有待加强，第一次面试凉凉～

拼多多

拼多多投的是广州的部门，好像是小程序团队，通过一个同学内推的

一面 47分钟。某天晚上9点

• redux的理念(说了下action dispatch state啥的，单向数据流)

• react-redux中connect怎么实现(高阶组件、context注入store、subscribe订阅store数据变化)

• mixin hoc 继承的区别，优缺点

• react diff如何实现

• react 旧版的diff用深度优先还是广度优先。为什么用深度优先，广度优先能实现吗（其实我认为广度也能实现的，面试官问广度有啥不好，我确实不知道…）

• diff的时间复杂度？为什么？(o(n)。提了下react优化o(n3)->o(n))

• react-router实现原理(hash/html5 history)

• 客户端路由hash/history实现的区别、原理

• 有哪些常见的http头

• websocket/轮询的好处和缺点 （性能、兼容性）

• websocket的握手过程（urgrade websocket）

• tcp的握手过程

• tcp/udp的区别

• 一个应用场景redux触发几次action如何设计（这个问题感觉有点迷，不知道有啥问，我回答也有点迷，面试官说可以了…）

• 尽可能多实现pdd app导航布局实现（就是类似4等分div并列排布）

• 如何清除浮动

• BFC实现原理

• 开放题：pdd首页假设没有任何优化，尽可能多的想优化的办法（懒加载、打包优化、webpack速度、代码压缩、雪碧图、http2 balabala…）

二面 周日 下午2.30 35分钟

• css的盒子模型（content-box border-box）

• 实现动画有哪些方法 (js css)

• react mixing hoc 继承 hook之间的区别/优缺点

• 浏览器渲染出一个页面的过程

• vue/react技术选型

• 项目相关，项目重构开发如何并行balabala…

• 项目中工程化进行了哪些优化

• 项目中继续进行优化会从哪些方面去做(说了下webpack5 module fedration)

• nodejs项目的性能优化

• linux文件权限（4 2 1 ）

• 前端监控怎样实现 (数据采集、上报、展示之类)

三面 本来约了去星期天广州现场的，结果车票都买好了，前几天，hr说部门架构调整，岗位暂时不开放了。又凉了～

拼多多的面试时间还是很合适的，周天+晚上9点，基本可以避免上班的尴尬（毕竟11 11 6…）。问的问题也中规中矩吧。不过也无缘了。拼多多的两轮是比较少有的不需要手写代码的，都是电话面试。

虾皮

虾皮通过一个同学内推的，面的金融部门

虾皮都是qq视频面试+腾讯文档word写代码

一面 周二早上

• http 302 301 307之间的区别

• 301和302对于seo来说哪个更好 (301)

• 跨域是什么、如何解决

• jsonp有什么缺点

• 图片base64和外链的应用场景，各有什么优缺点(base64减少请求数，但是会增加额外的体积)

• http缓存机制

• https的握手过程是怎样的

• set/map的区别

• hook的局限性

• setState和hook的区别

• decorator的作用，编译后是怎样的(@decorator -> decorator(target)…)

• symbol是什么，一般用来做什么

• csrf 是什么 如何防范

• sql注入是什么，如何防范

• react 调用setState之后发生了什么

• nodejs事件循环机制

• pm2的原理，有哪些模式(cluster fork)

• docker和k8s有了解多少(k8s听过没用过)

• 移动端端一个元素拖动，如何实现和优化（节流、改变位置）

-for in/for of 看代码输出

• 几道看代码说输出（忘了具体题目了）

• 描述链表的反转怎样实现，复杂度多少

编程

• 实现instanceOf

• 实现一个对象被for of遍历

• 实现链表的添加、删除。复杂度多少

一面考的都是一些基础知识，需要一定牢固的基础知识准备才行

二面 时间 一面之后的下午

• 给了两段效果上都可以实现child 继承 parent，细节上的差别

function child(){}

function parent(){}

child.prototype.proto = parent.prototype

child.prototype = new parent()

• 一些代码看输出的题目。考点有函数this指向的问题

• 如何监听html外链资源加载失败(面试官又追问了onerror 和addEventListener的error都能吗。面试官说onerror不行，具体我没试过…)

• Mutation Observer、Interp Observer使用场景（Interp听过没用过）

• 127.0.0.1和0.0.0.0差别（一个只能通过localhost ，一个可以通过本机ip或者localhost都行）

• 利用promise js sleep函数实现

• jsx转换后是怎样的

• redux compose函数做什么的，中间件呢

• redux-saga是什么，和redux-thunk有什么区别

• dva有了解吗

• umi.js有用过吗

• req.pipe(res)

最后

全网独播-价值千万金融项目前端架构实战

从两道网易面试题-分析JavaScript底层机制

RESTful架构在Nodejs下的最佳实践

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

一线互联网企业如何初始化项目-做一个自己的vue-cli

思维无价，看我用Nodejs实现MVC

代码优雅的秘诀-用观察者模式深度解耦模块

前端高级实战，如何封装属于自己的JS库

VUE组件库级组件封装-高复用弹窗组件

g.cn/aHR0cHM6Ly9waWMxLnpoaW1nLmNvbS84MC92Mi04YTY0YTU3YTdlNDFmZDc3OTRiZWYzNjVkYjNlYzQxMF9oZC5qcGc?x-oss-process=image/format,png)

前端高级实战，如何封装属于自己的JS库

VUE组件库级组件封装-高复用弹窗组件