асинхронный синтаксис загрузки файла .js

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

Метод Один

(function() { 
    var d=document, 
    h=d.getElementsByTagName('head')[0], 
    s=d.createElement('script'); 
    s.type='text/javascript'; 
    s.src='/js/myfile.js'; 
    h.appendChild(s); 
})(); /* note ending parenthesis and curly brace */

Второй метод (пила это в коде Facebook,)

(function() { 
    var d=document, 
    h=d.getElementsByTagName('head')[0], 
    s=d.createElement('script'); 
    s.type='text/javascript'; 
    s.async=true; 
    s.src='/js/myfile.js'; 
    h.appendChild(s); 
}()); /* note ending parenthesis and curly brace */

источник

2010-05-05 taber

Единственная разница, что я замечаю в методе Facebook s.async=true; ,

В async и defer атрибуты Булевы атрибуты, которые указывают, как должен быть выполнен сценарий.

Существует три возможных режима, которые могут быть выбраны с использованием этих атрибутов. Если присутствует атрибут async, скрипт будет выполняться асинхронно, как только он будет доступен. Если атрибут async отсутствует, но атрибут defer присутствует, тогда скрипт выполняется, когда страница закончила разбор. Если ни один атрибут не присутствует, сценарий извлекается и выполняется немедленно, прежде чем пользовательский агент продолжит анализ страницы.

Источник и дальнейшее чтение: Whatwg.org HTML 5: The script element

Что касается преимуществ, вы можете проверить, что Google должен был сказать об этом в декабре прошлого года:

Google Analytics Launches Asynchronous Tracking

источник

2010-05-05 15:10:41

Круто, спасибо. Разве s.asynch = true бессмысленно в этом случае, поскольку скрипт вводится в главный тег? И что касается синтаксиса в скобках: (function() {...})(); vs: (function() {...}()); - Это почти одинаково? – taber

@taber: Да, синтаксис скобок достигает той же цели. т.е.: функция вычисляется как выражение функции вместо оператора функции. См. Http://stackoverflow.com/questions/440739/what-do-parentheses-surrounding-a-javascript-objectfunctionclass-declaration/442408#442408 и http://stackoverflow.com/questions/1634268/explain-javascripts- encapsulated-anonymous-function-syntax/1634321 # 1634321 (особенно последний комментарий). –

@taber: Я не думаю, что факт, что он вставлен в '', имеет значение. (Но у меня нет ссылок или тестов, чтобы поддержать это). –

I играли с этим и создали для этого библиотеку, которая включает в себя поддержку для запуска обратного вызова, когда скрипт в конечном итоге загружается.

Sigma.async_script_load('http://example.com/underscore-min.js', '_', function() { 
    _([1,2,3,2,3,1]).uniq(); 
});

https://github.com/ssoroka/sigma

источник

2010-12-14 01:42:58

асинхронный синтаксис загрузки файла .js

ответ

Смежные вопросы