За последние 24 часа нас посетили 17519 программистов и 1649 роботов. Сейчас ищут 942 программиста ...

Объединение внешних Javascript'ов

Тема в разделе "JavaScript и AJAX", создана пользователем Paulplus, 16 янв 2011.

  1. Paulplus

    Paulplus Активный пользователь

    С нами с:
    30 июн 2010
    Сообщения:
    21
    Симпатии:
    0
    Адрес:
    Украина
    Здравствуйте!
    Я столкнулся с проблемой объединения внешних яваскриптов. Для чего это мне нужно: решил ускорить загрузку сайта. Пользуюсь PAGE SPEED в мозилле. Одна из рекомендаций по ускорению это "Combine external JavaScript". Как это делается - не имею ни малейшего понятия. У меня десяток скриптов, как их объединить в один, но чтобы вызывались они потом каждый в своём месте?
    Подскажите пожалуйста что и где мне почитать на русском языке на эту тему чтобы разобраться и сделать всё вручную, или может есть онлайн сервисы решающие эту проблему автоматически?
    Заранее спасибо.

    Вот что пишет на это счёт PAGE SPEED на английском:

    Combine external JavaScript

    Overview
    Combining external scripts into as few files as possible cuts down on RTTs and delays in downloading other resources.

    Details
    Good front-end developers build web applications in modular, reusable components. While partitioning code into modular software components is a good engineering practice, importing modules into an HTML page one at a time can drastically increase page load time. First, for clients with an empty cache, the browser must issue an HTTP request for each resource, and incur the associated round trip times. Secondly, most browsers prevent the rest of the page from from being loaded while a JavaScript file is being downloaded and parsed. (For a list of which browsers do and do not support parallel JS downloads, see Browserscope.)

    Here is an example of the download profile of an HTML file containing requests for 13 different .js files from the same domain; the screen shot is taken from Firebug's Net panel over a DSL high-speed connection with Firefox 3.0+:

    All files are downloaded serially, and take a total of 4.46 seconds to complete. Now here is the the profile for the same document, with the same 13 files collapsed into 2 files:

    The same 729 kilobytes now take only 1.87 seconds to download. If your site contains many JavaScript files, combining them into fewer output files can dramatically reduce latency.

    However, there are other factors that come into play to determine the optimal number of files to be served. First, it's important also to defer loading JS code that is not needed at a page's startup. Secondly, some code may have different versioning needs, in which case you will want to separate it out into files. Finally, you might have to serve JS from domains that you don't control, such as tracking scripts or ad scripts. We recommend a maximum of 3, but preferably 2, JS files.

    It often makes sense to use many different JavaScript files during the development cycle, and then bundle those JavaScript files together as part of your deployment process. See below for recommended ways of partitioning your files. You would also need to update all of your pages to refer to the bundled files as part of the deployment process.
    Recommendations

    Partition files optimally.
    Here are some rules of thumb for combining your JavaScript files in production:

    * Partition the JavaScript into 2 files: one JS containing the minimal code needed to render the page at startup; and one JS file containing the code that isn't needed until the page load has completed.
    * Serve as few JavaScript files from the document <head> as possible, and keep the size of those files to a minimum.
    * Serve JavaScript of a rarely visited component in its own file. Serve the file only when that component is requested by a user.
    * For small bits of JavaScript code that shouldn't be cached, consider inlining that JavaScript in the HTML page itself.

    Position scripts correctly in the document head.
    Whether a script is external or inline, it's beneficial to position it in the correct order with respect to other elements, to maximize parallel downloads.