参加工作三年多了，最近业务不是很忙，心里反而空落落的。最近参与了一个公司UI库开发，发现自己不懂的东西实在太多。以此为契机吧： 1. 有必要把近两年的经验知识沉淀一下，与标准和文档进行一一印证，查漏补缺。 2. 工具不仅要会用，用的好，还要知道原理。 3. 即便是有些知识暂时用不到，作为一名有点追求的工程师，应该提前做一些知识储备。 　　写到此处惊觉自己这两三年在技术上还是成长了的，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) 除了可以将c\c++，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、实时通讯等沉浸式交互会取代文字和图片，手机上只需要装一个浏览器，就可以做你想做的任何事。 　　但未来何时到来尚且不知，立足当下，放眼未来，努力学习吧。 　　本文发布于《一个小学生的博客》，转载请注明出处。https://www.cnblogs.com/dongtianee/p/2019qianduan.html