JavaScript / jQuery優化

Question

我剛剛在http://www.pepkarsten.com/artdirection上看到了我的新投資組合網站。

它是一個加載圖像的頁面（帶有加載器動畫，預加載和鍵盤快捷鍵）。

這是JavaScript代碼（使用jQuery）。 如何優化？

$(document).ready(function() {
    function page(slide,width,height,color) {
        this.slide=slide;
        this.width=width;
        this.height=height;
        this.color=color;
    };

    var pages=[
        new page('alutech1',900,675,'1d486b'),
        new page('alutech2',900,675,'00ea00'),
        new page('mane3',675,900,'74878e'),
        new page('mane4',675,900,'74878e'),
        new page('mane1',900,675,'6ecb00'),
        new page('topfit_zen',900,675,'203400'),
        new page('topfit_muscu',900,675,'01acb3'),
        new page('topfit_stval',900,675,'525962'),
        new page('arles_1',636,900,'fb926d'),
        new page('arles_2',636,900,'c12f2f'),
        new page('arles_3',636,900,'cdc6b4'),
        new page('topsol',900,633,'f7e700'),
        new page('wak',900,675,'78f900')
    ];
    var imgDir='img/';
    var slidePrefix='pepkarsten_';
    var slideExt='.jpg';
    $.autoMouseOver();
    $.blurLinks();

    function prevPageNumber() {
        return currentPage>0?currentPage-1:pages.length-1;
    };

    function nextPageNumber() {
        return currentPage<pages.length-1?currentPage+1:0;
    };

    function displayPage(n) {
        $('#nav-top')
            .css('background-color','#'+pages[n].color);
        $('#slide')
            .addClass('loading')
            .find('img')
            .css('visibility','hidden')
            .css('width',pages[n].width)
            .css('height',pages[n].height)
            .unbind('load')
            .load(function() {
                $(this)
                    .css('visibility','visible');
                $('#slide')
                    .removeClass('loading');
                $.preloadImg(imgDir+slidePrefix+pages[nextPageNumber()].slide+slideExt,imgDir+slidePrefix+pages[prevPageNumber()].slide+slideExt);
            })
            .attr('src',imgDir+slidePrefix+pages[n].slide+slideExt);
        currentPage=n;
    };

    function homePage() {
        displayPage(0);
    };

    function nextPage() {
        displayPage(nextPageNumber());
    };

    function prevPage() {
        displayPage(prevPageNumber());
    };

    homePage();
    $('#home')
        .onclick(homePage)
        .shortcut('up');
    $('#next')
        .onclick(nextPage)
        .shortcut('right');
    $('#prev')
        .onclick(prevPage)
        .shortcut('left');
    $('#slide')
        .onclick(nextPage);
    $('#contact')
        .email('info','pepkarsten.com')
        .hover(
            function() {$('#tip-contact').slideDown(200)},
            function() {$('#tip-contact').stop(true,true).hide()});
    $('#linkedin')
        .onclick(function() {
            window.open('http://www.linkedin.com/in/pepkarsten');
        })
        .hover(
            function() {$('#tip-linkedin').slideDown(200)},
            function() {$('#tip-linkedin').stop(true,true).hide()});
});

(function($){
    var imgCache=new Array();
    $.preloadImg=function() {
        for(var i=0; i<arguments.length; i++) {
            var img=new Image();
            img.src=arguments[i];
            imgCache[img.src]=img;
        }
    };
    $.autoMouseOver=function(outStr,overStr) {
        if(!overStr) var outStr='-out.', overStr='-over.';
        $('img[src*='+ outStr +']')
            .each(function() {$.preloadImg($(this).attr("src").replace(outStr,overStr))})
            .hover(
                function() {$(this).attr("src",$(this).attr("src").replace(outStr,overStr))},
                function() {$(this).attr("src",$(this).attr("src").replace(overStr,outStr))});
    };
    $.blurLinks=function() {
        $("a").focusin(function() {
            this.blur();
        });
    };
    $.fn.onclick=function(f) {
        $(this).click(function() {
            f();
            return false;
        });
        return this;
    };
    $.address=function(u,d) {
        return u+'@'+d;
    };
    $.fn.email=function(u,d,s,b) {
            var l='mailto:'+$.address(u,d);
            if(s||b) {
                l+='?';
                if(s) {
                    l+='subject='+s;
                    if(b) l+='&';
                };
                if(b) l+='body='+b;
            };
        $(this).click(function() {
            window.open(l);
            return false;
        });
        return this;
    };
    $.fn.shortcut=function(key) {
        var code={'left':37,'up':38,'right':39,'down':40};
        var $this=$(this);
        $(document).keydown(function(e) {
            if(e.keyCode==code[key]) {
                $this.click();
                return false;
            };
        });
        window.focus();
        return this;
    };
})(jQuery);

Answer 1

實際答案：無需優化，您可以順利工作預加載，最大限度地減少連接速度慢的影響。 代碼中任何速度缺陷的影響可以忽略不計，網絡優化正確完成，這在這種情況下很重要。

理論答案：如果你真的擔心性能然后不使用jQuery，你只是沒有制作真正優化的JavaScript所需的低級控制，你通常最終會有很多混淆的開銷，因為看起來很簡單jQuery函數實際上可能具有復雜的實現，因此花費了大量時間。

為了記錄，我會說你是我見過的第一個可以編碼的設計師。 當然還有其他人可以將一些命令粘在一起，但看起來你真的知道自己在做什么。 這條道路的建議，因為我認為你是可以管理它的類型：無論人們告訴你什么，質疑它，試着尋找相反的證據，並在必要時做你自己的研究。

編輯：關於jQuery與JavaScript
正如我所看到的，jQuery的最大優勢在於它修復了很多瀏覽器差異，因此您不必擔心代碼是否適用於所有瀏覽器。 jQuery也做了很多“魔術”，它可以使編碼變得更容易，但魔術通常需要花費大量的速度，在很大程度上取決於你使用哪些功能，以及你如何使用它們。 您可以輕松地在腳本執行上投入10倍，但大多數代碼仍然受到DOM操作的限制，而jQuery不會減慢速度。
我不是jQuery的語法的風扇，它是非常符合使用卷積關閉一切，並使用關鍵字的當前趨勢， this盡可能地。 這當然不是說如果你使用jQuery就必須編寫這樣的不可讀代碼，但很難不去那個方向。 如果你寫一些大的東西我會更喜歡JavaScript，因為可讀性是一個更大的問題。

Answer 2

只有少數小事跳出來。 總的來說，Chrome看起來很流暢。

在我談到這些之前，我建議您對代碼進行評論 。 一年后，當你回去嘗試做出改變時，它會讓你更輕松！ 此外，您可能想要考慮以一種合理的方式排序您的功能（例如，按字母順序排列，或者您能想到的任何其他有意義的東西......它們似乎沒有我能說出的任何順序）

我注意到的一件事是你嘗試通過僅使用var $this = $(this);為每個實例創建一次$(this) jQuery對象來優化代碼var $this = $(this); 。 即使$(this)僅使用一次也可以使用它，這很好但不必要，但你忘了在少數情況下這樣做。

例如，你有：

.....hover(function() { 
               $(this).attr("src",$(this).attr("src").replace(outStr,overStr))},
           function() {
               $(this).attr("src",$(this).attr("src").replace(overStr,outStr))});

這可能是：

.....hover(function() { 
               var $this = $(this);
               $this.attr("src",$this.attr("src").replace(outStr,overStr))},
           function() {
               var $this = $(this);
               $this.attr("src",$this.attr("src").replace(overStr,outStr))});