Tempi di caricamento e pesantezza pagine.

[axlman]

Ho letto parecchio in giro ma ancora non ho capito, dal punto di vista del caricamento della pagina, quali sono le differenze tra richiamare uno JavaScript esterno e metterlo invece direttamente nell'head della pagina stessa.

Ci sono delle differenze? Quale sistema conviene usare, potendo scegliere?

La stessa domanda me la ponevo riguardo al caricare un'immagine esterna piuttosto che mettere direttamente la sua codifica nell'HTML, tipo:

[img]data:image/gif;base64,R0lGODlhFAAYAPcCMUA0EP/mIP/////iIPraHPreHO7OGPbWHPLOGO7y8nllPGlVIOa+FKGZfea6FOrGGOrCFKGVeW1VCObm4t7e2tahDM6ZCOK2EN6uEPLWHNLOxtbSypGFYWVQHJlxBNbWzr6RCNqlDKWBDF1IFHlpQJ11CNquENra0vLSGHVlONKyFGFMGLaNDG1QCIllBHFdMGlICLqJCO7SHMKlFNq2FKWdha6NEJl9EKWZgaWJEJGFZZFxDK59BKF9CI1tCHVhNM6qFN6yELKREKqFDL4IegAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAfQAh+QQJyABEACwAAAAAFAAYAAAI/wCJCBxIsKDBgwQBIDSoUGDDhQUVSnwI0SEAigsTfKhBYsUKEjg2JFg4oYGEHCoMGAAiQkKDCQdPpLghg8AIABAAjGCwI8WJghQWzCAwAIAAASOO4mSxgMLABDqEEE168yJVBz04jCSiQUKGAQGMXhQwFsADExI0CIxgg2jYo0jhAjBwoUQEgQpoFAgQAMLNEX51QkDgAIQCgQse7OXLuHEBwhYWCOwAwW1jxgMI0LXQAa+KA2BXQLgMYcUDDIbXDkFANOdovq4ZhPBwl6sEBihar7gIQDQEDBZaqCWSgIMICAYOEFh+4IABCEEqeNA6MCgLBg8MIEBg4AEDDBV4dDBwSvDDDx8mLjhwcAFDCAsuXnw4OCFCixIgKlSI4QHGy4wbNKDACCMo0IBIFSUoUEAAIfkECQ8ARAAsAAAAABQAGACHQDQQ/+Yg/////+Ig+toc+t4c7s4Y9tYc8s4Y7vLyeWU8aVUg5r4UoZl95roU6sYY6sIUoZV5bVUI5ubi3t7a1qEMzpkI4rYQ3q4Q8tYc0s7G1tLKkYVhZVAcmXEE1tbOvpEI2qUMpYEMXUgUeWlAnXUI2q4Q2trS8tIYdWU40rIUYUwYto0MbVAIiWUEcV0waUgIuokI7tIcwqUU2rYUpZ2Fro0QmX0QpZmBpYkQkYVlkXEMrn0EoX0IjW0IdWE0zqoU3rIQspEQqoUMsniYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACP8AiQgcSLCgwYMEASA0qFBgw4UFFUp8CNEhAIoLE3yoQWLFChI4NiRYOKGBhBwqDBgAIkJCgwkHT6S4IYNAgQIEDhhgsCPFiYIUFswgMGBAgABFCWSAwGIBhYEJdAgherQqUgIIHPTgMJKIBgkZjFqtWuDAAxMSNAiMYIMohBEXR7yNC+FCiQgCFdAoMHZsgawgFAhc8IBvX7JZLSwQ2AEC1cMDCBi4YKFDXhUHjMod+/YBhsBrhyBwCwBCVQgAEDAI4QGvVwkMULiFGxcFBAwWWqglkoCDCAgGDhAYfkAnhCAVPHAdGJQFgwcGECAw8IABhgo8Ojwl+OGHDxMXHDgluIAhhAUXLz4cnBChRQkQFSrE8ADjZcYNDRSMGKGggciKAAoUEAAh+QQJFABEACwAAAAAFAAYAIdANBD/5iD/////4iD62hz63hzuzhj21hzyzhju8vJ5ZTxpVSDmvhShmX3muhTqxhjqwhShlXltVQjm5uLe3trWoQzOmQjithDerhDy1hzSzsbW0sqRhWFlUByZcQTW1s6+kQjapQylgQxdSBR5aUCddQjarhDa2tLy0hh1ZTjSshRhTBi2jQxtUAiJZQRxXTBpSAi6iQju0hzCpRTathSlnYWujRCZfRClmYGliRCRhWWRcQyufQShfQiNbQh1YTTOqhTeshCykRCqhQynFewAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAI/wCJCBxIsKDBgwQBIDSoUGDDhQUVSnwI0SEAigsTfKhBYsUKEjg2JFg4oYGEHCoMGAAiQkKDCQdPpLghg8AIABAAjGCwI8WJghQWzCAwAIAAASOO4mSxgMLABDqEEE168yJVBz04jCSiQUKGAQGMXhQwFsADExI0CIxgg2jYo0jhAjBwoUQEgQpoFAgQAMLNEX51QkDgAIQCgQse7OXLuHEBwhYWCOwAwW1jxgMI0LXQAa+KA2ABX/b7AIPhtUMQEM0JgXFOBAxCeLjLVQIDFKur6kQBAYOFFmqJJOAgAoKBAwSSHzhgAEKQCh60DgzKgsEDAwgQGHjAAEMFHh2cEi788MOHiQsOHFzAEMKCixcfDk6I0KIEiAoVYniA8TLjhgYKjDCCAg2IVNGBAgUEACH5BAkPAEQALAAAAAAUABgAh0A0EP/mIP/////iIPraHPreHO7OGPbWHPLOGO7y8nllPGlVIOa+FKGZfea6FOrGGOrCFKGVeW1VCObm4t7e2tahDM6ZCOK2EN6uEPLWHNLOxtbSypGFYWVQHJlxBNbWzr6RCNqlDKWBDF1IFHlpQJ11CNquENra0vLSGHVlONKyFGFMGLaNDG1QCIllBHFdMGlICLqJCO7SHMKlFNq2FKWdha6NEJl9EKWZgaWJEJGFZZFxDK59BKF9CI1tCHVhNM6qFN6yELKREKqFDAFUIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAj/AIkIHEiwoMGDBAEgNKhQYMOFBRVKfAjRIQCKCxN8qEFixQoSODYkWDihgYQcKgwYACJCQoMJB0+kuCGDQIECBA4YYLAjxYmCFBbMIDBgQIAARQlkgMBiAYWBCXQIIXq0KlICCBz04DCSiAYJGYxarVrgwAMTEjQIjGCDKIQRF0e8jQvhQokIAhXQKDB2bIGsIBQIXPCAb1+yWS0sENgBAtXDAwgYuGChQ14VB4zKHfv2AYbAa4cgcAvAKgQACBiE8IDXqwQGKNzCjYsCAgYLLdQSScBBBAQDBwgIP6ATQpAKHrgODMqCwQMDCBAYeMAAQwUeHZ4S/PDDh4kLDhxcJMAQwoKLFx8OTojQogSIChVieIDxMuOGBgpGjFDQQGTF/wIFBAAh+QQJLAFEACwAAAAAFAAYAIdANBD/5iD/////4iD62hz63hzuzhj21hzyzhju8vJ5ZTxpVSDmvhShmX3muhTqxhjqwhShlXltVQjm5uLe3trWoQzOmQjithDerhDy1hzSzsbW0sqRhWFlUByZcQTW1s6+kQjapQylgQxdSBR5aUCddQjarhDa2tLy0hh1ZTjSshRhTBi2jQxtUAiJZQRxXTBpSAi6iQju0hzCpRTathSlnYWujRCZfRClmYGliRCRhWWRcQyufQShfQiNbQh1YTTOqhTeshCykRCqhQwWWzYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAI/wCJCBxIsKDBgwQBIDSoUGDDhQUVSnwI0SEAigsTfKhBYsUKEjg2JFg4oYGEHCoMGAAiQkKDCQdPpLghg8AIABAAjGCwI8WJghQWzCAwAIAAASOO4mSxgMLABDqEEE168yJVBz04jCSiQUKGAQGMXhQwFsADExI0CIxgg2jYo0jhAjBwoUQEgQpoFAgQAMLNEX51QkDgAIQCgQse7OXLuHEBwhYWCOwAwW1jxgMI0LXQAa+KA2ABX/b7AIPhtUMQEM0JgXFOBAxCeLjLVQIDFKur6kQBAYOFFmqJJOAgAoKBAwSSHzhgAEKQCh60DgzKgsEDAwgQGHjAAEMFHh2cEi788MOHiQsOHFzAEMKCixcfDk6I0KIEiAoVYniA8TLjhgYKjDCCAg2IVNGBAgUEACH5BAkPAEQALAAAAAAUABgAh0A0EP/mIP/////iIPraHPreHO7OGPbWHPLOGO7y8nllPGlVIOa+FKGZfea6FOrGGOrCFKGVeW1VCObm4t7e2tahDM6ZCOK2EN6uEPLWHNLOxtbSypGFYWVQHJlxBNbWzr6RCNqlDKWBDF1IFHlpQJ11CNquENra0vLSGHVlONKyFGFMGLaNDG1QCIllBHFdMGlICLqJCO7SHMKlFNq2FKWdha6NEJl9EKWZgaWJEJGFZZFxDK59BKF9CI1tCHVhNM6qFN6yELKREKqFDMeH+gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAj/AIkIHEiwoMGDBAEgNKhQYMOFBRVKfAjRIQCKCxN8qEFixQoSODYkWDihgYQcKgwYACJCQoMJB0+kuCGDQIECBA4YYLAjxYmCFBbMIDBgQIAARQlkgMBiAYWBCXQIIXq0KlICCBz04DCSiAYJGYxarVrgwAMTEjQIjGCDKIQRF0e8jWvgQokIAhXQKDB2bIGsIBQIXPCAb1+yWS0sENgBAtXDAwjUtdAhr4oDRuWOffsAQ+C1QxC4BQChKgQACBiE8IDXqwQGKNzCjYsCAgYLLdQSScBBBAQDBwgIP6ATQpAKHrgODMqCwQMDCBAYeMAAQwUeHZ4S/PDDh4kLDhxcJMAQwoKLFx8OTojQogSIChVieIDxMuOGBgpGjFDQQGTF/wIFBAA7[/img]

In quest'ultimo caso mi riferisco a piccole immagini che devono essere caricate molte volte in una pagina (tipo icone dei social network dopo ogni post in un blog, oppure gli smiley) e ho messo tutto il codice di una di esse per dare l'idea della pesantezza: conviene caricarle esternamente ogni volta che si usano (ciò significa qualche decina di volte ogni pagina), oppure usare direttamente la loro codifica?

Qualcuno può darmi una dritta in tal senso? Grazie anticipate a chi volesse illuminarmi.

[Kimerio]

Se inserisci un javascript nell'head della pagina, questo verrà caricato ogni volta insieme alla pagina stessa rendendo il file più grande (rallentando il caricamento della pagina); se invece metti il javascript in un file questo finisce nella cache del browser e viene caricato solo la prima volta, in questo caso hai una pagina più leggera e un file che rimane in copia cache sul computer del visitatore diminuendo i tempi di scaricamento della pagina.

Nello stesso modo puoi ragionare per le immagini, aggiungendo che la sintassi che hai usato tu non viene supportata da tutti i browser.

In linea di massima ti conviene sempre separare javascript e (x)html anche per rispettare i tre livelli teorici di un sito che sono
[list=1][*]Contenuti (html)[*]Aspetto (css)[*]Comportamento (javascript)[/list=1]
Questi (per avere un sito strutturato bene) dovrebbero essere completamente separati, quindi niente tag <script> e attributi style nella pagina html