javascript - 无法弄清楚为什么我的网站加载如此慢

标签 javascript html performance pagespeed

我从我的 html 老师那里得到了一个网站，他要求我检查它并修复存在的任何问题。虽然我修复了一些问题，但仍然有一个大问题我无法弄清楚。完全加载网站需要很长时间(大约 30 秒)。一切都正确加载，包括导航菜单和 YouTube 视频。我找到了问题的根源，它与JavaScript代码有关。我不懂JavaScripy，所以我无法弄清楚问题所在。当我删除 JavaScript 代码时，网站会加载，但导航菜单和视频不会加载，确切地说根本不加载。还有另一个 JavaScript 文件，但我认为它与此没有任何关系，而且在这里发布的时间太长，因此您可以下载文件 here 。 Here 是 css 文件。

最后 10 行 JavaScript 代码是问题所在。 这是代码:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Magic-Fire® by Safretti - Home - Safretti Magic-Fire</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="shortcut icon" type="image/png"         href="./assets/images/favicon.png">
<link rel="stylesheet" href="./assets/css/style.css?v=1501504031">
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new     Date();a=s.createElement(o),
m=s.getElementsByTagName(o)    [0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-1301951-24', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<div id="viewport">
<div class="page" id="page-18027">
    <header class="block-4-1 v-0" data-sticky="sticky"><div     class="container">
            <div class="row">
                <div class="col">
                    <div class="middle">
                        <div class="logo">
                            <a class="media-1" href="./index.html"><img src="./assets/images/safretti-magicfire-fireplaces-logo-white.svg"></a>
                        </div>
                        <div class="menu">
                            <a class="handler" href="#">
                                <div></div>
                                <div></div>
                                <div></div>
                            </a>
                            <div class="mobile-menu block-4-1-mobile-menu v-0">
                                <div class="outer">
                                    <div class="inner">
                                        <div class="menu-1 menu-menu-1"><ul>    <li class="active"><a href="index.html">Home</a></li><li><a href="what-is-magic-    fire-/index.html">Magic-Fire?</a></li><li class=""><a href="mistero/index.html">Mistero</a><ul class="" style="height: 179px;"><li><a href="mistero/mistero-500/index.html">Mistero 500</a></li><li><a href="mistero/mistero-1000/index.html">Mistero 1000</a></li><li><a href="mistero/mistero-1500/index.html">Mistero 1500</a></li><li><a href="mistero/mistero-2000/index.html">Mistero 2000</a></li><li><a href="fireplace-mistero-customized/index.html">Mistero customized</a></li></ul>    </li><li class=""><a href="incanto/index.html">Incanto</a><ul class="" style="height: 179px;"><li><a href="Incanto/Incanto-1000/index.html">Incanto 1000</a></li><li><a href="Incanto/Incanto-1500/index.html">Incanto 1500</a></li><li><a href="Incanto/Incanto-2000/index.html">Incanto 2000</a></li><li><a href="Incanto/Incanto-2500/index.html">Incanto 2500</a></li><li><a href="fireplace-incanto-customized/index.html">Incanto customized</a></li></ul></li><li><a href="fireplace-customized/index.html">Customized</a></li><li><a href="references/index.html">References</a></li><li><a href="about-safretti/index.html">About Safretti</a></li><li><a href="contact/index.html">Contact</a></li></ul></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div></header>
    <section id="block-39-848428" class="v-35">
        <div class="media-4" data-size="1920x0"><iframe src="//www.youtube.com/embed/U5RHhah4poI?enablejsapi=1&wmode=transparent" allowfullscreen></iframe>
        <div class="container">
            <div class="row">
                <div class="col">
                    <div class="box">
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="block-51-848431" class="v-35">
        <div class="media-4" data-size="1920x0"><iframe src="https://www.youtube.com/embed/U5RHhah4poI?rel=0&autoplay=1&amp;controls=0&amp;showinfo=0" allowfullscreen></iframe>
        </div>
        <div class="container">
            <div class="row">
                <div class="col">
                    <div class="box">
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="block-76-206454" class="v-35">
        <div class="container">
            <div class="row">
                <div class="col">
                    <div class="box">
                        <h1 class="heading-2">The greatest contrast in the world brought together by state of the art technique.</h1>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="block-36-219665" class="v-0">
        <div class="container">
            <div class="row equalize">
                <div class="col col-md-6">
                    <a class="media-2" data-size="480x0" href="./what-is-magic-fire-/incanto-old/index.html">
                        <img src="./assets/images/home-1c.480x0.jpg">
                    </a>
                    <h3 class="heading-3"><a href="./what-is-magic-fire-/incanto-old/index.html">INCANTO</a></h3>
                    <div class="text-2"><p>Incanto is the Magic-Fire Mistero (see description Mistero) provided with a housing so it can be easily integrated in several projects.
    </p></div>
                    <a class="button-2" href="./incanto/index.html">more info &gt;</a>
                </div>
                <div class="col col-md-6">
                    <a class="media-2" data-size="480x0" data-position="center-middle" href="./what-is-magic-fire-/mistero-old/index.html">
                        <img src="./assets/images/home-1b.480x0.jpg">
                    </a>
                    <h3 class="heading-3"><a href="./what-is-magic-fire-/mistero-old/index.html">MISTERO</a></h3>
                    <div class="text-2">
                        <p>Mistero is an electrical fire. The Magic-Fires are equipped with water reservoirs. An evapor<span style="color: #999999;">ator turns t</span>he water into fine water mist. By illuminating the mist you will get a truly realistic and lively smoke / flame effect.</p>
                    </div>
                    <a class="button-2" href="./mistero/index.html">Available in &nbsp;the following sizes</a>
                </div>
            </div>
        </div>
    </section>
    <section id="block-76-956792" class="v-35">
        <div class="container">
            <div class="row">
                <div class="col">
                    <div class="box">
                        <h2 class="heading-2">
                            <span style="font-family: raleway-thin; color: #ffffff;">ON DEMAND - CUSTOM MADE</span>
                        </h2>
                        <div class="text-2">
                            <p><span style="font-family: raleway-regular; color: #ffffff; font-size: 12px;"><span style="color: #999999;">The Magic-Fire firespaces are also available in on demand custom made solutions. Specialy for you as furniture or interior designer or architect if you want something unique for your project. Interested? </span><br /><span style="color: #999999;">Please</span><span style="font-family: raleway-bold;"><strong><a href="./fireplace-ondemand/index.html"><span style="color: #ffffff;"> click here</span></a></strong></span><span style="color: #999999;"> for more information or</span>&nbsp;<a href="./contact/index.html"><strong><span style="font-family: raleway-bold;"><span style="color: #ffffff;">contact</span></span></strong></a> <span style="color: #999999;">us for more information.</span></span></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="block-8-2 v-0">
        <div class="container">
            <div class="row">
                <div class="col">
                    <h3 class="heading-3">Safretti BV - Metaalstraat 3a/3c - 7483 PD Haaksbergen - The Netherlands - ICC nr.: 08130256 - VAT nr.: NL8138.45.245.B01</h3>
                </div>
            </div>
        </div>
    </section>
    <section class="block-55-1 v-0">
        <div class="container">
            <div class="row">
                <div class="col">
                    <div class="middle">
                        <div>
                            <div>
                                <div class="media-1">
                                    <img src="./assets/images/icon-phone.svg">
                                </div>
                                <div class="text-6"><p><a href="tel:0101234567">0</a>031 (0)53 574 2554
    </p></div>
                            </div>
                            <div>
                                <div class="media-1">
                                    <img src="./assets/images/icon-email.svg">
                                </div>
                                <div class="text-6"><p><a href="mailto:info@safretti.com"><u>info@safretti.com</u></a>
    </p></div>
                            </div>
                        </div>
                        <div>
                            <div>
                                <a class="media-1" href="http://www.facebook.com/safretti" target="_blank">
                                    <img src="./assets/images/icon-facebook.svg">
                                </a>
                                <a class="media-1" href="http://nl.linkedin.com/in/safretti-bv-23172931" target="_blank">
                                    <img src="./assets/images/icon-linkedin.svg">
                                </a>
                                <a class="media-1" href="http://nl.pinterest.com/safretti/" target="_blank">
                                    <img src="./assets/images/icon-pinterest.svg">
                                </a>
                                <a class="media-1" href="http://www.youtube.com/channel/UCkN0NWaLeQts786gy6XkSkQ" target="_blank">
                                    <img src="./assets/images/icon-youtube.svg">
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
</div>
<script src="./assets/js/script.js?v=1501504031"></script>
<script src="//maps.googleapis.com/maps/api/js?        key=AIzaSyAdxtgr_gHrZ7E8t2aSZ_-eTAbIr_zc478"></script>
<script>$(window).on('load', function() {
new Menu({selector: '#page-18027 .block-4-1 .menu, [data-page_id="page-        18027"] .block-4-1 .menu'});
new Cover({selector: '#page-18027 #block-51-848431 .media-4, [data-        page_id="page-18027"] #block-51-848431 .media-4'});
new Sticky({selector: '#page-18027 [data-sticky], [data-page_id="page-    18027"] [data-sticky]'});
new Scale({selector: '#page-18027 [class*="heading-"], [data-page_id="page-18027"] [class*="heading-"], #page-18027 [class*="text-"], [data-page_id="page-18027"] [class*="text-"]'});
new Anchor({selector: '#page-18027 a[href^="#"], [data-page_id="page-18027"]     a[href^="#"]'});
new Popup({selector: '#page-18027 .block-55-1 a[href][target="popup"], [data-page_id="page-18027"] .block-55-1 a[href][target="popup"]'});
new Equalize({selector: '#page-18027 #block-36-219665 .equalize, [data-        page_id="page-18027"] #block-36-219665 .equalize'});
new Video({selector: '#page-18027 #block-51-848431 video, [data-    page_id="page-18027"] #block-51-848431 video, #page-18027 #block-51-848431     iframe, [data-page_id="page-18027"] #block-51-848431 iframe'});
});
</script>

</body>

最佳答案

如果您有很多导入，请检查您的 style.css。这可能会导致加载时间过长。否则，如果您在本地托管它，请尝试将其移动到其他地方。或者检查你是否有很多动画(js)。

编辑:实际上，我这边的页面加载速度非常快。我的意思是我没有 CSS，但看起来它不是 html/js 代码。您能否将 CSS 代码也发布到您的问题中？

关于javascript - 无法弄清楚为什么我的网站加载如此慢，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53450679/

上一篇：javascript - 将字符串变量从 Controller 传递到指令 angularjs

下一篇：javascript - Firebase - 使用回调在数组中检索和存储数据

相关文章：

javascript - React 如何检测内部组件的变化？

javascript - 从对象中提取单个键到数组

php - 如何修复 while 循环中生成的多个 div 中的间隙？

html - 如何强制跨度宽度到内部文本的长度？

mysql - 关于 mysql 的 sql 性能调优，你更喜欢哪本书？

performance - 为什么Java飞行记录仪采样太少？

javascript - 在 for 循环中，使用临时变量或索引访问值哪个更快？

javascript - Vuejs如何将点击功能设置为语义UI的关闭功能？

javascript - x 秒后在元素处显示气球

javascript - 需要获取静态文件的状态

©2024 IT工具网  联系我们