发表新帖
发表新帖

Where do you include the jQuery library from? Google JSAPI? CDN?

后端 未结
关注
16 1612
攒了一身酷
攒了一身酷 2020-11-22 09:21

There are a few ways to include jQuery and jQuery UI and I\'m wondering what people are using?

  • Google JSAPI
  • jQuery\'s site
  • your own site/serv
相关标签:
16条回答
  • 半阙折子戏
    2020-11-22 10:20

    Here some useful resource, hope can help you to chose your CDN. MS has recently add a new domain for delivery Libraries trough their CDN.

    Old Format: http://ajax.microsoft.com/ajax/jQuery/jquery-1.5.1.js New Format: http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.js

    This should not send all cookies for microsoft.com. http://www.asp.net/ajaxlibrary/cdn.ashx#Using_jQuery_from_the_CDN_11

    Here some statistics about most popular technology used on the web across all technology. http://trends.builtwith.com/

    Hope can help you to choose.

    0 讨论(0)
  • 眼角桃花
    2020-11-22 10:22

    In head:

      (function() {
    var jsapi = document.createElement('script'); jsapi.type = 'text/javascript'; jsapi.async = true;
    jsapi.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'www.google.com/jsapi?key=YOUR KEY';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('head')[0]).appendChild(jsapi);
  })();

    End of Body:

    <script type="text/javascript">
google.load("jquery", "version");
</script>
    0 讨论(0)
  • 陌清茗
    2020-11-22 10:26

    There are a few issues here. Firstly, the async load method you specified:

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load('jquery', '1.3.1');
  google.setOnLoadCallback(function() {
    // do stuff
  });
</script>

    has a couple of issues. Script tags pause the page load while they are retrieved (if necessary). Now if they're slow to load this is bad but jQuery is small. The real problem with the above method is that because the jquery.js load happens independently for many pages, they will finish loading and render before jquery has loaded so any jquery styling you do will be a visible change for the user.

    The other way is:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>

    Try some simple examples like, have a simple table and change the background of the cells to yellow with the setOnLoadCallback() method vs $(document).ready() with a static jquery.min.js load. The second method will have no noticeable flicker. The first will. Personally I think that's not a good user experience.

    As an example run this:

    <html>
<head>
  <title>Layout</title>
  <style type="text/css">
    .odd { background-color: yellow; }
  </style>
</head>
<body>
<table>
  <tr><th>One</th><th>Two</th></tr>
  <tr><td>Three</td><td>Four</td></tr>
  <tr><td>Five</td><td>Six</td></tr>
  <tr><td>Seven</td><td>Nine</td></tr>
  <tr><td>Nine</td><td>Ten</td></tr>
</table> 
<script src="http://www.google.com/jsapi"></script>
<script>
  google.load("jquery", "1.3.1");
  google.setOnLoadCallback(function() {
    $(function() {
      $("tr:odd").addClass("odd");
    });
  });
</script>
</body>
</html>

    You (should) see the table appear and then the rows go yellow.

    The second problem with the google.load() method is that it only hosts a limited range of files. This is a problem for jquery since it is extremely plug-in dependent. If you try and include a jquery plugin with a <script src="..."> tag and google.load() the plug-in will probably fail with messages of "jQuery is not defined" because it hasn't loaded yet. I don't really see a way around this.

    The third problem (with either method) is that they are one external load. Assuming you have some plugins and your own Javascript code you're up to a minimum of two external requests to load your Javascript. You're probably better off getting jquery, all relevant plug-ins and your own code and putting it into one minified file.

    From Should You Use Google's Ajax Libraries API for Hosting?:

    As to load times, you're actually loading two scripts - the jsapi script and the mootools script (the compressed version from above). So that is two connections, rather than one. In my experience, I found that the load time was actually 2-3 times slower than loading from my own personal shared server, even though it was coming from Google, and my version of the compressed file was a couple of K larger than Google's. This, even after the file had loaded and (presumably) cached. So for me, since the bandwidth doesn't matter much, isn't going to matter.

    Lastly you have the potential problem of a paranoid browser flagging the request as some sort of XSS attempt. It's not typically a problem with default settings but on corporate networks where the user may not have control over which browser they use let alone the security settings you may have a problem.

    So in the end I can't really see me using the Google AJAX API for jQuery at least (the more "complete" APIs are a different story in some ways) much except to post examples here.

    0 讨论(0)
  • 佛祖请我去吃肉
    2020-11-22 10:28

    If I am responsible for the 'live' site I better be aware of everything that is going on and into my site. For that reason I host the jquery-min version myself either on the same server or a static/external server but either way a location where only I (or my program/proxy) can update the library after having verified/tested every change

    0 讨论(0)
 看不清?
提交回复
热议问题