最后
编程基础的初级开发者,计算机科学专业的学生,以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念,以优化代码,提高编程技能。这份笔记都是可以作为参考的。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
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
Flutter 与 React Native底层
Serverless, 这一块可以讲FaaS以及BaaS, 还有Serverless对前端意义, 这个问题千人千面, 就不展开来讲了.
三面&四面
三面和四面发问的角度和提出的问题比较类似, 因此就放在一起讲了。
介绍项目, 通常会问面试官是对业务型项目还是设施型项目比较感兴趣, 业务型的话就介绍小程序, 设施型就介绍@Penumbra/cli
不要东扯一点西扯一点, 以 技术栈 -> 业务场景 -> 亮点 -> 难点 -> 提炼总结 -> 自我提升 这几个步骤来叙述会更加条理清晰, 其中亮点/难点以STAR法则介绍最佳
@Penumbra/cli这个, 上面已经介绍过, 就不再赘述. 主要为了体现 新工程目录建立繁琐 -> 应当成员之间统一目录结构 这个意识
GraphQL, 主要介绍了这些:
GraphQL的意义, 与RESTFul的差异
对后端的影响
Apollo生态, 在这里我想大胆猜测下, 未来的BFF层一定少不了这三个东西: Apollo-Server & TypeGraphQL & Apollo-Rest-Datasource, 至于它们是什么感兴趣同学可以去查查. Apollo不仅提供了服务端支持, 也提供了客户端支持, 即Apollo-Client, 同时使用Server和Client来构建应用真的能起到1+1>2的效果, 因为二者就像是一体的
推广阻力, 其实只要一个团队比较年轻就没有什么阻力, 主要是可能有一定的学习/开发/维护成本~ 嚷嚷着"学不动了"在前端世界里可能真的寸步难行
Webpack性能调优, 从 打包速率 / 打包大小 / 交互友好 三个方面入手的, 这里可以稍微列举一些我觉得比较好用/有趣的Plugin:
friendly-errors-webpack-plugin, 主要是对抛出的错误做了界面优化, 很多cli都在用
speed-measure-webpack-plugin, 测量各个环节的打包耗时, 也可以找出哪一个loader/plugin耗时最久
terser-webpack-plugin, 压缩JS
webpack-bundle-analyzer, 分析打包产物
webpack-visualizer-plugin, 同样是分析打包产物, 但是更直观
webpack-parallel-uglify-plugin, 并行压缩, 好像和terser功能重复了
webpackbar, 强烈推荐! 在打包时会有进度条(VuePress就用的这个)
preload-webpack-plugin, 预加载
至于从配置入手的话, 主要是减少查找文件时间和减少build代码体积, 前者可以通过resolve字段中配置extension, loader中配置exclude, 后者的话则主要是Tree-Shaking(注意, CSS也可以做摇树优化), 代码分割(动态加载以及Lodash/Antd这种庞大的模块), Source-Map模式, 压缩代码等等。
React函数式组件
React Hooks:
useState
useEffect, 不传dep与传入[], 分别对标类组件的哪个生命周期.
useLayoutEffect
useRef, 还有useImperativeHandle与forwardRef
useRef,使函数式组件也能够享受到获取 DOM 元素或者自定义组件,父组件获取子组件引用而后调用子组件方法,如 focus 等
forwardRef,可以获取父组件的 ref 实例作为子组件的参数(与 props 同级),然后再把这个 ref 绑定到自己内部节点,就可以实现 ref 的透传了!
useImperativeHandle,常与 forwardRef 搭配使用,可以控制向父组件暴露的属性以及方法,第一个参数即为 forwardRef 包裹后得到的父组件 ref 实例
useMemo与useCallback
Hooks思想, 比如Vue3的新API, 社区React生态也在纷纷拥抱Hooks思想, 比如上面提到的的React-Redux的useSelector和useDispatch, React-Use还有Umi-Hooks等等
Node的Cluster模块, 主从模式, 底层的Libuv
CI/CD
埋点, 主要是以GA为代表的一键式埋点方案, 以MixAlpha/神策数据为代表的可视化埋点等
测试, Jest/Enzyme/Puppeteer编写单元/集成/E2E测试
Flutter
五面
五面的面试官可能比较忙, 因此整个面试过程大概就二十分钟左右. 以自己的经历为主, 如果你是独行侠, 也可以讲一讲自己在社区的贡献等等, 不要直接说你喜欢独来独往一个人全干。
HR面
这一面就是常见的问题啦:
大学成绩
兴趣爱好
有没有女朋友 俩人以后的职业规划
个人职业规划
成就感
学习笔记
主要内容包括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,数组,数组方法,二维数组,字符串
3D变形属性,CSS3 的过渡属性,CSS3 的动画属性,CSS3 新增多列属性,CSS3新增单位,弹性盒模型
[外链图片转存中…(img-hMNefq2C-1714884229962)]
JavaScript
**JavaScript:**JavaScript基础,JavaScript数据类型,算术运算,强制转换,赋值运算,关系运算,逻辑运算,三元运算,分支循环,switch,while,do-while,for,break,continue,数组,数组方法,二维数组,字符串
[外链图片转存中…(img-KICa3wW3-1714884229963)]