Научете как да ускорите уеб страниците си, като промените своя JavaScript, за да премахнете тесните места.
JavaScript е жизненоважен за уеб разработката. Езикът стои зад по-голямата част от интерактивността и анимацията, които ще видите на уебсайтовете. Но JavaScript може също да доведе до забавяне на уебсайт, ако кодът е написан зле. Неефективността може да доведе както до лошо време за зареждане, така и до ниска скорост на изобразяване.
Възприемете следните практики, за да подобрите скоростта и ефективността на уебсайта си.
1. Дефинирайте променливите локално
Като програмист трябва да знаете как работи обхватът. В JavaScript има два типа променливи: локални променливи и глобални променливи.
Локалните променливи са променливи, декларирани във функционален блок. Обхватът остава само в рамките на функцията, в която са декларирани. Глобалните променливи са променливи, достъпни в целия скрипт. В случай на глобални променливи, обхватът остава в цялата програма.
Всеки път, когато се опитате да получите достъп до променлива, браузърът прави нещо, известно като търсене на обхват. Той проверява най-близкия обхват за променливата и продължава да търси, докато не намери променливата. По този начин, колкото повече верига от обхвати имате във вашата програма, толкова по-дълго ще отнеме достъп до променливи извън текущия обхват.
Поради тази причина е най-добре винаги да дефинирате вашите променливи по-близо до контекста на изпълнение. Използвайте глобални променливи само в редки случаи; когато искате да съхранявате данни, използвани в целия скрипт, например. Това ще намали броя на обхватите във вашата програма, като по този начин ще подобри производителността.
2. Заредете JavaScript асинхронно
JavaScript е език за програмиране с една нишка. Това означава, че след като една функция се изпълни, тя трябва да работи до края, преди да може да се изпълни друга функция. Тази архитектура може да доведе до ситуации, в които кодът може да блокира нишката и да замрази приложението.
За да поддържате нишката да работи добре, трябва да изпълнявате определени губещи време задачи асинхронно. Когато една задача се изпълнява в асинхронен режим, тя не заема цялата процесорна мощност на нишката. Вместо това функцията се присъединява към опашка от събития, където се задейства след изпълнението на всички други кодове.
Извикванията на API са идеални за асинхронния модел, тъй като разрешаването им отнема време. Така че вместо да го накарате да задържа нишката, бихте използвали библиотека, базирана на обещание, като API за извличане, за да извлечете данните асинхронно. По този начин друг код може да се изпълнява, докато браузърът извлича данни от API.
Разберете тънкостите на асинхронното програмиране и ще подобрите производителността на вашето приложение.
3. Избягвайте ненужните цикли
Използване на цикли в JavaScript може да бъде скъпо, ако не сте внимателни. Преминаването през колекция от елементи може да натовари много браузъра.
Въпреки че определено не можете да избегнете цикли в кода си, трябва да вършите възможно най-малко работа в тях. Можете да използвате други техники, които избягват необходимостта от преминаване през колекцията.
Например, можете да съхранявате дължината на масив в различна променлива, вместо да я четете по време на всяка итерация на цикъла. Ако получите това, което искате от един цикъл, излезте от него незабавно.
4. Минимизирайте JavaScript кода
Минимизирането е ефективен метод за оптимизиране на JavaScript код. Минимизаторът трансформира вашия необработен изходен код в по-малък производствен файл. Те премахват коментари, отрязват ненужния синтаксис и съкращават дългите имена на променливи. Те също така премахват неизползван код и оптимизират съществуващите функции, за да заемат по-малко редове.
Примери за минимизатори са Google Closure Compiler, UglifyJS и Microsoft AJAX minifier. Можете също така ръчно да минимизирате кода си, като го инспектирате и търсите начини да го оптимизирате. Например можете опростете изразите if във вашия код.
5. Компресирайте големи файлове с Gzip
Повечето клиенти използвайте Gzip за компресиране и декомпресиране големи JavaScript файлове. Когато браузър поиска ресурс, сървърът може да го компресира, за да върне по-малък файл в отговора. Когато клиентът получи файла, той го декомпресира. Като цяло този подход спестява честотна лента и намалява латентността, като подобрява производителността на приложението.
6. Минимизиране на достъпа до DOM
Достъпът до DOM може да повлияе на производителността на вашето приложение, тъй като браузърът трябва да се опреснява с всяка актуализация на DOM. Най-добре е да ограничите достъпа до DOM до възможно най-ниската честота. Един от начините да направите това е като съхранявате препратки към обекти на браузъра.
Можете също така да използвате библиотека като React, която прави промени във виртуалния DOM, преди да ги натисне към реалния DOM. В резултат на това браузърът актуализира частите от приложението, които се нуждаят от актуализиране, вместо да опреснява цялата страница.
7. Отложете ненужното зареждане на JavaScript
Въпреки че е важно страницата ви да се зарежда навреме, не е необходимо всички функции да работят при първоначалното зареждане. Да предположим, че имате бутон с възможност за кликване и меню с раздели, които препращат към JavaScript код; можете да отложите и двете, докато страницата се зареди.
Този метод освобождава мощност за обработка, което ви позволява да визуализирате необходимите елементи на страницата навреме. Забавяте компилирането на код, който може да задържи първоначалното показване на страницата. След това, след като страницата приключи със зареждането, можете да започнете да зареждате функционалностите. По този начин потребителят може да се наслади на бързо зареждане и да започне да взаимодейства с елементите навреме.
Можете също така да включите най-малкото количество CSS и JavaScript в елемента head, така че да се зарежда незабавно. След това вторичният код може да живее в отделни .css и .js файлове. Тази техника изисква добро познаване на как работи DOM.
8. Използвайте CDN за зареждане на JavaScript
Използването на мрежа за доставка на съдържание помага да се ускори времето за зареждане на страницата, но не винаги е ефективно. Например, ако изберете CDN без локален сървър в страната на посетителя, той няма да се възползва.
За да разрешите този проблем, можете да използвате инструменти за сравняване на няколко CDN и да решите кой предлага най-добрата производителност за вашия случай на употреба. За да научите кой CDN е най-подходящ за вашата библиотека, вижте cdnjs уебсайт.
9. Премахване на изтичане на памет
Изтичането на памет може да повлияе негативно на производителността на приложението. Течовете възникват, когато заредената страница заема все повече памет.
Пример за изтичане на памет е, когато вашият браузър започне да се забавя след дълга сесия на работа с приложението.
Можете да използвате инструментите за разработчици на Chrome, за да откриете изтичане на памет във вашето приложение. Инструментът записва времевата линия в раздела за ефективност. Много течове на памет възникват в резултат на премахване на DOM елементи. Събирачът на отпадъци ще освободи памет само след като всички променливи, препращащи към тези елементи, са извън обхвата.
Инструменти като Lighthouse, Google PageSpeed Insights и Chrome могат да ви помогнат да откриете проблеми. Lighthouse проверява за проблеми с достъпността, производителността и SEO. Google PageSpeed може да ви помогне да оптимизирате JavaScript, за да подобрите ефективността на приложението си.
Браузърът Chrome предоставя функция за инструменти за разработчици, която можете да превключвате, като щракнете върху F12 върху вашата ключова дума. Можете да използвате неговия анализ на производителността, за да включвате и изключвате мрежата и да проверявате консумацията на процесора. Той също така проверява други показатели, за да разкрие проблеми, засягащи вашия уебсайт.
Като уеб разработчик вие ще работите много във вашия уеб браузър. Повечето браузъри се доставят с набор от инструменти за разработчици, които да ви помогнат при отстраняване на проблеми с уебсайтове. Функцията за инструменти за разработчици на Google Chrome има много функции, които да ви помогнат.