进军高级前端开发工程师必备的知识图谱

142

一、前沿

全文(含脑图)为个人总结的关于高级前端开发工程师必备的技术能力,欢迎补充。全文结构如下:
前沿:写在正文前的一些话。
脑图:基于知识图谱的脑图,看知识图谱晕的可以欣赏脑图。
知识图谱:脑图无法下手的,参照一下知识图谱。

二、脑图

PS:建议单击图片,点击图片下方的查看原图,放大图片后,再进行脑图的查看

图片描述

三、知识图谱

  • 1.核心技术

    • 1.1 HTML(5)
    • 1.2 JavaScript

      • ES6
      • Vue
      • React
      • Angular
    • 1.3 CSS(3)

      • 布局

        • 基础布局
        • 双飞翼布局
        • 圣杯布局
        • Flex布局
        • Grid布局
      • CSS3D
      • 矩阵
      • 高性能渲染
      • Houdini
  • 2.扩展技术

    • 2.1 后端(至少一种)

      • Node.js

        • 核心API
        • Express
        • Koa
        • Egg
        • 微服务
        • C/C++
      • PHP
      • Go
      • Java
    • 2.2 移动端

      • AMP
      • PWA
      • Flutter
    • 2.3 图形学

      • SVG
      • Canvas
      • Cocos2d
      • WebGL
      • Three.js
    • 2.4 TypeScript
    • 2.5 浏览器特性/兼容性
  • 3.工程开发

    • 3.1 预编译工具

      • Less
      • Sass
      • PostCss
    • 3.2 构建工具

      • Webpack
      • Grunt
      • Gulp
    • 3.3 性能优化

      • FCP
      • FMP
      • 客户端渲染
      • 服务端渲染
      • 雅虎军规
      • ...
    • 3.4 版本管理

      • Git
    • 3.5 高级调试

      • 断点
      • Timeline
      • Profiles
    • 3.6 自动化测试

      • Karma
      • Mocha
      • Jest
    • 3.7 可用性/安全

      • 加密
      • 混淆
      • ...
  • 4.编程思想

    • 4.1 编程范式

      • 面向对象编程
      • 函数式编程
      • 响应式编程
      • 面向切面编程
      • ...
    • 4.2 设计模式(至少掌握最热门的前5种)

      • 1.单例模式
      • 2.代理模式
      • 3.命令模式
      • 4.发布订阅模式
      • 5.职责链模式
      • ...
    • 4.3 设计法则

      • 单一职责原则
      • 开放封闭原则
      • 李氏置换原则
      • 接口独立原则
      • 依赖导致原则
    • 4.4 架构模式

      • MVC
      • MVP
      • MVVM
      • Flux
      • ...
    • 4.5 算法

      • Diff算法
      • 排序算法

        • 冒泡排序
        • 选择排序
        • 插入排序
        • 希尔排序
        • 归并排序
        • 快速排序
        • ...
      • 检索算法

        • 二分法
        • ...
    • 4.6 编程原理

      • v8
      • libv
      • ...
  • 5.能力

    • 5.1 学习能力
    • 5.2 技术能力
    • 5.3 专长(在专业领域解决问题)

      • 前端
      • 后端
      • 移动端
      • 图形学
      • 算法
      • ...
    • 5.4 认知能力

      • 业务理解
      • 需求分析
      • 项目评估
    • 5.5 经验

      • 项目经验
      • 使用经验(问题解决方案)
      • (跨)领域经验
      • 管理经验
    • 5.6 架构能力(核心:判断和取舍)

      • 性能
      • 可用性
      • 伸缩性
      • 扩展性
      • 安全性

更新日期:2019年1月


如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

19 条评论
candies · 1月10日

图片有点昏了

回复

0

建议单击图片,点击查看原图,进行图片放大,而后进行脑图的查看

无悔铭 作者 · 1月11日
飛翔 · 1月11日

看似很多 实际上技能类有重复, 实际上也不需要掌握这么多

回复

0

欢迎补充和指正。。

无悔铭 作者 · 1月11日
0

请深刻理解高级二字

higocn · 1月15日
songzeng · 1月11日

赞一个

回复

rhinel · 1月15日

顶多算中级吧

回复

0

只列了名字,没说深度,这些都知道了解写过,顶多中级

rhinel · 1月15日
0

谢谢亲的意见,整个图已经是高级偏一点点架构了亲,之后会考虑写更详细些。

无悔铭 作者 · 1月15日
0

@rhinel 这种顶多中级的情况下,它的薪资大概是多少啊

kgyisa · 1月16日
tonyxiaomao · 1月15日

Angular其实不必了吧~

回复

0

三大框架还是要会的,至于深入哪个,就看团队选择了。。

无悔铭 作者 · 1月16日
雅X共赏 · 1月16日

这么多年了还玩这种图

回复

0

最近刚好在入门架构。。顺便弄一个脑图,理理思路。。。

无悔铭 作者 · 1月16日
SunXinFei · 1月16日

php java都写了 没写mysql 不合适吧。
css那里加上圣杯和双飞翼,感觉好像打开了极客学院的前端课程

回复

JS菌 · 1月16日

提css3就不准确 现在都是按模块level的

回复

王顶 · 1月18日

“前沿”这两个字用的有点儿不严谨了吧,是不是“前言”会好一点儿啊!

回复

0

另外,请教一下,这么漂亮的脑图使用啥工具做的啊?

王顶 · 1月18日
活在初音的未来 · 2月13日

不管是不是完善,都感谢楼主整理分享。
最近经常处在一个很迷茫的状态,感觉什么都不会,但又不知道从何处下手。
也很希望觉得不足的朋友,能够大致指出欠缺的,同样感谢你们的指点。

回复

载入中...