Вчитан е текст javascript async src. Асинхрони вчитување на JavaScript - забрзајте го вчитувањето на страницата. Додавање атрибути за одложување или асинхронизација во WordPress
29.06.2020
Здраво пријатели! Дали знаевте дека вчитувањето на JavaScript е едно од најголемите тесни грла во перформансите на веб -страниците? Денес мојата главна задача е да објаснам што е скрипта и како таа влијае на брзината и перформансите на страницата.
Прелистувачот што ја вчитува ознаката за скрипта престанува да ја прикажува страницата додека скриптата не се вчита и изврши. Страницата е блокирана и прелистувачот не одговара на дејствата на корисникот неколку секунди. Времето на одложување зависи од неколку фактори:
конфигурација,
брзина на интернет конекција,
големина на датотека и други ...
Поради оваа причина, Google PageSpeed Insights препорачува да се отстрани JavaScript од врвот на страницата што го блокира приказот. Добра практика е да поставите скрипти на дното на страницата, на пример, пред ознаката за затворање.
или поставување асинхроно вчитување.
Ако кодот за скрипта влијае на прикажувањето на горниот дел од страницата, не ставајте го во посебна датотека, туку вметнете го директно во HTML.
JS може да ја промени содржината на страницата, па дури и да се пренасочи на различен url. Во овој случај, поврзувањето на скриптата на крајот од документот ќе доведе до ефект на „грчење“ на страницата, вчитување нови или промена на постоечки елементи на врвот.
Примена на атрибутите за асинхронизација и одложување на ознаката за скрипта
Ајде да погледнеме што е асинхрона и одложена JavaScript работа и која е фундаменталната разлика помеѓу атрибутите за асинхронизација и одложување. Но, прво, да го погледнеме редоследот на обработка на документи со вообичаената врска на ознаката за скрипта.
< src = "example.js">
За илустративен пример, ќе ги користам следниве конвенции:
- обработка на страница - вчитување скрипта - извршување скрипта
Така, редоследот на обработка е како што следува:
Парсирањето на HTML -кодот е прекинато додека скриптата се вчитува и извршува, а потоа продолжува. Има задоцнување во прикажувањето на веб -страницата.
Одложи атрибут
Атрибутот за одложување овозможува прелистувачот да започне со вчитување на js датотеки паралелно, без да запре понатамошна обработка на страницата. Тие се извршуваат по целосно анализирање на моделот на објект на документ (накратко DOM), додека прелистувачот гарантира конзистентност врз основа на редоследот по кој се поврзани датотеките.
< одложи src = "example.js">
Атрибут Async
Поддршката за атрибутот async се појави во HTML5, овозможува прелистувачот да вчитува js датотеки паралелно и да се извршува веднаш по вчитувањето, без да се чека да се обработи остатокот од страницата.
< async src = "example.js">
Дијаграм на секвенца за обработка:
Ова е асинхрони преземања. Атрибутот се препорачува за скрипти што не влијаат значително на прикажувањето на документот. Тие вклучуваат бројачи за собирање статистика (Google Analytics, Yandex Metrica), кодови на рекламни мрежи (Yandex Advertising Network, Google Adsense), копчиња за социјални медиуми итн.
Брзината на вчитување веб -страница е еден од факторите за рангирање во Google.
Асинхроната JavaScript конекција го намалува времето на вчитување на страницата со елиминирање на доцнењето. Заедно со ова, препорачувам да ги компресирате и споите js -датотеките во една, на пример, користејќи библиотека. Корисниците сакаат брзи страници
Async and Defer - JavaScript стратегии за вчитување
JavaScript е суштински дел од секоја модерна веб -апликација, а стратегиите што ги избираме за вчитување директно влијаат врз перформансите на истата таа апликација. Во оваа статија, ќе се обидеме да ги разбереме важните разлики помеѓу секој пристап, добрите и лошите страни, како и импликациите за перформансите, и како да се оптимизира за интеракција на страницата и времето на вчитување.
За демонстрација, ќе создадам веб -страница што се состои од следниве надворешни зависности. Обрнете посебно внимание на соодветните големини на датотеки, бидејќи времето на преземање на датотеките е директно пропорционално со ова.
HTML - страница ~ 1 MB. Содржи вистинско обележување / содржина за да се прикаже динамичен излез од JavaScript.
Слика - image1.png ~ 5 Mb
JavaScript - file1.JS ~ 3MB е јадрото (главната датотека) javascript и зависи од HTML -парсирање. Потребно е да се прикаже динамична содржина или да се монтира реакција / аголна компонента на страницата.
JavaScript - file2.js ~ 460B е мала, независна javascript датотека што комуницира со домот.
JavaScript - file3.js ~ 1,5 MB е секундарна js датотека и зависи од file1.js за извршување на некој код со помал приоритет. Овој код не е потребен веднаш за рендерирање страница и интеракција со корисници; покажува икони на социјалните медиуми, коментари, помош преку Интернет, лансирање на некои аналитички задачи, итн.
Сега е време да ги анализираме различните пристапи
Пристап-1 [скрипти во главниот дел]
Во првиот случај, ќе ги вчитаме сите ознаки за скрипти во главниот дел на нашата HTML. Подолу е прикажана слика од анализата на јазичето на мрежата на хромираната страница, подготвена за интеракција со корисниците.
Позитивни страни:
Редоследот на извршување на кодот на различните JS -датотеки ќе се зачува по редослед по кој датотеките беа вклучени во HTML. Во тековниот пример, дури и ако датотеката2 и датотеката3 се вчитани пред датотеката1, редоследот на извршување ќе биде точен.
Минуси:
Во ова сценарио, HTML -парсирањето ќе биде паузирано додека не се вчитаат, анализираат и извршат сите 3 скрипти во делот за глава. Празен бел екран ќе му се прикаже на корисникот дури и ако HTML -датотеката е веќе вчитана [но не и анализирана]. Ова дефинитивно не е добро за употребливост.
Ниту една од горенаведените скрипти нема да може да пристапи / манипулира со HTML -страницата бидејќи DOM -от с is уште не е подготвен. Едно можно решение за справување со овој проблем е да го слушате настанот DOMContentLoaded и потоа да го извршите кодот после тоа. DOMContentLoaded Овој настан се активира кога оригиналниот HTML -документ е целосно вчитан и анализиран без да чекате да завршат вчитувањето на листовите за стилови, сликите.
Пристап-2 [скрипти на крајот]
За да ги надминеме двата проблеми со кои се соочуваме во првиот пристап, ајде да ги вчитаме сите 3 скрипти на дното на ознаката за телото.
Позитивни страни: HTML се анализира пред да се вчитаат скриптите, така што корисникот ќе може веднаш да ја види вистинската содржина, наместо да чека за скриптите.
Бидејќи сите скрипти се извршуваат откако ќе се анализира HTML, сите тие можат да пристапат до ДОМ за секаков вид манипулација. Редоследот на извршување на сценариото е зачуван.
Минуси:
Нема зголемување на перформансите како такво.
Пристап-3 [користејќи го атрибутот Async]
HTML5 го воведе атрибутот async скрипта, што помага при вчитување на соодветни датотеки за скрипта паралелно на друг тек без да влијае на анализата на HTML.
Меѓутоа, соодветната скрипта ќе се анализира и ќе се изврши веднаш штом ќе заврши со вчитувањето, без разлика дали е или не е завршено парсирањето на HTML, и ќе го упатува елементот DOM до таа одредена точка.
Овде можете јасно да видите дека file2.js е вчитан пред HTML -датотеката. Меѓутоа, додека прелистувачот ја вчитуваше датотеката2, тој не ја паузираше анализата на HTML и поради тоа, до моментот кога беше извршен, имаше врска до html -резервистот за вбризгување динамична содржина.
Позитивни страни:Бидејќи скриптите се вчитани на различна нишка, анализата на HTML нема да се паузира и корисникот ќе може да ја види непосредната содржина наместо бел празен екран. Главното зголемување на перформансите, односно времето на DOMContentLoaded се намали од 47,68 секунди на само 21,12 секунди и изнесува ~ 55% од добивката.
Минуси:
Редоследот на извршување на JS не е зачуван. Се извршува во соодветен редослед на вчитување, а не во вклучената секвенца на скрипта во HTML. Поддршка за прелистувачи - Не е поддржано на постари веб -прелистувачи, односно IE 9 и подолу.
Што се случува ако JS се вчита пред да биде достапен елементот DOM? Errorе се исфрли грешка.
Забелешка: Поставувањето скрипти со атрибут async на дното од делот на телото ќе биде бескорисно и еквивалентно на Пристап-2.
Пристап-4 [користејќи го атрибутот Одложи]
Атрибутот Defer ќе предизвика скриптата да се изврши само откако ќе заврши HTML -парсирањето. Една многу важна точка што треба да се има предвид тука е дека Chrome с yet уште не поддржува одложување и нема влијание врз времетраењето на DOMContentLoaded. Сепак, тој извршува скрипти на крајот од HTML -парсирањето.
Позитивни страни:
Редоследот на увоз на скрипти е зачуван. Значи file3.js се извршува само откако ќе заврши преземањето и да се изврши file1, дури и ако датотеката3 била вчитана порано.
Поддршка за прелистувач - има подобра поддршка за прелистувач во споредба со атрибутот async, односно делумно е поддржана во IE v6-9
Скриптите можат да пристапат до DOM бидејќи се извршува само откако ќе се анализира целосната HTML.
Минуси:
Првично мислев дека одложувањето ќе биде подобар избор отколку асинхронизирање, но подоцна открив дека Chrome с yet уште не го поддржува [верзија 71.0.3578.98] и нема влијание врз времетраењето на DOMContentLoaded.
Сепак, работи како што се очекуваше во Firefox со значителни подобрувања во перформансите.
заклучоци
Пожелно е да се постават ознаки за скрипти во главниот дел со атрибут за асинхронизација за библиотеки од трети страни кои зависат од Google Analytics, Google reCAPTCHA или што било друго што не бара пристап до DOM, бидејќи соодветните скрипти се вчитуваат паралелно, но се извршуваат веднаш На
Користете одложување за сите други скрипти вчитани во делот за глава, бидејќи тие исто така ќе бидат вчитани паралелно, но ќе се извршат само откако HTML ќе заврши со парсирање и DOM ќе биде подготвен за пристап / манипулација.
Можете исто така да ја користите комбинацијата на слушатели DOMContentLoaded во асинхрони скрипти за да извршите функционалност подоцна. Ве молиме оставете ги вашите мислења и заклучоци во коментарите, и со задоволство ќе разговарам за нив со вас.
Авторот на овој материјал сум јас - Јуриј Пахолков. Обезбедувам услуги за пишување програми во Јава, Ц ++, Ц # (како и консултации за нив) и креирање веб -страници. Работам со страници на CMS OpenCart, WordPress, ModX и самостојно напишани. Покрај тоа, јас работам директно со JavaScript, PHP, CSS, HTML - односно, можам да ја изменам вашата страница или да помогнам со веб -програмирање.
Скриптите за додатоци (JavaScript) го блокираат вчитувањето на HTML-кодот. Кога прелистувачот (парсерот) ќе стигне до ознаката
И следните примери покажуваат како да се стави (вградена) скрипта во внатрешноста на
Резервен модул
Прелистувачите што ја поддржуваат вредноста на модулот за атрибутот тип игнорираат секаква скрипта со номодул атрибут. Тоа ви овозможува да користите скрипти за модули додека истовремено обезбедувате резервни скрипти означени со номодули за прелистувачи што не поддржуваат.
Постои широко распространето верување дека е невозможно да се заработат пари преку Интернет без сопствена веб -страница или инвестирање лични средства. Ова не е вистина. Има тони ...
Честопати има дефекти, проблеми или едноставна желба за промена на фирмверот. До одредено време, уредот под официјална гаранција може да се ажурира ...
Одржувањето на групата Вконтакте е прилично комплициран процес и со погрешен пристап, можете да ја заебете целата работа. Во оваа статија ќе зборувам за важни ...
Измами пријатели бесплатно на VKontakte
Како навистина да заработите пари на Интернет без инвестиции за почетници Вистински начини да заработите пари на Интернет без инвестиции
Фактори на однесување при унапредување и работни методи за нивно подобрување
Како да дознаете и да го зголемите сообраќајот на страницата VKontakte
Примена на брзо полнење на телефонот Honor