路遥知马力,奋斗见真心

初级:

学习过图形学相关知识,知道矩阵等数学原理在动画中的作用,知道三维场景需要的最基础的构成,能用 threejs 搭 3d 场景,知道 webgl 和 threejs 的关系。
知道 canvas 是干嘛的,聊到旋转能说出 canvas 的 api。
知道 css 动画,css 动画属性知道关键字和用法(换句话说,电话面试会当场出题要求口喷 css 动画,至少能说对大概,而不是回答百度一下就会用)。
知道 js 动画,能说出1~2个社区 js 动画库,知道js动画和css动画优缺点以及适用场景。
知道raf和其他达到60fps的方法。
中级:

如果没有 threejs,你也能基于 webgl 自己封装一个简单的 threejs 出来。
聊到原理能说出四元数,聊到鼠标操作能提到节流,聊到性能能提到restore,聊到帧说出 raf 和 timeout 的区别,以及各自在优化时候的作用。
知道怎样在移动端处理加载问题,渲染性能问题。
知道如何结合 native 能力优化性能。
知道如何排查性能问题。对 chrome 动画、3d、传感器调试十分了解。
高级:

搭建过整套资源加载优化方案,能说明白整体方案的各个细节,包括前端、客户端、服务端分别需要实现哪些功能点、依赖哪些基础能力,以及如何配合。
设计并实现过前端动画引擎,能说明白一个复杂互动项目的技术架构,知道需要哪些核心模块,以及这些模块间如何配合。
有自己实现的动画相关技术方案产出,这套技术方案必须是解决明确的业务或技术难点问题的。为了业务快速落地而封装一个库,不算这里的技术方案。如果有类似社区方案,必须能从原理上说明白和竞品的差异,各自优劣,以及技术选型的原因。
1.熟练掌握 JavaScript。

初级:

JavaScript 各种概念都得了解,《JavaScript 语言精粹》这本书的目录都得有概念,并且这些核心点都能脱口而出是什么。这里列举一些做参考:
知道组合寄生继承,知道 class 继承。
知道怎么创建类function + class。
知道闭包在实际场景中怎么用,常见的坑。
知道模块是什么,怎么用。
知道event loop是什么,能举例说明event loop怎么影响平时的编码。
掌握基础数据结构,比如堆、栈、树,并了解这些数据结构计算机基础中的作用。
知道ES6数组相关方法,比如forEach,map,reduce。
中级:

知道class继承与组合寄生继承的差别,并能举例说明。
知道event loop原理,知道宏微任务,并且能从个人理解层面说出为什么要区分。知道node和浏览器在实现loop时候的差别。
能将继承、作用域、闭包、模块这些概念融汇贯通,并且结合实际例子说明这几个概念怎样结合在一起。
能脱口而出2种以上设计模式的核心思想,并结合js语言特性举例或口喷基础实现。
掌握一些基础算法核心思想或简单算法问题,比如排序,大数相加。
2.熟悉常用工程化工具,掌握模块化思想和技术实现方案。

初级:

知道webpack,rollup以及他们适用的场景。
知道webpack v4和v3的区别。
脱口而出webpack基础配置。
知道webpack打包结果的代码结构和执行流程,知道index.js,runtime.js是干嘛的。
知道amd,cmd,commonjs,es module分别是什么。
知道所有模块化标准定义一个模块怎么写。给出2个文件,能口喷一段代码完成模块打包和执行的核心逻辑。
中级:

知道webpack打包链路,知道plugin生命周期,知道怎么写一个plugin和loader。
知道常见loader做了什么事情,能几句话说明白,比如babel-loader,vue-loader。
能结合性能优化聊webpack配置怎么做,能清楚说明白核心要点有哪些,并说明解决什么问题,需要哪些外部依赖,比如cdn,接入层等。
了解异步模块加载的实现原理,能口喷代码实现核心逻辑。
高级:

能设计出或具体说明白团队研发基础设施。具体包括但不限于:
项目脚手架搭建,及如何以工具形态共享。
团队eslint规范如何设计,及如何统一更新。
工具化打包发布流程,包括本地调试、云构建、线上发布体系、一键部署能力。同时,方案不仅限于前端工程部分,包含相关服务端基础设施,比如cdn服务搭建,接入层缓存方案设计,域名管控等。
客户端缓存及预加载方案。
3.熟练掌握React前端框架,了解技术底层。同时了解vue以及angular等其他框架者优先。

初级:

知道react常见优化方案,脱口而出常用生命周期,知道他们是干什么的。
知道react大致实现思路,能对比react和js控制原生dom的差异,能口喷一个简化版的react。
知道diff算法大致实现思路。
对state和props有自己的使用心得,结合受控组件、hoc等特性描述,需要说明各种方案的适用场景。
以上几点react替换为vue或angular同样适用。
中级:

能说明白为什么要实现fiber,以及可能带来的坑。
能说明白为什么要实现hook。
能说明白为什么要用immutable,以及用或者不用的考虑。
知道react不常用的特性,比如context,portal。
能用自己的理解说明白react like框架的本质,能说明白如何让这些框架共存。
高级:

能设计出框架无关的技术架构。包括但不限于:
说明如何解决可能存在的冲突问题,需要结合实际案例。
能说明架构分层逻辑、各层的核心模块,以及核心模块要解决的问题。能结合实际场景例举一些坑或者优雅的处理方案则更佳。
4.熟练掌握react生态常用工具,redux/react-router等。

初级:

知道react-router,redux,redux-thunk,react-redux,immutable,antd或同级别社区组件库。
知道vue和angular对应全家桶分别有哪些。
知道浏览器react相关插件有什么,怎么用。
知道react-router v3/v4的差异。
知道antd组件化设计思路。
知道thunk干嘛用的,怎么实现的。
中级:

看过全家桶源码,不要求每行都看,但是知道核心实现原理和底层依赖。能口喷几行关键代码把对应类库实现即达标。
能从数据驱动角度透彻的说明白redux,能够口喷原生js和redux结合要怎么做。
能结合redux,vuex,mobx等数据流谈谈自己对vue和react的异同。
高级:

有基于全家桶构建复杂应用的经验,比如最近很火的微前端和这些类库结合的时候要注意什么,会有什么坑,怎么解决
5.熟悉各种Web前端技术,包括HTML/XML/CSS等,有基于Ajax的前端应用开发经验。

初级:

HTML方面包括但不限于:语义化标签,history api,storage,ajax2.0等。
CSS方面包括但不限于:文档流,重绘重排,flex,BFC,IFC,before/after,动画,keyframe,画三角,优先级矩阵等。
知道axios或同级别网络请求库,知道axios的核心功能。
能口喷xhr用法,知道网络请求相关技术和技术底层,包括但不限于:content-type,不同type的作用;restful设计理念;cors处理方案,以及浏览器和服务端执行流程;口喷文件上传实现;
知道如何完成登陆模块,包括但不限于:登陆表单如何实现;cookie登录态维护方案;token base登录态方案;session概念;
中级:

HTML方面能够结合各个浏览器api描述常用类库的实现。
css方面能够结合各个概念,说明白网上那些hack方案或优化方案的原理。
能说明白接口请求的前后端整体架构和流程,包括:业务代码,浏览器原理,http协议,服务端接入层,rpc服务调用,负载均衡。
知道websocket用法,包括但不限于:鉴权,房间分配,心跳机制,重连方案等。
知道pc端与移动端登录态维护方案,知道token base登录态实现细节,知道服务端session控制实现,关键字:refresh token。
知道oauth2.0轻量与完整实现原理。
知道移动端api请求与socket如何通过native发送,知道如何与native进行数据交互,知道ios与安卓jsbridge实现原理。
高级:

知道移动端webview和基础能力,包括但不限于:iOS端uiwebview与wkwebview差异;webview资源加载优化方案;webview池管理方案;native路由等。
登陆抽象层,能够给出完整的前后端对用户体系的整体技术架构设计,满足多业务形态用户体系统一。考虑跨域名、多组织架构、跨端、用户态开放等场景。
mock方案,能够设计出满足各种场景需要的mock数据方案,同时能说出对前后端分离的理解。考虑mock方案的通用性、场景覆盖度,以及代码或工程侵入程度。
埋点方案,能够说明白前端埋点方案技术底层实现,以及技术选型原理。能够设计出基于埋点的数据采集和分析方案,关键字包括:分桶策略,采样率,时序性,数据仓库,数据清洗等。
6.有良好的编码习惯,对前端技术有持续的热情,个性乐观开朗,逻辑性强,善于和各种背景的人合作。

初级:

知道eslint,以及如何与工程配合使用。
了解近3年前端较重要的更新事件。
面试过程中遇到答不出来的问题,能从逻辑分析上给出大致的思考路径。
知道几个热门的国内外前端技术网站,同时能例举几个面试过程中的核心点是从哪里看到的。
高级:

在团队内推行eslint,并给出工程化解决方案。
面试过程思路清晰,面试官给出关键字,能够快速反应出相关的技术要点,但是也要避免滔滔不绝,说一堆无关紧要的东西。举例来说,当时勾股老师面试我的时候,问了我一个左图右文的布局做法,我的回答是:我自己总结过7种方案,其中比较好用的是基于BFC的,float的以及flex的三种。之后把关键css口喷了一下,然后css就面完了。
7.具有TS/移动设备上前端开发/NodeJS/服务端开发等经验者优先。

根据了解的深度分初/中/高级。
知道TS是什么,为什么要用TS,有TS工程化实践经验。
知道移动端前端常见问题,包括但不限于:rem + 1px方案;预加载;jsbridge原理等。
能说出大概的服务端技术,包括但不限于:docker;k8s;rpc原理;中后台架构分层;缓存处理;分布式;响应式编程等。

稿件来源:阿里云开发者社区

你可能感兴趣的:(路遥知马力,奋斗见真心)