Question

有一个网站有一个主index.html页面（<html><head>...）和gallery.html，contacts.html等网页，但只有<div>个容器，没有<html><head>...。

所以，当我点击index.html链接到contacts.html时会发生什么：

$('.contacts').click(function(e) {
    e.preventDefault();
    $('#content').load('contacts.html', function() {
        .....
    });
});

问：我应该如何为click上的contacts.html等任何事件构建或整理javascript代码？

例如：

[1]我可以在contacts.html javascript代码上写一下：

<script type='text/javascript'>
$(function() {
    $('.anyClassOnContactsHtml').click(function(e) {
        .....
    });
});
</script>

但正如我猜的那样，每当我加载contacts.html时，它会再次读取这些功能，这就是为什么网站的速度和性能可能会降低，因为我在每个页面上都有50多个点击事件。< / p>

[2]我可以写index.html名代表：

<script type='text/javascript'>
$(function() {
    $('#content').on('click', '.anyClassOnContactsHtml', function(e) {
        .....
    });
});
</script>

它的工作原理和浏览器读取点击功能一次，但是有100多个点击功能，有2-3个SECONDS（！）延迟，所以它工作得非常慢。

为了更快地工作，我应该代替#content写一个更接近.anyClassOnContactsHtml的容器，但我不能，因为在index.html上只有#container

那么，我该怎么办？或者还有其他绑定事件的方法吗？网站性能的任何提示？谢谢。

Answer 1

我认为，如果您重构一些点击功能以组合它们并通过添加更多方法参数，切换语句等使其更具多功能性，那么您将获得任何运气性能优化的唯一方法是...最有效的方法是将它们全部绑定到#content，因为每次URL更改时都不必重新加载它们。数据属性可以极大地帮助这个。如果您花时间正确地完成它，您甚至可以将所有代码重构为一个事件处理函数。

像这样的函数的一个非常人为的例子是：

$('#content').on('click', 'a, span, input', function(e) {
    var tagName = $(e.target).prop('tagName');
    switch (tagName) {
        case 'a':
            processAnchorEvents();
            break;
        case 'span':
            processSpanEvents();
            break;
        case 'input':
            processInputEvents();
            break;                 
    }
});

Answer 2

1）你实际上可以通过这种方式调用子元素。

${"#content .anyClassOnContactsHtml").click(function() { });

2）看看：http://developer.yahoo.com/yslow/。例如，将<script>标记放在<body> </body>的底部将允许页面的其余部分加载更快。

安装插件并在您的页面上运行测试。

Answer 3

当您load()内容时，加载的脚本代码中的所有代码都会被完全忽略，因此它对javascript性能没有影响。

可能存在的问题是内容的加载方式。确保每次都不重新绑定点击功能。以下是一些示例代码：

<script type='text/javascript'>
$(function() {

    $('.contacts').click(function(e) {
        e.preventDefault();
        $('#content').load('contacts.html', function() {
            // DO NOT REBIND CLICK EVENTS HERE
        });
    });

    // The following should only be done ONCE
    $('#content').on('click', '.anyClassOnContactsHtml', function(e) {
        .....
    });
});
</script>

Answer 4

这样的事情真的那么慢吗？我会说它应该没问题！

<script type='text/javascript'>
$(function() {
    $('.contacts').click(function(e) {
        e.preventDefault();
        $('#content').load('contacts.html', function() {
            $('#content_of_loaded').on('click', '.anyClassOnContactsHtml', function(e) {
                .....
            });
         });
    }); 
});
</script>

也许你也可以试试这个：

<script type='text/javascript'>
    $(function() {
        $('a').click(function(e) {
            e.preventDefault();
            var site = $(this).attr("href");
            $('#content').load(site, function() {
                $('#sub_content').on('click', '.anyClassOnContactsHtml', function(e) {
                    .....
                });
             });
        }); 
    });
</script>

以及您的子内容链接也可以这样做..

function loadContent(site) {
    $('#content').load(site, function() {
        $('#sub_content').on('click', 'a', function(e) {
            e.preventDefault();
            loadContent($(this).attr("href"));
        });
    });
}
$(function() {
    $('a').click(function(e) {
       e.preventDefault();
       loadContent($(this).attr("href"));
    }); 
});

但我没有测试它，所以可能是错的：）

jQuery：$ .on应该怎么样？

4 个答案: