Question

我的页面加载速度存在问题。我已经进行了几次测试，并且几乎每次测试都失败了。我已经尝试压缩图像，以及现在可用的东西。我绝不擅长编码。相当新的但是，试着去学习。只是一个猜测，但我认为我的页面渲染速度很慢可能是由于我的手风琴代码中的错误。一旦加载，一切似乎都是有序的，但是，在创建小提琴时，手风琴无法正常工作。它也可以在我尝试过的3或4个不同的编辑器中正确呈现。您可以在下面找到工作页面的链接以及我用于手风琴的代码。任何帮助将不胜感激。

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

小提琴：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运行它，并在此处获得结果：http://www.webpagetest.org/result/150628_8Y_SAT/

这不是单个图像问题，似乎存在大量加载时间问题，并且页面正在加载 lot 的东西。

另外，正如@wazaaaap上面所说，缺少css文件，阻塞了并发连接。

查看测试结果，您可以看到占用您的加载时间。

页面加载速度很慢

1 个答案: