javascript使用defer延迟加载行内JS脚本

浏览器defer只支持外链JS,下面的方法可以支持行内JS延迟加载
延迟加载JS可以提升网页加载速度,是重要的性能指标之一

检测DOMContentLoaded加载行内JS


<script>
    window.addEventListener('DOMContentLoaded', function() {
        (function($) {
            //do something with b-lazy plugin, lightbox plugin and then with flexslider
        })(jQuery);
    });
</script>

Base64编码URL后使用defer加载行内JS


<script src="data:text/javascript;base64,YWxlcnQoJ0hlbGxvIHdvcmxkIScpOw==" defer>
</script>

纯文本data使用defer加载行内JS

<script defer src="data:text/javascript,
//do something with b-lazy plugin, lightbox plugin and then with flexslider
lightbox.option({
  resizeDuration: 200,
  wrapAround: true
})
">
</script>

使用第三方defer.js


大牛写的defer脚本,可以替换浏览器使用的defer,性能更好
https://github.com/shinsenter/defer.js

参考文章
https://stackoverflow.com/questions/41394983/how-to-defer-inline-javascript

发表评论