Question

在HTML代码中包含那些#id或.class的jQuery函数是否会影响网页的加载时间？

例如： -

$(function (){
    $("#id1").click(function(){

//something

});

id1存在一个函数，但不存在id = id1的任何标记。这会影响页面的加载时间吗？

实际上，我想将自己的小部件添加到我的页面，从而让用户通过放置/添加小部件来自定义他/她的仪表板。我想到了一个通过让用户从小部件列表中选择小部件来动态添加小部件的解决方案。选择小部件后，它将通过$( "#container" ).append( "<div id='id1'></div>" );为这些小部件动态添加div，从而加载各自的jQuery函数。是否会优化js文件中那些id或类的函数？它是加载jQuery函数的正确方法还是有更好的东西？只是想知道它是实现小部件的正确方法吗？

Answer 1

我想说从谷歌CDN加载jquery这将大大减少jquery库的加载。在函数调用方面，是的确增加了页面加载时间。但不是因为造成网络延迟。加载页面后要执行的函数调用，以便已存在id = id1。函数调用设置不会将页面加载时间显着增加，并且可以根据需要执行。随着您的页面变得越来越重，那么您将需要考虑针对运行时速度进行优化。

Answer 2

不，这确实不会影响页面加载时间，查询失败并且没有附加处理程序。如果您正在开发单页应用程序，那么重要的是应用程序的性能，如果应用程序运行缓慢，那么您应该担心性能。

http://c2.com/cgi/wiki?PrematureOptimization

如果您的应用程序大量使用JavaScript，那么您可以考虑使用像RequireJS这样的库，它是一个模块加载器，可以动态加载资源并提高代码的速度和质量。 RequireJS还有optimization tool，可用于将相关脚本组合到构建层中，并在开发后通过UglifyJS或Google Closure Compiler（需要Java）对它们进行缩小。

Answer 3

如果在jour * .js文件中使用：

$(function() {
//your jQuery code here
});

并且如果您在标记</body>之前的文档末尾加载外部* .js文件，并且只有在您已经从Google CDN加载jQuery之后才会加载，而脚本只有在页面完全加载后才会执行

通过以这种方式运行代码，如果jQuery找不到具有指定id的元素将不执行任何操作。当解析DOM并在具有您指定的id的可能元素之后进行搜索时，它将影响用户的浏览器所消耗的内存。就是这样。

使用jQuery的正确方法是加载和执行jQuery代码，如上所述。

一个想法;当您附加到DOM元素时，请在搜索元素之前执行此操作：

$(function() {
$( "#container" ).append( "<div id='id1'></div>" );
$('#id1').append('some HTML content');
});

HTML页面加载时间？

3 个答案: