Consecuencias de varios #include file

[mariano_donati]

Hola a todos. Estoy desarrollando un proyecto que tiene bastante código javascript para manejar eventos que lanzan los controles. El mantenimiento, actualización, modificación, mejora, etc se me está haciendo bastante díficil. Debido a esto, se me ocurrió una posible solución: crear "controles". Estos controles en realidad contendrán el código html correspondiente para crear el control y el script para manejar los eventos de este control. Luego, la idea es agregar este control en el lugar que corresponde mediante una instrucción include en la página principal. Para ser más gráfico en mi explicación, les dejo una maqueta de como luce el código de un control:

Código:

<script>
function change_cursor(obj)
{
 try
 {
  obj.style.cursor = "pointer";  //MOZILLA
 }
 catch (ex)
 {
  obj.style.cursor = "hand";   //IEX
 }
 obj.style.border = "solid 1px #333333";
}
function pltt_onclick ( obj , attr , value )
{
 obj.style.border = "solid 1px #333333";
 texteditor.apply_style(attr,value);   // TEXTEDITOR REFERS TO TEXTEDITOR'S OBJECT IN MAIN PAGE
}
</script>
 
<table id="TBL_PALETTE" cellspacing="2" cellpadding="0">
     <tr>
         <td><img src="Includes/Scripts/TextEditor/Images/PALETTE_000000.gif" onclick="pltt_onclick(this,'forecolor','#000000')"onmouseover="change_cursor(this)" />
            </td>
            <td><img src="Includes/Scripts/TextEditor/Images/PALETTE_666666.gif" onclick="pltt_onclick(this,'forecolor','#666666')" onmouseover="change_cursor(this)" />
            </td>
            <td><img src="Includes/Scripts/TextEditor/Images/PALETTE_999999.gif" onclick="pltt_onclick(this,'forecolor','#999999')" onmouseover="change_cursor(this)"/>
            </td>
         <td><img src="Includes/Scripts/TextEditor/Images/PALETTE_CCCCCC.gif" onclick="pltt_onclick(this,'forecolor','#CCCCCC')"onmouseover="change_cursor(this)" />
            </td> 
            <td><img src="Includes/Scripts/TextEditor/Images/PALETTE_FFFFFF.gif"onclick="pltt_onclick(this,'forecolor','#FFFFFF')" onmouseover="change_cursor(this)" />
            </td>
        </tr>
        <tr>
            <td><img src="Includes/Scripts/TextEditor/Images/PALETTE_FF0000.gif" onclick="pltt_onclick(this,'forecolor','#FF0000')" onmouseover="change_cursor(this)" />
            </td>
            <td><img src="Includes/Scripts/TextEditor/Images/PALETTE_00FF00.gif" onclick="pltt_onclick(this,'forecolor','#00FF00')"onmouseover="change_cursor(this)" />
            </td>
            <td><img src="Includes/Scripts/TextEditor/Images/PALETTE_0000FF.gif" onclick="pltt_onclick(this,'forecolor','#0000FF')" onmouseover="change_cursor(this)" />
            </td>
            <td><img src="Includes/Scripts/TextEditor/Images/PALETTE_FFFF00.gif" onclick="pltt_onclick(this,'forecolor','#FFFF00')" onmouseover="change_cursor(this)" />
            </td>
            <td><img src="Includes/Scripts/TextEditor/Images/PALETTE_FF9900.gif" onclick="pltt_onclick(this,'forecolor','#FF9900')"onmouseover="change_cursor(this)" />
            </td>
        </tr>
         <tr>
   <td><img src="Includes/Scripts/TextEditor/Images/PALETTE_99CC00.gif" onclick="pltt_onclick(this,'forecolor','#99CC00')"onmouseover="change_cursor(this)" />
            </td>
            <td><img src="Includes/Scripts/TextEditor/Images/PALETTE_3300CC.gif" onclick="pltt_onclick(this,'forecolor','#3300CC')" onmouseover="change_cursor(this)" />
            </td>
            <td><img src="Includes/Scripts/TextEditor/Images/PALETTE_6600CC.gif" onclick="pltt_onclick(this,'forecolor','#6600CC')"onmouseover="change_cursor(this)" />
            </td>
            <td><img src="Includes/Scripts/TextEditor/Images/PALETTE_993300.gif" onclick="pltt_onclick(this,'forecolor','#993300')" onmouseover="change_cursor(this)" />
            </td>
            <td><img src="Includes/Scripts/TextEditor/Images/PALETTE_CCFF00.gif"onclick="pltt_onclick(this,'forecolor','#CCFF00')" onmouseover="change_cursor(this)" />
            </td>
        </tr>
         <tr>
   <td><img src="Includes/Scripts/TextEditor/Images/PALETTE_0066CC.gif" onclick="pltt_onclick(this,'forecolor','#0066CC')"onmouseover="change_cursor(this)" />
            </td>
            <td><img src="Includes/Scripts/TextEditor/Images/PALETTE_CC9966.gif" onclick="pltt_onclick(this,'forecolor','#CC9966')" onmouseover="change_cursor(this)" />
            </td>
            <td><img src="Includes/Scripts/TextEditor/Images/PALETTE_6699FF.gif" onclick="pltt_onclick(this,'forecolor','#6699FF')"onmouseover="change_cursor(this)" />
            </td>
            <td><img src="Includes/Scripts/TextEditor/Images/PALETTE_993300.gif" onclick="pltt_onclick(this,'forecolor','#993300')" onmouseover="change_cursor(this)" />
            </td>
            <td><img src="Includes/Scripts/TextEditor/Images/PALETTE_CCFF00.gif"onclick="pltt_onclick(this,'forecolor','#CCFF00')" onmouseover="change_cursor(this)" />
            </td>
        </tr>
</table>

Luego lo inserto en la página principal mediante <!-- #include file="archivo_control.html" -->. Ahora bien, no es que solo incluiría un solo control, sino que serían dos o tres por página. Mi pregunta es: ¿Que efectos en el rendimiento tiene ejecutar varias sentencias include? ¿Ralentizaría la carga de la página? ¿El servidor se vería sobrecargado por realizar estas instrucciones varias veces en una misma página?. En resumen, me interesa saber cual es el efecto sobre el rendimiento al hacer varias sentencias de este tipo. Saludos.