我正在尝试降低页面速度，因此尝试在两个外部 Javascript 中“延迟归因”。但是，当我使用延迟归因时，我的主要网站的视频剪辑消失了。
请告诉我如何解决这个问题。
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="SemiColonWeb" />
<!-- Stylesheets
============================================= -->
<link href="http://fonts.googleapis.com/earlyaccess/jejugothic.css" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Lato:300,400,400italic,600,700|Raleway:300,400,500,600,700|Crete+Round:400italic" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="stylesheet" href="css/dark.css" type="text/css" />
<link rel="stylesheet" href="css/font-icons.css" type="text/css" />
<link rel="stylesheet" href="css/animate.css" type="text/css" />
<link rel="stylesheet" href="css/magnific-popup.css" type="text/css" />
<link rel="stylesheet" href="css/responsive.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<!-- External JavaScripts
============================================= -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/plugins.js"></script>
<!-- SLIDER REVOLUTION 4.x SCRIPTS -->
<script type="text/javascript" src="include/rs-plugin/js/jquery.themepunch.tools.min.js" defer></script>
<script type="text/javascript" src="include/rs-plugin/js/jquery.themepunch.revolution.min.js" defer></script>
<!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
<link rel="stylesheet" type="text/css" href="include/rs-plugin/css/settings.css" media="screen"/>
<!-- Document Title
============================================= -->
<title>title</title>
<style>
.revo-slider-emphasis-text {
font-size: 64px;
font-weight: 700;
letter-spacing: -1px;
font-family: 'Raleway', sans-serif;
padding: 15px 20px;
border-top: 2px solid #FFF;
border-bottom: 2px solid #FFF;
}
.revo-slider-desc-text {
font-size: 20px;
font-family: 'Lato', sans-serif;
width: 650px;
text-align: center;
line-height: 1.5;
}
.revo-slider-caps-text {
font-size: 16px;
font-weight: 400;
letter-spacing: 3px;
font-family: 'Raleway', sans-serif;
}
</style>
</head>
<body class="stretched">
<!-- Document Wrapper
============================================= -->
<div id="wrapper" class="clearfix">
<!-- Header
============================================= -->
<header id="header" class="transparent-header full-header" data-sticky-class="not-dark">
<div id="header-wrap">
<div class="container clearfix">
<div id="primary-menu-trigger"><i class="icon-reorder"></i></div>
<!-- Logo
============================================= -->
<div id="logo">
<a href="index.html" class="standard-logo" data-dark-logo="images/Logo.png"><img src="images/Logo.png" alt="Logo"></a>
<a href="index.html" class="retina-logo" data-dark-logo="images/Logo2.png"><img src="images/Logo2.png" alt="Logo"></a>
</div><!-- #logo end -->
<!-- Primary Navigation
============================================= -->
<nav id="primary-menu">
<ul>
<li class="current"><a href="index.html"><div>HOME</div></a></li>
<li><a href="home-greeting.html"><div>Welcome</div></a>
<ul>
<li><a href="home-greeting.html"><div>Greeting</div></a></li>
<li><a href="home-about.html"><div>About us</div></a></li>
<li><a href="home-staff.html"><div>Staff</div></a></li>
<li><a href="feature-contact.html"><div>Contact Us</div></a></li>
<li><a href="home-news.html"><div>News</div></a></li>
</ul>
</li>
<li><a href="timeAndPlace.html"><div>Service</div></a>
<ul>
<li><a href="timeAndPlace.html"><div>Time</div></a></li>
<li><a href="galilee-calendar.html"><div>Calendar</div></a></li>
</ul>
</li>
<li><a href="media-video.html"><div>Media</div></a>
<ul>
<li><a href="media-video.html"><div><i class="icon-play"></i>Video</div></a></li>
<li><a href="media-galleries.html"><div><i class="icon-picture"></i>Gallery</div></a></li>
</ul>
</li>
<li><a href="ministries-prayer.html"><div>Ministries</div></a>
<ul>
<li><a href="ministries-prayer.html"><div>Pray</div></a></li>
<li><a href="ministries-local-missions.html"><div>Local Mission</div></a></li>
<li><a href="ministries-global-missions.html"><div>Global Mission</div></a></li>
<li><a href="ministries-outdoors.html"><div>Outdoors</div></a></li>
</ul>
</li>
</ul>
</nav><!-- #primary-menu end -->
</div>
</div>
</header><!-- #header end -->
<section id="slider" class="slider-parallax revoslider-wrap clearfix">
<!--
#################################
- THEMEPUNCH BANNER -
#################################
-->
<div class="tp-banner-container">
<div class="tp-banner" >
<ul> <!-- SLIDE -->
<li class="dark" data-transition="fade" data-slotamount="1" data-masterspeed="1000" data-thumb="images/slider/rev/main/s1-thumb.jpg" data-saveperformance="off" data-title="Welcome to Galilee">
<!-- MAIN IMAGE -->
<!-- LAYERS -->
<!-- LAYER NR. 1 -->
<div class="tp-caption tp-fade fadeout fullscreenvideo"
data-x="0"
data-y="0"
data-speed="1000"
data-start="1100"
data-easing="Power4.easeOut"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1500"
data-endeasing="Power4.easeIn"
data-autoplay="true"
data-autoplayonlyfirsttime="false"
data-nextslideatend="true"
data-volume="mute" data-forceCover="1" data-aspectratio="16:9" data-forcerewind="on" style="z-index: 2;"><video class="" preload="none" width="100%" height="100%">
<source src='images/videos/greeting.mp4' type='video/mp4' /></video>
</div>
<!-- LAYER NR. 2 -->
<div class="tp-caption customin ltl tp-resizeme revo-slider-caps-text uppercase"
data-x="350"
data-y="280"
data-customin="x:0;y:150;z:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;"
data-speed="800"
data-start="1000"
data-easing="easeOutQuad"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn" style="z-index: 3;">This is</div>
<div class="tp-caption customin ltl tp-resizeme revo-slider-emphasis-text nopadding noborder"
data-x="270"
data-y="300"
data-customin="x:0;y:150;z:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;"
data-speed="800"
data-start="1200"
data-easing="easeOutQuad"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn" style="z-index: 3;">Welcome</div>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
var tpj=jQuery;
tpj.noConflict();
tpj(document).ready(function() {
var apiRevoSlider = tpj('.tp-banner').show().revolution(
{
dottedOverlay:"none",
delay:9000,
startwidth:1140,
startheight:700,
hideThumbs:200,
thumbWidth:100,
thumbHeight:50,
thumbAmount:3,
navigationType:"none",
navigationArrows:"solo",
navigationStyle:"preview4",
touchenabled:"on",
onHoverStop:"on",
swipe_velocity: 0.7,
swipe_min_touches: 1,
swipe_max_touches: 1,
drag_block_vertical: false,
parallax:"mouse",
parallaxBgFreeze:"on",
parallaxLevels:[8,7,6,5,4,3,2,1],
parallaxDisableOnMobile:"on",
keyboardNavigation:"on",
navigationHAlign:"center",
navigationVAlign:"bottom",
navigationHOffset:0,
navigationVOffset:20,
soloArrowLeftHalign:"left",
soloArrowLeftValign:"center",
soloArrowLeftHOffset:20,
soloArrowLeftVOffset:0,
soloArrowRightHalign:"right",
soloArrowRightValign:"center",
soloArrowRightHOffset:20,
soloArrowRightVOffset:0,
shadow:0,
fullWidth:"off",
fullScreen:"on",
spinner:"spinner0",
stopLoop:"off",
stopAfterLoops:-1,
stopAtSlide:-1,
shuffle:"off",
forceFullWidth:"off",
fullScreenAlignForce:"off",
minFullScreenHeight:"400",
hideThumbsOnMobile:"off",
hideNavDelayOnMobile:1500,
hideBulletsOnMobile:"off",
hideArrowsOnMobile:"off",
hideThumbsUnderResolution:0,
hideSliderAtLimit:0,
hideCaptionAtLimit:0,
hideAllCaptionAtLilmit:0,
startWithSlide:0,
fullScreenOffsetContainer: ".header"
});
apiRevoSlider.bind("revolution.slide.onchange",function (e,data) {
if( $(window).width() > 992 ) {
if( $('#slider ul > li').eq(data.slideIndex-1).hasClass('dark') ){
$('#header.transparent-header:not(.sticky-header,.semi-transparent)').addClass('dark');
$('#header.transparent-header.sticky-header,#header.transparent-header.semi-transparent.sticky-header').removeClass('dark');
$('#header-wrap').removeClass('not-dark');
} else {
if( $('body').hasClass('dark') ) {
$('#header.transparent-header:not(.semi-transparent)').removeClass('dark');
$('#header.transparent-header:not(.sticky-header,.semi-transparent)').find('#header-wrap').addClass('not-dark');
} else {
$('#header.transparent-header:not(.semi-transparent)').removeClass('dark');
$('#header-wrap').removeClass('not-dark');
}
}
SEMICOLON.header.darkLogo();
}
});
}); //ready
</script>
<!-- END REVOLUTION SLIDER -->
</section>
<!-- Content
============================================= -->
<section id="content">
<div class="content-wrap">
<div class="container clearfix">
<div class="row clearfix">
<div class="col-lg-5">
<div class="heading-block topmargin">
<h1>Welcome</h1>
</div>
<p class="lead">Welcoming!!</p>
</div>
<div class="col-lg-7">
<div style="position: relative; margin-top: 60px;" class="ohidden" data-height-lg="426" data-height-md="567" data-height-sm="470" data-height-xs="287" data-height-xxs="183">
<img src="images/portfolio/welcome.jpg" style="position: absolute; top: 0; left: 0;" data-animate="fadeInUp" data-delay="100" alt="Chrome">
</div>
</div>
</div>
</div>
<script type="text/javascript">
jQuery(window).load(function(){
var $container = $('#portfolio');
$container.isotope({
transitionDuration: '0.65s',
masonry: {
columnWidth: $container.find('.portfolio-item:not(.wide)')[0]
}
});
$('#page-menu a').click(function(){
$('#page-menu li').removeClass('current');
$(this).parent('li').addClass('current');
var selector = $(this).attr('data-filter');
$container.isotope({ filter: selector });
return false;
});
$(window).resize(function() {
$container.isotope('layout');
});
});
</script>
</div>
</section><!-- #content end -->
<!-- Copyrights
============================================= -->
<div id="copyrights">
<div class="container clearfix">
<div class="col_half">
ⓒ 2014 godlovesjoe<br>
</div>
<div class="col_half col_last tright">
<div class="fright clearfix">
<a href="https://www.facebook.com" class="social-icon si-small si-borderless si-facebook">
<i class="icon-facebook"></i>
<i class="icon-facebook"></i>
</a>
<a href="http://www.webpage.com/" class="social-icon si-small si-borderless si-globe">
<i class="icon-globe"></i>
<i class="icon-globe"></i>
</a>
</div>
<div class="clear"></div>
<i class="icon-envelope2"></i> email-address@hotmail.com <span class="middot">·</span> <i class="icon-phone-sign"></i> (+1)604-657-3937<span class="middot">·</span>
</div>
</div>
</div><!-- #copyrights end -->
</footer><!-- #footer end -->
</div><!-- #wrapper end -->
<!-- Go To Top
============================================= -->
<div id="gotoTop" class="icon-angle-up"></div>
<!-- Footer Scripts
============================================= -->
<script type="text/javascript" src="js/functions.js" defer></script>
</body>
</html>
最佳答案
defer 的工作方式是异步加载。它应该只用于相互不依赖的 JS 脚本。
即用于加载 jquery.themepunch.tools.min.js ，你需要加载 jquery，所以 jquery不能推迟。调用var apiRevoSlider = tpj('.tp-banner').show().revolution你需要有 include/rs-plugin/js/jquery.themepunch.revolution.min.js文件已加载，因此您不能延迟它。
为了提高您网站的页面速度，我建议您采取以下措施:
您应该将所有 CSS 文件编译成一个文件，而不是拥有 10 个不同的文件。您可以使用 Grunt 或 Gulp，它们会为您完成工作。此外，您可以使用在线工具，例如:https://csscompressor.net/ .
谷歌字体。你真的需要所有这些家族字体/粗细吗？
http://fonts.googleapis.com/css?family=Lato:300,400,400italic,600,700|Raleway:300,400,500,600,700|Crete+Round:400italic.尝试删除所有您并不真正需要的内容。所有的JS都应该在页面底部。将以下脚本移动到页面的最底部(就在
body关闭标记之前)。
试试这个:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" ></script>window.jQuery || document.write('<script src="/js/jquery.js"><\/script>')</script>
<script type="text/javascript" src="js/plugins.js"></script>
<script type="text/javascript" src="include/rs-plugin/js/jquery.themepunch.tools.min.js"></script>
<script type="text/javascript" src="include/rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
之后，您可以拥有内联脚本:
<script>
var tpj=jQuery;
tpj.noConflict();
...
jQuery(window).load(function() {
</script>
<script type="text/javascript">
jQuery(window).load(function() {
var $container = $('#portfolio');
$container.isotope({
transitionDuration: '0.65s',
....
</script>
这应该是最后一个脚本(这样可以保留defer属性)
<script type="text/javascript" src="js/functions.js" defer></script>
只有这样，您的页面速度才会提高很多。将 JS 置于头部的问题在于，它将阻止页面呈现，直到它完成加载。
如果你想不断优化页面，它会变得更狡猾。您将需要使用具有依赖控制的 JS 编译器。我推荐RequireJS即使设置有点复杂。有一些工具可以帮助进行设置 ( Grunt/Gulp )。
关于javascript - 页面速度的延迟脚本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29763203/