zoukankan      html  css  js  c++  java
  • 使用google加载jquery库

    常规的引用方法如下:

    <script type=”text/javascript” src=”/js/jQuery.min.js”></script>

    但并不推荐使用这种方法,使用google提供的jquery库来加载有很多好处.

    1.减少等待时间

    CDN-Content Delivery Network(内容发布网络)的缩写,通过各种各样的服务途径把你的一些静态内容分散开来,当用户的浏览器提交这些文件的链接请求,他们便会自动下载网络上最近的可用的文件。因为这个原因:任何使用你服务的用户从谷歌下载JQuery库都将获得比从你自己的服务器上下载更快的速度。其实有很多的CDN服务可与谷歌的相比拟,但是他们很难超越谷歌的免费服务的优势,这个益处足以决定问题,但这仅仅是一部分。

    2.增加网页的同时载入速度

    为了避免服务的过载,浏览器限制了同时连接的数目,依据不同的浏览器,这个限制可能是每个机房仅仅两个之少。

    使用谷歌的AJAX内容服务网络来响应你的网站,使你本地服务器上更多服务可以同时进行,这和用户同时用6个浏览器浏览的效果没多大诧异,但是(那些不这么做的人)任然是运行一个浏览器,仅仅允许同时链接两个(链接数目到你的服务器上),这里的区别显而易见。

    3.更好的缓存 利用google的AJAX_lib内容发布服务的最大好处是你的用户根本不需要下载jQuery.不论你的缓存多么强大,如果你用自己的服务器提供jQuery,那么你的用户至少要下载一次它,某个用户很有可能在他们浏览器的缓存区里下载了许多完全相同的jQuery.min.js的拷贝版本,但是当他们第一次访问你的网站的时候,这些拷贝版本会被忽略。

    另一方面,当浏览器检测到同样版本的指向谷歌的链接,它就会知道这是下载同一个文件,不仅是谷歌的服务器会返回一个304(不需要修改文件的指令,即服务器上的文件未改动过)来回复一个重复的请求,而且会命令浏览器的缓存该文件长达一年的时间。

    这意味着即使一些人访问了数百的使用谷歌服务的jQuery网站,他们只需要下载一次就够了。

    4.使用

    现在你应该确信使用谷歌的ajax cdn作为你的公共网站使用jQuery的途径了,所以让我来告诉你该如何使它工作。

    在两个方法中,这个方法是谷歌推荐使用的: 比如:

    <script type=”text/javascript” src=”http://www.google.com/jsapi”></script>
    <script type=”text/javascript”>
    // You may specify partial version numbers, such as “1″ or “1.2″,
    //
    with the same result. Doing so will automatically load the
    //
    latest version matching that partial revision pattern
    //
    (i.e. both 1 and 1.2 would load 1.2.6 today).
    google.load(“jquery”, “1.2.6″);
    google.setOnLoadCallback(
    function() {
    // Place init code here instead of $(document).ready()
    });
    </script>

    你可以发现,读取,分析,执行,jsapi延迟了真实的jQuery请求。并不是很严重,但这确实是延迟了。十分之几秒并代表不了什么,但是他们加起来,很快。更糟糕的是,你不能可靠用这个方法使用$(document).ready()处理链接问题,这需要setOnLoadCallback() handler 为条件。所以,最为推荐的写法如下:

    <script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
    <script language="javascript">
    $(document).ready(
    function() {
    // This is more like it! 简写方式:$( function() {})
    });</script>



     

     


     

  • 相关阅读:
    JS创建类的方法--简单易懂有实例
    CommonJS, AMD, CMD是什么及区别--简单易懂有实例
    JS回调函数--简单易懂有实例
    单链表应用(2)--使用快慢指针,如何判断是否有环,环在哪个节点
    单链表应用(1)--使用快慢指针,找链表中间值
    自定义线性结构-有序Map
    C++中final和override
    双向链表翻转
    检查“()”是否匹配并返回深度
    是否存在K
  • 原文地址:https://www.cnblogs.com/yingzi/p/2395994.html
Copyright © 2011-2022 走看看