性能混合javascript和jquery [重复]

Question

关于这个话题有很多讨论，但我想澄清我的歧义或困惑 - 我的混合代码是否有意义。

以前我认为Jquery 在各个方面都是最舒适的，从易用性到灵活程度。毫无疑问，我们可以使用 Jquery 创建庞大而强大的客户端应用程序。

所以我一直在使用Jquery，即使是在小而简单的任务中。但是在考虑性能的同时，我发现如果可以的话，人们会推荐纯 JavaScript。我阅读了很多论坛，关于性能的问题/答案，然后我意识到我在不必要地使用 Jquery。

例如，我曾经用来做简单的任务

var value = $('#div').text();

而不是

var value = document.getElementById('div').innerHTML;

此外，即使在简单的选择中，我也使用了最大的$.each，这可以通过document.querySelector 或纯javascript for 循环来完成

我无法避免使用 Jquery，但可以尽量减少。因此，浏览器必须加载 jquery。

现在我在外部.js 文件中最小化了 jquery 的使用，对简单任务使用纯 JavaScript 代码，对复杂任务使用 jquery。

现在我的问题是

现在我的性能会比以前的方式更好更快吗（我只使用 jquery）？

或

$如果初始化一次，会不会影响其他纯javascript代码？

为了更清楚，

第二个比第一个快吗？

仅限 Jquery

function purchase(){
    $.ajax({
        url:"fetch.php",  
        method:"POST",  
        data:{prch_id:'pty'},
        beforeSend: function() {
            $('.pty').html('Processsing');
        },
        success:function(data){
            $('.pty').html(data);
            auto_select();
        }
    }); 
}

使用 Jquery 编写 JavaScript

function purchase(){
    var http = null;
    if(window.XMLHttpRequest){
        http = new XMLHttpRequest();
    }
    else{
        http = new ActiveXObject('Microsoft.XMLHTTP');
    }
    var vars = "prch_id=pty";
    http.open('POST','fetch.php',true);
    http.setRequestHeader('Content-type','application/x-www-form-urlencoded');
    http.onreadystatechange = function(){
        if(http.readyState==4 && http.status==200){
            var data = http.responseText;
            $('.pty').html(data);
            auto_select();
        }
    }
    http.send(vars);
        $('.pty').html('Processsing');
}

如果我们只使用纯 JavaScript - 它肯定很快，但我想知道 jquery 和 JavaScript 的混合改进或没有任何意义。

Answer 1

在你的情况下没关系，因为 jquery 已经加载，而且 jquery 函数只是在幕后调用所说的纯 javascript 函数，所以差别很小，纯 javascript 更快，但如果你要去为了构建强大的前端，我建议继续使用 MVVM 框架，例如 reactjs