Web前端发展史（⾃我成长技术路线图）
前端到底是个啥
前端其实是个很⼤的范畴。我这⾥只针对 web 开发的前端⽽⾔（下⽂统称前端）。简单点说，针对浏览器的开发，浏览器呈现出来的页⾯就是前端。它的实质是前端代码在浏览器端被编译、运⾏、渲染。前端代码主要由三个部分构成：HTML（超⽂本标记语⾔）、CSS（级联样式表）、JavaScript。如图：
前端发展历程
前端也算是经历了⼀个⽐较漫长的发展过程，⼤致历程可以分为以下⼏个阶段：
上古时代：
这个节点不得不说⼀下，世界上第⼀款浏览器 NCSAMosaic，是⽹景公司（Netscape）在1994年开发出来的，它的初衷是为了⽅便科研⼈员查阅资料、⽂档（这个时候的⽂档⼤多是图⽚形式的）。那个时代的每⼀个交互，按钮点击、表单提交，都需要等待浏览器响应很长时间，然后重新下载⼀个新页⾯给你看，⼤概是这样：
同年 PHP（超⽂本预处理器） 脚本语⾔被开发出来，开启了数据嵌⼊模板的 MVC 模式，同时期⽐较类似的做法有以下⼏种：
PHP 直接将数据内嵌到 HTML 中。
ASP 的 ASPX，在 HTML 中嵌⼊ C# 代码。
Java 的 JSP 直接将数据嵌⼊到⽹页中。
这个时期，浏览器的开发者，以后台开发⼈员居多，⼤部分前后端开发是⼀体的，⼤致开发流程是：后端收到浏览器的请求 —> 发送静态页⾯ —> 发送到浏览器。即使是有专门的前端开发，也只是⽤ HTML 写写页⾯模板、CSS 给页⾯排个好看点的版式（要不是我堂堂程序员看不上这点活，你们这些个切图仔就得要饭去~）。
铁器时代（⼩前端时代）
1995年，这是个好年份，⼜是这个搞事的⽹景公司，拜托⼀位叫布兰登·艾奇的⼤佬，希望开发出⼀个类似 Java 的脚本语⾔，⽤来提升浏览器的展⽰效果，增强动态交互能⼒。结果⼤佬喝着啤酒抽着烟，⼗来天就把这个脚本语⾔写出来了，功能很强⼤，就是语法⼀点都不像Java。这样就渐渐形成了前端的雏形：HTML 为⾻架，CSS 为外貌，JavaScript 为交互。
同时期微软等⼀些公司也针对⾃家浏览器开发出了⾃⼰的脚本语⾔。浏览器五花⼋门，虽然有了⽐较统⼀的 ECMA 标准，但是浏览器先于标准在市场上流⾏开来，成为了事实标准。导致，现在前端⼯程师还要在做⼀些政府古⽼项⽬的时候，还要去处理浏览器兼容（万恶的 IE 系列）。
不管怎么说，前端开发也算是能写点逻辑代码了，不再是只能画画页⾯的低端开发了。随着1998年 AJax 的出现，前端开发从 web1.0迈向了web2.0，前端从纯内容的静态展⽰，发展到了动态⽹页，富交互，前端数据处理的新时期。这⼀时期，⽐较知名的两个富交互动态的浏览器产品是：
Gmail（2004年）
Google 地图（2005年）
由于动态交互、数据交互的需求增多，还衍⽣出了jQuery（2006） 这样优秀的跨浏览器的 js ⼯具库，主要⽤于 DOM 操作，数据交互。有些古⽼的项⽬，甚⾄近⼏年开发的⼤型项⽬现在还在使⽤ jQuery，以⾄于 jQuery 库现在还在更新，虽然体量上已经远远不及 React、Vue 这些优秀的前端库。
信息时代（⼤前端时代）
⾃ 2003 以后，前端发展渡过了⼀段⽐较平稳的时期，各⼤浏览器⼚商除了按部就班的更新⾃⼰的浏览器产品之外，没有再作妖搞点其他事情。但是我们程序员们耐不住寂寞啊，⼯业化推动了信息化的
快速到来，浏览器呈现的数据量越来越⼤，⽹页动态交互的需求越来越
多，JavaScript 通过操作 DOM 的弊端和瓶颈越来越明显（频繁的交互操作，导致页⾯会很卡顿），仅仅从代码层⾯去提升页⾯性能，变得越来越难。于是优秀的⼤佬们⼜⼲了点惊天动地的⼩事⼉：
2008 年，⾕歌 V8 引擎发布，终结微软 IE 时代。
2009 年 AngularJS 诞⽣、Node诞⽣。
2011 年 ReactJS 诞⽣。
2014 年 VueJS 诞⽣。
其中，V8 和 node 的出现，使前端开发⼈员可以⽤熟悉的语法糖编写后台系统，为前端提供了使⽤同⼀语⾔的实现全栈开发的机会（JavaScript不再是⼀个被嘲笑只能写写页⾯交互的脚本语⾔）。React、Angular、Vue 等 MVVM 前端框架的出现，使前端实现了项⽬真正的应⽤化（SPA单页⾯应⽤），不再依赖后台开发⼈员处理页⾯路由 Controller，实现页⾯跳转的⾃我管理。同时也推动了前后端的彻底分离（前端项⽬独⽴部署，不再依赖类似的 template ⽂件⽬录）。在这⾥解释下 MVVM 模式：
Model：提供/保存数据
View：视图
View-Model：简化的 Controller，唯⼀的作⽤就是为 View 提供处理好的数据，不含其它逻辑jquery在项目里是干啥的
对web前端这门技术感兴趣的⼩伙伴可以加⼊到我们的学习圈来，编程⼯作第六个年头了，与⼤家分享⼀些学习⽅法，实战开发需要注意的细节。784-783-012 秋裙。从零基础开始怎么样学好前端。看看前辈们是如何在编程的世界⾥傲然前⾏！不停更新最新的教程和学习⽅法（web前端系统学习路线，详细的前端项⽬实战教学视频，PDF），有想学习web前端的，或是转⾏，或是⼤学⽣，还有⼯作中想提升⾃⼰能⼒的，正在学习的⼩伙伴欢迎加⼊。我们会⼀起结伴同⾏
⾄于为啥 MVVM 框架能提升前端的渲染性能，这⾥简单的总结下原理，因为⼤量的 DOM 操作是性能瓶颈的罪魁祸⾸，那通过⼀定的分析⽐较算法，实现同等效果下的最⼩ DOM 开销是可⾏的。React、Vue 这类框架⼤都是通过这类思想实现的，具体实现，⼤家感兴趣的可以去翻下源码哈，这⾥不做展开。前端分离也导致前端的分⼯发⽣了变化：
后端更加关注数据服务，前端完全控制⾃⼰的各种⾏为，可玩性更⾼。当然相应的学习成本也越来越⼤，node的出现也使得前端前后端⼀起开发成为可能，好多⼤公司在 2015 年前后就进⾏了尝试，⽤ node 作为中间数据转接层，让后端更加专注于数据服务和治理。
全能前端时代
2009年开始，⼤屏智能⼿机开始陆续出现，到后来 4G 移动⽹络的普及。使得前端从单⼀的基于的 PC 浏览器 展⽰的 web 应⽤，开始向⼿机、平板覆盖（HTML，CSS，JavaScript 也陆续推出了⾃⼰的新标准）。前端对于跨端浏览的需求越来越⼤，前端不再仅仅是 PC web ⽅⾯的开发，⼿机配置，与 app 进⾏ hybird 开发，变成了常态。甚⾄于 Facebook 推出了 React-Native，国内、⽀付宝推出⼩程序，试图整合web、native 开发。为什么会有这样的情形发⽣呢，⽹速越来越快，硬件性能越来越好，js 在各个终端的运⾏能⼒与native 开发（IOS、Android）的差距越来越⼩，就让我们搞事⼉（喜欢偷懒）的程序员们想着能不能写⼀套代码，然后四处运⾏呢。
能的，这个可以有，React-Native，⼩程序，以⾄于后来出现的 Electron，使得⽤ JavaScript 开发桌⾯应⽤都成为了可能（VSCode）。⾕歌近两年也推出了 Flutter 的开发语⾔，可以实现⼀套代码，多处运⾏（web、app）。前端真的不再是只能切图，开发静态页⾯的前端。后端可以搞、爬⾍可以搞（node），app 可以写（Weex、RN、Flutter），桌⾯应⽤可以开发（Electron），算法和语⾔的严谨性还有点短板，但是 TypeScript 的出现，以及后续 ECMA 标准的近⼀步完善，会使得前端更加的全能化，也可能会出现更多的细分⼯作领域。
最后，告诉⼤家“Any application that can be written in JavaScript, will eventually be written in JavaScript.”这是个⽣态圈的概念（最早见于⾕歌教⽗ 在《⿊客与画家》中对于浏览器⽣态的想法），包括浏览器，包括、⽀付宝都已经早早⾛在了这条“不归
路”上。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。