69前端技术

目录

前端技术：... 1

HTML：... 1

浏览器：... 1

浏览器技术：... 2

CSS：... 2

动态网页技术：... 3

网页布局：... 3

同步&异步：... 4

同步：... 4

异步：... 4

前端开发：... 5

硬件发展：... 5

前端技术：

HTML：

HyperText Markup Language，超文本标记语言，它不同于编程语言；

超文本就是超出纯文本的范畴，如描述文本的颜色、大小、字体等信息，或使用图片、音频、视频等非文本内容；

HTML由一个个标签组成，这些标签各司其职，有的提供网页信息，有的负责图片，有的负责网页布局；

超文本需要显示，就得有软件能够呈现超文本定义的排版格式，如显示图片、表格，显示字体的大小、颜色，这个软件就是browser；

超文本需要共享，产生了HTTP协议；

浏览器：

1980年，Tim Berners-Lee为CERN（欧洲核子研究中心，当时欧洲最大的互联网节点）设计基于超文本思想的ENQUIRE项目，以促进科研人员之间的信息共享和更新。

1989年，他编写了《信息化管理：建议》，并构建基于internet的hypertext系统，并在CERN开发了world wide web项目，打造了世界上第一个网站，于1991-8-6正式上线；

Tim Berners-Lee于1990年发明了第一个浏览器，还发明了HTTP协议；

1994年，在MIT他创建了W3C（万维网联盟），负责万维网持续发展，他提出W3C的标准应该基于无专利权、无版税；

Marc Andreessen于1993年发明了Mosaic浏览器，他看到了这个技术的前景，不久后成立自己的公司——netscape；

1994年，发布了Netscape Navigator浏览器，席卷全球；

1995年，MS发布了IE，开启第一次浏览器大战，最终IE后来居上；

Netscape公司成立了Mozilla组织，使用Gecko引擎基于开源技术开发了新的浏览器，最终这个浏览器更名为firefox，发布于2004年；

Apple的Safari于2003年发布第一个测试版；

2008年google的chrome浏览器带着v8引擎横空出世；

浏览器技术：

browser是一种特殊的客户端，能够基于http(s)、ftp等协议和web服务器进行交互，呈现网页内容的软件；

可简单的认为browser分为2部分：

外壳，外壳提供用户交互的界面；

内核，提供html、图像的渲染引擎、提供DOM编程接口、提供javascript引擎、提供浏览器内建对象；

国内browser，一般都采用了以上的一个或两个内核加上外壳实现；

js引擎，不同浏览器内核中用了不同的js引擎；

常见的js引擎有JScript、TraceMonkey(firefox)、V8等，这些引擎差异不小，实现ECMA标准不同，甚至有不按照标准实现的；

CSS：

cascading style sheets，层叠样式表；

HTML本身为了格式化显示文本，但当网页呈现在大家面前时，更多需求让HTML提供更多样式能力，使得HTML变得越来越臃肿，促使了CSS的诞生；

1994年，W3C成立，CSS设计小组成员加入W3C，并努力研发CSS的标准，MS最终加入；

1996-12，发布CSS1.0；

1998-5，发布CSS2.0；

CSS3采用了模块化思想，每个模块都在CSS2基础上分别增强功能，所以这些模块是陆续发布的；

不同厂家的browser使用的引擎，对CSS的支持不一样，导致网页布局、样式在不同browser上不一样，因此，想要保证不同用户使用不同browser看到的网页效果一样，变得非常困难；

动态网页技术：

js的引入使得browser可显示动态的效果，但这不是动态网页；

发明web技术的初衷是为了分享文档，这些内容是静态的（写好的不变的文件），通过url定位到这些文档，将内容下载到browser上，由browser呈现；

互联网的发展，网民的需求增加，大家希望提供交互式访问，用户提交需求，服务端找到需求匹配的资源并发回浏览器端显示，这就是动态网页；

动态网页，指网页的内容是动态的，url不变，里面的内容变化，如访问一个查询页面，提交的关键字不同，提交到后台查询并展示；

动态网页，表现的是browser端内容的变化，而本质上它是一种服务端动态网页技术server-side dynamic web page；

最早诞生的动态网页技术有：ASP、JSP、PHP等，后来几乎所有流行的高级语言都提供了开发动态网页的能力；

网页布局：

早期的网页只需要标题，使用<P>标签分段；

来有人大量使用表格标签，可做好很好的内容布局，也出现结构化的布局方案，但随着页面内容的堆积，出现了成百上千个表格嵌套的情况，browser绘制很慢；

后来出现了div+css布局风格，舍弃了表格，加上js，使得前后端开发分离，而且可做到很好的自适应布局，如流式瀑布一样布局（https://www.guokr.com/scientific/）；

同步&异步：

同步：

早期，网页就是一页页的文本，没什么图片、样式；

后来，互联网时代到来，网页的内容越来越大；

浏览器渲染HTML，需要先下载CSS并加载，为的是好渲染网页，之后，下载网页内容，并逐步渲染，构建DOM树，加载js脚本并执行，js可能需要修改DOM网页就要重新渲染；

如果js放在网页head中，还需要等待js下载并加载；

图片使用<img>标签，是发起新的请求的，如果图片返回，需要重新绘制网页；

好不容易，一张网页绘制完毕，用户提交了请求，就是想看到查询的结果，服务器响应到来后是一个全新的页面内容，哪怕url不变，整个网页都需要重新渲染，如用户填写注册信息，只是2次密码不一致，提交后，整个注册页面重新刷新，所有填写项目重新填写（有办法让用户减少重填），这种交互非常不友好；

从代价的角度看，就是为了注册的一点点信息，结果返回了整个网页内容，不但浪费了带宽，还需要浏览器重新渲染网页，太浪费资源了；

上面这些请求的过程，就是同步过程，用户发起请求，页面整个刷新，直至服务器端响应的数据到来并重新渲染；

异步：

1996年，MS实现了iframe标签，可在一个网页使用iframe标签，局部异步加载内容；

1999年，MS推出异步数据传输的ActiveX插件技术，太笨重了，但也火了很多年，有一个组件XMLHttpRequest被大多数浏览器支持；

AJAX，asynchronous javascript and xml，异步javascript和xml，使用XMLHttpRequest组件，结合js，数据格式采用xml，将这三者结合，实现网页的异步请求；

ajax是一种技术的组合，技术的重新发现，而不是发明，但是它深远地影响了整个web开发；

2005年，google在Gmail和地图中应用，使它大受欢迎并推广开来；

有了异步请求，就可动态的从浏览器发起请求到服务器端，服务器端返回响应的数据封装成XML（json）返回给浏览器，浏览器只需要使用js把内容加入到DOM中，局部渲染就可以了，这个过程中，整个网页不用重新刷新，只需要局部动态改变即可；

前端开发：

早期前端开发使用网页三剑客：dreamweaver、firework、flash；

MS的有frontpage；

不管使用什么工具，都不能改变js兼容、css兼容、浏览器版本兼容的问题，非常头疼；

2006年jQuery库出现，有了JS框架，抹平了平台差异，基于它产生众多的插件，前端开发终于轻松了些；

2008年，V8引擎伴随着chrome浏览器发布；

2009年，ES5标准发布；

2009年，Nodejs发布，服务器端也可以使用JavaScriptb ;

2009年，AngularJS诞生，之后被google收购；

2010年，Backbone.js诞生；

2011年，React和ember诞生，React于2013年5月开源；

2014年，国人尤雨溪的Vue.js诞生；

2014年，HTML5标准发布；

前端工具和框架越来越多，前端开发已经不是随便使用一个什么文本编辑器就可完成的了，如果使用框架，需要很多工具的配合，配置好一个开发环境非常重要；

注：

AngularJs、React、Vue.js这三个前端框架类似py的web框架Django、Flask、Tornado；

硬件发展：

最初，网页就是简单的文本，计算机轻松胜任；

后来，网页对多媒体的支持、动态效果的支持，都需要使用大量的cpu、内存资源，甚至是显卡的渲染能力；

所以，个人pc需要不断升级，否则浏览网页很困难；

移动互联网到来的早期，手机看的网页，都需要单独处理；

手机屏幕小、cpu弱、内存小，能看的网页纯文本加小图，这样产生的流量小，2G时代谈不上网速；

2007年，第一代iphone诞生，2008年安卓手机诞生，3G的移动互联网时代到来了；

手机硬件水平不断提升，手机的开发平台可以让众多开发者开发app，用户可下载安装使用这些app；

对于开发者来说，开发就是个问题了，是不是需要开发一套iphone版本、再开发一套安卓、再开发一套网页的版本？

2013年，中国进入4G时代，手机硬件水平也得到了很大的提升；

众多平台思考的是，能够有一套架构，解决所有前端问题，还是最通用的网页+js；

如今的前端开发，已不是以前的几个js文件、几百行代码了，为了适应需求，新框架、新编程模式不断涌现，这些工具都大大方便了协作开发，同时解决平台兼容性问题；