7章Ajax

  1. 请求数据的方式
  2. 发送数据
  3. 数据格式
    1. XML
    2. JSON
  • 8 章编程实践
    1. 避免双重求值
    2. 使用 Object/Array 直接量
    3. 避免重复工作
    4. 使用快的部分和原生的方法
  • Ajax 从最基本层面说,是一种与服务器建立通信而无需重载页面的方法,数据可以从服务器获取或发送给服务器。有很多种方法建立通信,各有各自的优点和限制。

    请求数据的方式

    • XMLHttpRequest
    • 动态脚本注入
    • iframes
    • Comet
    • Multipart XHR

    Comet 和 iframes 作为数据传输技术往往用在极端情况下,这里就不讨论了。

    XHR 其实也什么好说的,毕竟现在的使用范围那么广,尽管是同域限制。注意 post 和 get 的区别,当我们经常请求某一个数据的时候,可以使用 GET,因为 get 的请求会被缓存。当我们参数较长的时候,我们应该用 Post 来获得数据,因为 IE 限制 URL 长度,过长时会导致请求的 URL 被截断。

    动态脚本注入的话,实际上就是 JSONP,解决跨域的较好的方法。但是只能使用 get 请求,并不能使用 post,关于跨域的问题我会重新整理一遍。

    MXHR 其实和 XHR 非常类似,也是同样的请求,不过是将一些静态资源在后端进行 base64 位的编码,然后通过一个请求传到前端,然后我们可以在 readyState 等于 3 的时候看下传到的资源,不过这件事情的价值不大..首先是我们可以直接 base64 放在文档里面,其次每个图片的 base64 里面都有一些部分是申明的会被浪费,雪碧图说不定效果还更好一些,而且最大的问题,这些资源不能被浏览器缓存。

    发送数据

    我们通过 get 和 post 方法都是可以发送数据,GET 会更快一些,一个 GET 请求只发送一个数据包,而一个 POST 请求,至少要发送两个数据包(一个装载头信息,一个装 POST 正文。POST 更适合发送大量数据,他不关心额外数据包的数量。另一个原因是 IE 对于 URL 长度有限制,GET 会被限制。

    Beacons

    这个技术我们非常类似于动态脚本注入,就是通过设置img的src来发送请求(而且并不用创建 img 元素或者将它插入 DOM 中,只需要 new Image()就行了)。我们只能监听 onload 事件来看请求是否成功,或者监听 this.width 来根据服务器返回的图片的宽度来得到响应。其实这个东西使用过,用来监听一些网络状况比较好使,打点嘛

    数据格式

    XML

    AJAX 最开始的时候,使用的是 XML 作为格式,因为通用性极佳,操作严格,易于验证

    但是 xml 太冗余,有效数据比例很低,而且限制于结构,我们需要针对每段 XML 写不同的解析的工具,很麻烦。我们可能得使用 getElementByTagName

    但是现在高级点的浏览器都有 xPath 来通过一个路径来获取值,但是低级的浏览器不支持,IE8 有类似的,就算用也得使用 getElementByTagName 来写降级的代码。

    var path = "/bookstore/book/title";
    xml.selectNodes(path);

    JSON

    JSON 是一种使用 Javascript 对象和数组直接量编写的轻量级且易于解析的数据格式。我们解析 JSON 很简单,只要 JSON.parse 和 JSON.stringify 就可以。

    支持性还可以,正常的浏览器都可以,IE8 以及以上是支持的。不支持的话,我们可以有简单的 polyfill。

    parse 方法最简单的 polyfill 就是用 eval 执行一遍直接就能转化为对象了。

    这里介绍了一些无聊的压缩传输的方法,没有价值。

    接下来的几小节讲的东西都没有什么价值。

    8 章编程实践

    避免双重求值

    有四种方法可以执行一段字符串

    • eval()
    • Function()构造函数
    • setTimeout
    • setInterval

    首先代码会以正常的方式求值,然后在执行过程中对包含在字符串中的代码发起另一个求值运算。代价非常昂贵,最好不要使用。

    使用 Object/Array 直接量

    相比于 new Array,我们还是使用直接量来创建的效果是最好的。

    避免重复工作

    就是比如一些浏览器特性的检测操作,每次调用某个方法的时候都会重复调用。这个时候就可以调用惰性载入函数或者延迟加载。就是高程中也提过的,判断后,使用新函数替换原函数,然后以后的每次调用都是调的新函数了。或者使用申明时就检测一次的方法。

    使用快的部分和原生的方法

    就是说位操作的速度肯定会比一般的数学的操作要快得多

    我们在能够使用原生的值或者原生的方法的时候尽量使用原生的,速度会快很多。因为他们都是浏览器自带的方法(典型的例子是选择器,jquery 的选择速度已经很快了,但是使用 querySelector 还是能快个 10%),早就编译成了 C++的代码,会更快一些。(chrome 来说差别不大,因为都是使用的即时 js 编译器)


    转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 981909093@qq.com

    文章标题:7章Ajax

    文章字数:1.3k

    本文作者:泽鹿

    发布时间:2019-08-28, 16:45:23

    最后更新:2019-08-28, 16:45:23

    原始链接:http://panyifei.github.io/2019/08/28/读书笔记/高性能Javascript/7,8章Ajax与编程实践/

    版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

    目录
    ×

    喜欢就点赞,疼爱就打赏