前言
组内定期都会分享一些文章。这次定了这个话题 “前端这十年的发展”。范围太广，有点难下手，与其面对那些冷冰冰的时间年限。不如我们来看看。他们在当时都创造了什么价值，给了我们什么启发。
静态页面时代
在 1995 年之前，前端的主要展现形式是以静态页面呈现的，主要技术为 HTML(超文本标记语言) + CSS(层叠样式表)，前端此时的功能点是纯静态的只读网页。
主角登场 —— JavaScript
1995 年，NetScape（网景） 设计了 JavaScript 。他的诞生引发了 第一次浏览器战争 ，JavaScript 让页面开始动了起来。开始有了简单的用户交互，可以写一些好看的小插件了。比如：跑马灯、浮动的小广告、小时钟等。
第一次浏览器战争 : 内容大概就是微软在当时的 Window 系统下集成了
Internet Explorer 3 (IE3)，衍生了VBScript和JScript，抢占浏览器市场。
第一次浏览器战争的结果 ：浏览器市场 上 IE 胜了当时的 navigator，但是网景的JavaScript主导了W3C的官方标准。
动态页面时代
JS 的诞生。给页面带来了活力。但是现在的他还是个静态页面。没有能力去读数据库、所以开始慢慢诞生了、PHP 、JSP、ASP.NET 等动态页面技术相继诞生。
这类后端语言都有读取数据库的能力，可以数据动态渲染 页面 | Dom 元素。以 Google 为代表的搜索引擎以及各种论坛相继出现，使得 Web 充满了活力。 MVC 的理念也随着这股浪潮慢慢出现了。
前后端分家 —— Ajax
前面讲到 后端语言 具有动态渲染页面的能力。但是有一个弊端。就是他要刷新才会渲染页面。极大拉跨了用户体验。
以表单为例：小明填完一系列表单。点击提交的时候。填写的信息出错了。数据流到后端，后端判断出错误信息呈现给页面。此时页面刷新，重新渲染，告诉小明信息出错。小明刚才所填写的东西全都没了。小明怒砸键盘，骂骂咧咧重新来过。
此时 Google 率先 使用 Ajax 进行技术革命， 不需要刷新页面也可以使得前端与服务端进行通信。代表作分别有
2004 年和 2005 年先后发布的 Gmail 和 Google Map
前端也有能力脱离后端去请求数据了！！ Ajax 的诞生也护住了小明的键盘👏
YYDS —— JQuery
第一次浏览器战争 以 IE 的胜利告终。IE 垄断了整个浏览器市场。 此时 IE 飘了，不遵守 W3C 指定的标准。
网景在被收购之前创建了 Mozilla 社区，Mozilla 社区于 2004 年发布 FireFox (火狐)，宣战 IE，第二次浏览器战争拉开序幕。其实更像是网景的复仇战。 随着以 Firefox 和 Opera 为首的 W3C 阵营与 IE 对抗程度的加剧，浏览器标准碎片化的噩梦已经到来。
为了解决浏览器兼容问题，JQuery 诞生了！
为什么 JQuery 会这么火？他可不仅抹平了浏览器之间的差异，他极大的简化了开发者在操作 DOM 和 BOM 的写法，而且融入了 Ajax 。简化了 Ajax 的写法，极大的提高开发效率。
时至今日。还有不少用户在使用着 JQuery。虽然可能会被打，但是我还是要说。JQuery YYDS ！！
新王诞生 —— Chrome
HTML5 草案发布不久，Google 在 2008 年 12 月发布了 Chrome 浏览器，加入了第二次浏览器大战当中。Chrome 使用了 Safari 开源的 WebKit 作为布局引擎，并且研发了高效的 V8 引擎。至 2016 年 Chrome 几乎取代了 IE的王位，W3C 阵营取得了胜利。
强化 Buff —— HTML 5 & CSS 3
HTML 5
- 新增 语义化标签
语义化标签可以提高代码的可读性而且和 SEO 有关。
SEO (Search Engine Optimization) 搜索引擎优化
-
Video、Audio 等多媒体标签的引入
在 HTML5 之前，视频音频类都是Flash,但是Flash这个浏览器插件给用户带来的还有恶意弹框以及一系列小广告。所以Video和Audio的引入，无疑是为了取代Flash而诞生的。 -
Canvas、SVG 的引入
Canvas (画布)可以调用WebGL的 API 处理一些复杂逻辑的动画，甚至可以做游戏（页游）,还是为了取代Flash。SVG (可缩放矢量图形)一般用来做 Icon 图标。而且可以给图标增加动效，给到用户一个很好的反馈 (比如各大视频网站的开始按钮等)，有利与SEO优化。
WebGL 这种绘图技术标准允许把 JavaScript 和 OpenGL ES 2.0结合在一起, 可以为 Canvas提供硬件3D加速渲染
- 新增了
SessionStorage&LocalStorage&IndexDB这些新的储存方式 ，其他的还有 拖拽释放、Webworker,Websocket……
CSS 3
- 新增 属性 & 伪类选择器
- 新增 动画属性
Animation
有 Canvas 为啥还要用这个？Canvas相对与 CSS 的Animation还是比较复杂的。一般来说，处理复杂交互逻辑和多帧的情况下Canvas是不二之选。在处理无复杂交互的动画时Animation用的可太爽了。 - 新增 渐变、过渡、阴影、圆角、变型、第三方字体
这里衍生一道面试题。CSS3 之前已经有 定位 可以作为位移来使用了。为什么还要出translate这种 位移 API 呢 ？ 答案是。translate有GPU加速，而且不会引起重绘和重排 。从流畅度和性能上来看，translate是首选，如果要从兼容性来看，还是不用 CSS3 了吧。 - 新增 媒体查询
媒体查询让响应式布局火遍全网，一套代码跑多端，适配全靠样式来。 - 新增 新的布局方式：
Flex|Grid布局 - 新增 新的单位 (
rem、vh、vw)
由于 移动端 跟 PC端 的像素不同，导致无法准确的设置像素，rem+font-size就能搞定，为啥还要个font-size？ 因为rem是根据font-size来算的呀。所以需要用一段 JS 根据 设备的DPI算出合适的font-size进行适配。
不难看出。这些技术的诞生正在加强前端的能力，也在正在一步步的取代 Flash 。
JS 也可以写后端？ —— Node
什么！！JS 也可写 后端啦？？
Node.js 是一个基于 Chrome V8 引擎的 JavaScirpt 运行环境。
优点：Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，异步编程，使其轻量又高效。
缺点：单进程，单线程，只支持单核cpu，不能充分的利用多核cpu服务器。一旦这个进程崩掉，那么整个web服务就崩掉了（ 后面才会有PM2进程守护 ）
开始模块化 —— Webapck
项目越大，页面中的JS代码越多成了一大问题。这个时候，大量的代码需要组织。模块化系统可以帮助我们把代码拆分为模块。
前端出了两个模块化的规范 即 AMD & CMD
- AMD 是提前执行，CMD 是延迟执行
- CMD 推崇依赖就近，AMD 推崇依赖前置
AMD 代表选手 Require.js
CMD 代表选手 Sea.js
Node 用 CommonJS 规范 同步加载模块，不适用在浏览器
如何抹平规范的差异？ Webpack 他来了
Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。Webpack 让模块化贯彻到底，模块化的不仅仅的 JS ，只要加载相应的 Loader 就可以编译相应的资源。
Webpack 的诞生，宣告前端工程化的开始。
三足鼎立 —— Angular | Vue | React
React 官网介绍 “用于构建用户界面的 JavaScript 库”。React 本身只是 一个函数 UI = Render (data) 用 jsx 语法进行数据渲染，有着接近原生的写法。较为灵活。
Vue 官网介绍 “ 渐进式 JavaScript 框架 ”。 用 模板语法 进行渲染。以及丰富的 API ，双向绑定 可让我们太香了。其原理是利用 Object.definpropoty , Vue3 采用 Proxy
Angular 是一个基于 TypeScript 构建的开发平台, Angular 也有 双向绑定 他的 双向绑定 采用的是 “脏检查” 的方式（用的比较少。不是很熟）。
以上三个技术。都有着较为丰富的插件， React 和 Vue 社区较为活跃。都是数据驱动视图。但是缺点就是对 SEO 不友好，后续采用 SSR 服务端渲染 的解决方式
Router 功能，前端也可以自己定义页面 URL。
只需要一个 HTML 文件作为主入口就可以了，再也不用看见这么多 HTML 文件了。
其原理是 通过 Hash 值 找到对应的模块。这些模块都是用 JS 生成 根据 模板字符串 | JSX 生成 虚拟 DOM 再一次性渲染到 HTML 上。可以有效减少重绘次数。
进入移动时代 —— APP开发
CSS3 新增的单位可以让我们很好在移动端进行展示。以及更友好的与用户进行交互。但是前端的野心可不止页面，APP 也给我拿下。
移动端开发方式
- 原生开发 —— IOS | 安卓原生开发
- 混合开发，主要利用 webview 进行页面加载 —— 页面再跟设备通信
- WebApp —— 开个浏览器跑页面
React 也就拥有了 RN (React-Native) 这种混合开发的框架，Vue 也拥有了 Weex，Angular 有 ionic 配合 codeva 进行打包。
那么为什么 混合开发 会火起来。正是因为跨端的需求。IOS 和 安卓用的是两个开发语言。相较于 混合开发 。只需要用一个人力就可以接入 IOS 和 安卓双系统了，岂不美哉。
但是 混合开发 也不是所有业务都适用。
RN 的渲染机制是需要依赖多个 view 叠加.比如我们渲染一个复杂的 ListView，每一个小的控件，都是一个 native 的 view，然后相互组合叠加，此时我们滑动一下 List 刷新，会有多少个对象需要渲染。
Flutter 是谷歌的移动 UI 框架，可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 Flutter 不仅有 跨端 能力，而且拥有 原生性能。但是 Flutter 用的不是 JS，而是 Dart, 据称 Dart 语言可以编译成原生代码，直接跟原生通信。但是有一定的学习成本。
来看一下 框架的原理图 对比
RN
Flutter
Flutter 将 UI 组件和渲染器从平台移动到应用程序中，这使得它们可以自定义和可扩展。Flutter 唯一要求系统提供的是 canvas，以便定制的 UI 组件可以出现在设备的屏幕上，以及访问事件（触摸，定时器等）和服务（位置、相机等）。这是 Flutter 可以做到跨平台而且高效的关键。另外 Flutter 学习了 RN 的 UI 编程方式，引入了状态机，更新 UI 时只更新最小改变区域。
小程序的到来
微信这个神奇的 APP 可以让页面有能力调用移动设备的原生 API 能力，比如扫一扫、摇一摇、之类的。唯一条件是用户接入公众号即可，而且可以获取到用户的信息，所以 H5 营销才会火起来，炫酷的交互动画、有趣的交互体验，都是卖点。
微信带头掀起了一股小程序浪潮，在 APP 里面运行另外一个 APP。可太秀了。小程序相比于公众号，拥有更多设备API 可以调用，热度持续至今。
后续，支付宝也出了自家的小程序，还有百度、京东等都陆续开启了小程序接入。各家产商都围绕的自家业务进行扩展
按照以往的经验，有差异就会有抹平的工具。此时市面上已经出现了一套代码跑多端的框架。
- React 的代表
Taro - Vue 的代表
uni-app他们主要都处理了 小程序差异化 的问题，而且这两个框架都支持 APP 端的开发（混合开发）。
连桌面应用开发也不放过 —— Electron
Electron 可以让我们有能力去实现 桌面级应用开发，我对 Electron 的理解。更像是套了一个浏览器的壳去跑页面。但是这个页面可不简单。这个页面拥有调用系统 API 的能力，可以同时使用 NodeJS 开发，进程通信的话是使用 IPC 进程。最重要的是，他可以上 Mac 系统，抹平了 Window 和 Mac 这个平台的差异。代表作：VScode。
总结
时代推动技术的发展。前期的产品大部都由后端所主导。到前后端分家。再到后面的一套代码跑多平台。都是来之不易的。从上诉的文章来看。
- IE 和 W3C 阵容的浏览器的差异，
JQuery来抹平； - AMD 和 CMD 的差异，
webpack来抹平； - 安卓 和 IOS 的差异，
RN和Flutter来抹平； - 小程序平台的差异，
Taro|uin-app的类似产品抹平差异； - Win 和 Mac 有差异
Electron来抹平；
得出结论：只要有差异，就会有抹平差异的方案出现，达到万物皆可 JS，这也正是 JS 的强大之处。所以 JS 是世界上最强大的语言吗 😏
