前端发展史

1.石器时代

1.1990年,第一个web浏览器诞生了/这是前端这个技术的起点,代表这一年它出生了.后面的时间里,前端圈有很多里程碑事件.
2.1994年,网景公司发布第一个商业浏览器,Navigtor.
3.1995年,网景工程师Brendan Eich 用10天时间设计了JavaScript,同年微软发布了IE浏览器,进而掀起了浏览器大战.
4.2002年,IE在浏览器大战中赢得胜利,IE6 占有率超过96%.
而前端的发展史,又非常直观地显示在你看到的前端网页的演变史中,整个90年代,受限于网速,网页都是静态的显示非常单一,前端的工作大部分都只是让美工来切图和写写HTML + CSS.也因此,在90年代,前端还处于一种萌发的状态,前端工程师这一工种也没有明确出现.再后来,后端越来越复杂,开始分层,就像小公司,大家啥都干,但是公司规模大了之后,就要分部门,职责明确,代码也从揉在一起发展到Model,View,和Conttroller,分别负责不同的功能.

这就是后端MVC模式的盛行,让我们可以在模板里写上展示的数据,一千的代码都是所有内容写在一起,现在就会用Model负责展示数据.

后端渲染页面之前,会把数据库的数据显示在前端,这个时候,除了写前端代码必备的HTMLL/CSS和简单的JavaScript动效,页面也开始了用到了JSP和Smarty,我们会写出如下代码:

<!DOCTYPE html>
  <html>
  <head>
  <meta charset="utf-8">
  <title>smarty test1</title>
  </head>
  <body>
  它的名字叫{$name}
  </body>
  </html>

上述代码写出来的页面,就可以直接显示后端数据库里的数据了,这也是所谓的动态网页.动态页面使得前端本身的丰富程度大大提升,这也一下子迎来了整个互联网开发的繁荣时期,这种模式下的任何数据更新,都需要刷新整个页面,并且在宽带不足的年代,这样做会耗费不是加载网页的时间.
所以这个时代的网页主要还是以显示数据和简单的特效为主.比如当时众多的门户网站,也都没有太多的用户交互,主要就是显示后端存储的新闻.
直到2004年,Google发布了Gmail,用户可以在不刷新页面的情况下进行复杂的交互,之后,Ajax逐渐成为网页开发的技术标准,也不断地被应用于各种网站,Ajax这个技术让我们可以异步的获取数据并且刷新页面,从此前端不在受限于后端的模板了,这也宣告了Web2.0 时代饿正式到来.至此,前端工程师也正是成为一个独立工种出现.

铁器时代

在Gmail 诞生后,虽然依然有浏览器的混战和兼容性问题,比如绑定事件不同浏览器就要写不同的代码,但大家意识到前端也可以做复杂应用.而JQuery的出现迅速风靡全球,一个$走天下,学会JQuery 就等同于学会了前端,算是前端的车同轴的时代,在这之后,前端的具体开发不在被JavaScript的兼容性问题所困扰.

那个时候jQuery + Bootstrap 一把梭成为前端开发领域的主流技术,前端代码内嵌在后端项目中,写完直接发布,代码写法如下:

$('#alert-btn').on('click',function(){
  $('#app .input').val('hi')
})

那个时候写代码,就是找到某个元素,进行dom操作,特别像是铁器时代的拼刺刀,随着前端项目规划的逐渐提升,前端也需要规模化的时候,在2009年AngularJs和Node.js的诞生,也宣告前端工业化革命的到来.

工业时代

AngularJS的诞生,引领了前端MVVM模式的潮流,Node.js的诞生,让前端有了入侵后端的能力,也加速了前端工程化的诞生,现在前端三大框架Angular/React/Vue 的发展主线,也就是从这里开始的.

所谓MVVM,就是在前端的场景下,把Controller 变成了View-Model层,作为Model和View的桥梁,Model数据层和View视图层交给View-Model来同步

前端三大框架

在前端MVVM模式下,不同框架的目标都是一致的,就是利用数据驱动页面,但是怎么处理数据变化,各个框架走出了不同的路线.这些框架要回答的核心问题就是,数据发生变化后,我们怎么去通知页面更新,各大框架各显神通,

Angular 1就是最老套的脏检查,就是在数据检查上,遵循每次用户交互时都检查一次数据是否变化,有变化就去更新dom这一方法,这个方法看似简单粗暴,但算是数据确定页面早起实现,所以一经推出,就迅速占领了MVVM市场.
Angular 2 自断双臂,完全抛弃Anugular 1,开发了一个全新框架,还叫Angular,引入了TypeScript/RxJS等新内容,虽然这些设计很优秀,但是不支持向前兼容,抛弃了老用户,这也是这个优秀框架没有大面积在国内推广的原因.
vue 1,的解决方案,就是使用响应式,初始化时候,Watcher 监听数据的们每个属性,这样数据发生变化时候,我们就能精确的知道数据的哪个key变了,去针对修改对应的dom即可,我们在网页使用{{}} 渲染变量,Vue 1就会在内容保存一个监听器监控这个变量,我们称之为Watvher,数据有变化,watcher就会收到通知去更新.通俗来说就是员工主动停止管理员更新.
Facebook 的React 团队提出了不同于Angular /Vue 的解决方案,他们设计了React 框架,在页面初始化的时候,在浏览器dom只上,开发了一个叫虚拟dom的东西,也就是用 JavaScript 对象来描述整个dom树,我们可以很方便的通过虚拟dom计算出变化的数据,去进行精确的修改,我们先看React中一段代码


<div id = "app">
    <p class = "item">Item1</p>
    <div class = "item">Item2</div>
</div>


{
  tag: "div",
  attrs: {
    id: "app"
  },
  children: [
    {
      tag: "p",
      attrs: { className: "item" },
      children: ["Item1"]
    },
    {
      tag: "div",
      attrs: { className: "item" },
      children: ["Item2"]
    }
  ]
}

在React中,会将上面第一段代码(html)映射成第二段代码(对象)进行描述,这个对象就像数据和实现dom的一个缓存层,通过管理这个对象的变化,来减少对实际dm的操作.这种形式不仅让性能有个很好的保障,我们还多了一个JSON来描述网页的工具,并且让虚拟dom这个技术脱离了Web的限制,因为积累了这么多优势,虚拟dom在小程序,客户端跨端领域大放异彩.
当数据发生变化时,我们生成一份新的虚拟dom数据,然后在对之前的虚拟dom进行计算,算出需要修改的dom,再去页面进行操作,浏览器操作dom一直都是性能杀手,而虚拟dom的diff的逻辑,又能够确保尽可能少的操作dom,这也是虚拟dom驱动的框架性能一直比较优秀的原因之一.

Vue 与 React 框架对比

页面更新方式:

1.Vue 数据发生变化,会主动告诉修改了那些数据,vue的核心是响应式,是根据新建的Watcher监听,本身就比较损害性能,项目大了之后每个数据都有一个watcher会影响性能, 2.React是数据变化了,新老虚拟dom通过diff计算,算出更新的数据然后再去更新.React的核心是domDiff计算逻辑,如果虚拟dom树过于庞大,是的计算时间大于16.6ms,那么就可能会造成性能卡顿.

解决性能瓶颈

vue1 的问题在于响应式数据过多,这样会带来内存占用过多的问题,所以vue2 大胆引入虚拟dom来解决响应式数据过多的问题.又良好地规避了React中虚拟dom问题,还通过虚拟dom给vue带来了跨端的能力.
React 为了突破性能瓶颈,借鉴了操作系统分片的概念,引入了Fiber框架,通俗来说,就是把整个虚拟dom树微观化,变成链表,然后我们利用浏览器的空闲时间计算Diff,一旦浏览器有需求没我们可以把没计算完的任务放一旁,把朱进程控制器还给浏览器,等待浏览器下次空闲.这种架构虽然没有减少运算,但是巧妙地利用空闲实现计算,解决了卡顿的问题,

响应式数据是主动推送变化,虚拟dom是被动计算数据的diff,一个推一个拉,他们看起来是两个方向的技术,但被Vue2 很好地融合在一起,才用的方式就是组件及级别的划分.对于Vue2来说,组件之间的变化,可以通过响应式来更新,组件内部的数据变化,则通过虚拟dom去更新页面,这样就可以把响应式的监听,控制在组件级别,而虚拟dom的量级,也控制再聊组件的大小.这个方案也体现了Vue 一直以来坚持的中庸设计思想.

书写上的不同

Vue 的世界默认是template,也就是语法是限定死的,比如v-if和v-for等语法,有了这些写法的规矩后,我们可以在上线前做很多优化.Vue3 很优秀的一个点,就是在虚拟dom的静态标签上做到了极致, 让静态部分越过虚拟dom的计算,真正做到了按需更新. 2.React的世界只有JSX,最终JSX都会在complier那一层(预编译),也就是工程化那里编译成js来执行,所以React最终拥有了JS的动态性,这也导致了React的API一直很少,只有state/hooks/component几个概念,主要都是JavaScript本身的语法和特性. 3.除以上两个路线,好出现了Svelte这种框架,没有虚拟dom的库,直接把模板编译成原生dom(运行时),几乎没有Runtime,所有的逻辑都在compiler层优化,算是另外一个极致.

总结

1.浏览器的诞生让我们可以方便的显示文本和图片的内容样式,JavaScript的出现让网页动了起来,Gmail的发布,宣告前端也可以使用Ajax异步加载技术,可以进行复杂网页的来发,前端工程师这个工种真是出现了. 2.浏览器混战,各个浏览器都有自己的特色,jquery框架的出现统一了写法,解决了那个时代最棘手的前端问题,兼容性,极大提高了开发者的效率. 3.随着angular1的诞生,我们多了一套开发模式,就是数据驱动页面,我们甚至不再需要用jquery去需找dom,而是只关注数据的来源和修改,这也就是我们所处的前端时代,我们所熟悉的vue React angular 和 Svelte等两家,都是在数据驱动页面这个场景下涌现的框架.

思考:Vue 需不需要React 的Fiber呢?

答案是不需要,原因如下: 1.Vue3 把虚拟dom的控制在组件级别,组件之间使用响应式,组件内部使用虚拟dom,这就让vue3的虚拟dom不会过于庞大. 2.vue3 虚拟dom的静态标签有自动缓存功能,让静态的节点和属性可以直接绕过Diff的逻辑,也是大大减少了虚拟dom的Diff时间 3.时间切片也会带来额外的系统复杂性 4.vue的diff被限制在组件级,这样每次变化影响的只是一棵树,相对范围较小,所以fiber带来的收益似乎也会降低,fiber要改框架还可能破坏目前稳定的表现,因此不需要.

最后

以上内容均来自大圣老师的讲义,手敲一遍加深影响,通过这篇的学习,了解到了前端的发展史,JavaScript使网页动起来了,jquery统一了写法,解决了js的兼容性,angular的出现,我们多了一套开发模式MVVM,就是数据驱动,我们不需要刷新页面,数据也能动态更新,不在需要通过jquery寻找dom.也了解到了每种框架的实现方式,方便后面学习源码.

了解前端发展史