1

フォント フェース キット スタイルの読み込みに非常に長い時間がかかるサイトと、動作がおかしいスクリプトがいくつかあります。これは、セクション内でスクリプトがすべてごちゃ混ぜになっているために発生していますが、これらのスクリプトについて、ファイルを正しくクリーンアップするのに十分な知識がないのではないかと心配しています。これをクリーンアップし、サイトの速度と機能を改善するためにできること、特にフォント フェースのテキストをより迅速にロードする方法を提案してくれる人はいますか? 例や特定の参照は素晴らしいでしょう-これらのスクリプトで何が起こっているのか、私はかなり迷っています。これが私の中で起こっていることです：

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=0.3"> 
    <meta name="google-translate-customization" content="d378d0a5e57245bf-c2ed76fd752675aa-g7014305900f205ae-13"></meta>

    <title>{embed:title}</title>
    <style type="text/css" media="screen">
         @import url("/common/css/all.css");
         @import url("/common/font_face/stylesheet.css");
         @import url("/common/css/jcf.css");
    </style>

    <script type="text/javascript" src="/common/js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="/common/js/jquery.main.js"></script>

    <!--fancybox script starts here-->  
    <script type="text/javascript" src="/common/js/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>  
    <script type="text/javascript" src="/common/js/fancybox/source/jquery.fancybox.js?v=2.0.6"></script>
    <link rel="stylesheet" type="text/css" href="/common/js/fancybox/source/jquery.fancybox.css?v=2.0.6" media="screen" />
    <link rel="stylesheet" href="/common/js/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.2" type="text/css" media="screen" />
    <script type="text/javascript" src="/common/js/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.2"></script>
    <script type="text/javascript" src="/common/js/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.0"></script>
    <link rel="stylesheet" href="/common/js/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=2.0.6" type="text/css" media="screen" />
    <script type="text/javascript" src="/common/js/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=2.0.6"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            // fancybox for html pages
            $(".fancylink").fancybox({
                'height' : '100%',
                'autoScale' : false,
                'transitionIn' : 'none',
                'transitionOut' : 'none',
                'type' : 'iframe'
             });
             $(".fancylinksm").fancybox({
                'height' : 'auto',
                'autoScale' : false,
                'transitionIn' : 'none',
                'transitionOut' : 'none',
                'type' : 'iframe'
             });

             // fancybox for vimeo
             $(".vimeo").fancybox({
                width: 781,
                height: 440,
                type: 'iframe',
                fitToView : false,
                wrapCSS : 'fancybox-nav-video'
             });

             $('.fancybox').fancybox({
                padding : 0,
                openEffect  : 'elastic'
             });

             $(".fancybox").fancybox({
                wrapCSS    : 'fancybox-custom',
                closeClick : true,
                helpers : {
                   overlay : {
                      css : {
                         'background-color' : '#000'
                      }
                   },
                   thumbs : {
                      width : 50,
                      height : 50
                   }
                }
            });
         });
       $("a[href$='.jpg'],a[href$='.jpeg'],a[href$='.png'],a[href$='.gif']").attr('rel', 'gallery').fancybox();      
    </script>
    <!--fancybox script ends here-->
    <link rel="shortcut icon" href="/common/images/cut-and-paste-logo.ico" type="image/x-icon" />
</head>

更新されたコード すべてのスクリプトを 1 つの 'compiled.js' ファイルにコンパイルし、すべての @import 呼び出しを s に変更しましたが、それでもフォントの読み込みが速くなりません。新しいセクションは次のとおりです。

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=0.3"> 
    <meta name="google-translate-customization" content="d378d0a5e57245bf-c2ed76fd752675aa-g7014305900f205ae-13"></meta>

    <!-- meta data goes here -->
    <title>{embed:title}</title>

    <link rel='stylesheet' type='text/css' href='/common/font_face/stylesheet.css'>
    <link rel='stylesheet' type='text/css' href='/common/css/all.css'>
    <link rel='stylesheet' type='text/css' href='/common/css/jcf.css'>
    <link rel="stylesheet" type="text/css" href="/common/css/jquery.fancybox.css?v=2.0.6" media="screen" />
    <link rel="stylesheet" href="/common/css/jquery.fancybox-buttons.css?v=1.0.2" type="text/css" media="screen" />
    <link rel="stylesheet" href="/common/css/jquery.fancybox-thumbs.css?v=2.0.6" type="text/css" media="screen" />
    <link rel="shortcut icon" href="/common/images/characterized_logo_16x16.ico" type="image/x-icon" />
    <!--[if lt IE 9]><link rel="stylesheet" type="text/css" href="css/ie.css" media="screen"/><![endif]-->  

    <script type="text/javascript" src="/common/js/compiled.js"></script>
</head>
4

2 に答える 2

1

これらの @import ステートメントをリンク タグに変更する必要があります。一部のブラウザーではパフォーマンスに影響します。 http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

理想的には、これらすべての JS ファイルを 1 つのリクエストに連結する必要があります。Googleクロージャーコンパイラーのようなツールでそれを行うことができます: https://developers.google.com/closure/compiler/
したがって、次のようなものを実行します:

cd C:\path\to\src
java -jar C:\compiler.jar --js=jquery.main.js --js=jquery-1.8.3.js --js=fancybox\lib\jquery.mousewheel-3.0.6.pack.js --js_output_file=all.min.js

ブロックを防ぐために JS ブートローダーを使用する方法については、次の記事を 参照してください。

于 2013-02-21T16:03:11.367 に答える
0

スクリプトを最適化した後、すべてが少し速く実行されましたが、完全ではありませんでした。実験として、メインの CSS ファイルで、すべての @font-faces の呼び出しを削除しました (約 10 個ありました)。

これらを削除しました：

@font-face {
font-family: 'TradeGothicLTStdCnNo.18Ob';
src: url('../fonts/tradegothicltstd-cn18obl-webfont.eot');
src: url('../fonts/tradegothicltstd-cn18obl-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/tradegothicltstd-cn18obl-webfont.woff') format('woff'),
url('../fonts/tradegothicltstd-cn18obl-webfont.ttf') format('truetype'),
url('../fonts/tradegothicltstd-cn18obl-webfont.svg#TradeGothicLTStdCnNo.18Ob') format('svg');
font-weight: normal;
font-style: normal;
}

しかし、まだヘッダーでこのフォント css を呼び出しています

<link rel='stylesheet' type='text/css' href='/font_face/stylesheet.css'>

それを行った後、すべてがスムーズかつ迅速に、複数のブラウザーで実行されます. ここでは @font-face が本当の問題だったようです。私はまだフォントを Java スクリプトから取得しているため、すべてのカスタム フォントを遅延なく使用できます。

于 2013-03-01T16:03:46.627 に答える