标签：冲浪 操作dom 大屏 互联网技术 适合 地址 rip bottom jsonp
互联网的前端的发展史，也是不断解决问题的历史，从初期如何构建更好的页面，产生了HTML、CSS、JavaScript；到后面如何产生更好的用户体验，出现了Ajax、jQuery等；到后面互联网应用越来越丰富就开始面对如何更快的产生了更多的应用，然后又出现了前后端分离框架，如AngularJS、 ReactJS 、VueJS 等。
一、互联网的初期，围绕着如何能构建更好的页面展开
互联网伊始以HTML-超文本标记语言为基础的网页开发开始引起了每个普通人的注意，当网景公司开创了最早的图文浏览器时，全世界的目光都聚焦在这个窗口上。通过网络IP地址访问各种各样的网页是最初人们网上冲浪的兴趣所在。
但是人性的懒惰是根深蒂固的，IP地址的逆人性特质很快就遭到了嫌弃。于是便于记忆的域名技术应运而生，其本质上解决的是便于记忆，方便使用。域名需要绑定对应的IP地址才能实现访问，所以需要有一个域名解析服务器（DNS）去做这件简单的令人发指的事情。
看似风平浪静的繁华，实际上只是暗流涌动的假象。互联网的属性本就是人人参与，也就意味着每个开发者的习惯都是大相径庭的，这也是为什么HTML这个语言有那么多废弃的标签的原因——人们只想单纯的实现自己的效果，标签上的style属性已经不能满足于人们疯狂的诉求。于是<center><font> <color> <s><strong>等一系列标签解决了燃眉之急。这样发展下去根本不利于后期的维护和扩展，于是人们发明了CSS-层叠样式表来解决这个问题。通过编写和维护一份样式代码多个页面实现统一的效果。
后来人们有了搜索或者登录的需求场景，有了最早的用户交互行为，当时的网速很差（以kb为单位），用户输入信息提交后，需要等很长时间才能从服务器返回结果，结果返回了一个错误，这样的交互体验是极差的。网景公司首先想到了这一点，让布兰登开发一种在浏览器运行的脚本语言，通过发送信息前校验用户的输入，优化交互体验，这个仅用了10天就创造出来的语言就是LiveScript，由于当时背景下SUN公司的Java语言很火爆，于是网景公司顺势将该语言更名javascript——请注意javascript与Java一点关系都没有，但是两个语言都有互相借鉴的部分。
至此，前端三大技术基本成型。javascript提供的DOM和BOM对象，实现了操作页面文档和浏览器的api接口，微软发布IE也实现了操作DOM和BOM的功能-JScript，越来越多的浏览器开始出现，导致了开发人员要编写兼容性的代码，这让项目开始变得难以维护。互联网的创始人蒂姆伯纳斯李组建了W3C组织来制定互联网技术的相关技术标准，第一次浏览器大战落下帷幕。
二、互联网的发展期，围绕着如何能构建更好的交互体验展开
为前端带来转折的是一种异步通讯的技术-Ajax-Async JavaScript and XML。Ajax通过异步请求的方式，可以在不刷新整个页面的情况下更新页面的数据，第二次浏览器大战就此展开。网景此时已经将精力关注在1：1对ECMA标准实现的FireFox上，IE发布了4-6，Safari和Chrome也加入进来，还有Opera，这就是5大主流浏览器和5大浏览器内核的由来。
Ajax为前端开发带来了全新的交互方式和更友好的用户体验，在这个进程中各种javascript库百花齐放。protoType ，DOJO，雅虎的YUI，Ext JS，Mootools，还有jQuery。但是jQuery凭借着先天的优势——轻量的体积，完善的兼容性，强大的选择器，链式操作，事件处理机制和完善的Ajax，以Write less, do more为设计核心迅速的成为了javascript库的佼佼者。
浏览器的同源策略是为了提升其安全性的一种机制，但是多服务器部署方式，让开发者甚是头痛。为了解决使用其他服务器文件资源，一种新的技术产生了——JSONP，通过使用具备跨域能力的Script标签，引用其他服务器资源，并通过callback回调的方式实现数据的交互。
跨域本来是一种很友好的方式，但是其安全性也一再接收考验，XSS跨站脚本攻击一时间狼烟四起。为了应对这个安全问题——跨站资源共享方案出现了，通过在服务器端设置可接收的访问方式，设置请求头类型来防范XSS等网络攻击。当然还有不再经常用到的iframe，也有类似的遭遇。
当解决了API兼容性的问题后，前端进入了快速的发展时期，2007年随着移动设备的出现——移动互联网的时代开启了。对移动设备来说流量是他们关注的核心，移动端项目的第一任务是解决应用体积的问题，以及页面的性能。Zepto库的出现恰恰是移动端的一个型号，移动端轻量级的标准开始普及开来。随着移动终端的屏幕尺寸越来越多，另一个问题出现了——如何能开发一套代码适配多个移动终端设备？——响应式布局方案出现了。通过编写一套代码适配多种移动终端设备，便于维护减少成本。
这个时期，以bootstrap为代表的UI框架出现了，也代表着前端进入了繁荣时期。通过使用媒体查询API可以动态的设置页面的展示效果，从而在不同移动终端呈现完美的布局和交互。
三、互联网的成熟期，当技术愈发成熟，更快更友好的构建应用变得可能
当前端应用的体积迅速增大后，通过压缩和合并方式，减少项目体积的工具大量涌现。UglifyJS，gulp,grount都是具有代表性的相关工具。而页面的数量缺并没有减少，人们通过抽取公共代码的形式，将项目拆分成不同的页面结构——组件的模糊概念呼之欲出。通过组合不同的页面结构，可以减少很多的维护成本，还有开发量。目前市面上还是能看到很多通过这种方式实现的项目。现在，webpack将所有的工程开发的工作集成一体，配置简单易学，但却功能强大。
最先到来的是模块化，requirejs,seajs是这一时期颇有代表性的两个库，通过将不同的功能代码拆分，在不同的页面中将模块注入，来实现业务层和视图层解耦。包括后期的commonjs都是在解耦的路上越走越远。AMD规范和CMD规范是针对模块化开发的两种实现方式，它们都是为了实现解耦而出现。紧接着对前端来说具有里程碑意义的angular出现了,同时代表着前端进入了框架时代。这类似于Java之于Spring Boot框架，通过将通用的模块进行封装成库，减少了很多入坑的难题。让开发人员不用再为了项目环境抓紧掣肘。
对于前端来说，这一切都要归功于 nodejs的诞生，将前端开发集成化和工程化开发推向了顶峰。angularjs通过将前端抽象成数据层，控制器层，视图层开启了一个单页面应用的时代。这一方式充分的实践了MVC开发思想。angularjs通过使用指令的方式实现DOM操作，事件绑定，路由控制，并且通过原生JS编写相应的业务逻辑——当然其中还有单向数据流的开发思想实现。也正是因为angularjs，使得后来的很多框架借鉴了其优势，让前端的开发方式变得越发轻松。
当facebook面对同样的项目开发问题的时候，发现当时的所有开发方式都不符合自己的预期。于是，facebook开发了一套开源的前端框架——react，通过JS的新特性，和良好的性能体验，迅速获得了开发者的拥护。react在性能上的创新来自于虚拟DOM，通过虚拟DOM与真实DOM的比较修改对应的节点，以此来提高性能。而后来的Flux和redux都是借鉴angularjs的单向数据流思想的一种实现。通过使用状态管理模块，实现数据的可预测，以及数据状态的集中管理和分发。
当国内还处于基础的前端开发阶段时，一个适合国内开发者的前端框架诞生了——vuejs。其同时借鉴了angular和react，将这两个框架的核心思想一指令，虚拟DOM一继承和发扬光大。vuejs通过完美的封装，解决了开发者的学习难度和成本。更加轻量的文件体积，更加优秀的性能，以及直观的开发方式，迅速在开发者中引爆开来。通过编写更少的代码，实现更多更丰富的交互。
至此, 前端框架三足鼎立，但同时又另一个问题浮出水面。如此多的项目技术栈，如何才能更快的搭建开发环境？——这就是脚手架工具的由来，通过简单的几行指令快速的搭建一个项目，迅速上手任何框架没有任何压力。而大部分的脚手架工具都选择webpack最为基础配置，足以说明其的简洁配置和性能优越。
2009年开始，大屏智能手机开始陆续出现，到后来 4G 移动网络的普及。使得前端从单一的基于的 PC 浏览器 展示的 web 应用，开始向手机、平板覆盖（HTML，CSS，JavaScript 也陆续推出了自己的新标准）。前端对于跨端浏览的需求越来越大，前端不再仅仅是 PC web 方面的开发，手机配置，与 app 进行 hybird 开发，变成了常态。甚至于 Facebook 推出了 React-Native，国内微信、支付宝推出小程序，试图整合web、native 开发。为什么会有这样的情形发生呢，网速越来越快，硬件性能越来越好，js 在各个终端的运行能力与 native 开发（IOS、Android）的差距越来越小，就让我们搞事儿（喜欢偷懒）的程序员们想着能不能写一套代码，然后四处运行呢。
能的，这个可以有，React-Native，小程序，以至于后来出现的 Electron，使得用 JavaScript 开发桌面应用都成为了可能（VSCode）。谷歌近两年也推出了 Flutter 的开发语言，可以实现一套代码，多处运行（web、app）。前端真的不再是只能切图，开发静态页面的前端。后端可以搞、爬虫可以搞（node），app 可以写（Weex、RN、Flutter），桌面应用可以开发（Electron）,算法和语言的严谨性还有点短板，但是 TypeScript 的出现，以及后续 ECMA 标准的近一步完善，会使得前端更加的全能化，也可能会出现更多的细分工作领域。
互联网前端的发展史
标签：冲浪 操作dom 大屏 互联网技术 适合 地址 rip bottom jsonp
原文地址：https://www.cnblogs.com/doit8791/p/11774942.html
