1

将 jQuery 函数包含在 HTML 代码中#id或.class不存在于 HTML 代码中会影响网页的加载时间吗？

例如：-

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

//something

});

存在 的功能id1，但不存在任何带有 的标签id = id1。这会影响页面的加载时间吗？

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

4

3 回答 3

1

我会说从谷歌 CDN 加载 jquery 这将大大减少 jquery 库的加载。就函数调用而言，是的，它确实增加了页面加载时间。但不是通过造成网络延迟。加载页面后要执行的函数调用，以便 id=id1 已经存在。函数调用设置不会显着增加页面加载时间，并且可以随心所欲。随着您的页面变得越来越多的 javascript，您将需要考虑优化它以提高运行时速度。

于 2013-09-01T20:04:28.897 回答
1

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

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

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

于 2013-09-01T20:18:09.503 回答
0

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

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

如果您在标签之前的文档末尾加载外部 *.js 文件，</body>并且仅在您已经从 Google CDN 加载 jQuery 之后，那么脚本将仅在页面完全加载后执行。

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

使用 jQuery 的正确方法是加载和执行我上面描述的 jQuery 代码。

一念；当您附加到 DOM 元素时，请在搜索该元素之前执行此操作：

$(function() {
$( "#container" ).append( "<div id='id1'></div>" );
$('#id1').append('some HTML content');
});
于 2013-09-01T20:49:27.603 回答