Вопрос по performance, javascript – Лучшая практика для оптимизации загрузки JavaScript

5

Я прочитал несколько статей в Интернете об оптимизации загрузки JavaScript. Несколько ключевых моментов, которые я получил, - это минимизировать количество файлов скриптов (http-запросов), минимизировать и включить gzip на сервере. В настоящее время все, что я делаю, заключается в том, что все javascript-файлы минимизированы, и gzip можно просто включить.

Часть 1)

Моя проблема в том, что у меня около 20 файлов javascript, есть один файл common.js, который имеет все основные функции. Кроме того, каждая страница будет загружать хотя бы один файл, который реализует функциональность этой страницы.

Решение 1 состоит в том, чтобы объединить все сценарии в один большой файл сценария и загрузить его один раз для каждого клиента, что, по-видимому, и делают все остальные. Я предполагаю, что YUI или JSMin могут быть использованы для сжатия, поэтому я должен объединить файлы вручную?

Решение 2: отложенная загрузка, когда требуется требуемая функция, я действительно не знаю, как это работает, но кажется, что это способ сделать это, хотя все еще требуется больше запросов http. Я хотел бы услышать любые входные данные для этого.

Часть 2)

Веб-приложение, над которым я работаю, будет развернуто на многих других компьютерах, поскольку javascripts довольно мал, рекомендуется создать скрипт, который динамически загружает новейший скрипт с центрального сервера, чтобы каждый клиент запускал новейший скрипт ?

Подумать оheadjs.com. Matt Ball
После объединения основных сценариев, которые вам нужны на большинстве страниц, я бы автоматически загружал другие сценарии.gist.github.com/896561, Если вам нужен обратный вызов, в противном случае используйте async и отложите или обслужите их встроенными (что я и делаю) Jonathan Ong

Ваш Ответ

3   ответа
3

Solution 1 is valid, and there are tools out there to do this, including Google's Closure Compiler. The problem is in most cases it needs every single script on your site to be included in order to work properly, so regardless of what your page might use, it gets everything Solution 2 is also valid, but like you said doesn't really prevent the multiple http requests. But it's good in that it only loads what you need, when you need it, and doesn't create any blocking calls on the initial page load. Head.js is an option that was mentioned, as well as Require.js and others.

Часть 2:

There are ways to force the browser to always download the latest javascript file, although this kind of negates the benefit of browser caching. One common way is to add a get variable to the end of the javascript URL, i.e. "domain.com/index.js?timestamp=_123123123". This is similar to what jQuery does when you turn off caching for its ajax calls.
3

Merge into as few files as possible

Minify

Serve gzipped

Serve as late as possible (some may need to be in the head, but generally before or asynchronously is preferred

Это общий совет, вам нужно сделать это и проверить, чтобы убедиться, что он подходит для вашего случая.

Минимизация HTTP-запросов важна, задержка снижает производительность ...

2

Optimize source code: There are good practices to write JS code that has less DOM overhead, creating less variables and DOM elements in memory, efficient loops, etc. These usually cannot be optimised by script compiler. Minify: This has two solutions Merge into one file and minify.(use Google's Closure Compiler, Uglify) Minify each files, then lazy loading. I personally like to define my modules using AMD modular pattern. You can use a boot file to either choose to compile into one file or keep the module structure and lazy loading, but each of the module is minified too. Server optimisation Does your server serve gzipped javascript? Try to use <script src='//...' async defer> when possible, if you have script dependencies, be careful when using asycn loading. If you use AMD module, it will make sure your dependent modules are loaded in advance, and they only load once per page refresh. Use a CDN to serve your static content, store your images, files, javascript on a Content Delivery Network

Похожие вопросы