- Использование lazy-loading для .js-файлов
При генерации страницы среда последовательно считывает содержимое html-кода. Если в процессе генерации попадается тег <script> с указанием на загрузку скрипта из внешнего источника – парсинг страницы прекращается до момента загрузки и выполнения попавшего скрипта. Тем самым, если скрипты объемные либо соединение нестабильное и медленное, построение страницы может затянутся на длительное время, даже если скрипт используется совсем для других целей. Для избежания проблем с залипанием процесса рендеринга страницы используется механизм, так называемого, динамической загрузки скриптов или иньекции скриптов. Данный механизм позволяет последовательно генерировать страницу без ожидания загрузки скриптов, в том время как сами скрипты автоматически будут выполнены после загрузки, паралельно построению layout-а.
1: //bad
2: <div id="splash"/>
3: <script src="my-script-file.js" type="text/javascript"></script>
4:
5: //good
6: <div id="splash"/>
7: // JavaScript
8: function loadScript(src, callback) {
9: var head = document.getElementsByTagName('head')[0],
10: script = document.createElement('script');
11: done = false;
12: script.setAttribute('src', src);
13: script.setAttribute('type', 'text/javascript');
14: script.setAttribute('charset', 'utf-8');
15: script.onload = script.onreadstatechange = function() {
16: if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {
17: done = true;
18: script.onload = script.onreadystatechange = null;
19: if (callback) {
20: callback();
21: }
22: }
23: }
24: head.insertBefore(script, head.firstChild);
25: }
26:
27: // load the my-script-file.js and display an alert dialog once the script has been loaded
28: loadScript('my-script-file.js', function() { alert('my-script-file.js loaded.'); });
- Использование http-заголовков Expires для загружаемых скриптов
Данный механизм позволяет не загружать скрипты, если локальная копия еще имеет не просроченное время срока жизни. Тем самым, после первого посещения сайта загруженные и сохраненные в локальном кеше скрипты можно будет повторно использовать без перезагрузки.
- Сжатие передаваемых скриптов посредстов Gzip-компрессии
- Объединение нескольких скриптов в один – это позволит уменьшить количество http-запросов к серверу, а, соответственно, и время ожидания загрузки всех скриптов
- Использовать при возможности несколько мест хранения скриптов с разными адрессами, что позволит распаралелить загрузку
- Не использовать inline-скрипты – встроенные в страницу, выносите их в отдельных файл. При последующей загрузке страницы будет использована локальная копия скриптового файла, а не загружать регулярно при загрузке страницы
- Для уменьшения скорости построения страницы старайтесь использовать минимально возможное количество DOM-элементов
1: //получить количество DOM-элементов на странице
2: var n = document.getElementsByTagName('*').length;
- Если есть возможность – изменяйте свойства DOM-объекта в состоянии – не видим.
1: var subElem = document.createElement('div'),
2: elem = document.getElementById('animated');
3: elem.style.display = 'none';
4: elem.appendChild(subElem);
5: elem.style.width = '320px';
6: elem.style.display = 'block';
- Не считывайте следующие свойства без необходимости – это приводит к изменению положения элемента и перепроверке положения последующих: getComputedStyle, offsetWidth, scrollWidth и clientWidth
1: //slow
2: var elem = document.getElementById('animated');
3: elem.style.fontSize = (elem.offsetWidth / 10) + 'px';
4: elem.firstChild.style.marginleft = (elem.offsetWidth / 20) + 'px';
5:
6: //faster
7: var elem = document.getElementById('animated'),
8: elemWidth = elem.offsetWidth;
9: elem.style.fontSize = (elemWidth / 10) + 'px';
10: elem.firstChild.style.marginleft = (elemWidth / 20) + 'px';
- Вместо измнения нескольких стилей элемента последовально, лучше использовать назвачение отдельного css-класса
1: //slow
2: var elem = document.getElementById('styled');
3: elem.style.background = 'blue';
4: elem.style.color = 'white';
5:
6: //Faster
7: <style type="text/css">
8: div { background: white; color: black; }
9: div.active { background: blue; color: white; }
10: </style>
11: var elem = document.getElementById('styled').className = 'active';
- Чтобы не создавать отдельный css-класс – можно использовать метод setAttribute для назначения нескольких свойст за раз
1: var elem = document.getElementById('styled');
2: elemStyle = 'background: blue; color: white;';
3: elem.setAttribute('style', elemStyle);
- сохранять найденные элементы в переменные при необходимости повторного их использования
1: //slow
2: document.getElementById('elem').propertyOne = 'value of first property';
3: document.getElementById('elem').propertyTwo = 'value of second property';
4: document.getElementById('elem').propertyThree = 'value of third property';
5:
6: //faster
7: var elem = document.getElementById('elem');
8: elem.propertyOne = 'value of first property';
9: elem.propertyTwo = 'value of second property';
10: elem.propertyThree = 'value of third property'