我的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&controls=0&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 ></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 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> <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>
答案 0 :(得分：1)
删除此行中URL中的大空格。
<script src="//maps.googleapis.com/maps/api/js? key=AIzaSyAdxtgr_gHrZ7E8t2aSZ_-eTAbIr_zc478"></script>
更改为
<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyAdxtgr_gHrZ7E8t2aSZ_-eTAbIr_zc478"></script>
最佳做法是在URL中不留空格 参见Google Maps API Best Practices
答案 1 :(得分：1)
检查您的style.css是否有很多导入。那会导致较长的加载时间。否则，如果您在本地托管它，请尝试将其移动到其他地方。或检查是否有很多动画（js）。
编辑：实际上，页面加载非常快。我的意思是我没有CSS，但好像不喜欢html / js代码。您能在问题中张贴CSS代码吗？