聊一聊前端技术的发展

前端的开始，要追溯到1994 年的时候，网景公司 (Netscape Communications) 推出了第一款浏览器：NCSAMosaic，但是它只有少数的幸运儿才能使用。

它的初始作用，是为了方便科学家看文档、传论文。所以，到今天为止，学习前端的人在接触 HTML 的时候，都会记得它的第一句有个词是 Document

这时的页面也基本没有什么交互，是属于后端开发的一部分。

也是在同一年PHP 出现了，有了将数据嵌入到 HTML 中的形式。随后兴起了数据嵌入模板，模板直接写样式的开发模式，经典的mvc就是那个时候提出来的。而页面则是mvc中的那个v（视图）。

直到我上大学大会，学的是.net，还是有很多项目是没有前后端分离的，前后端都需要自己写。

我刚毕业那会，第一个项目还是用.net模板嵌入开发的。那会很多早期网站，是以php，.aspx这种后缀结尾的，这种就是典型的模板嵌入。

当然这种模板嵌入的开发方式也有很大的弊端。

1. 前后端是不分离的，开发人员既要学习后端，又要学习前端，随着对网页要求越来越高，需要学习的东西也越来越多，导致开发的门槛变得越来越高。

2. 数据处理，数据请求越来越多，服务端的压力也越来越大

3.各个框架的模板语法是不一样的，模板嵌入变量的名字，变量均是后台命名嵌入的，模板得跟着后端开发人员走

所以，前后端分离成了一种必然的选择。

在1998 年前后，Ajax（Asynchronous Java And XML：异步的 Java 和 XML）得到了相对的应用，并且在之后逐渐被使用到各个页面上，从而促进了 Web 从 1.0 的静态网页，纯内容展示向 Web 2.0 模式迈进，开启了前后端分离的步伐。

时间来到了2006 年，用于操作 DOM 的 jQuery 出现了，它快速地风靡了全球。大量的基于 jQuery 的插件构成了一个庞大的生态系统，从而稳固了 jQuery 作为 JS 库一哥的地位。我的前端也是从jQuery开始。

当时的jQuery提供了很方便的dom操作，数据处理以及庞大的生态系统（各种插件应有尽有）。

伴随着信息时代、大数据时代的到来，jQuery 在大量的数据操作中的弊端体现出来了

1.jQuery对 DOM 进行大量的操作中，非常消耗性能

我们可以打印一个空的div，看看他上面有多少个属性

image

一个空的div标签，我们什么都没加，他自带的属性就达到了294个

image

所以说，频繁的操作dom是非常消耗性能的，特别是数据量大或者操作逻辑比较复杂的时候。

会导致页面加载慢，复杂的操作相应时间长等问题，用现在的话说就是没有那种丝般顺滑的操作体验。

2.jquery中代码复用性很低，模块化开发很难实现

3.随着javascript的发展，以及es6语法，我们需要一个工程化的解决方案，来实现前端开发（es6, ts，less等各种写法的发展，虽然可以通过script直接引入对应的库，但是会消耗请求资源，资源链接不稳定……）

所以，前端工程化解决方案就成了新的趋势。

2009AngularJS1.0版本以及Node诞生的诞生，其中最为核心的MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等，为前端工程化解决了提供了一个可行的解决方案。2011年react诞生，2014年Vue.js诞生。

自此，前端进入3.0工程化时代。

其中，node 这个基于 V8 引擎的服务端 Java 运行环境的诞生，可媲美 Ajax 对于前端的贡献。

Node 是前端的第二次飞跃，它使 JS 在服务端语言中也有了一席之地。

何为 MVVM 模式？Model：提供/保存数据。View：视图View-Model：简化的 Controller，唯一的作用就是为 View 提供处理好的数据，不含其它逻辑。

如今，后端负责数据，前端负责其余工作越发明显化。

它们之间的通讯，只需要后端暴露 RESTful 接口，前端通过 Ajax，以 HTTP 协议与后端通信即可。

如今Vue、React、Angular 三大框架并驾齐驱。其他框架虽然也有在陆续发布，但是脱离不了这三大框架的魔爪。

虽然我早年也是用的Angular1.0版本，但对其原理并不太清楚，所以聊一聊vue跟react。

基于jquery的一些缺陷，Vue跟React均采用了虚拟dom这一思想。

也就是说，在真实的dom以及数据之间，加了一个中间层，叫做虚拟dom。它并不是真正的dom，而是一段js代码，它用特定的格式去表示dom元素，在项目中，当我们需要对dom进行操作的时候，我们其实是在操作虚拟dom，然后框架会进行对比，计算出需要改变的最小dom，从而有效的解决频繁操作dom会损耗性能这个问题。

其次，因为虚拟dom只是一段js代码，所以它可以编译成其他代码，它的兼容性以及跨平台性是dom所不具备的，因此也诞生了很多其他的框架，比如桌面应用Electron，移动端的react native，跨多端的uni-app等等

另一个方面，随着node的出现，让前端工程化成为了现实。

我们可以通过webpack这样的工具，对特定的语法进行转义，对高阶的语法编译成浏览器支持的es5语法，对页面进行组件开发，对代码进行分包，压缩等等一系列的处理。

如今，多元化的前端框架使这门行业兴起了其独特的工业时代，诸多科技百花争放、百家争鸣。

随着前端技术的发展，前端必将继续分化。

就我目前所知的，就有一部分前端开发是专门从事css动画以及canvas的图表处理，3D游戏等方向。还有一部分前端专门从事移动端开发，H5,小程序，以及跨平台的app开发。