「懶惰JavaScript」加載隱藏的div？可能的安全/其他問題？

Question

我很好奇人們對這種情況的看法和想法。我想懶惰加載JavaScript的原因是因爲性能。在主體的末尾加載JavaScript減少了瀏覽器阻塞，並以更快的頁面加載速度結束。

但有一些自動化我正在使用生成的HTML（Django具體）。這種自動化方式允許使用輸出呈現整個小部件所需內容的「小部件」（額外的javascript，css，...）來構建表單。問題是小部件想要立即將javascript輸出到文檔的中間，但我想確保所有JavaScript負載在主體的末尾。

當以下小部件添加到一個表單，你可以看到它呈現一些<script>...</script>標籤：

class AutoCompleteTagInput(forms.TextInput): 
    class Media:              
     css = { 
      'all': ('css/jquery.autocomplete.css',) 
     }            
     js = (
      'js/jquery.bgiframe.js', 
      'js/jquery.ajaxQueue.js',        
      'js/jquery.autocomplete.js', 
     )  

    def render(self, name, value, attrs=None):   
     output = super(AutoCompleteTagInput, self).render(name, value, attrs) 
     page_tags = Tag.objects.usage_for_model(DataSet) 
     tag_list = simplejson.dumps([tag.name for tag in page_tags], 
            ensure_ascii=False) 
     return mark_safe(u'''<script type="text/javascript">     
      jQuery("#id_%s").autocomplete(%s, { 
       width: 150,           
       max: 10, 
       highlight: false, 
       scroll: true, 
       scrollHeight: 100, 
       matchContains: true, 
       autoFill: true    
     });        
     </script>''' % (name, tag_list,)) + output 

什麼我建議是，如果有人使用<div class=".lazy-js">...</div>有一些CSS（.lazy-js { display: none; }）和一些JavaScript的（jQuery('.lazy-js').each(function(index) { eval(jQuery(this).text()); }），可以有效地迫使所有的JavaScript在頁面加載結束時加載：

class AutoCompleteTagInput(forms.TextInput): 
    class Media:              
     css = { 
      'all': ('css/jquery.autocomplete.css',) 
     }            
     js = (
      'js/jquery.bgiframe.js', 
      'js/jquery.ajaxQueue.js',        
      'js/jquery.autocomplete.js', 
     )  

    def render(self, name, value, attrs=None):   
     output = super(AutoCompleteTagInput, self).render(name, value, attrs) 
     page_tags = Tag.objects.usage_for_model(DataSet) 
     tag_list = simplejson.dumps([tag.name for tag in page_tags], 
            ensure_ascii=False) 
     return mark_safe(u'''<div class="lazy-js">     
      jQuery("#id_%s").autocomplete(%s, { 
       width: 150,           
       max: 10, 
       highlight: false, 
       scroll: true, 
       scrollHeight: 100, 
       matchContains: true, 
       autoFill: true    
     });        
     </div>''' % (name, tag_list,)) + output 

沒關係我具體實施的所有細節（特定媒體參與），我M尋找共識是否通過隱藏隱藏標籤使用懶惰加載的JavaScript的方法可以提出問題是否安全或其他相關？

關於這一點最方便的部分之一是它遵循DRY原則而非IMO良好，因爲您不需要爲頁面中的每個實例破解特定的延遲加載。它只是「有效」。

更新：我不知道，如果Django的有排隊的東西是隻輸出</body>結束前的能力（通過花哨的模板繼承什麼？）？

Answer 1

我希望能有一個工具，可以讓我的「追加」內容輸出流（或）將其追加到緩衝區，會在頁面的最後輸出，只是</body>標記之前。

我不確定哪些商業工具支持這個（或者不是django？），但這是我構建框架的方式。

至於你關於安全性/其他問題的問題......只要它被讀取（除非你輸出一個具有defer屬性（在IE/newer瀏覽器中）屬性的腳本標記），除非它被物理移動，它不會改變行爲或使其變得「懶惰」。

安全方面，將內容從腳本標記中提取出來，然後調用eval()就可以打開一個你沒有計劃執行的東西。 （不太可能，但可能）

Answer 2

The problem is that the widget wants to output javascript immediately into the middle of the document, but I want to ensure all javascript loads at the end of the body.

然後我不會使用那個小部件。從客戶端動態提供的客戶端腳本是一種災難，如果您或您的用戶不明智，將會破壞安全。例如，你如何知道代碼是否被泄露？