【面试】 前端竞争压力大？揭秘让你们学后端的真实动机！

前端开发属于程序员吗?

网友是这样回答的：

看完前端同学的评论，我悟了，你们让人都去学后端卷，然后减小前端竞争压力是吧？

哈哈哈，你们这帮老6……

于是我去拿出了我收藏的 某前端招聘JD来盘一盘

那些觉得是个人都能干前端的同学们想必已经熟练掌握了以下内容吧？

0.掌握图形学

webgl或熟练使用threejs框架，熟练canvas相关渲染及动画操作的优先。

🌈 初级阶段，学习图形学相关知识是必不可少的。了解矩阵等数学原理在动画中的作用，掌握三维场景的基础构成，能够使用Three.js搭建简单的3D场景。对于网页中的动画效果，要熟悉CSS动画属性和关键字的用法，并掌握一两个社区常用的JavaScript动画库。

🎯 中级阶段，除了掌握WebGL和Three.js框架之外，也要有能力自己封装一个简单的Three.js引擎。了解四元数的原理，能够优化鼠标操作中的节流问题，了解性能优化中的restore概念，了解requestAnimationFrame和setTimeout的区别以及在优化中的作用。同时，也要熟悉移动端加载和渲染性能问题，并懂得如何结合原生能力进行性能优化和排查。对于调试Chrome动画、3D和传感器也要有一定的了解。

🔍 高级阶段，应该具备搭建整套资源加载优化方案的能力，能够深入分析前端、客户端和服务端在项目中的功能点和基础能力依赖，并知道如何配合协作。设计并实现过前端动画引擎，并能清楚地解释复杂互动项目的技术架构，知道需要哪些核心模块以及它们之间的配合方式。同时还要有自己实现的动画相关技术方案，并能够从原理上清晰地解释和竞品的差异、优劣以及技术选型的原因。

标签：图形学、WebGL、Three.js、canvas、动画、性能优化、前端架构、前端动画引擎、资源加载优化、前端演进

1.熟练掌握JavaScript。

🔰 初级阶段，需要对JavaScript的各种概念有全面的了解。例如，组合寄生继承和class继承的区别，类的创建方式，闭包的实际应用和常见问题，模块的概念和用法，以及event loop的理解和对编码的影响。此外，还需要掌握基础的数据结构，如堆、栈和树，并了解它们在计算机基础中的作用。对于ES6数组相关的方法，如forEach、map和reduce，也要熟悉掌握。

💻 中级阶段，需要更加深入地理解JavaScript的特性和原理。了解class继承和组合寄生继承的区别，并能通过实例来说明。掌握event loop的原理，了解宏任务和微任务的区别，并能从个人理解的层面上解释为什么需要区分。了解node和浏览器在实现event loop时的差别。将继承、作用域、闭包和模块这些概念融贯贯通，并且能通过实际例子说明它们如何结合在一起。能够口头表达出2种以上设计模式的核心思想，并结合JavaScript语言特性举例或基础实现。掌握一些基础算法的核心思想或解决简单算法问题的能力，如排序和大数相加等

标签：JavaScript、编程能力、数据结构、ES6、算法核心思想、设计模式、基础实现

2.熟悉常用工程化工具，掌握模块化思想和技术实现方案。

🔧 在初级阶段，需要了解Webpack和Rollup的适用场景，并且了解Webpack v4和v3的区别。熟悉Webpack的基础配置，能够快速搭建一个基本的Webpack配置文件。了解Webpack打包结果的代码结构和执行流程，知道index.js和runtime.js的作用。理解并能口头表达出AMD、CMD、CommonJS和ES Module的概念，知道如何定义一个模块。给出两个文件，能够通过编写核心逻辑完成模块打包和执行。

🔌 在中级阶段，除了掌握基础配置外，还需要了解Webpack的打包链路和插件生命周期。知道如何编写一个Webpack插件和Loader。能够简明扼要地解释常见Loader的作用，比如Babel-loader、Vue-loader等。了解如何通过Webpack配置实现性能优化，并能清晰说明核心要点和解决的问题，包括需要的外部依赖，如CDN和接入层等。同时，还需要了解异步模块加载的实现原理，并能通过代码实现核心逻辑。

🏗? 在高级阶段，需要具备设计团队研发基础设施的能力。包括项目脚手架搭建以及如何以工具形态共享。了解如何设计团队的ESLint规范并实现统一更新。掌握工具化打包发布流程，包括本地调试、云构建和线上发布体系，以及一键部署能力。同时，还需要涉及相关服务端基础设施，如CDN服务搭建、接入层缓存方案设计和域名管理。另外，对于客户端缓存和预加载方案也需要有一定的了解和实践。

标签：Webpack、模块打包、配置、性能优化、异步加载、插件、脚手架、ESLint、基础设施、高级前端架构

3.熟练掌握React前端框架，了解技术底层。同时了解vue以及angular等其他框架者优先。

🚀初级阶段，作为React/Vue/Angular开发者，熟悉常见的优化方案，并能够迅速回答常用生命周期的用途。了解React/Vue/Angular的实现思路，能对比它们与原生JS控制DOM的差异，并能够给出一个简化版的框架实现。对于Diff算法的实现思路有一定了解。在使用state和props时有个人的使用心得，并结合受控组件、HOC等特性，描述各种方案的适用场景。以上几点对于Vue或Angular同样适用。

🔍中级阶段，能够清楚地解释为什么要实现Fiber，并了解可能带来的挑战和问题。解释为什么要实现Hook，并展示它如何简化组件之间的状态共享和复用。解释为什么要使用Immutable，并说明在使用和不使用之间需要考虑的因素。了解React中不常用的特性，如Context和Portal等。能够用自己的理解阐述React-like框架的本质，并说明如何实现这些框架的共存。

💡高级阶段，具备设计框架无关的技术架构的能力。包括但不限于解决可能存在的冲突问题，需要结合实际案例进行说明。能够说明架构分层的逻辑，以及各层核心模块要解决的问题。能够结合实际场景列举一些挑战和优雅的处理方案则更佳。在设计技术架构时，考虑到框架无关性，可以利用适配器模式或能力构造模式等解决不同框架之间的冲突问题。

🔄深入了解React/Vue/Angular的优化方案、生命周期和状态管理，了解它们的实现思路和与原生DOM控制的差异，以及使用state和props的心得，有助于成为一名优秀的前端开发者。理解Fiber、Hook和Immutable等技术的原因，了解React的不常用特性，以及实现React-like框架的本质，都是提升技术水平的关键。设计框架无关的技术架构，解决冲突问题，并能处理各层核心模块的挑战，将使你成为一位卓越的前端架构师。

标签：React、Vue、Angular、优化方案、生命周期、状态管理、Fiber、Hook、Immutable、Context、Portal、技术架构

4.熟练掌握react生态常用工具，redux/react-router等。

🔗初级阶段，作为React开发者，了解常用的库和框架，如React-Router、Redux、Redux-Thunk、React-Redux、Immutable和Antd等社区组件库。对于Vue和Angular，掌握它们相应的全家桶，并能够介绍它们的核心模块。了解浏览器中使用的React相关插件，并掌握它们的使用方法。熟悉React-Router v3/v4的差异，了解Antd的组件化设计思路。对于Redux-Thunk，明白其用途和实现方式。

📚中级阶段，具备查阅全家桶源码的能力，不要求每行都看，但至少了解核心实现原理和底层依赖。能够口述几行关键代码来实现对应库的功能即可。从数据驱动角度透彻地解释Redux，并能够描述原生JS如何与Redux结合使用。结合Redux、Vuex、Mobx等数据流框架，谈论自己对Vue和React的异同。

??高级阶段，具备基于全家桶构建复杂应用的经验，包括与微前端结合的实践。了解在使用这些类库时需要注意的事项，以及可能遇到的坑，并能提供解决方案。对于微前端和这些类库结合的场景，有清晰的认识，并能够给出相应的注意事项和解决方法。

💡掌握React/Vue/Angular的全家桶知识，了解浏览器中的React相关插件的使用方法，以及React-Router v3/v4的差异，Antd的组件化设计思路和Redux-Thunk的用途与实现方式，是初级开发者必备的技术栈知识。深入理解Redux及其与原生JS的结合，从数据驱动角度比较Vue和React的异同，是中级开发者的关键能力。在高级阶段，通过实践构建复杂应用时要注意微前端和这些类库结合时可能遇到的问题，并能提供解决方案。

标签：React、Vue、Angular、全家桶、浏览器插件、React-Router、Redux、Thunk、React-Redux、Immutable、Antd、数据流、微前端、开发经验、解决方案

5.熟悉各种Web前端技术，包括HTML/XML/CSS等，有基于Ajax的前端应用开发经验。

💡初级阶段,了解HTML方面的语义化标签，History API，Storage和AJAX2.0等技术。在CSS方面，了解文档流、重绘重排、Flex布局、BFC、IFC、:before/:after伪元素、动画、@keyframes、绘制三角形和优先级矩阵等概念。对于网络请求库axios，熟悉其核心功能。了解XHR的用法和网络请求的相关技术和底层原理，如Content-Type、不同类型的作用、RESTful设计理念、CORS处理方案，以及浏览器和服务端的执行流程。了解文件上传的实现方式。对于登录模块，了解登录表单的实现方式、基于Cookie的登录状态维护方案、基于Token的登录状态维护方案和Session的概念。

🌐中级阶段，能够结合各个浏览器API描述常用类库的实现。在CSS方面，能够深入解释网上常见的Hack方案或优化方案的原理。能够说明接口请求的前后端整体架构和流程，包括业务代码、浏览器原理、HTTP协议、服务端接入层、RPC服务调用和负载均衡。了解WebSocket的用法，包括鉴权、房间分配、心跳机制和重连方案。熟悉PC端和移动端的登录状态维护方案，了解基于Token的登录状态维护实现细节，以及服务端Session控制的实现。了解OAuth2.0的轻量和完整实现原理。了解移动端API请求和Socket通过Native发送的方法，以及与Native的数据交互方式，了解iOS和安卓的JSBridge实现原理。

📱 高级阶段，了解移动端WebView的基础知识，包括iOS端UIWebView和WKWebView之间的差异，WebView资源加载优化方案，WebView池管理方案，以及Native路由等。具备设计前后端用户体系整体技术架构的能力，以满足多业务形态的用户体验。考虑跨域名、多组织架构、跨端和用户态开放等场景。能够设计满足各种场景需求的Mock数据方案，并对前后端分离有深入理解。考虑Mock方案的通用性、场景覆盖度以及对代码和工程的影响。了解埋点方案的底层实现和技术选型原理。能够设计基于埋点的数据采集和分析方案，关键词包括分桶策略、采样率、时序性、数据仓库和数据清洗等。

标签：HTML、CSS、AJAX、网络请求、前后端架构、WebSocket、移动端登录态、WebView、用户体系、跨域、Mock、埋点、数据分析

🎯 看完后你觉得前端算程序员吗？对于一些人来说，照着网上的教程能写出一段代码、打印个"Hello, World"，或是按照最佳实践完成一个小项目似乎就可以说自己掌握了前端技能了。或者在公司的前端项目上进行二次开发就能满足一些人对前端掌握的要求了。

但是，真的有那么简单吗？

🔍 真正的前端技能远不止于此。掌握前端需要深入理解HTML、CSS和JavaScript，并且熟悉各种框架和库，掌握常用的设计模式和前端工具链。除了基础的页面布局和交互，前端工程师还需要考虑性能优化、跨浏览器兼容性、响应式设计等方面的问题。

💻 前端工程师需要具备开发和调试的技能，同时还要与后端和设计团队密切合作，理解业务需求并能够团队协作。在快节奏的工作环境中，前端工程师需要快速学习和适应新技术和工具的更新。

🌟 所以，前端不仅仅是简单的代码编写，它是一项需要不断学习和提升的技能，需要全面的知识和技术背景才能做出优质的前端作品。