前端技术图谱
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<br>
Firebug/Firecookie<br>
Charles
Fiddler<br>
版本管理
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<br>
Yeoman<br>
FIS
make/Ant/GYP/Mod
webpack 发展为主流构建工具
自动构建
npm脚本命令
shell命令
自动部署
<br>Travis CI
框架和库
Vue
React
Angular
zepto/jQuery/YUI3/ExtJS/KISSY<br>
Underscore/Mootools/Prototype.js
Bootstrap/Semantic UI/Juice UI
Backbone/KnockoutJS/Emberjs
可视化
SVG<br>
highcharts.JS
raphael.js
D3
Canvas<br>
CreateJS
KineticJS
Echart
porcessingJS
WebGL
philoGL
threee.js
SEO
Sitemap（站点地图）<br>
内部链接建设<br>
MicroData / MicroFormat<br>
页面静态内容生成<br>
H1、H2、H3和strong使用<br>
Title、Description优化<br>
页面静态内容生成
设计
切页面<br>
线框图（Wireframe）<br>
响应式设计<br>
网格布局（Grid Layout）<br>
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 优化<br>
加载优化（如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<br>
CSSLint/PrettyCSS/recess/ckstyle/stylelint/CSSHint<br>
Markup Validation Service 在线标记验证服务<br>
HTML Validators
单元测试
提供测试框架(Mocha, Jasmine, Jest, Cucumber)<br>
提供断言(Chai, Jasmine, Jest, Unexpected)<br>
生成，展示测试结果(Mocha, Jasmine, Jest, Karma)<br>
快照测试(Jest, Ava)<br>
提供仿真(Sinon, Jasmine, enzyme, Jest, testdouble)<br>
生成测试覆盖率报告(Istanbul, Jest, Blanket)<br>
提供类浏览器环境(Protractor, Nightwatch, Phantom, Casper)
自动化测试
WebDriver/Protractor/Karma Runner/Sahi<br>
phantomjs<br>
SourceLabs/BrowserStack
静态检查器
flow
typeScript
编程知识储备
数据结构<br>
OOP/AOP
编程范型
设计模式
面向对象编程<br>
函数式编程
网页服务器
Nginx
Apache<br>
Lighttpd
IIS
趋势新领域
webVR
物联网Web化
WebAssembly
Web人机交互
webTRC/IPFS
Dapp开发
质量监控
用户行为数据分析
前端性能分析
window.performance API
前端错误异常监控
badjs
sentry
BetterJS
fundebug
跨端应用
ReactNative
NativeScript
Weex
Flutter
MUI/ionic
小程序
微信小程序<br>基于WebView渲染，自建的DSL，与Vue 1.0有点像，不是很好用，后续又出了WePY、mpVue、Taro等DSL<br>
支付宝小程序<br>基于WebView与ReactNative两套容器渲染，自建了一套类React的DSL。<br>
快应用<br>基于Native进行渲染，自己定义了一套类Vue的DSL。<br>
淘宝轻应用<br>基于WebView与Weex两套容器渲染，自建了一套类Vue的DSL。<br>
架构图
0 条评论
下一页
