2022年2月前端常见技术汇总

2022/02/13

- 原文链接 -

实习前端

熟练使用 html(html5 Web语义化 DOM BOM)
css(css3 选择器 盒模型 flex布局 BFC块级格式化上下文 重排与重绘)
javascript(ajax ES6 递归 函数表达式 嵌套函数表达式 立即执行函数 闭包 变量与函数提升 Promise 数组的相关属性和方法 断点调试debugger )
jquery(ajax)
vue(cli) / Angular / React
响应式网站/多端适配 (如电脑/平板/手机)

初级前端

vue(SPA单页面 router axios vuex vue3)
前端构建工具 webpack/Gulp/Browserify/Grunt
能用 git/svn 对代码进行版本管理和团队开发
会 css预处理器 sass/less
会 微信小程序(云开发)
会 UI/界面 框架 Element UI/Ant Design/Bootatrap
熟悉XML JSON等数据结构
对浏览器差异有了解，能根据需求提供兼容方案

中级前端

js (原型 原型链 arguments 手写promise & callback & bind & lodash)
Vue(响应式ref与reactive)&React
Typescript
Node.js
ES6-12
算法 (LeetCode-剑指offer)
数据结构 (能手写常见结构)
网站与数据库性能调优
网站效果优化（瀑布流，懒加载/Echo.js，首屏直出，骨架屏，CDN，视差滚动，防抖，节流，热更新）
编程基础 (内存 堆栈 指针 函数 进制 进程 线程 高并发 互斥 同步 死锁 编码)
网络协议 (HTTP/HTTPS FTP SMTP TCP/IP)
网络安全(XSS跨站脚本攻击，CRSF跨站请求伪造，注入攻击(sql)，dos攻击(ddos)，字典爆破)
canvas常见粒子与图形效果

高级前端

掌握常见前端技术

	vue vuex vue-router
	typescript 	
	react redux react-router pinia dva umi
	element vant
	serverless
	uniapp
	echart.js openlayers
	Rollup webpack Vite Esbuild
	Babel
	单元测试 UI测试
	JS编译器 Babel
	服务端渲染ssr nuxt.js / next.js
	桌面应用 Electron.js
	移动应用 Flutter

掌握前台与后台快速搭建框架
具备跨端开发能力，性能调优能力
对兼容性与网络安全有深入理解

前端-UI框架

Bootstrap
Element
Ant-Design(antd)
详见：前端UI常见框架汇总

前端-性能优化

技术点：CDN分发 DNS解析 HTTP缓存 数据预请求 数据缓存 首屏优化(直出 骨架屏) 媒体资源压缩

1. 直出+离线包缓存
2. 客户端代理的 VasSonic
3. PWA+直出+预加载
4. NSR 渲染
5. 客户端 PWA
6. 小程序化
   详见：h5 秒开方案大全 | AlloyTeam
   另附：大型 h5 页面无缝闪开方案 | AlloyTeam

前端-跨端开发

桌面应用 Electron.js / Tauri
移动应用 Flutter / React-Native
多端 Taro / uniapp

前端-数据可视化

echart.js hightchart.js
D3.js

前端-3D图形

引擎 three.js ( 基于kWebGL )
软件 blender
前端-CMS建站
易优CMS 蠕虫CMS
图中慎选，过时与隐患CMS未排除

前端-游戏引擎

cocos
白鹭
LayaBox
Eva.js

测试-E2E测试

cypress
puppeteer
webdriverio

编程-加解密

MD5 SHA-1 (不安全)
SHA-2 ( SHA-224、SHA-256、SHA-384、SHA-512、SHA-512/224、SHA-512/256 )
SHA-3
RSA

后端-图形/游戏

C++ unreal（虚幻引擎）
opengl（图形开发接口）

全栈

前端：JavaScript、H5、CSS3、sass、less、React、Vue、webpack、jest
后端：Nodejs、Go、Java、Spring、Gin、Kafka、Hadoop
数据库：MySQL、mongoDB、redis、clickhouse
运维：网络协议、CDN、Nginx、ZooKeeper、Docker、Kubernetes