Текст JavaScript Async SRC заредени. Asynchronow изтегляне javascript - ускорете зареждането на страницата. Добавяне на атрибути Отлагане или асинхтер в WordPress
29.06.2020
Поздрави, приятели! Знаете ли, че изтеглянето на JavaScript е едно от най-тесните места в представянето на сайта? Днес моята основна задача е да обясня какво е сценарът и как той засяга скоростта и изпълнението на сайта.
Браузърът зарежда етикета на скрипта спира описанието на страницата, докато скриптът бъде изтеглен и не е изпълнен. Страницата е блокирана и браузърът не отговаря на действията на потребителя. Времето за забавяне зависи от няколко фактора:
конфигурации
скорост на интернет връзка
размер на файла и други ...
Поради тази причина Google PagesPeed Insights Downloads Scields Analyzer препоръчва премахване на JavaScript кода от горната част на страницата блокиране на дисплея. Добрата практика е поставянето на скриптове в долната част на сайта, например, пред затварящия маркер
или определяне на асинхронно натоварване.
Ако кодът скрипт засяга дисплея на горната част на сайта - не го приемайте в отделен файл, но вградете директно в HTML.
JS може да промени съдържанието на сайта и дори да пренасочи към друг URL адрес. В този случай, скриптната връзка в края на документа ще доведе до "потрепване" ефект на страницата, зареждане на нови или смяна на съществуващите елементи в горната част.
Приложете атрибути за async и defer за скрипт маркер
Нека разберем, че това е асинхронна и отложена JavaScript Job и която е основната разлика между асинкулните и дефектните атрибути. Но първо помислете за последователността за обработка на документи в обичайното свързване на скрипта.
< src \u003d "Пример.js"\u003e
В зрителен пример ще използвам следната условна нотация:
- Обработка на страницата - изтегляне на скрипт - Изпълнение на скрипта
По този начин, последователността на обработка възниква в съответствие със следната схема:
Анализът на HTML-код се прекъсва по време на зареждане и изпълнение на скрипта, след което продължава. Дисплеят на уеб страницата се появява със закъснението.
Атрибут.
Атрибутът за отлагане позволява на браузъра да започне да зарежда JS файлове паралелно, без да спрете допълнителна обработка на страниците. Тяхното изпълнение възниква след пълно разпенване на обектния модел на документа (от модела на обекта на английски език, съкратено от DOM), докато браузърът гарантира последователност, основана на реда на свързване на файлове.
< defer src \u003d "Пример.js"\u003e
Атрибут асинх.
Поддръжката на атрибута Async се появява в HTML5, тя позволява на браузъра да изтегли паралелно JS файлове и да се изпълни веднага след зареждане, без да чака обработката на останалата част от страницата.
< async src \u003d "пример.js"\u003e
Диаграма за обработка на последователността:
Това е асинхронно натоварване. Атрибутът се препоръчва за такива скриптове, които нямат значително въздействие върху показването на документа. Те включват броячи за събиране на статистически данни (Google Анализ, метрика на Yandex), рекламни мрежови кодове (Yandex рекламна мрежа, Google Adsense), бутони за социални мрежи и т.н.
Скоростта на изтегляне на сайта е един от градоустройствените фактори.
Асинхронната връзка на JavaScript намалява времето за зареждане на страници поради липса на забавяне. Заедно с това препоръчвам компресиране и комбиниране на JS файлове в едно, например, използвайки библиотеката. Потребителите обичат бързи сайтове 😎
Async и defer - javascript изтегляне на стратегии
JavaScript е неразделна част от всяко модерно уеб приложение и стратегии, които решаваме да използваме, за да изтеглите пряко влиянието на това приложение. В тази статия ще се опитаме да разберем важни различия между всеки подход, плюсове и минуси. Заедно с ефектите от производителността и начините за оптимизиране на взаимодействието с времето на страницата и изтеглянето.
За да покажем, ще създам уебсайт, състоящ се от следните външни зависимости. Обърнете специално внимание на подходящите размери на файловете, тъй като времето за изтегляне на файлове е пряко пропорционално на това.
HTML - Page ~ 1 MB. Съдържа действително маркиране / съдържание, за да покаже някакъв динамичен изход от JavaScript.
Image - image1.png ~ 5 MB
JavaScript - File1.js ~ 3 MB е JavaScript и зависи от HTML синтактичния анализ. Необходимо е да се покаже динамично съдържание или да се монтира реакция / ъглов компонент на страницата.
JavaScript - File2.js ~ 460b е малък, независим JavaScript файл, който взаимодейства с DOM.
Javascript - File3.js ~ 1.5 MB е вторичен вторичен файл JS и зависи от файла1.js да изпълняват някои с по-нисък приоритет код. Този код не се изисква незабавно за предоставяне на страницата и взаимодейства с потребителя; Той показва икони на социални мрежи, коментари, онлайн помощ, стартиране на някои задачи на анализи и др.
Сега е време да анализираме различни подходи
Подход-1 [скриптове в главата секция]
В първия случай ще изтеглим всички скриптове в главата на нашия HTML. По-долу е скрийншот на раздела Chrome Page Network, готов да взаимодейства с потребителя.
Професионалисти:
Последователността на кода на различни JS файлове ще бъде запазена в реда, в който файловете са включени в HTML. В текущия пример, дори ако файлът2 и файла3 бяха изтеглени в File1, поръчката за изпълнение ще бъде правилна.
Минуси:
В този сценарий анализът на HTML синтаксиса ще бъде окачен, докато всички 3 скрипта са заредени в секцията на главата, анализирани и изпълнени. На потребителя ще бъде показан празен бял екран, дори ако HTML файлът вече е зареден [, но не е анализиран]. Това определено не е добро за използваемостта.
Нито едно от горните скриптове не може да има достъп / манипулиране на HTML страницата, тъй като DOM все още не е готова. Една от възможните решения за обработка на този проблем е слушането на събитието Domcontentloadload и след това изпълнението на кода след това. Domcontentloadddigital се задейства, когато HTML документът е напълно зареден и анализиран, без да чака качването на таблици за стил на изтегляне, изображения.
Подход-2 [скриптове в края]
За да преодолеете 2 проблема, с които се сблъскваме в първия подход, нека карам всички 3 скрипта в долната част на тялото.
Професионалисти: HTML се анализира преди изтегляне на скриптове, така че потребителят ще може да види действителното съдържание веднага, вместо да чака скриптове.
Тъй като всички скриптове се изпълняват след анализ на HTML, те могат да получат достъп до всякакви манипулации. Последователността на скриптовете се запазва.
Минуси:
Няма растеж на производителността като такъв.
Подход-3 [използване на атрибута ASYNC]
HTML5 въведе скрипта Async атрибут, който помага при изтеглянето на съответните скриптови файлове паралелно с друг поток, без да се засяга HTML синтаксисния анализ.
Въпреки това, съответният скрипт ще бъде анализиран и изпълнен веднага след приключването на изтеглянето, независимо дали HTML синтаксисният анализ е завършен и ще има позоваване на елемента DOM към тази конкретна точка.
Тук можете ясно да видите, че файла2.js е заредена в HTML файла. Въпреки това, докато браузърът е натоварващ файл2, той не спира синтактичния HTML анализ и поради това, до момента на неговото изпълнение, той имаше позоваване на HTML мястото за влизане в динамично съдържание.
Професионалисти: Тъй като скриптовете са заредени в друг поток, HTML синтаксисният анализ няма да бъде спрян и потребителят ще може да види незабавното съдържание вместо бял празен екран. Основното увеличение на производителността, т.е. DomContentloadered време намалява от 47.68 секунди до 21.12 секунди и е увеличение на ~ 55%.
Минуси:
Последователността на JS изпълнението не е запазена. Извършва се в съответния ред за зареждане и не е разрешена последователност от скриптове в HTML. Поддръжката на браузъра не се поддържа от стари уеб браузъри, т.е. 9 и по-долу.
Какво се случва, ако JS е зареден преди да бъде на разположение DOM елемент? Грешка ще бъде изхвърлена.
Забележка: Поставянето на скриптове с атрибута Async в долната част на секцията на тялото ще бъде безполезен и еквивалентен подход-2.
Подход-4 [използване на атрибута за отлагане]
Атрибутът за отлагане ще направи сценарий изпълнител само след приключване на HTML Parsing. Един много важен момент да се вземе предвид тук, е, че хром все още не подкрепя забавянето и не влияе на продължителността на Domcontent. Въпреки това, той извършва скриптове в края на HTML синтаксисния анализ.
Професионалисти:
Последователността на скриптовете за импортиране се запазва. Така че, файлът3.js се извършва само след приключване на изтеглянето и изпълнението на файла1, дори ако файлът3 е бил натоварен по-рано.
Поддръжка на браузър - тя има по-добра подкрепа за браузъри в сравнение с атрибута Asyns, т.е. частично поддържан в IE V6-9
Скриптовете могат да имат достъп до DOM, тъй като се извършва само след пълния HTML анализ.
Минуси:
Първоначално си мислех, че забавянето ще бъде най-добрият избор от асинхронността, но по-късно се установи, че хром все още не го подкрепя [версия 71.0.3578.98] и не засяга продължителността на DomContentload.
Въпреки това тя работи както се очаква, в Firefox със значително подобрение на изпълнението.
Констатации
За предпочитане е да се поставят скриптове в главата с атрибута Async за библиотеките на трети страни, които зависят от Google Анализ, Google recaptcha или нещо друго, което не изисква достъп до DOM, тъй като съответните скриптове са заредени успоредно, но се извършват съответните скриптове незабавно.
Използвайте defer за всички останали скриптове, изтеглени в главата, тъй като те също ще бъдат изтеглени паралелно, но ще бъдат изпълнени само след като HTML и DOM синтаксисният анализ е завършен готов за достъп / манипулация.
Можете също така да използвате комбинация от DomContentloaded слушател в асинхронни скриптове за извършване на функционалност по-късно. Моля, оставете вашите мнения и заключения в коментарите и аз ще се радвам да ги обсъждам с вас.
Авторът на този материал е аз - Pahwanks Yuri. Предоставям услуги за писане на програми в Java languages, C ++, C # (както и съветване върху тях) и създаване на сайтове. Работя с сайтове на CMS Opencart, WordPress, Modx и самостоятелно записан. В допълнение, работя директно с JavaScript, PHP, CSS, HTML - т.е. мога да променя уебсайта ви или да помогна с уеб програмиране.
Свързани скриптове (JavaScript) блокират зареждането на HTML кода. Когато браузърът (парсер) идва на етикета
