jQuery元素用法|網站速度101

Question

我知道這種聲音很愚蠢，但請裸露在我身上。

我與加寶石的應用程序：

gem 'jquery-rails' 
gem 'turbolinks' 
gem 'jquery-ui-sass-rails' 
gem "twitter-bootstrap-rails" 

當然我有很多其他寶石，但這些都是我想專注於現在的人。

網站的加載速度慢有點，在我application.js我就叫jquery.all所有jQuery的東西，我加載（我認爲我不甚至需要）

//= require jquery 
//= require jquery_ujs 
//= require jquery.ui.all 
//= require jquery.masonry.min.js 
//= require twitter/bootstrap 
//= require flatuipro 
//= require turbolinks 
//= require_tree . 

我的應用程序並不大，而且我不認爲我需要從jquery獲得所有這些東西。但因爲我有點新（大家好）我不完全知道什麼插件，小部件，我用它來要求它們在我的application.js中的元素，所以我不必調用jquery.all。

除此之外，很多Think並未從Turbolinks加載，而用戶必須通過F5頁面才能加載所有元素。

例如：這是被載入每一頁上：

<link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet" /> 
<link data-turbolinks-track="true" href="/assets/twitter-bootstrap-static/bootstrap.css?body=1" media="all" rel="stylesheet" /> 
<link data-turbolinks-track="true" href="/assets/twitter-bootstrap-static/fontawesome.css?body=1" media="all" rel="stylesheet" /> 
<link data-turbolinks-track="true" href="/assets/bootstrap_and_overrides.css?body=1" media="all" rel="stylesheet" /> 
<link data-turbolinks-track="true" href="/assets/devise-forms.css?body=1" media="all" rel="stylesheet" /> 
<link data-turbolinks-track="true" href="/assets/flat-ui.css?body=1" media="all" rel="stylesheet" /> 
<link data-turbolinks-track="true" href="/assets/flatuipro-demo.css?body=1" media="all" rel="stylesheet" /> 
<link data-turbolinks-track="true" href="/assets/pages.css?body=1" media="all" rel="stylesheet" /> 
<link data-turbolinks-track="true" href="/assets/shows.css?body=1" media="all" rel="stylesheet" /> 
<link data-turbolinks-track="true" href="/assets/styles.css?body=1" media="all" rel="stylesheet" /> 
<link data-turbolinks-track="true" href="/assets/users.css?body=1" media="all" rel="stylesheet" /> 
    <script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/jquery.ui.core.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/jquery.ui.widget.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/jquery.ui.accordion.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/jquery.ui.position.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/jquery.ui.menu.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/jquery.ui.autocomplete.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/jquery.ui.button.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/jquery.ui.datepicker.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/jquery.ui.mouse.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/jquery.ui.draggable.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/jquery.ui.resizable.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/jquery.ui.dialog.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/jquery.ui.droppable.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/jquery.ui.effect.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/jquery.ui.effect-blind.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/jquery.ui.effect-bounce.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/jquery.ui.effect-clip.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/jquery.ui.effect-drop.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/jquery.ui.effect-explode.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/jquery.ui.effect-fade.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/jquery.ui.effect-fold.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/jquery.ui.effect-highlight.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/jquery.ui.effect-pulsate.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/jquery.ui.effect-scale.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/jquery.ui.effect-shake.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/jquery.ui.effect-slide.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/jquery.ui.effect-transfer.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/jquery.ui.progressbar.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/jquery.ui.selectable.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/jquery.ui.slider.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/jquery.ui.sortable.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/jquery.ui.spinner.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/jquery.ui.tabs.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/jquery.ui.tooltip.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/jquery.ui.all.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/jquery.masonry.min.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/bootstrap-transition.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/bootstrap-alert.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/bootstrap-modal.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/bootstrap-dropdown.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/bootstrap-scrollspy.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/bootstrap-tab.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/bootstrap-tooltip.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/bootstrap-popover.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/bootstrap-button.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/bootstrap-collapse.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/bootstrap-carousel.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/bootstrap-typeahead.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/bootstrap-affix.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/jquery.ui.touch-punch.min.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/bootstrap-select.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/bootstrap-switch.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/flatui-checkbox.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/flatui-radio.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/jquery.tagsinput.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/jquery.placeholder.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/jquery.stacktable.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/flatuipro.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/bootstrap.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/clips.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/flatuipro-demo.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/pages.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/shows.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/users.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/application.js?body=1"></script> 

可能有人，有足夠的勇氣，向我解釋什麼是與Turbolinks發生，如何處理jQuery的爛攤子？

謝謝。

jQuery UI Sass Rails，My Repository

Answer 1

我不熟悉的渦輪鏈接，但我可以肯定的建議擺脫那個//= require jquery.ui.all通話。一個簡單的方法來處理jQuery UI的東西是隻手動調用頭標記庫的發展：

<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
<link type="text/css" rel="stylesheet" src="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"> 

然後，一旦你知道你所需要的庫的一部分，只要下載一個自定義的包只用您需要的功能從http://jqueryui.com/download/，只需將js文件放入assets/javascripts文件夾即可。你可以用大多數你需要的庫來做到這一點，因爲它們中的一些可能是多餘的。清單文件末尾的//= require_tree .調用將調用assets/javascripts文件夾中的所有js文件。