减少大量重复代码的HTML页面的大小

Question

Noob问题在这里，但我还没有找到其他地方的直接答案。我已经写在烧瓶内的Web应用程序上的要求产生非常多的选择框下面的代码：

{% for hour in hours %} 
    <tr> 
     <td>{{ hour }}</td> 
     {% for date in dates %} 
     <td> 
     <div id="select_{{ date }}_{{ hour }}" style="display:none;"> 
      <select name={{ "time" + "_" + date + "_" + hour }}> 
       <option value="00" >{{ hour }}:00</option> 
       <option value="15" >{{ hour }}:15</option> 
       <option value="30" >{{ hour }}:30</option> 
       <option value="45" >{{ hour }}:45</option> 
      </select>  
      <select onchange="this.form.submit()" name={{ "value" + "_" + date + "_" + hour }}> 
      {% for option in options %} 
      <option value="{{ option|safe }}" > 
       {{ option|safe }} 
      </option> 
      {% endfor %} 
      </select> 
     </div> 
     <div id="plus_{{ date }}_{{ hour }}" style="display:block;"> 
      <a href="javascript:;show_select('{{ date }}', '{{ hour }}')" onClick="">+</a> 
     </div> 
     </td> 
     {% endfor %} 
    </tr> 
    {% endfor %} 

其中dates和hours显然是使用日期和时间列表，options是一个有很多的列表的选项。总而言之，我的HTML文档最终大小超过1 MB。如果我想缩小这个尺寸，我有什么选择？

感谢， 菲利普

Answer 1

可以将此模板转换一些JavaScript代码，反复做document.write或设置不同元素的innerhtml财产。在HTML5中，您可以使用template tag。模板支持由许多库提供，例如jquery，mustache等，可能使用上述技术实现。