3

我有一个加载时间过长的大型网页（内部，正在开发中）。具体来说，加载 2.3MB 的 HTML 页面会在大约 3 秒内显示样式化的内容，然后浏览器会锁定超过 20 秒，然后才能进行交互。

使用 Chrome 的时间轴，我可以看到这完全是由于脚本作为load事件的一部分被启动： 30 秒的时间线视图

但是，当我分析页面加载时，我看到了这个（点击查看完整尺寸）： 轮廓

32.01 秒用于一些没有相关源代码的匿名函数。作为其中的一部分，函数“get length”（也没有相关的源代码）花费了 18.87 秒。

是什么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 回答