Hvis man kigger på kildekoden til mit site, og mange andre også, kan man i headeren se hvilke JS filer der er inkluderet på den side man er på.
Hvis du kigger i min kildekode lige nu, skulle du gerne se noget ligende det her (taget fra min forside):
<!-- MooTools -->
<script type="text/javascript" src="/frontend/js/mootools_core.js"></script>
<script type="text/javascript" src="/frontend/js/mootools_more.js"></script>
<!-- /MooTools -->
<!-- JS -->
<script type="text/javascript" src="/frontend/js/core.js"></script>
<script type="text/javascript" src="/frontend/js/ajax.js"></script>
<!-- /JS -->
Umiddelbart ser det meget fornuftigt ud, der er ikke for mange ting smidt ind som “bare” fylder.
Hvis jeg derimod ser min kildekode for den side hvor jeg skriver mine blog-indlæg, er det et lidt anderledes resultat:
<!-- MooTools -->
<script type="text/javascript" src="/frontend/js/mootools_core.js"></script>
<script type="text/javascript" src="/frontend/js/mootools_more.js"></script>
<!-- /MooTools -->
<!-- JS -->
<script type="text/javascript" src="/frontend/js/core.js"></script>
<script type="text/javascript" src="/frontend/js/ajax.js"></script>
<!-- /JS -->
<!-- FileManager -->
<link type="text/css" rel="stylesheet" href="/frontend/filemanager/Css/FileManager.css" />
<link type="text/css" rel="stylesheet" href="/frontend/filemanager/Css/Additions.css" />
<script type="text/javascript" src="/frontend/filemanager/Source/FileManager.js"></script>
<script type="text/javascript" src="/frontend/filemanager/Source/Language/Language.da.js"></script>
<script type="text/javascript" src="/frontend/filemanager/Source/Additions.js"></script>
<script type="text/javascript" src="/frontend/filemanager/Source/Uploader/Fx.ProgressBar.js"></script>
<script type="text/javascript" src="/frontend/filemanager/Source/Uploader/Swiff.Uploader.js"></script>
<script type="text/javascript" src="/frontend/filemanager/Source/Uploader.js"></script>
<script type="text/javascript" src="/frontend/filemanager/filemanager.js"></script>
<!-- /FileManager -->
<!-- TinyMCE -->
<script type="text/javascript" src="/frontend/tinymce/tiny_mce_gzip.js"></script>
<script type="text/javascript" src="/frontend/tinymce/config_gzip.js"></script>
<script type="text/javascript" src="/frontend/tinymce/config.js"></script>
<script type="text/javascript" src="/frontend/tinymce/plugins/tinybrowser/tb_tinymce.js.php"></script>
<!-- /TinyMCE -->
Grunden til at der er så meget mere på mine nogen af mine sider, er at jeg har lavet min header således at den ikke indkluderer JavaScript når der ikke er brug for det.
Under en af mine mange opdateringer her på siden, lagde jeg pludselig mærke til at siden var blevet langsommere om at loade. Ved at kigge lidt nærmere på Firebug, under “Net”-fanen, fandt jeg så frem til at al det JavaScript jeg netop havde kæmpet med at få smidt på siden, sløvede den voldsomt meget.
Det måtte jeg jo så finde en løsning på, og den ser sådan her ud:
<!-- MooTools -->
<script type="text/javascript" src="/frontend/js/mootools_core.js"></script>
<script type="text/javascript" src="/frontend/js/mootools_more.js"></script>
<!-- /MooTools -->
<!-- JS -->
<script type="text/javascript" src="/frontend/js/core.js"></script>
<script type="text/javascript" src="/frontend/js/ajax.js"></script>
<!-- /JS -->
<?php if (isset($template_content) && preg_match('#rel="(milkbox)"#', $template_content)){ ?>
<!-- MilkBox -->
<link type="text/css" rel="stylesheet" href="/frontend/milkbox/milkbox.css" />
<script type="text/javascript" src="/frontend/milkbox/milkbox.js"></script>
<!-- /MilkBox -->
<?php } ?>
<?php if (isset($template_content) && preg_match('#code class="(.+)"#', $template_content)){ ?>
<!-- Highlight -->
<link type="text/css" rel="stylesheet" href="/frontend/highlight/highlight.css" />
<script language="javascript" src="/frontend/highlight/highlight.js"></script>
<!-- /Highlight -->
<?php } ?>
<?php if (isset($template_content) && preg_match('#id="(file_manager_path|file_manager_button)"#', $template_content)){ ?>
<!-- FileManager -->
<link type="text/css" rel="stylesheet" href="/frontend/filemanager/Css/FileManager.css" />
<link type="text/css" rel="stylesheet" href="/frontend/filemanager/Css/Additions.css" />
<script type="text/javascript" src="/frontend/filemanager/Source/FileManager.js"></script>
<script type="text/javascript" src="/frontend/filemanager/Source/Language/Language.da.js"></script>
<script type="text/javascript" src="/frontend/filemanager/Source/Additions.js"></script>
<script type="text/javascript" src="/frontend/filemanager/Source/Uploader/Fx.ProgressBar.js"></script>
<script type="text/javascript" src="/frontend/filemanager/Source/Uploader/Swiff.Uploader.js"></script>
<script type="text/javascript" src="/frontend/filemanager/Source/Uploader.js"></script>
<script type="text/javascript" src="/frontend/filemanager/filemanager.js"></script>
<!-- /FileManager -->
<?php } ?>
<?php if (isset($template_content) && preg_match('#class="(rich_text_editor|rich_text_editor_limited)"#', $template_content)){ ?>
<!-- TinyMCE -->
<script type="text/javascript" src="/frontend/tinymce/tiny_mce_gzip.js"></script>
<script type="text/javascript" src="/frontend/tinymce/config_gzip.js"></script>
<script type="text/javascript" src="/frontend/tinymce/config.js"></script>
<script type="text/javascript" src="/frontend/tinymce/plugins/tinybrowser/tb_tinymce.js.php"></script>
<!-- /TinyMCE -->
<?php } ?>