阅读 66

前端发展简史

前端发展简史

[ WEB1.0时代:静态网页]

  • 1989年,在欧洲粒子物理实验室Tim Berners-Lee (伯纳斯●李)提出:个人计算机上访问大量的科研文献,并建议在文档中链接其他文档=>“WEB原型”
  • 1994年,万维网(W3C) 成立,网景推出了第一版Navigator浏览器, HTML也发布了第二代版本,TIM的好基友也设计了CSS...所以我们把1994年称为“前端历史的起点”
  • 1995年,网景工程师Brendan Eich花了10天时间设计了JavaScr ipt语言,1996年微软发布了JScript (和JS有一些差异),同时拉开了Nav igator和Internet Explorer浏览器大战的序幕(到2002年1E完胜, 占据全世界96%的市场份额)。

浏览器的世纪大战.jpg

  • 为了让各大浏览器统一编程规范,1997年6月ECMA (欧洲计算机制造联合会)以JavaScript语言为基础制定了ECMAScr ipt标准规范ECMA- -262,从此浏览器厂商都是按照这个规范来开发自己的浏览器产品。
  • 1999年12月ES3发布,到2011年6月ES5发布 (2007年的ES4天折:改动太大),ES3占据了10年历程,也是JS语言的基础。2015年6月ES6发布 (但是由于之后规定每年发布一个新的版本,所以后改名ES2015: let. const. Arrow function、 Class、 Module.Promise、Iterator、 Generator、 Set、 Map、 async、 Symbol. Proxy....) , 2016年6月对2015版本增强的2016版本发布,此后相继有ES2017. ES2018...
  • 同样HTML也在2014年10月发布了第五代版本,2011年CSS也发布了第三代版本,此时前端基础的技术栈就稳固下来。

前端发展4.png

[ WEB2.0时代:动态网页的崛起]

1995年之前,JS只用来做一些简单的DOM修改,WEB页面都是静态的(显示静态文本和图片),为了让WEB页面更具备活力(例如:动态展示数据),1995年 PHP诞生,1996年JSP诞生, 1996年 ASP诞生,2002年ASP. NET诞生...这些服务器端页面技术实现了WEB页面的动态化,从此WEB2. 0时代到来。

[弊端]

  1. 同步非异步刷新
  2. 服务器承受压力过大
  3. 后台开发的任务量过大(网页制作任务量少),

代码过于臃肿,两种角色很难实现同时任务开发

[ WEB3.0时代]

[第一阶段: HTML (5) + Css (3) ]

  • 技术要点: HTML5、CSS3、 响应式布局(rem/flex/@media等)、Hybrid混合APP开发、 微信二次开发、小程序开发、React Native开发、Flutter. uni-app...
  • 特殊说明: Hybrid、 微信开发、小程序开发、ReactNative开发等,这些都需要有JS和框架编程的基础; H5不仅仅是标签,还需要掌握常用的AP1以及video和audio等,例如:localstorage、webscoket、getCurrentPosit ion等;

[第二阶段: JS包括ES6核心原理]

  • JS堆栈内存、闭包作用域、浏览器词法解析(v8渲 染机制原理)、面向对象和THIS处理(主要是独立封装组件和插件,研究常用类库的源码) ;
  • ES6基础语法(包括class类的继承封装和多态)、ES6中的Promise (及Promise A+规范)、Generator生 成器函数等深入用法;
  • 同步异步编程(包括运行机制和微任务、宏任务,以及实战应用)
  • 常用的编程思想和设计模式:函数的防抖和节流、柯理化函数、惰性函数、单例设计模式、发布订阅模式、Promise设计模式等
  • DOM性能优化(重排和重绘的优化)、DOM事件
  • 前端编程常规算法:去重、冒泡排序、插入排序、快速排序、递归等

[第三阶段: AJAX和HTTP ]

  • 技术要点: ajax原理、ajax异步解决方案(promise) 、axios (包括自已封装promise版ajax库)、fetch及封装处理、jquery中 的ajax操作和库的封装等
  • 跨域解决方案及实现原理: jsonp、 cors、 webpack proxy (scoket. io)document. doma in、window. name+iframe、postMessage 等
  • HTTP报文(常用的响应请求头实战应用技巧)、HTTP (TCP)传输流程(包括三次握手四次挥手及TCP底层协议)、HTTP1和HTTP2的 区别、HTTP和HTTPS的区别等
  • 特殊说明: HTTP是 目前优秀公司重点考察的知识点,因为传统前端代码优化,性能上提高较小,HTTP相关优化手段是性能提高的重要方法(例如: 304緩存、DNS緩存、减少HTTP传输次数和大小、HTTPS的加密等),这块是一个重点!

●当下前端开发的技术体系

[第四阶段:框架开发]

  • 技术要点:目前市场上的项目大部分都是框架开发的,所以框架学习非常的重要,目前主流框架是vue、react、 angular, angular现在用的越来越少,一-般都是老项目使用这个技术在维护(angular1.0版本居多)
  • vue全家桶:vue (MVVM实现的原理以及一-些语法实现的原理)、vue-router (HASH路由实现的原理)、vuex (掌握原理)、axios、 vue-cli (需要能够修改脚手架的webpack配置项)、iview/vux/vue element等 常用枢架的使用等
  • react全家桶: create-react -app ( 能够修改webpack的配置项)、react (掌握虚拟DON渲染原理,掌握DOM-DIFF原理, 掌握INDEX索引对比机制,掌握MVC实现的原理)、react-dom/react-native. react-router. react-redux/dva/mobx (掌握原理,自己可以基于原生JS写一套类似的插件、发现里面的一些不足点)、antd (最好可以自己封装一些基础的组件)等

[第五阶段:辅助技能]

技术要点

  • Webpack:掌握常用的脚手架使用和修改,会一些基础的webpack搭建
  • Git:熟练掌握团队协作开发中代码版本管控技巧,熟悉常用的操作命令
  • Node:掌握基础的API、掌握express/koa/egg等框架、可以编写伪API,可以基于node做跨域处理等,有精力的同学可以研究一下数据库操作等
  • Canvas:一些公司要求会可视化,需要掌握canvas/webGI/d3等,这个对于数学结构、算法等有一定的要求;这方面不好的,可以先掌握一些基础的操作,掌握echarts的用法等;
文章分类
前端
文章标签