提高网站速度 defer JS答案

【问题标题】：Improve website speed defer JS提高网站速度 defer JS
【发布时间】：2016-07-01 09:30:07
【问题描述】：

我遇到了延迟和异步 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 请求

【问题讨论】：

标签： javascript jquery html performance

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

参考：Source

【讨论】：