最后
那我们该怎么做才能做到年薪60万+呢,对于程序员来说,只有不断学习,不断提升自己的实力。我之前有篇文章提到过,感兴趣的可以看看,到底要学习哪些知识才能达到年薪60万+。
通过职友集数据可以查看,以北京 Android 相关岗位为例,其中 【20k-30k】 薪酬的 Android 工程师,占到了整体从业者的 30.8%!
北京 Android 工程师「工资收入水平 」
今天重点内容是怎么去学,怎么提高自己的技术。
1.合理安排时间
2.找对好的系统的学习资料
3.有老师带,可以随时解决问题
4.有明确的学习路线
当然图中有什么需要补充的或者是需要改善的,可以在评论区写下来,一起交流学习。
网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
面试题来源
简历中写着使用 Hooks 结合高阶组件完成业务开发
解题思路
- 反向入坑问题,如果是业务迁移可以说明进行部分改造迁移导致
- 正向说明 Reat Hooks 中不需要高阶组件的写法,例如 Redux 举例
- 自定义 Hook
可能追加的面试题
- 完全用 Hooks 的写法是否可以摒弃高阶组件的写法?
- 怎么使用 Hooks 替代高阶组件?
参考链接
Ajax 请求放在 componentDidMount
里进行处理还是放在componentWillMount
里进行处理比较合适?
解题思路
- 服务端渲染
- Event Loop
gaearon :If it’s an async request, it won’t be fulfilled by the time the component mounts anyway, regardless of where you fire it. This is because JS is single threaded, and the network request can’t “come back” and be handled while we are still rendering. So the difference between firing it earlier and later is often negligible.
You’re right that it matters in some rare cases though and for those cases it might make sense to break the recommendation. But you should be extra cautious as state can update before mounting, and if your data depends on state, you might have to refetch in that case. In other words: when in doubt, do it in componentDidMount.
The specific recommendation to avoid side effects in the constructor and Will* lifecycles is related to the changes we are making to allow rendering to be asynchronous and interruptible (in part to support use cases like this better). We are still figuring out the exact semantics of how it should work, so at the moment our recommendations are more conservative. As we use async rendering more in production we will provide a more specific guidance as to where to fire the requests without sacrificing either efficiency or correctness. But for now providing a clear migration path to async rendering (and thus being more conservative in our recommendations) is more important.
JS 是单线程,Ajax 请求不会 “返回” 并且触发当我们正在 rendering 的时候(Ajax 的执行结果会放到任务队列中,等主线程执行完后采取读取任务队列中的任务进行执行),因为理论上放在哪里结果都一样,都会执行两次 render。
这样的话,就没必要在componentWillMount
中调用 Ajax,以避免理解不到位,对state的结果预计错误。componentDidMount
的执行很明了,不会引起歧义,所以在componentDidMount
中最合理了。
可能追加的面试题
- 说说 React 官方推荐 Ajax 请求放在
componentDidMount
里进行处理,而不是放在componentWillMount
里进行处理? - 如果 Ajax 请求放在
componentWillMount
里进行处理,且 Ajax 的返回结果在 render 之前,那么最终会执行几次 render ?
参考链接
React 在语法层面可以做哪些性能优化?
解题思路
- PureComponent + Redux + immutable-js / immutability-helper
- Redux -> Redux Toolkit
- 组件库按需加载
- 动态 Ployfill
- Tree Shaking
- 路由懒加载
- Hooks useCallback
- React Fragments
- 构建函数中的事件 bind 处理
- 避免使用内联样式属性
- JSX 中合理控制条件渲染的范围(避免无谓的重复渲染)
- key
- 保持 state 中数据必响应的特性
可能追加的面试题
- 深比较和浅比较的区别是什么?
- 平常在 render 时有哪些需要注意的地方?
React 和 Vue 的区别?
建设中…(这个会写的比较详细)
可能追加的面试题
- 说说 React 和 Vue 的三个明显的区别?
- 能说说 React 相比 Vue 的优势在哪里?
- 能说说 Vue 相比 React 的优势在哪里?
- 你觉得在什么场景下用 Vue 或 React ?
Vue 篇
Vue CLI 3 有哪些特性?
面试题来源
简历中写着 Vue CLI 技术栈
解题思路
- 图形化界面(vue ui)
- 插件系统
- CLI 服务
- Vue CLI 无需 Eject 即可进行 Webpack 配置(针对 Create React App)
- 可配置化 Polyfill
- 现代模式
- Prefetch / Preload
- webpack-merge / webpack-chain
- 浏览器兼容性
- CSS 预处理器
- 环境变量
- 构建应用 / 库 / Web Components 组件
- 部署(CORS / PWA)
- …
可能追加的面试题
- 有没有设计过通用的 Vuc CLI 插件?
- 有没有设计过通用的 Vue 脚手架?
- 有研究过 Vue CLI 的源码吗?
能对比一下 Create React App 和 Vue CLI 3 吗?
面试题来源
简历上写着熟悉 React 和 Vue 技术栈
解题思路
类型 | Create React App | Vue CLI 3.x |
---|---|---|
可一键构建 SPA 应用 | √ | √ |
Script | react-scripts(可定制化) | @vue/cli-service |
ESLint 插件集 | react-app | eslint-plugin-vue(插件化) |
CSS Modules | √ | √ |
CSS 预处理器 | 自定义 Sass | 天然支持 Sass & Less & Stylus(可配置化) |
PostCSS 后处理器 | √ | √ |
HTML 和静态资源 | HTML 插值 & Svg 组件化 | HTML 插件 & Preload & Prefetch & 多页应用 & URL 规则 |
代码分割 | √ | √ |
环境变量 | √ | √ |
PWA | √ | 插件化 |
单元测试 | Jest | 插件化(Ject & Mock & …) |
Proxy | √ (灵活,但往往需要自定义) | √(这种变成配置项) |
TypeScript | 模板 | 插件化 |
自定义脚手架模板 | Custom Templates(template.json ) | Preset & 插件系统(非常棒,可远程) |
Webpack 配置 | Eject & Webpack files | Inspect & vue.config.js & 默认配置全面 & webpack-merge & webpack-chain(有学习成本) |
Webpack 分析 | Source map explorer | vue ui(GUI 交互式) |
快速原型开发 | × | @vue/cli-service-global |
交互式开发 | × | vue ui |
浏览器兼容性 | 现代浏览器(自定义 Polyfill & browserslist) | browserslist & Polyfill & 现代模式 |
构建 | 应用 | 应用 & 库 & Web Components 组件 (异步) |
友情提示:这里指的是默认功能比较,而不是说不能进行功能自定义扩展!
Creat React App 在工程化体系上没有 Vue CLI 3.x 更加的开箱即用,除此之外,Vue CLI 3.x 中的插件体系是一个非常棒的特性,它使自定义脚手架模板变得非常灵活(非常适合企业定制化脚手架)。当然 Create React App 是有它自己的设计理念的,对于简单的应用它是一种优势(不可配置化预先约定)。
Vue.js 整个实现原理?
面试题来源
简历中写着熟悉 Vue.js 源码,或者简历中只写着 Vue.js 技术栈,或者面试的过程找不到亮点
解题思路
这里简单的描述一下 Vue 2.x 的运行机制(需要注意分析的是 Runtime + Compiler 的 Vue.js)。
初始化流程:
-
创建 Vue 实例对象
-
init
过程会初始化生命周期,初始化事件中心,初始化渲染、执行beforeCreate
周期函数、初始化data
、props
、computed
、watcher
、执行created
周期函数等。 -
初始化后,调用
$mount
方法对Vue实例进行挂载(挂载的核心过程包括模板编译、渲染以及更新三个过程)。 -
如果没有在 Vue 实例上定义
render
方法而是定义了
template
,那么需要经历编译阶段。需要先将
template
字符串编译成
render function
,
template
字符串编译步骤如下 :
-
parse
正则解析template
字符串形成 AST(抽象语法树,是源代码的抽象语法结构的树状表现形式) -
optimize
标记静态节点跳过 DIFF 算法(DIFF 算法是逐层进行比对,只有同层级的节点进行比对,因此时间的复杂度只有 O(n)。如果对于时间复杂度不是很清晰的,可以查看我写的文章ziyi2/algorithms-javascript/渐进记号) -
generate
将 AST 转化成render function
字符串 -
编译成
render function
后,调用$mount
的mountComponent
方法,先执行beforeMount
钩子函数,然后核心是实例化一个渲染Watcher
,在它的回调函数(初始化的时候执行,以及组件实例中监测到数据发生变化时执行)中调用updateComponent
方法(此方法调用render
方法生成虚拟 Node,最终调用update
方法更新 DOM)。 -
调用
render
方法将render function
渲染成虚拟的Node(真正的 DOM 元素是非常庞大的,因为浏览器的标准就把 DOM 设计的非常复杂。如果频繁的去做 DOM 更新,会产生一定的性能问题,而 Virtual DOM 就是用一个原生的 JavaScript 对象去描述一个 DOM 节点,所以它比创建一个 DOM 的代价要小很多,而且修改属性也很轻松,还可以做到跨平台兼容),render
方法的第一个参数是createElement
(或者说是h
函数),这个在官方文档也有说明。 -
生成虚拟 DOM 树后,需要将虚拟 DOM 树转化成真实的 DOM 节点,此时需要调用
update
方法,update
方法又会调用pacth
方法把虚拟 DOM 转换成真正的 DOM 节点。需要注意在图中忽略了新建真实 DOM 的情况(如果没有旧的虚拟 Node,那么可以直接通过createElm
创建真实 DOM 节点),这里重点分析在已有虚拟 Node 的情况下,会通过sameVnode
判断当前需要更新的 Node节点是否和旧的 Node 节点相同(例如我们设置的key
属性发生了变化,那么节点显然不同),如果节点不同那么将旧节点采用新节点替换即可,如果相同且存在子节点,需要调用patchVNode
方法执行 DIFF 算法更新 DOM,从而提升 DOM 操作的性能。
需要注意在初始化阶段,没有详细描述数据的响应式过程,这个在响应式流程里做说明。
响应式流程:
- 在
init
的时候会利用Object.defineProperty
方法(不兼容 IE8)监听Vue实例的响应式数据的变化从而实现数据劫持能力(利用了 JavaScript 对象的访问器属性get
和set
,在未来的 Vue3 中会使用 ES6 的Proxy
来优化响应式原理)。在初始化流程中的编译阶段,当render function
被渲染的时候,会读取Vue实例中和视图相关的响应式数据,此时会触发getter
函数进行依赖收集(将观察者Watcher
对象存放到当前闭包的订阅者Dep
的subs
中),此时的数据劫持功能和观察者模式就实现了一个 MVVM 模式中的 Binder,之后就是正常的渲染和更新流程。 - 当数据发生变化或者视图导致的数据发生了变化时,会触发数据劫持的
setter
函数,setter
会通知初始化依赖收集中的Dep
中的和视图相应的Watcher
,告知需要重新渲染视图,Wather
就会再次通过update
方法来更新视图。
可以发现只要视图中添加监听事件,自动变更对应的数据变化时,就可以实现数据和视图的双向绑定了。
可能追加的面试题
- Vue.js 源码的入口主要做了些什么处理?
- Vue.js 中的数据劫持是怎么实现的?浏览器兼容性呢?
- Vue.js 中的依赖收集是怎么处理的?和闭包有什么关联吗?
- Vue.js 中的模板解析需要经历哪几个阶段?
- Vue.js 中的虚拟节点优势是什么?
- Vue.js 中的 DIFF 算法是怎么处理的?
- Vue.js 中 DIFF 算法的时间复杂度是多少?为什么?
- Vue.js 中
computed
/watch
实现的原理是什么? - Vue.js 中有哪些周期函数?这些周期函数都是在什么时机执行的?
- Vue.js 中的
$nextTick
的原理是什么?它主要经历了哪些变化?为什么? - Vue.js 对 DOM 的更新做了哪些标记优化处理?
- Vue.js 在语法层面可以做哪些优化处理?
- Vue.js 2.x 中的 Proxy 代理主要做了些什么工作?
- Vue.js 2.x 中如何支持 TypeScript ?
- Vue 3.x 的源码相对 Vue 2.x 主要做了哪些变化?
- Vue.js 中的 M / V / VM 分别指的是哪些?
- Vue-loader 主要有哪些特性?
- Vue.js 如何做 ESLint 校验?
- Vue.js 如何做单元测试?
- 了解过 Vue-Router / Vuex 的源码吗?(感知性问题,不会深入问)
- 发布 / 订阅模式和观察者模式的区别是什么?
- 手写一个发布 / 订阅模式?
- 简述 MVC / MVP / MVVM 的区别?
- 如果熟悉 Nuxt 等可能会问 SSR 的实现原理?
- 平常遇到 Vue.js 报 error / warning 的时候有深入追踪错误栈的习惯吗?
参考链接
Vue.js 中组件之间通信有哪些方案?
解题思路
- Vuex
- Event Bus
- Pub / Sub
- Emit / On
- provide / inject
- Element UI dispatch / broadcast
- props
- parent / children 实例对象
可能追加的面试题
- Element UI 中
dispatch
和broadcast
是如何实现的? - 祖先和子孙之间通信有哪些方案?
- 任意组件之间通信有哪些方案?
Vue 的项目是怎么规划的,有做过相应的脚手架吗?
$nextTick
执行的时机和 DOM 渲染的关系是什么?
可能追加的面试题
- 什么是 Event Loop ?
- 宏任务和微任务有什么区别?
- 哪些是宏任务哪些是微任务?
$nextTick
在几个版本迭代中都经历了什么变化?- 打开新的浏览器窗口时会重新创建一个新的 Network 进程吗?
参考链接
Vue 使用的是什么版本,如何配合 TypeScript 工作,TypeScript 有哪些特性?
Vue 里的 keep-alive
是怎么实现的?
建设中…
面试题来源
简历中出现 keep-alive
信息
可能追加的面试题
- 设置了
keep-alive
之后对组件渲染的生命周期有什么影响? keep-alive
有哪些特性?
说说 Vue 里的数据劫持在不同版本里是如何处理的?
Vue 的整个框架的实现原理大致可分为哪几个部分?
Vue 能做哪些性能优化?
解题思路
keep-alive
- 路由懒加载
- Preload / Prefetch
- key
- 响应式依赖扁平化
- 减少非必要的响应式依赖
Object.freeze
- DOM 滚动加载
- v-if / v-show
- computed / watch
- 事件销毁(防止内存泄漏)
- 组件按需引入
- 预渲染
- 按需 Polyfill
- 模板预编译
- 渲染函数
- 官方风格指南 + 官方 ESLint 插件
- …
可能追加的面试题
- 路由懒加载是如何实现的?
- Coding Split 和哪些 Webpack 配置相关?
- Polyfill 是什么?Vue 支持哪些相关的可配置化信息?
- Vue 中可以使用 JSX 吗?(居然有人不清楚 JSX 是什么)
组件篇
React 中受控组件和非受控组件的区别?
面试题来源
简历写着抽取公共业务组件
解题思路
- 数据由 React 组件 / DOM 节点管理
可能追加的面试题
- 在哪些场景应该使用非受控组件?
参考链接
React 中如何实现一个 Input 组件开发?
公司的组件库搭建、设计与维护?
面试题来源
简历写着设计和维护公司的组件库
解题思路
- 完整引入 / 按需引入
- 构建流程设计
- 单元测试
- 输出模式(umd / commonjs2 / es6)
- 样式构建
- 国际化 / 工具
- ESLint / Prettier / Stylint
- TypeScript(声明) / JavaScript
- Webpack 配置 / Webpack 分析
- Babel 处理
- Polyfill 注意点
- Markdown 演示 & CI
- 三方库处理方式
- 浏览器兼容性
- Autoprefixer
- Lerna / Single Npm / Multiple Npm
- Single Npm & Template
- Git 钩子处理 & Git 规范
- 语义化版本规范
- 团队 / 范围 / 开发规范 / 代码 Review
可能追加的面试题
- Webpack 构建速度 / 性能优化?
- Webpack 分析工具?
- 组件库的框架设计?
- 构建 Bundle 优化?
- 按需加载功能可以有哪些实现方案?
- 主要负责了哪些组件的设计?
- 主动性的业务组件封装案例?
- 看过 xxx 组件库的源码设计吗?
- 设计组件的时候会考虑对 TypeScript 进行支持吗?
- 业务组件的单元测试一般需要测试什么内容?
参考链接
了解 Element UI 组件的框架设计吗?
面试题来源
简历写着使用 Element UI 进行业务开发并自己设计过组件
参考链接
组件库要做按需加载,觉得应该怎么做?
面试题来源
简历写着使用使用按需加载提升页面性能
解题思路
- Single Npm
- Lerna
- Multi Entry Syntax
如何自动屏蔽 Input 的自动密码填充?
设计模式篇
设计模式中观察者模式和发布 / 订阅模式有哪些区别?
面试题来源
简历中写着熟悉设计模式、Redis、Vue 源码等
可能追加的面试题
- 平常在哪些地方有使用到观察者或发布 / 订阅模式?
参考链接
了解 MVC / MVP / MVVM 的区别吗?
参考链接
工程化篇
Webpack 构建速度优化有哪些方案?
面试题来源
项目中写着使用 Webpack 进行构建速率优化
解题思路
- speed-measure-webpack-plugin
- 排除三方库,防止二次打包
- thread-loader
- cache-loader
- HappyPack
- parallel-webpack
- …
可能追加的面试题
- 未优化前构建需要多少时间,优化后构建需要多少时间?
- 有没有分析是什么问题导致构建速率变慢?
说说你对 cz 生态的了解?
面试题来源
项目中写着使用 cz 规范 Git 提交
参考链接
简单说说 Webpack 对于性能优化有哪些特性?
建设中…
性能优化篇
了解 SPA 的懒加载么?
建设中…
Vue 如何配合 Echarts / OpenLayers 实现性能优化?
建设中…
服务篇
有做过基于 Express 的应用框架技术选型么?
建设中…
前后端分离的历史?分离模式带来的好处和坏处有哪些?
建设中…
Node 里的事件循环机制和浏览器的事件循环机制有什么区别?
建设中…
说说怎么用纯粹的 Node.js 做一个服务端框架?谈谈 Node.js 服务端 MVC 的理解?
建设中…
熟悉 Node,谈谈服务端 MVC 的演变历史?
建设中…
跨域的解决方案有哪些?cors 是怎么处理跨域?
建设中…
框架篇
什么是 H5 ?
建设中…
AMD 、CMD 和 CommonJS 区别?
建设中…
可能追加的面试题
- common.js 和 ES 6 中模块引入的区别?
如何设计突发大规模并发架构?
建设中…
一般公司是怎么部署前端代码?
建设中…
HTTP 篇
随便聊聊 Ajax,聊聊 axios?
建设中…
axios 库有什么能力?axios 库发请求的之前能做拦截么?
建设中…
可能追加的面试题
- axios 库发请求的之前能做拦截么?
- axios 库发请求的时候能取消请求么?
硬件层和前端是如何做通讯的?
可能追加的面试题
- WebSocket 的浏览器兼容性如何处理?
谈谈你对缓存的理解,举一个和你最相关的缓存的使用案例。
建设中…
服务端推送主要用到什么技术?
建设中…
HTTP 2 相对于 HTTP 1 有什么区别?
建设中…
WebSokect 本质上是基于什么协议进行通信的(TCP / UDP)?
可能追加的面试题
- 在不兼容 WebSockect 的情况下如何做降级兼容处理?
简单介绍一下 Graphql,说说为什么要在你的项目中使用 Graphql?
建设中…
了解跨域么,一般什么情况下会导致跨域?
建设中…
cookie 和 session 的区别?
建设中…
测试篇
平常开发的过程中有写过单元测试或者 e2e 测试么?
建设中…
自动化测试主要是做什么?
建设中…
优化篇
SEO 有哪些优化方案?
建设中…
可能追加的面试题
- 预渲染的原理是什么?
说说任何前端优化处理?
建设中…
业务篇
规范代码书写的适用范围有多大?
版权信息小工具是干什么的,能具体介绍一下么?
介绍一下 dtd 组件,组件是如何维护的,版本是怎么控制的?
在业务的开发中有没有发现什么痛点并对其进行改进?
有没有觉得交互设计不合理然后自己想出方案推动交互更改的案例?
前端广告投放如何?Chrome 如何劫持广告?
简化业务设计的复杂度案例有么?
有没有做过什么工具简化业务开发?
Moxtra 是你主推的么?讲讲RxJS?
有没有主动 own 过业务,并高效排除业务风险的案例?
说说如何衡量提升产品的体验?
友情提示:有些业务问题主要针对的是简历中的项目,在这里不适合展示。不过有一点需要注意,面试官可能会对业务的数据非常感兴趣,所以在业务上有比较 NB 的数据可以体现的最好可以提前准备好。业务这一块可能会考量的点:业务数据 / 业务难点 / 业务成果 / 业务贡献 / 业务主动性 / 业务 own 能力 / 技术栈选型考量 / 业务影响范围 / 业务通用性 / 业务思考 …
名词解析篇
什么是渐进增强和优雅降级?
建设中…
笔试篇
0 1 1 2 3 5 8,假设第 0 个是 0,第 1 个是 1,求第 n 个数的实现方式?
简单实现一个发布订阅机制?
简单实现带立即执行参数的消抖函数:function debounceImmediate (fn: Function, wait: number, immediate: boolean))
?
实现一个扑克牌式的插入排序(我们总是喜欢将某张扑克牌插入到已排序的扑克中),输入:[5,6,1,8,7,2,4,3]
,输出:[1,2,3,4,5,6,7]
,并提供单元测试思路(如何测试你的代码是稳定正确的)?
混沌篇
你觉得你最擅长什么?
假设某个组织下面挂了 10 w 个节点,如何做优化处理?
用 Vue 的时候有没有遇到过难以解决的问题?
说说你业务中觉得性能优化最大的一个场景?
说说你业务中至今没有解决的问题?
说说你业务中遇到最难解决的问题?
八卦篇
高效的自学能力,能举个例子体现一下高效么?
总结
Android架构学习进阶是一条漫长而艰苦的道路,不能靠一时激情,更不是熬几天几夜就能学好的,必须养成平时努力学习的习惯。所以:贵在坚持!
上面分享的字节跳动公司2020年的面试真题解析大全,笔者还把一线互联网企业主流面试技术要点整理成了视频和PDF(实际上比预期多花了不少精力),包含知识脉络 + 诸多细节。
就先写到这,码字不易,写的很片面不好之处敬请指出,如果觉得有参考价值的朋友也可以关注一下我
①「Android面试真题解析大全」PDF完整高清版+②「Android面试知识体系」学习思维导图压缩包阅读下载,最后觉得有帮助、有需要的朋友可以点个赞
网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
八卦篇
高效的自学能力,能举个例子体现一下高效么?
总结
Android架构学习进阶是一条漫长而艰苦的道路,不能靠一时激情,更不是熬几天几夜就能学好的,必须养成平时努力学习的习惯。所以:贵在坚持!
上面分享的字节跳动公司2020年的面试真题解析大全,笔者还把一线互联网企业主流面试技术要点整理成了视频和PDF(实际上比预期多花了不少精力),包含知识脉络 + 诸多细节。
就先写到这,码字不易,写的很片面不好之处敬请指出,如果觉得有参考价值的朋友也可以关注一下我
①「Android面试真题解析大全」PDF完整高清版+②「Android面试知识体系」学习思维导图压缩包阅读下载,最后觉得有帮助、有需要的朋友可以点个赞
[外链图片转存中…(img-XB6LJJSi-1715755869758)]
[外链图片转存中…(img-UPHYxMWW-1715755869758)]
[外链图片转存中…(img-navtL1CH-1715755869759)]
网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!