一张图读懂前端演进史（1995 ～ 2019）

1994 年，网景发布了第一版 Navigator，这可以看作是前端历史的起点。如今，随着 Vue、React、Angular 等框架的兴起，前端发展得越来越快。一张前端演进史的图在 Reddit 上引起了热议，我们征得原图作者的同意，将这张图放在这里，希望和大家一起了解前端技术的历史，探讨前端圈的发展，共同学习进步！

内容涉及：

• 浏览器的发展史
• HTML 生态演进史
• CSS 生态演进史
• JavaScript 生态演进史

Browsers

[1994] Netscape Navigator http://browser.netscape.com/

[1995] Internet Explorer https://www.microsoft.com/es-es/download/internet-explorer.aspx

[1995] Opera https://www.opera.com/es

[2002] Mozilla Firefox https://www.mozilla.org/en-US/firefox/new/

[2003] Apple Safari https://www.apple.com/safari/

[2008] Google Chrome https://www.google.com/chrome/

[2015] Microsoft Edge https://www.microsoft.com/en-us/windows/microsoft-edge

HTML Ecosystem

HTML Markup

[1997] HTML4 https://www.w3.org/TR/html401/

[2000] XHTML https://www.w3.org/TR/xhtml1/

[2004] Markdown https://daringfireball.net/projects/markdown/

[2006] HAML http://haml.info/

[2010] Handlebars https://handlebarsjs.com/

[2010] JADE https://pugjs.org/

[2012] HTML5 (Candidate Recommendation) https://www.w3.org/TR/html5/

[2014] JSX https://facebook.github.io/jsx/

[2015] PugJS (Previous JADE) https://pugjs.org/

[2017] Lit-HTML https://lit-html.polymer-project.org/

CSS Ecosystem

CSS Language & Interaction

[1996] CSS1 https://www.w3.org/TR/REC-CSS1/

[1999] CSS3 https://www.w3.org/TR/CSS/

[1996] Flash https://www.adobe.com/es/products/flashplayer.html

CSS Preprocessors

[2006] Sass https://sass-lang.com/

[2009] LESS http://lesscss.org/

[2010] Sass (SCSS) https://sass-lang.com/

[2010] Stylushttp://stylus-lang.com/

JS Tools & CSS-in-JS

[2013] PostCSShttps://postcss.org/

[2014] Autoprefixerhttps://autoprefixer.github.io/

[2014] Browserslist https://browserl.ist/

[2014] JSS https://cssinjs.org/

[2015] CSS Modules https://github.com/css-modules/css-modules

[2016] Styled Components https://www.styled-components.com/

[2017] Emotion https://emotion.sh/

CSS Methodologies

[2009] OOCSS http://oocss.org/

[2011] SMACSS http://smacss.com/

[2012] BEM http://getbem.com/

[2013] ACSS https://acss.io/

[2016] ITCSS https://itcss.io/

CSS Frameworks

[2006] YUI https://yui.github.io/yui2/

[2011] Twitter Bootstrap https://getbootstrap.com/

[2011] Foundation https://foundation.zurb.com/

[2012] Pure CSS https://purecss.io/

[2013] Semantic UI https://semantic-ui.com/

[2013] Materialize CSS https://materializecss.com/

[2014] Tachyons https://tachyons.io/

[2015] Milligram https://milligram.io/

[2015] Bulma https://bulma.io/

[2015] UIKit https://getuikit.com/

[2017] Tailwind CSS https://tailwindcss.com/

Javascript Ecosystem

Third-party & Others

[1995] Java Applets* https://www.java.com/es/

[1996] ActiveX http://activex.microsoft.com/

[1996] XML https://www.w3.org/XML/

[1997] ActionScript https://www.adobe.com/devnet/actionscript.html

[2004] Adobe Flex https://www.adobe.com/es/products/flex.html

[2007] Silverlight https://www.microsoft.com/silverlight/

[2008] Adobe AIR https://www.adobe.com/products/air.html

[2011] WebGL https://www.khronos.org/webgl/

[2015] WebAssembly https://webassembly.org/

* Not Javascript

Javascript Vanilla

[1995] Javascript Not standard yet

[1997] Javascript ES1 Edition

[1999] Javascript ES3 Edition

[2001] JSON https://json.org/

[2009] Javascript ES5 Edition

[2015] Javascript ES2015/ES6 Edition

[2016] Javascript ES2016/ES7 Edition

[2015] Javascript ES2017/ES8 Edition

[2016] Javascript ES2018/ES9 Edition

[2017] Javascript ES2019/ES10 Edition

JS Libraries

[2004] Dojo toolkit https://dojotoolkit.org/

[2005] Prototype http://prototypejs.org/

[2006] jQuery https://jquery.com/

[2006] ExtJS https://www.sencha.com/products/extjs/

[2007] MooTools https://mootools.net/

[2009] Underscore https://underscorejs.org/

[2012] Lodash https://lodash.com/

JS Superlanguage & Transpilers

[2009] CoffeeScript https://coffeescript.org/

[2009] Closure Compiler https://developers.google.com/closure/compiler/

[2011] Traceur https://github.com/google/traceur-compiler

[2012] Elm https://elm-lang.org/

[2012] 6to5 transpiler https://github.com/6to5

[2012] Typescript https://www.typescriptlang.org/

[2015] BabelJS (previous 6to5) https://babeljs.io/

JS Frameworks

[2010] Knockout https://knockoutjs.com/

[2010] Backbone https://backbonejs.org/

[2010] AngularJS https://angularjs.org/

[2011] EmberJS https://emberjs.com/

[2013] RiotJS https://riot.js.org/

[2013] React https://reactjs.org/

[2014] Aurelia https://aurelia.io/

[2014] Mithril https://mithril.js.org/

[2014] Marko https://markojs.com/

[2015] Vue https://vuejs.org/

[2015] Preact https://preactjs.com/

[2016] HyperApp https://github.com/JorgeBucaran/hyperapp

[2016] Angular https://angular.io/

[2016] Svelte https://svelte.dev/

Mobile JS Frameworks

[2013] Ionic https://ionicframework.com/

[2014] Native Script https://www.nativescript.org/

[2015] React Native https://facebook.github.io/react-native/

[2018] Vue Native https://vue-native.io/

Web Components Ecosystem

[2011] WebComponents v0

[2014] Polymer https://www.polymer-project.org/

[2016] HybridsJS https://hybrids.js.org/

[2017] WebComponents v1 https://www.webcomponents.org/

[2018] Lit-Element https://lit-element.polymer-project.org/

Build/Bundler Tools

[2010] NPM https://www.npmjs.com/

[2010] Browserify http://browserify.org/

[2012] Bower https://bower.io/

[2012] Grunt https://gruntjs.com/

[2013] Webpack https://webpack.js.org/

[2014] Gulp https://gulpjs.com/

[2015] Rollup https://rollupjs.org/

[2016] Yarn https://yarnpkg.com/

[2017] Parcel https://parceljs.org/

*本文转载于 GitHub，已取得原作者 Manz 授权，原文链接：https://github.com/ManzDev/frontend-evolution，感谢 Manz 对 GitChat 的支持！

---

如今，随着 Vue、React、Angular 等框架的兴起，前端发展得越来越快，必备技能也在不断迭代。你认为一个合格的前端工程师需要掌握哪些必备的前端知识？欢迎在读者圈里留言告诉我们，我们会挑选其中 5 位幸运读者，向其赠送《透视前端工程化》和《前端开发核心知识进阶》两门 GitChat · 达人课优惠券！快来留言参与吧～

阅读全文: http://gitbook.cn/gitchat/activity/5d3802ee74053b7dc5cf8026

您还可以下载 CSDN 旗下精品原创内容社区 GitChat App ，阅读更多 GitChat 专享技术内容哦。