渲染阻止JavaScript和CSS
[英]Render blocking javascript and CSS
问题描述
在样式中使用所有这些js脚本（jquery.min.js，skel.min.js，skel-layers.min.js）时，如何延迟这些脚本：
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/skel/2.2.1/skel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/skel-layers/2.0.2/skel-layers.min.js"></script>
<!-- Styling -->
<script>(function(a) {
skel.init({reset:"full", breakpoints:{global:{range:"*", href:"css/style.css", containers:"60em", grid:{gutters:["2em", 0]}}, wide:{range:"-1680", href:"css/style-wide.css"}, normal:{range:"-1280", href:"css/style-normal.css", viewport:{scalable:!1}}, narrow:{range:"-980", href:"css/style-narrow.css", containers:"90%"}, narrower:{range:"-840", href:"css/style-narrower.css", containers:"90%!"}, mobile:{range:"-736", href:"css/style-mobile.css", containers:"100%!"}, mobilep:{range:"-480", href:"css/style-mobilep.css"}},
plugins:{layers:{config:{mode:function() {
return skel.vars.isMobile ? "transform" : "position";
}}}}});
})(jQuery);
</script>
</head>
1 个解决方案
解决方案1
0 2017-06-23 22:28:17
理想情况下，您希望将与样式有关的所有Javascript（因为对于初始加载而言并不重要）放在结束标记之前的正文部分的末尾。 向下移动这些脚本会增加页面加载时间，尤其是对于“首屏”内容而言。 这与页面初始呈现时在视口或窗口中可见的内容有关（而折叠以下位置将不可见，除非您向下滚动。
希望这可以帮助你！
渲染阻止的Javascript和CSS
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.