JS笔记(1). 前端发展史

WEB 前端发展史

文章目录

WEB 前端发展史

一、前端发展时刻表速记
二、 Web 时代的演变历程

1. Web 1.0 (静态)
2. Web 2.0 (动态)
3. 当今及未来趋势

三、解惑
四、浏览器

浏览器分类
浏览器内核
浏览器市场份额
开发者工具

五、JavaScript 基础
六、参考文献 :

一、前端发展时刻表速记

1989 年【蒂姆博纳斯•李】发明 html(超文本)。
1994 年【蒂姆博纳斯•李】创建为盈利性万维网联盟(W3C)。
1995 年网景工程师【布兰登•艾奇】发明前端脚本语言(JavaScript)。
1996 年微软发明(JScript)。
1997 年 6 月 ECMA(欧洲计算机制造商协会), 以二者(JavaScript、JScript)为基础、以 JavaScript 为主来制定 WEB 脚本语言标准【ECMAScript】。
1999 年 12 月 ECMAScript3.0(ES3) 发布。
2011 年 6 月 ECMAScript 5.0(ES5) 发布。
2015 年 6 月 ECMAScript 2015(ES2015) 发布。
2016 年 6 月 ECMAScript 2016(ES6) 发布。
以后每年 6 月份都会发布新标准 (目前 ES2017 ~ ES2019)

二、 Web 时代的演变历程

1. Web 1.0 (静态)

主要是以静态、单向阅读为主, 互联网用户仅仅是一名网络读者。
典型网站 : 大英百科全书
当时的前端技术栈 : html、css、JavaScript、PS。
特点 : 基本以静态页面为主, 静态页面组合起来的一个站点, 网页数据是写死在页面中的, 是不会随着时间与后台数据库数据的变动而变动的。

2. Web 2.0 (动态)

主要是以分享为特征的实时网络, 每位互联网用户都可以拥有属于自己的数据, 并在网络中不至丢失, 任何人都可以发表自己的观点, 不仅可读也可写。
典型网站 : 微博、一些自媒体
当时的前端技术栈 : h5、css3、JavaScript、ajax、fetch等 …
特点 : 基本以动态页面为主, 网页数据不是直接写死在页面中, 而是通过一定的前端技术或者后端技术动态的更新并展示网页内数据, 是会随着时间与后台数据库数据的变动而变动的【可以实现动态网页的前端技术 -> ajax, 后端技术 -> jsp、asp、php】。

3. 当今及未来趋势

浏览器领域 : 随着 ECMAScript 每年更迭的 web 脚本规范, 使得各浏览器厂商的 JavaScript 支持越来越规范与同一( 更少的兼容问题【Edge 现在已经使用了 Chrome 内核】 )。
浏览器领域 : ECMAScript 规范的更新也逐步促进 JavaScript 面向对象编程、面向组件化开发、面向异步编程的领域不断深入。
后端领域 : 前端正在逐步分担后台压力, 如今已是二分天下, 随着 node.js 的出现, 后端能做的前端也能做, 虽然 js 本身并没有能力去操作 I/O 但是 node 内置的 v8 引擎是可以的。
移动端领域 : React-Native 与 uni-app 逐步取代 原生 App , 并且小程序的崛起也对 原生 App 造成了一定冲击。

三、解惑

页面是怎么呈现到用户眼前 ?
文字描述 : 简化后的流程 : 用户 --(行为)–> 浏览器 —(请求)–> 服务器 --(响应)–> 浏览器 --(解析与渲染)–> 用户
图解 :
静态页面与动态页面的区别 ?
总体上 : 动态页面上的数据会动态生成与更新, 静态页面上的数据是写死的, 永不改变。
单体上 :
-1). 后端实现的动态页面比静态页面要多一个 "编译期" 。
-2). 前端 ajax 实现的动态页面比静态页面要多一个 "异步请求和数据渲染" 的过程。
动态页面的前端与后端分别的实现 :

后端实现 :
-1). 文字描述 : 用户 --(行为)–> 浏览器 —(请求)–> 服务器 —(请求数据)–> 数据库 —(响应数据)–>服务器(编译)–(响应)–>浏览器–(解析与渲染)–>用户
-2). 图解 :

前端实现 :
-1). 文字描述: 实际上就是先去服务器把页面资源拿过来解析, 然后通过触发一系列事件向后台发送 ajax 或者 fetch 请求, 将数据拿回来再对页面数据进行动态的填充或者更新。
-2). 图解 :

四、浏览器

浏览器分类

非国产 : Chrome、FireFox、Opera、Safari、IE
国产 : 360、QQ、猎豹、遨游、UC、百度

浏览器内核

内核	简介	代表	兼容写法
webkit	Safari 内核以及 Chrome 内核原型	Chrome(28 版本以前)、Safari、android 默认自带浏览器	-webkit-
trident	IE 内核	IE6~7	-ms-
Gecko	FireFox 内核	FireFox	-moz-
Presto	Opera 内核原型	Opera 15 以前	-o-
Blink	Chrome 最新内核	Chrome 28 及以后、Opera 15 及以后	-webkit-
webkit + trident	双内核	各大国产浏览器	-webkit-

=> 双核浏览器是否优于单核浏览器 ?
双核浏览器是指同时具备 webkit 和 trident 内核的浏览器, 这类浏览器内置双核的原因是为了同时兼顾速度与安全性。因为中国大陆的银行仅支持低版本 IE。所以在访问除银行类网站的时候采用 webkit 和来提升页面的解析与渲染效率, 在访问银行类网站的时候采用 trident 内核来保证安全性。
所以此问题需要分析对应的场景需求, 但有一点毋庸置疑的就是内核之间的切换会牺牲一部分速度。