前端技术图谱
2019-09-27 13:45:40 0 举报AI智能生成
前端技术图谱
作者其他创作
大纲/内容
平台
浏览器和渲染引擎
IE6/7/8/9/10/11 (Trident) / Edge (EdgeHTML)
Firefox (Gecko)
Chrome/Chromium (Blink)
Safari (WebKit)
Opera (Blink)
linix/windows/unix系统下服务
Node
桌面端
Electron
NW.js
移动端
H5
混合开发【H5&&APP】
各类轻应用【SDL】
脚本引擎
Jscript 【IE8以下浏览器】
Chakra【IE9以上及Edge】
V8【chrome opera node mongodb】
SpideMonkey 【Firefox】
Nitro【Safra】
切图工具
Sketch
PhotoShop
Paint.net/GIMP/Fireworks
调试工具
Chrome Dev Tools
Firebug/Firecookie
Charles
Fiddler
版本管理
Git
svn
GitHUb
Gitlab
Bitbucket/Gitorious/GNU Savannah/Launchpad/SourceForge/TeamForge
模块化
模块化管理
npm
brower
component
代码模块化
ES6模块化
CommonJS/CMD
SeaJS/CMD
Require.js/AMD
模块化打包工具
webpack
rollup
r.js
Browserify
项目构建工具
Grunt
Gulp
Yeoman
FIS
make/Ant/GYP/Mod
webpack 发展为主流构建工具
自动构建
npm脚本命令
shell命令
自动部署
Travis CI
框架和库
Vue
React
Angular
zepto/jQuery/YUI3/ExtJS/KISSY
Underscore/Mootools/Prototype.js
Bootstrap/Semantic UI/Juice UI
Backbone/KnockoutJS/Emberjs
可视化
SVG
highcharts.JS
raphael.js
D3
Canvas
CreateJS
KineticJS
Echart
porcessingJS
WebGL
philoGL
threee.js
SEO
Sitemap（站点地图）
内部链接建设
MicroData / MicroFormat
页面静态内容生成
H1、H2、H3和strong使用
Title、Description优化
设计
切页面
线框图（Wireframe）
响应式设计
网格布局（Grid Layout）
Flexbox布局
服务端渲染
Next.js【react】
Nuxt.js【Vue】
Angular Universal【Angular】
通信
Http1.0
Http2.0
API规范
RESTful
GraphQL& Apollo
跨域通信
CORS 【Fetch】
PostMessage
webSocket
JSONP
Hash通信
Web workers
非跨域 Ajax
Form
xmlHttpRequest
性能优化
PageSpeed / Yslow 优化
加载优化（如gzip压缩、缓存等等）
PWA渐进式加载
网络加载优化
图片优化
HTML渲染优化
执行JS和CSS优化
协议层优化
本地离线存储
前端技术图谱
语言&基础
HTML & HTML5
CSS & CSS3
JavaScript && ES6
nodejs
Koa2
egg
express
TypeScript
CoffeeScript
预处理器
JS
ES6
ES6＋ 转换器
Babel
Traceur
CSS
Sass
Less
stylus
Postcss
代码质量
编码风格
JSLint/JSHint/jscs/ESLint
CSSLint/PrettyCSS/recess/ckstyle/stylelint/CSSHint
Markup Validation Service 在线标记验证服务
HTML Validators
单元测试
自动化测试
WebDriver/Protractor/Karma Runner/Sahi
phantomjs
SourceLabs/BrowserStack
静态检查器
flow
typeScript
编程知识储备
数据结构
OOP/AOP
编程范型
设计模式
面向对象编程
函数式编程
网页服务器
Nginx
Apache
Lighttpd
IIS
趋势新领域
webVR
物联网Web化
WebAssembly
Web人机交互
webTRC/IPFS
Dapp开发
质量监控
用户行为数据分析
前端性能分析
window.performance API
前端错误异常监控
badjs
sentry
BetterJS
fundebug
跨端应用
ReactNative
NativeScript
Weex
Flutter
MUI/ionic
小程序
微信小程序基于WebView渲染，自建的DSL，与Vue 1.0有点像，不是很好用，后续又出了WePY、mpVue、Taro等DSL
支付宝小程序基于WebView与ReactNative两套容器渲染，自建了一套类React的DSL。
快应用基于Native进行渲染，自己定义了一套类Vue的DSL。
淘宝轻应用基于WebView与Weex两套容器渲染，自建了一套类Vue的DSL。
架构图
0 条评论
回复 删除
下一页
