页面加载非常缓慢

Question

我的页面加载速度有问题。我做过几次测试，但几乎每一次都失败了。我已经试过压缩图像什么的了。我一点也不擅长编码。对它来说还挺新鲜的，但是，试着去学习。只是猜测，但我认为，我的页面绘制的痛苦缓慢可能是由于我的手风琴代码错误。一旦加载，一切似乎是有序的，然而，在创造小提琴，手风琴不正确的工作。它还在我尝试过的3或4个不同的编辑器中正确呈现。下面你会找到一个工作页面的链接，以及我正在使用的手风琴代码。任何帮助都将不胜感激。

链接到页面：http://www.realtimehockey.net/tournaments.html

Fiddle：http://jsfiddle.net/Del087/rb4084ef/

CSS

<style type='text/css'>
    /*<![CDATA[*/
            .accordion, .accordion * {
            -webkit-box-sizing:border-box;
            -moz-box-sizing:border-box;
            box-sizing:border-box;

            }

            .accordion {
            overflow:hidden;
            box-shadow:0px 1px 3px rgba(0,0,0,0.25);
            border-radius:3px;
            width: 100%;
            background:#ffffff;
            border:.5px solid black;
            padding-left: 5px;
            padding-right: 0px;
            margin-top: 5px;
            margin-right: 5px;
            display: inline-block;
            }

            /*----- Section Titles -----*/
            .accordion-section-title {
            width: 100%;
            padding:15px;
            margin-right: 5px;
            display:inline-block;
            border-bottom:2px solid #ffffff;
            background:linear-gradient(#151515, #080808);
            transition:all linear 0.15s;
            /* Type */
            font-family: patua one;
            font-color: #ffffff;
            font-size: 28px;
            line-height: 50px;
            font-weight: 400;
            font-style: italic;
            text-shadow:0px 0px 0px #1a1a1a;
            color:#fff;
            border: 1px solid #ffffff;
            text-indent: 15px;
            text-decoration: none;
            }

            .accordion-section-title.active, .accordion-section-title:hover {
            background:linear-gradient(#ff8a28, #ff6600);
             font-family: patua one;
            font-color: #ffffff;
            font-size: 28px;
            font-weight: 300;
            font-style: italic;
            text-shadow:0px 0px 0px #1a1a1a;
            color:#fff;
            text-decoration:none;
            }

            .accordion-section:last-child .accordion-section-title {
            border-bottom:none;
            }

            /*----- Section Content -----*/
            .accordion-section-content {
            padding:5px;
            display:none;
            }

            /*]]>*/
</style>
<style>
    #table-wrapper {
        position:relative;
        }
        #table-scroll {
        height:600px;
        width: auto;
        overflow:auto;  
        margin-top:5px;
        }
        #table-wrapper table { 
        width: auto; 
        float: left;
        }
        #table-wrapper table * {
        }
        #table-wrapper table thead th .text {
        position:absolute;   
        top:-20px;
        z-index:2;
        height:20px;
        width:auto;
        }
</style>

Java脚本

 <script src='http://code.jquery.com/jquery-1.7.js' type='text/javascript'></script>

<script type='text/javascript'>
    //<![CDATA[ 
            $(function(){
            $(document).ready(function() {
            function close_accordion_section() {
                $('.accordion .accordion-section-title').removeClass('active');
                $('.accordion .accordion-section-content').slideUp(300).removeClass('open');
            }

            $('.accordion-section-title').click(function(e) {
                // Grab current anchor value
                var currentAttrValue = $(this).attr('href');

                if($(e.target).is('.active')) {
                    close_accordion_section();
                }else {
                    close_accordion_section();

                    // Add active class to section title
                    $(this).addClass('active');
                    // Open up the hidden content panel
                    $('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
                }

                e.preventDefault();
            });
            });
            });//]]>  


</script>

HTML

<div class="accordion">
    <div class="accordion-section">
        <a class="accordion-section-title" href="#accordion-1"><img alt=""
        border="0" height="35" src=
        "http://i1314.photobucket.com/albums/t563/RTH13/RTH%20Artwork/RTHAccordionLogo3_zpszspfxeev.png"
        width="40"> ALL TOURNAMENTS</a>

        <div class="accordion-section-content" id="accordion-1">
            <div id="table-wrapper">
                <div id="table-scroll">
                    <iframe frameborder="0" height="900" scrolling="no"
                    src="https://onedrive.live.com/embed?cid=704B9036DA9EF5A7&resid=704B9036DA9EF5A7%214259&authkey=AHPRSPlWZMfMr-g&em=2&wdAllowInteractivity=False&Item='Sheet1'!A1%3AF83&wdHideGridlines=True"
                    width="695"></iframe>
                </div>
            </div><!--end .accordion-section-content-->
        </div><!--end .accordion-section-->

        <div class="accordion-section">
            <a class="accordion-section-title" href=
            "#accordion-2"><img alt="" border="0" height="35" src=
            "http://i1314.photobucket.com/albums/t563/RTH13/RTH%20Artwork/RTHAccordionLogo3_zpszspfxeev.png"
            width="40"> OneHockey TOURNAMENTS</a>

            <div class="accordion-section-content" id="accordion-2">
                <div id="table-wrapper">
                    <div id="table-scroll">
                        <iframe frameborder="0" height="796" scrolling="no"
                        src=
                        "https://onedrive.live.com/embed?cid=704B9036DA9EF5A7&resid=704B9036DA9EF5A7%214294&authkey=AHlomnY6QBEDbNg&em=2&wdAllowInteractivity=False&Item='Sheet1'!A1%3AF39&wdHideGridlines=True"
                        width="695"></iframe>
                    </div>
                </div>
            </div><!--end .accordion-section-content-->
        </div><!--end .accordion-section-->

        <div class="accordion-section">
            <a class="accordion-section-title" href=
            "#accordion-3"><img alt="" border="0" height="35" src=
            "http://i1314.photobucket.com/albums/t563/RTH13/RTH%20Artwork/RTHAccordionLogo3_zpszspfxeev.png"
            width="40"> NST TOURNAMENTS</a>

            <div class="accordion-section-content" id="accordion-3">
                <iframe frameborder="0" height="359" scrolling="no" src=
                "https://onedrive.live.com/embed?cid=704B9036DA9EF5A7&resid=704B9036DA9EF5A7%214254&authkey=APKpBhWADrxGjJc&em=2&wdAllowInteractivity=False&Item='Sheet1'!A1%3AF17&wdHideGridlines=True"
                width="695"></iframe>
            </div><!--end .accordion-section-content-->
        </div><!--end .accordion-section-->

        <div class="accordion-section">
            <a class="accordion-section-title" href=
            "#accordion-4"><img alt="" border="0" height="35" src=
            "http://i1314.photobucket.com/albums/t563/RTH13/RTH%20Artwork/RTHAccordionLogo3_zpszspfxeev.png"
            width="40"> CanLan TOURNAMENTS</a>

            <div class="accordion-section-content" id="accordion-4">
                <iframe frameborder="0" height="630" scrolling="no" src=
                "https://onedrive.live.com/embed?cid=704B9036DA9EF5A7&resid=704B9036DA9EF5A7%214256&authkey=ADHo6NDfwBXvj5k&em=2&wdAllowInteractivity=False&Item='Sheet1'!A1%3AF36&wdHideGridlines=True"
                width="695"></iframe>
            </div>
        </div><!--end .accordion-section-content-->
    </div><!--end .accordion-section-->
</div><!--end .accordion-->

Answer 1

最好的方法来测试类似的东西是许多网页加载工具之一可用。我在webpagetest.org中运行了它，在这里得到了结果：SAT/

这不是一个单一的图像问题，似乎有很多加载时间的问题，而且页面正在加载大量的东西。

此外，正如@wazaaaap上面所述，还缺少css文件，这会阻塞并发连接。

看看测试结果，你就可以看到什么占用了你的负载时间。