- Vue.js 3.x快速入门
- 申思维等
- 1605字
- 2023-09-08 19:48:17
1.2.1 Web应用
Web应用分为两类：传统Web页面应用和单页应用。
1．传统Web页面应用
传统Web页面就是打开浏览器，整个页面都会打开的应用。例如，笔者的个人网站http://siwei.me就是一个典型的“传统Web页面应用”，每次单击其中任意一个链接，都会引起页面的整个刷新，如图1-1所示。
图1-1 个人网站
从图1-1中可以看出，传统Web页面的每次打开，都要把页面中的.js、.css、.png、.html文件等资源加载一遍。在图1-1的左下角可以看到，本次共加载了10个请求（4个.css，2个.js，3个.png及1个.html文件），耗时0.837s。这个加载速度在PC端的表现还算可以，但是在手机端就会感觉特别慢，特别是在安卓手机上。
传统Web页面的特点是执行如下任何一个操作，都会引起浏览器对于整个页面的刷新：
· 单击链接。
· 提交表单。
· 触发location.href='...'这样的JS代码。
我们来看一个传统Web页面的例子。
<html>
<head>
<script src="my.js"></script>
<style src="my.css"></style>
</head>
<body>
<img src='my.jpg' />
<p> 你好！ 传统Web页面！ </p>
</body>
</html>
每个浏览器都会从第一行解析到最后一行，然后继续加载my.js、my.css、my.jpg这三个外部资源。
其实很好理解，这个就是传统Web页面的打开方式。
2．单页应用
单页应用的精髓是点击任何链接都不会引起页面的整体刷新，只会通过JavaScript替换页面的局部内容。
3．Ajax和XML
Ajax（Asynchronous JavaScript，JS的异步请求）的概念是每次打开新的网页时，不要让页面整体刷新，而是由JS发起一个“HTTP异步请求”，这个“异步请求”的特点就是不让当前的网页发生阻塞。
用户可以一边上下滚动页面播放视频，一边等待这个请求返回数据。浏览器接收到返回数据之后，由JS控制刷新页面的局部内容。
这样做的好处是：
（1）大大节省了页面的整体加载时间，各种.js、.css等资源文件加载一次就够了。
（2）节省了带宽。
（3）同时减轻了客户端和服务端的负担。
在智能手机和App应用（特别是微信）普及之后，大量的网页都需要在手机端打开，Ajax的优势就体现得淋漓尽致。
虽然Ajax的名称本意是“异步JS与XML”，但是目前在服务器端返回的数据中几乎都使用JSON，而抛弃了XML。
在2005年，国内的技术论坛开始提及Web 2.0，其中Ajax技术被人重视。到了2006年年初，可以说掌握Ajax是前端程序员的重要的加分项。
可惜当时jQuery在国内不是很普及，Prototype也没有流行起来。在笔者与北京软件圈子里的各大公司的同行们交流时，发现大家用的都是原生的JavaScript Ajax，这种不借助任何第三方框架的代码非常烦琐；而且由于需要考虑到浏览器的兼容问题，开发起来也很让人头疼。
例如，当时的代码往往是这样的：
var xmlHttp = false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
xmlHttp = false;
}
}
@end @*/
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
xmlHttp = new XMLHttpRequest();
}
上面的代码仅仅是为了兼容各种浏览器。实际上，后面还有几十行的冗余代码，之后才是正常的业务逻辑代码。
到2008年，国内开始流行Prototype、jQuery之后，发起一个Ajax请求的代码精简成几行：
jQuery.get('http://some_url?para=1', function(data){
// 正常代码
})
从那时开始，Ajax在国内变得越来越普及。
4．Angular
第一个单页应用的知名框架应该是Angular，由Google在2010年10月推出。当时的Gmail、Google Map等应用把Ajax技术运用到了极致。而Angular框架一经推出，立刻引燃了单页应用这个概念。尽管后来各种SPA框架层出不穷，在2015年之前，Angular稳坐SPA的头把交椅。
5．当下的SPA技术趋势
SPA框架已经成为项目开发必不可少的内容，只要有移动端开发，就会面临以下两个选择：
· 做成原生App。
· 做成SPA H5。
无论是iOS端还是Android端都对SPA青睐有加，其优点如下：
（1）打开页面速度特别快。打开传统页面，手机端往往需要几秒，而SPA则在零点几秒内。
（2）耗费的资源更少。因为每次移动端只请求接口数据和必要的图片资源。
（3）对于点／单击等操作响应更快。对于传统页面，手机端的浏览器在操作时单击按钮会有0.1s的卡顿，而使用SPA则不会有卡顿的感觉。
（4）可以保存浏览的历史和状态。不是每一个Ajax框架都有这个功能。例如，QQ邮箱虽然也是页面的局部刷新，但每次打开不同的邮件时浏览器的网址不会变化。而在所有的SPA框架中，都会有专门处理这个问题的模块，叫作Router（路由）。例如：
http://mail.my.com/#/mail_from_boss_on_0620 ，对应老板在6月20日发来的邮件。
http://mail.my.com/#/mail_from_boss_on_0622 ，对应老板在6月22日发来的邮件。
2011—2012年间，各种SPA框架出现了井喷的趋势，包括Backbone、Ember.js等上百个不同的框架。近几年比较流行的框架是Angular、React和Vue.js。