前端技术图谱
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
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
TypeScript
CoffeeScript
ES6
ES6＋ 转换器
Babel
Traceur
CSS
Sass
Less
stylus
Postcss
代码质量
编码风格
JSLint/JSHint/jscs/ESLint
CSSLint/PrettyCSS/recess/ckstyle/stylelint/CSSHint
Markup Validation Service 在线标记验证服务
HTML Validators
单元测试
提供测试框架(Mocha, Jasmine, Jest, Cucumber)
提供断言(Chai, Jasmine, Jest, Unexpected)
生成，展示测试结果(Mocha, Jasmine, Jest, Karma)
快照测试(Jest, Ava)
提供仿真(Sinon, Jasmine, enzyme, Jest, testdouble)
生成测试覆盖率报告(Istanbul, Jest, Blanket)
提供类浏览器环境(Protractor, Nightwatch, Phantom, Casper)
自动化测试
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渲染，自建的DSL，与Vue 1.0有点像，不是很好用，后续又出了WePY、mpVue、Taro等DSL
支付宝小程序
基于WebView与ReactNative两套容器渲染，自建了一套类React的DSL。
基于WebView与ReactNative两套容器渲染，自建了一套类React的DSL。
快应用
基于Native进行渲染，自己定义了一套类Vue的DSL。
基于Native进行渲染，自己定义了一套类Vue的DSL。
淘宝轻应用
基于WebView与Weex两套容器渲染，自建了一套类Vue的DSL。
基于WebView与Weex两套容器渲染，自建了一套类Vue的DSL。
架构图
0 条评论
下一页
