资讯专栏INFORMATION COLUMN

AJAX学习笔记 - 通讯格式

番茄西红柿 / 426人阅读

摘要:本文章记录本人在深入学习中看书理解到的一些东西,加深记忆和并且整理记录下来,方便之后的复习。格式数据极其的冗长。但是使用格式还是可能比实际的数据占用更多的空间。该字符串通过或者转换为一个本地的对象。

  

本文章记录本人在深入学习Javascirpt AJAX中看书理解到的一些东西,加深记忆和并且整理记录下来,方便之后的复习。

避免使用 XML
  

没有哪种格式从始至终比其他格式都更好。根据传送数据的类型、在页面上使用的目的不同,某种格式数据可能下周更快,另一种数据可能解析更快。

XML格式数据极其的冗长。因为每个离散的数据片段需要大量的XML结构,所有有效的数据的比例非常低。XML语法还有轻微的模糊。

还有,解析XML是非常占程序员的精力的。你需要提前了解详细的结构和确切地知道如何解开这个结构,然后细心地将他们写入js对象中。

谨慎使用 HTML 格式

js是能够较快的把一个大数据结构转化为简单的html,但是服务器完成同样的工作的速度更加快。一种技术考虑是在服务器端构建整个html,然后将其传递给客户端,js只是简单的下载它并且放入innerHTML

什么情况下使用html格式:

html是一种详细的数据格式,比XML更加的冗长。数据本身的最外层可以有嵌套的html标签,每个标签都具有id class等其他的属性。但是使用html格式还是可能比实际的数据占用更多的空间。正因如此。只有在客户端CPU比带宽更受限的时候才使用这个技术。

有一种格式是包含最少数量的结构,需要在客户端解析数据。如JSON等将这种格式下载到客户机非常块,然而这一过程需要引擎花费更多的时间将他们转化成html以显示在页面上。这是需要很多字符的操作,而字符的操作也是js最慢的操作之一。

在服务器上创建html,这种格式在线操作数据量大,下载时间长,不过一旦下载完,只需要一个操作就可以显示在页面上。这种格式与其他几种格式的差别:“解析”在这种情况下指的是将html插入dom的操作。此外,html不能像本地js数组那样轻易迅速地进行迭代操作。

html格式的缺点

html传输量大,需要的解析时间也很长。将html插入到dom的单一操作看似简单,只有一行代码,却需要时间加载很多数据。一句话总结html格式:作为数据格式,它缓慢且臃肿。

推荐使用 JSON

JSON是一种轻量级易与解析的数据格式,它按照js的对象和数组的字面量格式来书写。下面的代码是用JSON编写的用户列表:

[
    {
        "name": "john",
        "age": 15
    },
    {
        "name": "wall",
        "age": 22
    },
    {
        "name": "ben",
        "age": 8
    }
]

JSON的优点:

相比与XMLJSON有许多优点:在总响应报文中,结构占用的空间更小。数据占用的更多。JSON对大多数的服务端编程语言/解码库之间有着很好的互操作性。JSON在客户端的解析工作微不足道,可将更多的代码的时间放在其他数据的处理上。

使用JSONP:

当你使用XHR的时候,JSON数据作为一个字符串返回。该字符串通过eval()或者JSON.parse()转换为一个本地的对象。当使用动态脚本标签插入的时候,JSON数据被视另一个js文件并作为本地码执行。为做到这一点,数据必须被包括在回调函数之中。这就是所谓的JSON填充或JSONP。下面是用JSONP编写的用户列表:

parseJSON([
    {
        "name": "john",
        "age": 15
    },
    {
        "name": "wall",
        "age": 22
    },
    {
        "name": "ben",
        "age": 8
    }
])

JSONP文件大小和下载时间与XHR测试基本相同,而解析时间几乎块了10倍。标准JSONP的解析时间为0,因为根本就用不着解析,他已经是本地格式了。

最快的JSON格式就是使用数组的JSONP格式,虽然这种格式只比使用XHRJSON略快,但是这种差异随着列表尺寸的增大而增大。如果所从事的项目需要一个由10000以上的单元构成的列表,那么使用JSONP比使用JSON快多了。

JSONP的问题:

要避免使用JSONP还有一个与性能无关的原因:JSONP必须是可执行的js,利用动态脚本注入技术可以在任何网站上被任何人调用。从另一个角度来说,JSON在运行之前并不是有效的js,使用XHR时只是被当作字符串获取。不要将任何敏感的数据编码设置为JSONP,因为无法确定他是否包含私密信息、随机的url或者cookie

  

最后,如果文章有什么错误和疑问的地方,请指出。与sf各位共勉!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/92327.html

相关文章

  • 重学前端学习笔记(十一)--浏览器工作解析(一)

    摘要:紧跟在后面的是请求头,每行用冒号分隔名称和值按下两次回车,收到服务端回复响应部分第一行被称作,它也分为三个部分,协议和版本状态码和状态文本。对前端来说系列的状态码是非常陌生的,原因是的状态被浏览器库直接处理掉了,不会让上层应用知晓。 笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要...

    paulli3 评论0 收藏0
  • 重学前端学习笔记(十一)--浏览器工作解析(一)

    摘要:紧跟在后面的是请求头,每行用冒号分隔名称和值按下两次回车,收到服务端回复响应部分第一行被称作,它也分为三个部分,协议和版本状态码和状态文本。对前端来说系列的状态码是非常陌生的,原因是的状态被浏览器库直接处理掉了,不会让上层应用知晓。 笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要...

    付永刚 评论0 收藏0
  • 重学前端学习笔记(十一)--浏览器工作解析(一)

    摘要:紧跟在后面的是请求头,每行用冒号分隔名称和值按下两次回车,收到服务端回复响应部分第一行被称作,它也分为三个部分,协议和版本状态码和状态文本。对前端来说系列的状态码是非常陌生的,原因是的状态被浏览器库直接处理掉了,不会让上层应用知晓。 笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要...

    YPHP 评论0 收藏0
  • 重学前端学习笔记(十一)--浏览器工作解析(一)

    摘要:紧跟在后面的是请求头,每行用冒号分隔名称和值按下两次回车,收到服务端回复响应部分第一行被称作,它也分为三个部分,协议和版本状态码和状态文本。对前端来说系列的状态码是非常陌生的,原因是的状态被浏览器库直接处理掉了,不会让上层应用知晓。 笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要...

    alighters 评论0 收藏0
  • 全栈开发自学路线

    摘要:前言这里筑梦师是一名正在努力学习的开发工程师目前致力于全栈方向的学习希望可以和大家一起交流技术共同进步用简书记录下自己的学习历程个人学习方法分享本文目录更新说明目录学习方法学习态度全栈开发学习路线很长知识拓展很长在这里收取很多人的建议以后决 前言 这里筑梦师,是一名正在努力学习的iOS开发工程师,目前致力于全栈方向的学习,希望可以和大家一起交流技术,共同进步,用简书记录下自己的学习历程...

    wwolf 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<