首页  思维导图  详情



 



前端技术图谱

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&&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

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

预处理器

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与ReactNative两套容器渲染，自建了一套类React的DSL。

快应用 基于Native进行渲染，自己定义了一套类Vue的DSL。

淘宝轻应用 基于WebView与Weex两套容器渲染，自建了一套类Vue的DSL。

架构图

 Collect

Get Started

前端技术图谱

 Collect

Get Started

前端技术图谱2.5

 Collect

Get Started

前端技术图谱

 Collect

Get Started

AI时代前端技术架构图





0 条评论

下一页