Pull to refresh

Оптимизация JavaScript для ускорения загрузки веб-страниц

JavaScript *
Инженер из компании Google, автор трёх книг по веб-производительности и оптимизации, Стив Содерс (Steve Souders) опубликовал презентацию "JavaScript Perfomance" о том, какие методы нужно применять, чтобы скрипты меньше тормозили загрузку страниц.

По статистике WebPagetest, блокировка загрузки файлов .js на сайтах из Alexa Top 100 снижает среднее по медиане время загрузки страницы c 3,65 с до 2,487 с, то есть на 31%. Если вы видите медленную загрузку веб-страниц и хотите улучшить этот показатель, то, по мнению Стива Содерса, первым делом нужно посмотреть на JavaScript.

В качестве примера оптимизации Стив Содерс приводит сниппет Google Analytics.

var ga = document.createElement(‘script’);
ga.type = ‘text/javascript’;
ga.async = true;
ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl’ : ‘http://www’) + ‘.google-analytics.com/ga.js’;
var s = document.getElementsByTagName(‘script’)[0];
s.parentNode.insertBefore(ga, s);

Особое внимание он обращает на строчку

ga.async = true;

Этот параметр означает, что скрипт ga.js не будет блокировать исполнение других асинхронных скриптов.

Ещё один момент — инструкция insertBefore. Оказывается, некоторые браузеры блокируют выполнение скриптов, если ещё не загружен скрипт с инструкцией insertBefore. Естественно, это замедляет загрузку страницы. Другими словами, такие браузеры будут ждать, пока на странице не загрузится модуль Google Analytics, и до этого момента все остальные скрипты блокируются. Параметр ga.async = true исправляет ситуацию во многих современных браузерах. Но не во всех.

Стив Содерс сделал специальную страничку, чтобы выявить те версии браузеров, которые игнорируют инструкцию ga.async = true при наличии insertBefore. Он собрал статистику с 60+ различных браузеров — как видно в таблице по ссылке, главным «нарушителем» является браузер Opera. Запустить тест и провериться можно здесь.

В презентации "JavaScript Perfomance" Стив Содерс говорит о модуле для ускорения загрузки скриптов ControlJS, а также об использовании localStorage в качестве кэша.

Tags: производительность JavaScriptвремя загрузки страницыасинхронный скриптinsertBeforeControlJS
Hubs: JavaScript
Total votes 40: ↑31 and ↓9 +22
Comments 12
Comments Comments 12

Popular right now