Question

所以我想知道什么是＆＃34; spec＆＃34;或＆＃34;适当的＆＃34;处理通过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>

那是＆＃34;＆＃34;＆＃34; 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');
}

我现在没有，如果最好做一个ajax调用，存储＆＃34;外部＆＃34; html并在需要时调用它 - 比如，那个datepicker HTML块，将存储在单独的文件中，然后存储在链接上，加载到DOM中。

Answer 1

我会尝试解决您的问题，即使问题非常广泛。

通常，通过ajax请求动态加载内容（例如HTML）并不总是能够提升性能，这实际上取决于您正在做什么并尝试实现。

您是否应始终使用初始请求预加载所有HTML内容？或者你应该在页面已经加载到屏幕后ajax加载它的一部分？这完全取决于您的应用和需求。

我将通过一个例子来解释：

假设我正在开发一个主要面向内容的内容网站（例如文章）并将从传统的网络浏览器（桌面或移动设备）提供，然后通过ajax为每个页面加载我的文章可能不是一个好主意，几乎没有例外。

另一方面 -

如果我正在开发一个需要在＆＃34;实时＆＃34;中发送和接收数据块的Web应用程序，那么一个包含丰富UI的项目必须拥有丰富的＆＃34;企业＆＃ 34;类似于体验正在执行，更新和动态显示的东西，而不必每次我保存我的工作或执行操作时刷新和重新加载我的应用程序页面 - 我一定会使用ajax请求处理一些工作。

另一个方面是页面的整体加载时间：

一些网站在加载页面主体后通过ajax加载一些HTML - 通过这样做，它们减少了页面的感知加载时间，通过＆＃34;感知＆＃34;我的意思是 - 对于用户来说，它似乎加载得更快，因为部分页面几乎立即加载，然后页面内的一些块通过ajax加载异步。

正如我所说，这是一个非常广泛的问题，有很多方法需要学习和研究，以便最终看到哪种方法最适合您的特定需求。

祝你好运

处理ajax HTML块的正确方法

1 个答案: