前端发展历程

时间 2019-11-24

标签前端发展历程繁體版

原文原文链接

前端的发展历程

什么是前端

前端：针对浏览器的开发，代码在浏览器运行
后端：针对服务器的开发，代码在服务器运行

前端三剑客

HTML
CSS
JavaScript

HTML

HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的基石。HTML是一种基础技术，常与CSS、JavaScript一块儿被众多网站用于设计使人赏心悦目的网页、网页应用程序以及移动应用程序的用户界面。
超文本标记语言（初版）——在1993年6月做为互联网工程工做小组（IETF）工做草案发布（并不是标准）：
HTML 2.0——1995年11月做为RFC 1866发布，在RFC 2854于2000年6月发布以后被宣布已通过时
HTML 3.2——1997年1月14日，W3C推荐标准
HTML 4.0——1997年12月18日，W3C推荐标准
HTML 4.01（微小改进）——1999年12月24日，W3C推荐标准
HTML 5——2014年10月28日，W3C推荐标准
css

CSS

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不只能够静态地修饰网页，还能够配合各类脚本语言动态地对网页各元素进行格式化。
CSS 可以对网页中元素位置的排版进行像素级精确控制，支持几乎全部的字体字号样式，拥有对网页对象和模型样式编辑的能力。html

JavaScript

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，普遍用于客户端的脚本语言，最先是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增长动态功能。前端

前端的发展离不开浏览器的发展

浏览器的发展其实也是前端的发展
咱们来简单了解一下浏览器的发展历史
html5

1991年，WorldWideWeb 浏览器发布
这款由 Web 之父 Tim Berners-Lee 亲手设计的图形化浏览器还包含一个所见即所得 HTML 编辑器，为了不同 WWW 混淆，这个浏览器后来更名为 Nexus.
1993年，Mosaic 发布
Internet 的流行应该归功于 Mosaic，这款浏览器将 Web 带向了大众。诸如 IE， Firefox 一类的当代浏览器仍然在延用 Mosaic 的图形化操做界面思想。
1994年，Netscape 成立
Marc Andreessen 带领 Mosaic 的程序员成立了 Netscape 公司，并发布了第一款商业浏览器 Netscape Navigator.
1995年，IE 发布，浏览器之战即将爆发
微软针对 Netscape 发布了他们本身的浏览器，IE，第一场浏览器之战爆发。
1996年，Opera 发布
Telenor 是挪威最大的通信公司，他们推出了 Opera，并在两年后进军移动市场，推出 Opera 的移动版。
1998年，Mozilla 项目成立
Netscape 成立 Mozilla 开源项目，开发下一代浏览器，后来证实，使用原有代码开发新东西是一种负担，接着他们着手重新开发。
1998年，Netscape 浏览器走向开源
随着同 IE 征战的失利，Netscape 市场份额急剧降低，Netscape 决定将本身的浏览器开源以期重整山河。
2002年，IE 开始主导浏览器市场
市场份额达到95%，借助操做系统的捆绑优点，IE 赢得第一场浏览器之战。
2003年，苹果 Safari 浏览器登场
苹果进入了浏览器市场，推出本身的 Webkit 引擎，该引擎很是优秀，后来被包括 Google， Nokia 之类的厂商用于手机浏览器。
2004年，Firefox 引起第二场浏览器之战
Firefox 1.0 推出。早在 Beta 测试期间就积累了大量人气的 Firefox 引起了第二场浏览器之战，当年年末，Firefox 已经赢得 7.4% 的市场份额。
2006年，IE7 发布
IE6 发布后的第六年，迫于 Firefox 的压力，微软匆匆推出 IE7 应战，吸收了 Firefox 的一些设计思想，如标签式浏览，反钓鱼等。但这款浏览器如今看来并不成功。
2008年，Google 携 Chrome 参战
Google 发布了他们本身的浏览器，加入这场战争。轻量，快，异常的稳固让这款浏览器成为不可轻视的一个对手。
node

浏览器现状

浏览器内核

早期的前端

早期受制于浏览器以及技术、兼容性等问题，致使网页的显示效果很是的单一，几乎都是静态页，前端的工做也是很是简单，说是前端，其实只是一个模板工程师，编写页面模板，而后让后端负责渲染。因此在互联网早期，前端工程师这个职位能够说是不存在，一般由后端或者是美工来兼任。jquery

像这种古老的设计风格，如今已经很难看到了webpack

后端MVC的开发模式

当时的网站开发，采用的是后端MVC模式css3

Model（模型层）：提供/保存数据
Controller（控制层）：数据处理，实现业务逻辑
View（视图层）：展现数据，提供用户界面前端只是后端 MVC 的 V

当用户访问网站时，会向后台发送一个请求，后台接收到请求，生成静态HTML页面，发送到浏览器。好比JSPgit

<html>
<head><title>Hello World</title></head>
<body>
Hello World!<br/>
<%
out.println("Your IP address is " + request.getRemoteAddr());
%>
</body>
</html>
复制代码

Ajax

Ajax技术诞生，改变了一切。前端再也不是后端的模板，能够独立获得各类数据。
Ajax是一种在无需从新加载整个网页的状况下，可以更新部分网页的技术。
经过在后台与服务器进行少许数据交换，Ajax可使网页实现异步更新。这意味着能够在不从新加载整个网页的状况下，对网页的某部分进行更新。
程序员

举个例子：用户注册

若是仔细观察一个表单的提交，你就会发现，一旦用户点击“提交”按钮，表单开始提交，浏览器就会刷新页面，而后在新页面里告诉你操做是成功了仍是失败了。若是不幸因为网络太慢或者其余缘由，就会获得一个404页面。
这就是Web的运做原理：一次HTTP请求对应一个页面。
若是要让用户留在当前页面中，同时发出新的HTTP请求，就可使用Ajax发送这个新请求，接收到数据后，再用JavaScript更新页面，这样一来，用户就感受本身仍然停留在当前页面，可是数据却能够不断地更新。

2004年：最先大规模使用AJAX的就是Gmail，Gmail的页面在首次加载后，剩下的全部数据都依赖于AJAX来更新。

Web 2.0

Ajax技术促成了 Web 2.0 的诞生。
Web 1.0：静态网页，纯内容展现
Web 2.0：动态网页，富交互，前端数据处理

至此，前端早期的发展史就介绍完了，当时对于前端的要求并不高，只要掌握html css js和一个jquery就足够开发网页了

新时代的前端

到目前为止 HTML已经发展到HTML5
CSS已经发展到CSS3.0
JavaScript已经发展到ES9，可是经常使用的仍是ES5和ES6
现代标准浏览器(遵循W3C标准的浏览器)基本已经支持HTML5 CSS3 ES6的大部分特性

浏览器市场份额(2018.9)

因为IE的不思上进，致使市场份额愈来愈少，如今几乎是现代标准浏览器的天下。
因此前端开发一个网页几乎不须要考虑IE兼容性

得益于前端技术和浏览器的发展，如今的网页能展现愈来愈丰富的内容了，好比动画游戏画图等等
因此，对于前端的要求也愈来愈高，特别是近几年框架、技术、工具呈爆发式发展，前端变化特别快！

MVVM

MVVM最先由微软提出来，它借鉴了桌面应用程序的MVC思想，在前端页面中，把Model用纯JavaScript对象表示，View负责显示，二者作到了最大限度的分离把Model和View关联起来的就是ViewModel。
ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model
View 和 Model 之间的同步工做彻底是自动的，无需人为干涉
所以开发者只需关注业务逻辑，不须要手动操做DOM, 不须要关注数据状态的同步问题，复杂的数据状态维护彻底由 MVVM 来统一管理

一个MVVM框架和jQuery操做DOM相比有什么区别？咱们先看用jQuery实现的修改两个DOM节点的例子：

<!-- HTML -->
<p>Hello, <span id="name">Bart</span>!</p>
<p>You are <span id="age">12</span>.</p>

Hello, Bart!

You are 12.
复制代码

用jQuery修改name和age节点的内容：

var name = 'Homer';
var age = 51;

$('#name').text(name);
$('#age').text(age);
复制代码

若是咱们使用MVVM框架来实现一样的功能，咱们首先并不关心DOM的结构，而是关心数据如何存储。最简单的数据存储方式是使用JavaScript对象：

var person = {
    name: 'Bart',
    age: 12
}
复制代码

咱们把变量person看做Model，把HTML某些DOM节点看做View，并假定它们之间被关联起来了。

要把显示的name从Bart改成Homer，把显示的age从12改成51，咱们并不操做DOM，而是直接修改JavaScript对象：

person.name = 'Homer';
person.age = 51;
复制代码

执行上面的代码，咱们惊讶地发现，改变JavaScript对象的状态，会致使DOM结构做出对应的变化！这让咱们的关注点从如何操做DOM变成了如何更新JavaScript对象的状态，而操做JavaScript对象比DOM简单多了！

这就是MVVM的设计思想：关注Model的变化，让MVVM框架去自动更新DOM的状态，从而把开发者从操做DOM的繁琐步骤中解脱出来！

三大MVVM框架

Vue
React
Angular

Vue

Vue框架诞生于2014年，其做者为中国人——尤雨溪，也是新人最容易入手的框架之一，不一样于React和Angular,其中文文档也便于你们阅读和学习。

React

React起源于Facebook的内部项目，由于该公司对市场上全部JavaScript MVC框架，都不满意，就决定本身写一套，用来架设Instagram的网站。作出来之后，发现这套东西很好用，就在2013年5月开源了。

Angular

Angular是谷歌开发的 Web 框架，具备优越的性能和绝佳的跨平台性。一般结合TypeScript开发，也可使用JavaScript或Dart，提供了无缝升级的过渡方案。于2016年9月正式发布。

目前国内使用人数最多、最火的框架是Vue

webpack

现在对于每个前端工程师来讲，webpack已经成为了一项基础技能，它基本上包办了本地开发、编译压缩、性能优化的全部工做。
它的诞生意味着一整套工程化体系开始普及，而且让前端开发完全告别了之前刀耕火种的时代。如今webpack之于前端开发，正如同gcc/g++之于C/C++，是一个不管如何都绕不开的工具。

TypeScript(TS)

TypeScript 是 Microsoft 开发和维护的一种面向对象的编程语言。它是JavaScript的超集，包含了JavaScript的全部元素，能够载入JavaScript代码运行，并扩展了JavaScript的语法。 TypeScript 具备如下特色：

TypeScript是Microsoft推出的开源语言，使用Apache受权协议
TypeScript增长了静态类型、类、模块、接口和类型注解

在开发大型项目时使用TS更有优点

NodeJs

Node.js是一个Javascript运行环境(runtime environment)，发布于2009年5月，由Ryan Dahl开发，实质是对Chrome V8引擎进行了封装。Node.js对一些特殊用例进行优化，提供替代的API，使得V8在非浏览器环境下运行得更好。严格的来讲，Node.js实际上是一个后端语言。

特色：

单线程
非阻塞IO
事件驱动
V8引擎

如今的前端能作什么？

游戏开发(Egret Layabox coco2d-js)
web开发(pc 移动端设备)
webApp开发(Dcloud RN weex ionic)
图形开发WebGl(three.js)
小程序/快应用
后端(nodejs)
桌面应用(electron)
嵌入式开发(Ruff)

前端的将来

如今基于Web的前端技术，将演变为将来全部软件的通用的GUI解决方案。因此前端有可能会变成一名端工程师。

PC端
手机端
TV端
VR端

......

一名合格的前端须要掌握哪些技能

photoshop切图(必修)
html css js(特别是html5 css3 es6)(必修)
三大前端框架至少精通一个(必修)
nodejs(选修)
自动化构建工具webpack(必修)
http协议(必修)
浏览器渲染流程及原理(必修)
TypeScript(选修)

技能会过期计算机基础知识不会过期

算法
编译原理

建议学习编译原理和算法这两门课程
算法的好处相信你们都懂在这里简单说一下
懂算法的人善于计算时空复杂度，至关于在你作事情前，懂得怎么去衡量效率和开销

编译原理：将源语言转化为目标语言,也就是将一门语言转化为另外一门语言

编译原理在前端中的应用

babel
TypeScript
Vue的VNode