Question

我遇到了延迟和异步js文件的麻烦。我的网站正在加载JQuery和Jquery-UI库，它们甚至是.min文件的大文件当我将这些库移动到网站的底部或只是推迟 - 将它们逐出时，我的网站停止渲染大部分元素，例如

Select2插件在手机上无法正常使用
Jquery范围滑块未拖动
其他一些自定义元素（如无限负载）也不能正常工作

所以我正在努力提高我的网站速度，但是这2个图书馆使用了阻止程序，并且我们在PageSpeed Insights上只获得了53个评分。

因此，使网站运行更快的另一种方法是合并（组合）JS文件，但在结合网站停止渲染后，所以我猜其中只有一些能够合并。有人可以帮我解决这个问题吗？下面我将列出我网站上使用的所有JS

jquery-2.1.1.min.js
greensock.js
layerslider.transitions.js (actually trying to find some lightweight alternative)
layerslider.kreaturamedia.jquery.js
jquery-ui.min.js
jquery.ui.touch-punch.min.js
select2.min.js
jquery.tooltipster.min.js
bootstrap.min.js
placeholders.js
jquery.magnific-popup.min.js
owl.carousel.min.js
html5shiv.js

我已经做了什么

浏览器缓存 - 开启
即时GZip - 开启
1. 所以主要的问题是如何在不失去功能的情况下将jquery移到底部
2. 我能够合并哪些库以减少HTTP请求

Answer 1

请注意，使用async让浏览器知道脚本可以异步加载，而不一定按顺序加载。当您尝试加载具有多个依赖项的异步脚本时，这会打开问题。在这种情况下，您应该在没有异步属性的情况下在页脚中加载jQuery，并使用async属性加载jQueryUI。

参考：Source

Answer 2

除了@ Dr.Web所说的你还可以将它们组合成一个文件并确保插件代码添加在jQuery的底部

提高网站速度推迟JS

2 个答案: