参加工作三年多了，最近业务不是很忙，心里反而空落落的。最近参与了一个公司UI库开发，发现自己不懂的东西实在太多。以此为契机吧：
写到此处惊觉自己这两三年在技术上还是成长了的，2016年我需要看着前辈们的分享，大家说有用我就学，听前辈的总没错，2019年我可以根据自己的经验和体会总结出该怎么去系统的学习了，并且轻重缓急自己心里都有底。
现在返回到标题，前端工程师应该学什么？我写了一个大纲，但里面的学习目标是对自己说的，发出来一是为了跟大家分享一下，共同学习；二是希望你们帮我看看，有没有遗漏下的。
我的自我定位并没有找准，前端领域太广，到底哪个点最适合自己，并且值得深入钻研？我不知道。但先全学一遍，查漏补缺总没错的。
我觉得自己仍然，仍将，一直都会是一名前端小学生。
本文没有劝退效果，请放心阅读。如果你是应届生，找准自己的定位，慢慢来。
前端工程师
一、语言基础
1. HTML相关
- HTML标准，跟进了解最新的HTML标准更新。
- HTML标签语义化，嵌套标准等。
- 可访问性。
学习目标：重新梳理各标签关系。面向国际、未来的网页结构，符合可访问性规范。
2. CSS 相关
- CSS标准，跟进了解最新的CSS标准更新。
- CSS属性，最新属性等。
- CSS编程，Houdini。
- Web Fonts
学习目标：重新梳理css属性之间的关系，更多的功能尝试使用css实现。掌握关注最新的css发展。
3. JavaScript相关
- ECMAScript标准，最新提案等，浏览器DOM，BOM。
学习目标：熟悉JavaScript的基础API，参数搞清楚。掌握最新的JavaScript语言动向。
4. Node.js相关
- Node.js 全局API，原生模块等，了解最新的Node.js动向。
学习目标：熟悉Node.js基础原生API的作用和使用。为学习服务端开发打下基础。
5. TypeScript(TS)
- TS大火，成未来开发趋势。
- TypeScript的使用。与JavaScript的区别
学习目标：熟练使用TypeScript。
6. AssemblyScript(AS)
- 除了可以将cc++，Rust，Kotlin，Golang等高级语言转译为WebAssembly字节码外，一门全新的语言AS也可以。AS是TS的严格子集，可以一并学习为WebAssembly开发打下基础。
- AssemblyScript的语法和使用
学习目标：了解基础语法，可以将AssemblyScript文件编译成.wasm格式。有了它，可以不用去复习C/C++了。
7. Dart
- Flutter持续火热，Dart作为开发基础，应该掌握
- Dart的语法，了解与JavaScript的区别。
学习目标：熟练使用Dart语言。
8. Markdown
- 语法，使用。
- 写文章，写文档必备
学习目标：熟练使用Markdown写文章，项目文档等。
9. Shell脚本
- 语法，常用函数
学习目标：可以使用shell编写出比较常见的程序。
10. SQL语言
- 常用语法，函数
学习目标：可以写出常见的CARD查询的sql语句。
二、计算机基础
1. 数据结构与算法
- 经典算法的思路
- 常用的数据结构
学习目标： 熟练掌握经典的算数思想，以便应用到业务代码中来，会在合适的场景选择最优的数据结构。
2. 计算机网络
- HTTP协议，TCP协议，UDP协议
- HTTPS，HTTP2
- DNS
- WebSocket
学习目标：掌握并了解这些网络协议的原理，可以用以实践。
3. 电子计算机组成原理
- 进制
- Unicode，ASCII，UTF-8等编码
- 计算机工作原理
学习目标： 了解自己的伙伴，为了解“云”主机、虚拟主机奠定基础。
4. 操作系统
- 计算机操作系统原理
- Linux操作系统的使用
学习目标：了解操作系统是如何工作的，可以自主使用linux操作系统，掌握常用的命令。
三、进阶
1. 工程化
- webpack, rollup
- babel 使用与原理，可以用来与ECMAScript最新语法一一印证。
- eslint,stylelint,prettier等代码风格与语法审查工具的使用
- unit test库或工具的使用
- sass编程，语法
- postcss后处理器
- uglify原理与实现
- 多人git协作流程
- gitlab的搭建与使用
- CI/CD
- git hooks, husky,commitlint
- 文档输出，StoryBook，gitDoc，gitbook等
- npm, lerna
- yarn
- markdown render。markdown写的示例可在线执行
- 模块化，js模块化在ECMAScript和Node.js已经学习过，这里主要是指css模块化的几种方式
- 数据mock
学习目标：可以从无到有快速搭建起一个多人协作的现代化前端工程项目，选择合适的工具提高开发效率，保持团队成员代码风格统一，并最大限度的利用工具保障代码质量。
2. 组件化
- Vue
- React
- WebComponents
- 浏览器兼容性，canIUse
学习目标：熟练使用Vue，React进行开发，了解组件化未来趋势WebComponents。掌握数据驱动思想，掌握经典的双向绑定实现原理，阅读源码，深入了解。掌握衍生产物如前端路由，数据管理的设计思想和实现。
3. 基于Node.js的Web服务开发
- koa
- express
- pm2
- RESTFul 风格
- 进程管理
- 数据持久 MongoDB，mysql等
- 数据缓存 redis等
- 长链接服务
- SSR
- Docker
- Nginx配置, openresty
- 云主机，共享主机等
学习目标：可以独立完成Web服务的搭建和部署。
4. 基于Node.js的CLI开发
- 常用的CLI开发库和原理
- 比较流行的CLI库的设计思想，实现思路
学习目标：可以独立开发CLI，当有需求时，可以快速定位到此方案。
5. 桌面应用开发
- Electron
- NW.JS
学习目标：了解一种基于JavaScript的桌面应用的开发，当有需要时，可以迅速定位到此技术方案。
6. 移动应用开发
- Flutter 及相关衍生技术
- React Native及相关衍生技术
- PWA
- WEEX
学习目标： 了解和掌握。可以使用Flutter或RN开发一个移动APP。了解PWA。
7. 第三方平台开发
- 微信小程序
- 支付宝小程序
- 百度小程序
- 快应用
- wepy
- mpvue
- taro
- …
学习目标：可以快速上手任何一种开发小程序。了解小程序的实现方案。了解业内流行的小程序开发库的实现思路。
8. 插件开发
- chrome插件API
- DevTool扩展
- VSCode等IDE插件开发
学习目标：了解插件可以做到什么，当有需要时，可以迅速定位到此方案来。
9. 浏览器工作原理
- 排版引擎，浏览器渲染原理
- 脚本解释引擎，脚本运行原理，v8
- headless无头浏览器，puppeteer
学习目标：掌握浏览器工作原理，可以应用在性能优化和自动化测试上。
10. 性能优化
- RAIL 模型
- 硬件基础：帧、帧率、显示器绘图原理
- 渐进式网页指标（Progressive Web Metrics，简称 PWM’s）
- 常用的性能优化手段
学习目标：了解性能优化手段，写出性能优异的Web应用。
11. Web浏览器安全
- 浏览器安全策略：同源策略，内容安全策略，沙箱
- 常见的攻击方式：XSS，CSRF
- 其它：CRLF攻击， DNS劫持和DNS污染，点击劫持，浏览器插件漏洞攻击等
- 了解常见对称加密和非对称加密算法
学习目标：了解常见的Web浏览器攻击手段，避免写出有安全隐患的网站。
12. Web服务器安全
- 常见攻击手段：目录遍历，DDOS，重放，密码破解，SQL注入
- 其它攻击手段：CC攻击，端口渗透
学习目标：了解常见服务器攻击手段和原理，避免写出有明显漏洞的Web服务。
13. 监控统计
- 前端脚本错误监控：错误堆栈形式，实时监控实现方式
- 前端性能监控：性能指标，实现方案
- 服务端监控：硬件监控，系统监控，应用监控，网络监控，流量分析，日志监控，安全监控，API监控（可用性、正确性、响应时间），性能监控，业务监控
学习目标：掌握如何自主建设或搭建开源监控平台。了解一些常见的监控指标的含义。如性能相关的指标TTLB、QPS是什么意思，业务相关的指标PV，UV，CTR等等代表什么。
14. 可视化
- canvas进阶
- svg进阶
- WebGL基础
- 计算机图形学
- 常用库：ECharts, D3等
学习目标： 这是面向未来的前端技术。了解常见的可视化技术方案，当有需求时可以迅速定位方案。关注并可使用最新的技术开发酷炫的应用，实现数据可视化。
15. SEO
- 搜索引擎爬虫原理
- 搜索引擎权重算法
- 与SEO相关的网页标签
学习目标：了解搜索引擎的实现原理以及搜索结果的排序算法。如果是对外的网站，可以自主完成简单的SEO，使网站在搜索引擎中的排名尽可能高些。
16. 开发与调试
- 浏览器脚本调试
- Node.js 调试
- Chrome Dev Tools进阶使用（环境模拟，渲染性能，内存使用，端点调试，抓包，控制台内置函数等等）
- IDE
- 使用帮助开发的插件，如拼写检查等。
学习目标： 熟练掌握Chrome调试工具的使用，对于脚本开发、性能优化都大有裨益。掌握Node.js服务的调试方法。
17. UI库
- UX基础
- 色彩原理，色光三原色，网页色彩表示方法
- 网页色彩搭配原则，色彩心理学
- 常用UI组件的实现
- 常见UI组件的使用和源码
学习目标： 具备一定的美感和用户体验关注度，当没有设计师参与时，可以自主设计一些交互方案，了解常见UI组件代表的含义，可以在合适的需求上使用合适的组件。了解常用UI组件的设计与实现思路，可独立开发UI组件库。
18. WebAssembly
- 原理
- 优势
- 简单应用开发
学习目标： 了解WebAssembly字节码的开发流程，了解其在浏览器中的运行方式，当需要时，可以快速定位到此方案。
19. WebRTC
- 实时通讯方案
- 了解并进行可简单开发
学习目标： 了解并关注WebRTC技术，了解其标准，实现原理，当需要时，可以快速定位到此方案。
20. WebXR
- 使用JavaScript开发VR和AR
- 了解WebXR API，跟进草案进程
学习目标： 了解并关注WebXR技术，了解其标准，实现原理，当需要时，可以快速定位到此方案。
21. WebAuthn
- 使用浏览器进行生物鉴权
- 了解WebAuthn API，并进行简单使用
学习目标： 了解并关注WebAuthn技术，了解其标准，实现原理，当需要时，可以快速定位到此方案。
下面是一些补充思考：
已经确定的事情：未来几年，5G全面商用，网络延时和传输速率将不再限制人类的想象力，万物互联时代随时随地无限触达。
不确定的事情：可控核聚变技术的掌握。
试想一下，即便未来做到了万物互联，我们可以进行实时的AR, VR交互，但是如果手机电池技术得不到发展，这些设想无疑于空中楼阁，无法落地。大家都清楚现在浏览器中使用WebGL等技术的耗电程度。假设人类掌握了可控核聚变技术，电量和网络都变得和空气一样无处不在，那才是真正可以放飞想象力的时代。
大胆预测一下未来前端技术的发展趋势：基于WebAuthn生物鉴权，我们摆脱了密码鉴权的桎梏；基于5G的传输速率，应用安装在本地打开或使用Web打开访问毫无区别；基于WebAssembly，传统客户端可以迁移至Web端，并且拥有超高性能。假设手机电量技术取得了长足的进步，那么WebRTC，WebXR，WebGL必将得到广泛的应用。网站会发生质的变化，传统的DOM结构类的网页将称为历史，AR、VR、实时通讯等沉浸式交互会取代文字和图片，手机上只需要装一个浏览器，就可以做你想做的任何事。
但未来何时到来尚且不知，立足当下，放眼未来，努力学习吧。
本文发布于《一个小学生的博客》，转载请注明出处。
全文完。