高级前端面试题及答案2024，2024阿里淘系前端面试5面+HR面，前端开发要会什么

主要是 令牌化/建树/收集样式表/布局渲染树/绘制列表/栅格化/绘制图块/…这些过程。

强缓存与协商缓存, 主要讲了下E-Tag和Last-Modified以及对应的标识, 强缓存方案与协商缓存方案的场景, 比如index.html该用哪个?

CSS的水平居中与垂直居中

移动端1px, 老问题啦

Git操作, 主要是revert与reset, 我们工作室使用的是Git Flow, 并且区分Master和Dev分支这种, 小哥说了一个Git Flow无法handle的场景, 即一个feature还未合并到Master, 但是后面的一个feature已经通过提测要并进主干, 这时要如何处理?

React: 新旧生命周期的问题, 为什么要废弃旧版的(约束开发者以及Fiber架构可能会将其打断), 新版的有什么特点(getDerivedStateFromProps(nextProps, prevState), 这个方法是静态方法, 也就说你无法在里面获取到this, 还有就是入参为prevState, 这样就保证state和props之间更隔离). 还有就是我觉得很好玩的getDerivedStateFromErrors和componentDidCatch的协作.

React: PureComponent, 浅比较, 放一下shouldComponentUpdate中shallowEuqal的源码:

const hasOwn = Object.prototype.hasOwnProperty;

function is(x, y) {

if (x === y) {

return x !== 0 || y !== 0 || 1 / x === 1 / y;

} else {

return x !== x && y !== y;

}

}

export default function shallowEqual(objA, objB) {

if (is(objA, objB)) return true;

if (

typeof objA !== “object” ||

objA === null ||

typeof objB !== “object” ||

objB === null

) {

return false;

}

const keysA = Object.keys(objA);

const keysB = Object.keys(objB);

if (keysA.length !== keysB.length) return false;

for (let i = 0; i < keysA.length; i++) {

if (!hasOwn.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {

return false;

}

}

return true;

}

React: setState之后发生的.

多次setState的合并与获取最新的state, 其实这俩个是同一处代码(好像是particalState), 内部对参数的Object类型和Function类型做了不同的处理, 为函数的情况下, 会在setState调用完成并且组件开始rerender的时候被调用.

Node: stream和Buffer, 面试前不久刚写过流式的文件上传所以记忆犹新, 回答了四种流(可写/可读/可写可读/可转换), 以及常用的几个pipe方法

Buffer的话主要提了一下它是堆外内存(V8的常驻内存由代码区/栈/堆/堆外内存组成)啥的.

Node: 内存管理, 这个有看到过通过启动命令更改堆内存上限的文章所以了解的多了一下, 主要关键词有 新生代/老生代假说, Scavenge算法(采用复制实现内存回收, 典型的牺牲空间换时间), From/To空间, 标记清除, 标记整理, 增量标记(将标记阶段拆分为控制在5ms内的小步骤, 每隔一段时间执行, 提高程序流畅性.)

二面

微信小程序, 这个是二面的重点提问之一, 包括以下几个方面:

生命周期, 包括应用级的和页面级的

架构, View - Native - JavaScript的层级, 系统层能力, 如微信开放能力/离线存储/网络请求等. 视图层的话, 安卓下是腾讯自主研发的基于Blink的X5内核, IOS的话则是自带的WebKit-Webview

使用async/await, 小程序目前好像并不能原生支持async/await语法, 需要引入FB的Regenerator库. 说到这个, 我很好奇Taro/Remax这些方案中是如何处理async/await的, 降级为Promise吗?

鉴权, code2session这个api, 使用sessionKey生成token, openid作为主键入数据库, 再返回自定义的登录态标识

与 H5/RN/Flutter/PWA 这些差异, 主要是和 H5/PWA , 我其实不太认同 PWA是小程序祖师爷 这种说法, 甚至认为不是一个性质, 只是他们的目的/玩法是相似的

WXS, 当时小程序也用到了, 主要特点就是运行在View层的逻辑, 并且由于JavaScript在IOS下运行在JSCore, 安卓下运行在V8的原因, 在IOS上WXS可以达到JS数十倍的性能, 但在安卓上和JS持平.

setState, 很神奇的一点: 数据改变同步而视图更新异步, 主要也是因为上面提到的架构的原因. 有兴趣的可以再查阅相关资料

小程序如何做到禁止访问Dom, 我的理解是小程序压根就没提供DOM/BOM的API, 并且在打包编译的JS里也获取不到Window对象

@Penumbra/cli, 一个思路类似Feflow的脚手架, 也是 脚手架核心+模板插件包+构建器 的一个组合, 模板插件包的话, 前端包含 Webpack/Parcel + TypeScript/JavaScript的组合, 后端包含Koa/Egg + RESTFul/GraphQL的组合. 主要问了这些问题:

为什么要整这个东西, 解决了哪些问题?

带来了什么好处?

为什么还添加了Parcel

Parcel和Webpack

错误监控, 我们目前使用的方式是Sentry以及Release时上传Source-Map文件的方式. 自己实现的话, React的思路主要是一个最外层的组件, 借助getDerivedStateFromError与componentDidCatch来捕获错误.

Https加密机制

Git Rebase 与 Git Merge

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）

ajax

1)ajax请求的原理/ 手写一个ajax请求？
2)readyState？
3)ajax异步与同步的区别？
4)ajax传递中文用什么方法？

一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

617708624)]

[外链图片转存中…(img-wn1BnolB-1712617708624)]

一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
[外链图片转存中…(img-Iiv4YX1p-1712617708624)]