正確的方法來處理ajax HTML塊

Question

所以我想知道什麼是「規範」或「適當」的方式來處理通過ajax使用的HTML。

例如，我是否應該在使用它的實際頁面中保留所有的HTML？或者我應該只是一個Ajax調用來加載它？

由於減少了一個負載，在保持頁面加載性能方面是否有性能提升？或者，在頁面加載時加載額外的數據會將其取消。

下面是一個屏幕截圖，說明我的意思。您可以看到根據用戶提供的內容（當然是有限字符）更改的{name}。

任何幫助/意見表示讚賞！謝謝！

對於那些要價的部分源：

<!-- text field --> 
    <div class="add-field-wrapper float-left"> 
     <input type="radio" value="text" name="input_type" id="rad-type-text" class="type-radio-btn"> 
     <label for="rad-type-text" class="radio-lbl" data-tooltip="Used for simple inputs such as: <b>Phone Number</b> or <b>Email Address</b>"> 
      <img src="https://placeholdit.imgix.net/~text?txtsize=16&txt=70x70&w=70&h=70" class="field-type-icon" /> 
      <div class="field-type-text">Text Field</div> 
     </label> 
    </div> 

    <!-- select --> 
    <div class="add-field-wrapper float-left"> 
     <input type="radio" value="select" name="input_type" id="rad-type-select" class="type-radio-btn"> 
     <label for="rad-type-select" class="radio-lbl" data-tooltip="Use this option when you need to provide a list of choices for the user." > 
      <img src="https://placeholdit.imgix.net/~text?txtsize=16&txt=70x70&w=70&h=70" class="field-type-icon" /> 
      <div class="field-type-text">Select Menu</div> 
     </label> 
    </div> 

    <!-- textarea --> 
    <div class="add-field-wrapper float-left"> 
     <input type="radio" value="textarea" name="input_type" id="rad-type-textarea" class="type-radio-btn"> 
     <label for="rad-type-textarea" class="radio-lbl" data-tooltip="The textarea field will appear as a <b>WYSIWIG</b> (What you see is what you get) editor. This allows for some customization of the appearance of the input."> 
      <img src="https://placeholdit.imgix.net/~text?txtsize=16&txt=70x70&w=70&h=70" class="field-type-icon" /> 
      <div class="field-type-text">Text Area</div> 
     </label> 
    </div> 

編輯：

<!-- Datepicker HTML block - used in JS --> 
<div id="datepicker_html" style="display: none;"> 
    <div id="{name}-block" class="datepicker-wrapper form-input-wrapper"> 
     <div class="template-drag-handle"><img src="images/design/up-down-icon.png" class="template-drag-handle-icon" alt="Drag" /></div> 
     <div class="inputs-wrapper"> 
      <div class="form-row"><input type="text" name="{name}" class="input-datepicker" placeholder="{placeholder}" id="{name}"/></div> 
     </div> 
     <?php echo $default_template_chkbox_options_html; ?> 
    </div> 
</div> 

這是一個在HTML的 「作品」。它被加載到JS變量：

這是什麼處理它 - 添加名稱，更改佔位符（只要你想，這些可重複使用多次）

function addDatePickerField(){ 
    //Get the HTML 
    var datepicker_html = $('#datepicker_html').html(); 

    datepicker_html = datepicker_html.replaceAll(/{name}/g, input_name_underscores); 
    datepicker_html = datepicker_html.replaceAll('{placeholder}', input_name); 

    $('#template-fields-wrapper').append(datepicker_html); 

    wrapUpAddInput('datepicker'); 
} 

我剛纔didnt它是否會更好做一個Ajax調用，存儲「外部」的HTML，並調用它在我需要的時候 - 就像那個日期選擇器HTML塊一樣，將存儲在單獨的文件中，然後在鏈接上加載到DOM中。

Answer 1

我會盡力解決你的問題，儘管它是一個非常廣泛的問題。

通常，通過ajax請求動態加載您的內容（例如HTML）並不總是能夠提升性能，這取決於您正在做什麼並試圖實現。

您是否應始終使用初始請求預加載所有HTML內容？或者，當頁面已經加載到屏幕上後，你應該加載一部分嗎？這完全取決於您的應用和需求。

我將通過一個例子來說明：

假設我開發一個內容網站，這將主要面向內容（如文章），並將從傳統的Web瀏覽器（桌面或移動）擔任然後裝入我的文章每個頁面通過ajax可能不是一個好主意，只有極少數例外。

在其他手持

如果我開發，需要在「實時」發送和接收數據塊的Web應用程序，包含具有有豐富的和「豐富的UI項目企業「式的體驗，即在正在執行，更新和即時顯示動態內容的情況下，無需每次保存我的工作或執行操作時刷新和重新加載我的應用程序頁面 - 我肯定會使用ajax請求處理一些工作。

另一個方面是你的頁面的整體加載時間：

一些Web站點都通過AJAX加載一些他們的HTML頁面體加載後 - 通過這樣做，既減少的感知加載時間這個頁面，我的意思是 - 對用戶來說，由於部分頁面幾乎立即被加載，它似乎加載得更快，然後頁面內的一些塊通過ajax加載異步。

就像我剛纔說的，這是一個非常廣泛的問題，並且有很多方法可以學習和調查以最終看到最適合您的特定需求的方法。

好運