@zhuzhi1 #3楼 昨晚用手机回复的，回复的不完整，下面完整回答一下：
1.为了浏览器快速加载页面，我们一般需要把js放到页面的底部，譬如，你打开fecshop:
https://fecshop.appfront.fancyecommerce.com/
,查看源代码，你会发现在源代码的底部：
<script src="/assets/7428250b/js/jquery-3.0.0.min.js?v=1"></script>
<script src="/assets/7428250b/js/jquery.lazyload.min.js?v=1"></script>
<script src="/assets/7428250b/js/owl.carousel.min.js?v=1"></script>
<script src="/assets/7428250b/js/js.js?v=1"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#owl-fecshop").owlCarousel({
navigation : true,
slideSpeed : 300,
paginationSpeed : 400,
singleItem : true,
autoPlay:3000,
lazyLoad:true
// "singleItem:true" is a shortcut for:
// items : 1,
// itemsDesktop : false,
// itemsDesktopSmall : false,
// itemsTablet: false,
// itemsMobile : false
});
$("#owl-best-seller").owlCarousel({
items : 4,
lazyLoad : true,
navigation : true,
scrollPerPage : true,
pagination:false,
itemsCustom : false,
slideSpeed : 900
});
$("#owl-featured").owlCarousel({
items : 4,
lazyLoad : true,
navigation : true,
scrollPerPage : true,
pagination:false,
itemsCustom : false,
slideSpeed : 900
});
});
</script>
你会发现除了加载的js文件，还有一些页面的js内容（在view文件中直接写的js代码）
这种方式会更好的浏览器加载。
2.这种方式怎么实现的呢？
首先，我们一般吧js放到页面的顶部head，然后在view中写js，也就是js文件在
<div class="content"></div> ，
但是，你看fecshop的js，是紧贴</body>的位置，也就是在body部分的最后位置，这个得益于yii2的asset
，当在view文件中写js代码，譬如：
https://github.com/fecshop/yii2_fecshop/blob/master/app/appfront/theme/base/front/cms/home/index.php
在这个文件得底部，你会发现js部分：
<script>
<?php $this->beginBlock('owl_fecshop_slider') ?>
$(document).ready(function(){
$("#owl-fecshop").owlCarousel({
navigation : true,
slideSpeed : 300,
paginationSpeed : 400,
singleItem : true,
autoPlay:3000,
lazyLoad:true
// "singleItem:true" is a shortcut for:
// items : 1,
// itemsDesktop : false,
// itemsDesktopSmall : false,
// itemsTablet: false,
// itemsMobile : false
});
$("#owl-best-seller").owlCarousel({
items : 4,
lazyLoad : true,
navigation : true,
scrollPerPage : true,
pagination:false,
itemsCustom : false,
slideSpeed : 900
});
$("#owl-featured").owlCarousel({
items : 4,
lazyLoad : true,
navigation : true,
scrollPerPage : true,
pagination:false,
itemsCustom : false,
slideSpeed : 900
});
});
<?php $this->endBlock(); ?>
</script>
<?php $this->registerJs($this->blocks['owl_fecshop_slider'],\yii\web\View::POS_END);//将编写的js代码注册到页面底部 ?>
但是源代码中，你发现js并没有在<div class="main container"></div>的后面，而是在页面的最底部
，这就是上面的代码<?php $this->registerJs($this->blocks['owl_fecshop_slider'],\yii\web\View::POS_END);//将编写的js代码注册到页面底部 ?> 来完成的。