Оптимизация на кода - как да накарате страниците да отслабнат - javascript - 35 - Game And Me
Зареждайте съдържание на трети страни асинхронно
Кой никога не е качвал съдържание на трети страни (видеоклип в YouTube или бутон за чуруликане) ?
Големият проблем е, че тези кодове не винаги се доставят ефективно, или чрез потребителско влизане, или чрез връзката на сървъра, където са хоствани. Тази услуга може също да бъде временно недостъпна или дори блокирана от потребителя или от защитната стена на тяхната компания.
За да предотвратите това да се превърне в решаващ проблем при зареждане на сайт, заключете цялото зареждане на страницата и винаги зареждайте тези кодове асинхронно (или използвайте приятелски iFrames).
Дължините на таблиците
Едно от най-важните неща за производителността с JavaScript е цикълът. Опитайте се да оптимизирате логиката в цикъл, така че всяка итерация да се извършва ефективно.
Един от начините да направите това е да съхраните размера на масива, който ще бъде покрит, така че да не се налага да се преизчислява всеки път, когато цикълът се повтори.
> Забележка: Въпреки че съвременните браузъри автоматично оптимизират този процес, все още има добра практика, базирана на съществуващи браузъри, които продължават.
В колекции под формата на списък с възли (NodeList), генерирани например от document.getElementsByTagName ('a'), това е особено важно. Тези колекции се считат за „на живо“, т.е. те се актуализират автоматично, когато се правят промени в елемента, към който принадлежи възелът.
Избягвайте document.write
Използването на document.write води до пълно зареждане на зависимостта от зареждането на страницата.
Тази (лоша) практика е премахната в продължение на години от разработчиците, но все още има случаи, при които използването й все още е необходимо, например в случай на синхронно връщане за JavaScript файл.
Boilerplate HTML5, например, използва тази техника за локално зареждане на jQuery, ако CDN на Google не реагира.
> Внимание: document.write, извършен по време или след събитието window.onload, замества цялото съдържание на текущата страница.
Резултатът от последната страница ще бъде само лента, а не foobar, както се очаква. Същото се случва веднага след събитието window.onload .
Резултатът е същият като предишния пример, ако функцията, програмирана от setTimeout, се изпълнява след събитието window.onload .
Намалете пренастройките на дисплея
Пренастройките се причиняват, когато има процес на повторно изобразяване на DOM, когато се променят определени свойства или елементи.
Те се задействат, когато външният вид на елемент се променя, без да се променя оформлението му. Никол Съливан описва това като промяна на стилове като промяна на цвета на фона .