3

ロードに時間がかかりすぎる大きな Web ページ (内部、開発中) があります。具体的には、2.3MB の HTML ページをロードすると、スタイル設定されたコンテンツが 3 秒以内に表示され、ブラウザはインタラクティブになる前に 20 秒以上ロックアップします。

loadChrome のタイムラインを使用すると、これはすべて、イベント の一部として開始されたスクリプトによるものであることがわかります。30 秒のタイムライン ビュー

ただし、ページの読み込みをプロファイリングすると、次のように表示されます (クリックするとフルサイズになります)。 プロフィール

32.01 秒が、ソース コードが関連付けられていない無名関数で費やされます。その一環として、18.87 秒が "get length" 関数に費やされます (これにも関連するソース コードはありません)。

とはget length? どこで時間が費やされているかについて、プロファイラーから入手できるより良い情報はありませんか?

4

1 に答える 1

1

これは、フォームの長さ属性 (またはネイティブな長さ属性を持つその他の DOM 要素) への呼び出しです。

これは私が使用したサンプルコードです

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="js/lib/jquery.js"></script>
    <script type="text/javascript">
        var doStop = false;

        $(function(){
            //recursively append dot-button to the form and show its length    
            function a(counter) {
                var $w = $('#wrapper').append($('<button>.</button>'));
                $('#txt')[0].innerHTML = 'Form length: '+$w[0].length;
                if (!doStop)
                    setTimeout(function(){ a(counter+1)}, 3);
            }

            $('#stopper').click(function(){ doStop = true; });

            a(0); //let's go now
        });
    </script>
</head>
<body>
<button id="stopper">stop it</button>
<div id="txt"> </div>
<form id="wrapper"></form>
</body>
</html>

Chrome プロファイラーで次のように表示されます。

| 0.08% | 0.08% | get length |

ただし、関数 a() をドリルダウンするために、その下に矢印があります。

于 2012-07-25T21:35:33.933 に答える