optimization - 如何在对 PHP 的 ajax 调用返回之前获取加载事件

Question

我希望我的网页渲染速度更快。基于此article ，我知道当“load”事件被触发时页面就会呈现。当我查看 Chrome 浏览器的“网络”选项卡时，我发现对 PHP 脚本的 ajax 调用返回后会触发“load”事件。

网页已上线 http://www.99like.com/index.php

=> 有没有办法让页面在调用 PHP 脚本之前渲染？

以下是我认为与该问题相关的代码摘录:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="highcharts.js"></script>
<script type="text/javascript">
    var ajax_load = "<img class='loading' src='images/load.gif' alt='loading...' />";
    var inputForm = "<div class='shadow'><form type='submit' onsubmit='displayChart(); return false'><input id='searchBox' type='text' size='30' value='search keyword' /></form></div>";
    var chart = "<div id='chart' class='shadow'></div>";
    var chartPage = inputForm + chart;

    $(function ()
    {
        exampleChart();
    });

    function exampleChart() {
        $('#searchBox').val("hotel"); // nice example
        displayChart ();
    }

    function displayChart () {
        var keyword = $('#searchBox').val();

        var chart = new Highcharts.Chart({  ...  });

        chart.showLoading();

        var phpFunctionURL = "getChartData.php";
        var DataSeries; 
        $.ajax( {
            url: phpFunctionURL,
            dataType: 'json',
            async: false,
            data: { ... },  
            success: function(json) { DataSeries = json; }
        } ); 
    }
</script>

Answer 1

几点说明:

1. 确保所有 JavaScript 都位于页面底部，包括 JQuery 和 Google Analytics 代码
2. 您的网页缺少结束标记
3. 如果需要，您可以等待 onLoad 事件而不是 DomReady 事件来启动 AJAX 请求，这将加快页面渲染速度。