常用前端技术有哪些？他们之前有什么关系

本文链接：https://blog.csdn.net/m0_73892801/article/details/130127488

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

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

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 发布了他们自己的浏览器，加入这场战争。轻量，快，异常的稳固让这款浏览器成为不可轻视的一个对手。

浏览器现状

浏览器内核

早期的前端

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

像这种古老的设计风格，现在已经很难看到了

后端MVC的开发模式

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

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

<html>

<head><title>Hello World</title></head>

<body>

Hello World!

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节点的例子：

Hello, Bart!

You are 12.

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

2. 第一部分

1. HTML超文本标记语言 (Hyper Text Markup Language) ，是用来描述网页的一种标记语言。

<html>

<head>

</head>

<body>

Hello World! I'm HTML

</body>

</html>

网页文件本身是一种文本文件，通过在文本文件中添加标记，可以告诉浏览器如何显示其中的内容(如：文字如何处理，画面如何安排，图片如何显示等)。

HTML之所以称为超文本标记语言，是因为文本中包含了所谓“超链接”点。超文本(Hypertext)是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。

　　概括，HTML就是整合网页结构和内容显示的一种语言。

Hello World! I'm HTML

　　浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容。

　　这段内容在浏览器上显示的结果是：Hello World! I’m HTML

　　我们看

标签上有一个id，这是

这个标签的唯一标识，方便别人找到它，对它进行操作。

2. CSS 层叠样式表单(Cascading StyleSheet)。是将样式信息与网页内容分离的一种标记性语言。作为网站开发者，你能够为每个HTML元素定义样式，并将之应用于你希望的任意多的页面中。如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。这样，即设计人员能够将更多的时间用在设计方面，而不是费力克服HTML的限制。说白了，CSS就是设置网页上HTML元素属性的语言。

CSS代码：

#hello{

color:blue;

}

　当把这段CSS代码应用于HTML中，它会找到id为“hello”的HTML标签，将其中的内容以蓝色显示出来;具体的插入HTML的方法这里不再赘述(说一句，只说明是什么，有什么用的问题，不关注技术细节，技术细节网上很好找)。

3. Javascript，首先说明JavaScript和Java无关，JavaScript 是属于网络的脚本语言!那么为什么名字如此相似?这是典型的市场营销方面的成功，它的推广成功,也是借了Java的东风。当微软开始意识到Javascript在Web开发人员中流行起来时，微软还是一贯风格，建立了自己的脚本语言，JScript。

Javascript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言、Java脚本语言(Java小程序)一起实现在一个Web页面中链接多个对象，与Web客户交互作用。例如可以设置鼠标悬停效果，在客户端验证表单，创建定制的HTML页面，显示警告框，设置cookie等等。

　　网页中所有的对数据进行判断、操作以及向浏览者反馈信息的本地代码实现部分均是Javascript(当然也有其他的)，这样既可以使网页更具交互性，给用户提供更令人兴奋的体验，同时减轻了服务器负担。

JS的代码如下：

function jsHello(){

alert('Hello World！');

}

　当把以上代码应用于HTML代码，它会在你的HTML载入时，弹出一个内容为“Hello World!”的对话框。同样，它是通过嵌入或调入在标准的HTML语言中实现的，至于如何嵌入或调入不再赘述，理由上面提到了。

4. Xml可扩展标记语言 (Extensible MarkupLanguage)，是一套定义语义标记的规则，这些标记将文档分成许多部件并对这些部件加以标识。它也是元标记语言，即定义了用于定义其他与特定领域有关的、语义的、结构化的标记语言的句法语言。你可以把XML理解为一种数据库，例如rss就是xml的一种变体。

XML代码如下：

<Hello>

<bcd>China</bcd>

</Hello>

XML的起因是，用户受到SGML(后面再说)复杂性的挫伤和HTML的不充分。相对HTML来说，XML更追求严谨性，如果说你在HTML代码中标签比较混乱，如未关闭等，或许浏览器会忽略这些错误;但同样的事情发生在XML中会给你带来大麻烦。

　　铺垫终于完了，在进入正题之前，建议大家对比着图来理解后边的内容，废话不多说，开始进入正题。

第二部分

　　这里的DOM指的是HTML DOM。HTML DOM是W3C的标准，同时它也是HTML的文档对象模型的缩写(the Document Object Model for HTML)。HTML DOM定义了用于HTML的一系列标准的对象，以及访问和处理HTML文档的标准方法。通过DOM，可以访问所有的HTML元素，连同它们所包含的文本和属性。其中的内容可以修改和删除，同时也可以创建新的元素。HTML DOM独立于平台和编程语言。它可被任何编程语言诸如Java、Javascript和VBScript所使用。HTML DOM就是HTML语言对外界开通的接口，以便其他语言能够访问或修改HTML内部的元素。

　　当js需要对html元素进行操作时，DOM是一个很必要的对象。

　　你便可以通过利用DOM对象构造如下代码并插入到HTML代码中的任何位置来实现。　　

window.οnlοad=function hello(){

document.getElementById("hello").innerHTML="Hello China!";

}

</script>

（web前端学习交流群：328058344 禁止闲聊，非喜勿进！）

　　当用CSS去修饰HTML中的元素，这一过程可以称为声明HTML元素样式的过程。

SGML标准通用标记语言(standardgeneralized markup language)。由于SGML的复杂，导致难以普及。SGML有非常强大的适应性，也正是因为同样的原因，导致在小型的应用中难以普及。HTML 和 XML同样衍生于SGML：XML可以被认为是SGML的一个子集，而HTML是SGML的一个应用。XML的产生就是为了简化SGML，以便用于更加通用的目的。比如语义Web，它已经应用于大量的场合，比较著名的有XHTML、RSS 、XML-RPC 和SOAP 。

XHTML是可扩展超文本标识语言(TheExtensible HyperText MarkupLanguage)。HTML是一种基本的Web网页设计语言，XHTML是一个基于XML的置标语言，看起来与HTML有些相象，只有一些小的但重要的区别，XHTML就是一个扮演着类似HTML的角色的XML，所以，本质上说，XHTML是一个过渡技术，结合了部分XML的强大功能及大多数HTML的简单特性。

　　简单的说，XHTML比HTML要严谨些，但又没像XML那么严重——譬如所有的XHTML标签以及属性必须要小写，属性性必须要加双引号(当然如今的浏览器不管是IE还是FF，对HTML和XHTML采取兼容措施，这也是XSS产生的根本原因)，而且也可以像XML一样自定义部分标签，因此有了极大的灵活性。

　　而且进入了XHTML时代，大家倡导的是CSS+DIV，这也是web2.0的基础。

DHTML只是一种制作网页的概念，实际上没有一个组织或机构推出过所谓的DHTML标准或技术规范之类的。DHTML不是一种技术、标准或规范，DHTML只是一种将目前已有的网页技术、语言标准整和运用，制作出能在下载后仍然能实时变换页面元素效果的网页的设计概念。DHTML就是动态的html，Dynamic HTML。传统的html页面是静态的，Dhtml就是在html页面上加入了javascript脚本，使其能根据用户的动作作出一定的响应，如鼠标移动到图片上，图片改变颜色，移动到导航栏，弹出一个动态菜单等等。

　　一般如：![](pic)

Expression是微软为了使样式表能够在修饰HTML样式的同时执行javascript脚本而在IE浏览器中增加的一个功能，这样你可以做譬如：图片的自适应宽度，表格的隔行换色等等。

　　如：img{max-width:500px;width:expression(document.body.clientWidth> 200 ? “200px”: “auto”);}

XMLHTTP最通用的定义为：XmlHttp是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API。XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面。

　　来自MSDN的解释：XmlHttp提供客户端同http服务器通讯的协议。客户端可以通过XmlHttp对象向http服务器发送请求并使用微软XML文档对象模型Microsoft® XML Document Object Model (DOM)处理回应。

　　现在的绝对多数浏览器都增加了对XmlHttp的支持，IE中使用ActiveXObject方式创建XmlHttp对象，其他浏览器如：Firefox、Opera等通过window.XMLHttpRequest来创建XmlHttp对象。

　　一个简单的定义IE的XmlHttp的对象及应用的实例如下：

var XmlHttp=new ActiveXObject("Microsoft.XMLhttp");

XmlHttp.Open("get","url",true);

XmlHttp.send(null);

XmlHttp.onreadystatechange=function ServerProcess(){

if (XmlHttp.readystate==4 || XmlHttp.readystate=='complete')

{

alert(XmlHttp.responseText);

}

XSLT(eXtensibleStylesheet LanguageTransformation)最早设计XSLT的用意是帮助XML文档(document)转换为其它文档。但是随着发展，XSLT已不仅仅用于将XML转换为HTML或其它文本格式，更全面的定义应该是：XSLT是一种用来转换XML文档结构的语言。

XSL-FO：XSL在转换XML文档时分为明显的两个过程，第一转换文档结构;其次将文档格式化输出。这两步可以分离开来并单独处理，因此XSL在发展过程中逐渐分裂为XSLT(结构转换)和XSL-FO(formattingobjects)(格式化输出)两种分支语言，其中XSL-FO的作用就类似CSS在HTML中的作用。

AJAX：异步JavaScript和XML(AsynchronousJavaScript and XML)。

　　最后一个东东，它算得上是web2.0思想的心。AJAX=CSS+HTML+JS+XML+DOM+XSLT+XMLHTTP。是指一种创建交互式网页应用的网页开发技术。AJAX不是一种单一的新技术，而是有机地利用了一系列相关的技术。

　　在 2005年，Google 通过其 Google Suggest 使 AJAX 变得流行起来。

Google Suggest 使用 AJAX 创造出动态性极强的 web 界面：当您在谷歌的搜索框输入关键字时，Javascript会把这些字符发送到服务器，然后服务器会返回一个搜索建议的列表。

　　在AJAX中，XmlHttp用来在不改变页面的情况下传输数据，其中传输的数据即是XML，然后通过XSLT将其格式化，利用js通过dom对象将其显示到HTML中，同时利用CSS确定数据的显示及位置。

　　这项技术在网络上的应用无处不在，如你的微博，你的邮箱，你的QQ空间，再如搜索引擎，电子商务平台，网络地图等等。