Question

我写了一个小插件来获取页面加载/渲染时间。它收集了$（document）.ready的完成时间，并且我已经在<title>标记之后放置了收集开始时间的代码片段。

我希望这不那么突兀，所以似乎应该有一个早于.ready的事件，我可以在那里收集最早可测量的页面开始时间。

这是当前突兀的javascript

<title></title>
<script type="text/javascript">
    var startTime = (new Date()).getTime();
</script>

这是插件：

(function ($) {

    $(document).ready(function () {
        var endTime = (new Date()).getTime();
        var millisecondsLoading = endTime - startTime;

        $.get('hicmah.ashx?duration=' + millisecondsLoading, function (data) {
        });
    });

})(jQuery);

Answer 1

您可以使用onreadystatechange，DOMContentLoaded和onload，这是jQuery与ready事件垫片挂钩的内容。

if (document.addEventListener) {
  document.addEventListener('DOMContentLoaded', callback, false);
  window.addEventListener('load', callback, false);
} else {
  document.attachEvent('onreadystatechange', callback);
  window.attachEvent('onload', callback);
}

或者，您可以确保您的页面在页面顶部和底部有一个脚本标记：

<html>
  <head>
    <script type="text/javascript">
      window.begin = new Date();
    </script>
    ...
  </head>
  <body>
    ...
    <script type="text/javascript">
      window.end = new Date();
    </script>
  </body>
</html>

Answer 2

让插件完成这项工作是不可能的，因为插件可以在页面的任何地方使用。实现这一目标的最佳方法是在html标记开始时及在html标记结束后立即获得时间，它将为您提供最佳时间。

Answer 3

这个答案将有所帮助：

Load and execution sequence of a web page?

> roughly the execution flow is about as follows:
> 
> The HTML document gets downloaded The parsing of the HTML document
> starts HTML Parsing reaches <script src="jquery.js" ... jquery.js is
> downloaded and parsed HTML parsing reaches <script src="abc.js" ...
> abc.js is downloaded, parsed and run HTML parsing reaches <link
> href="abc.css" ... abc.css is downloaded and parsed HTML parsing
> reaches <style>...</style> Internal CSS rules are parsed and defined
> HTML parsing reaches <script>...</script> Internal Javascript is
> parsed and run HTML Parsing reaches <img src="abc.jpg" ... abc.jpg is
> downloaded and displayed HTML Parsing reaches <script src="kkk.js" ...
> kkk.js is downloaded, parsed and run Parsing of HTML document ends

jquery可以加入的最早和最新事件是什么？

3 个答案: