SlideShare ist ein Scribd-Unternehmen logo
1 von 7
External widgets
  performance
Проблема - внешние
виджеты и скрипты
     Страница виснет на парсинге.
Решение

• Добавление через DOM

• Связывание через
onload/onreadystatechange

• document.write()
   o Делаем свой document.write()

   o Выносим виджет в отдельный

невидимый элемент
   o Загружаем в скрытый iframe,

по onload копируем на страницу
Google Analytics Async
  Snippet
var ga = document.createElement(‘script’);
ga.type = ‘text/javascript’;
ga.async = true;
ga.src = (‘https:’ == document.location.protocol ?
‘https://ssl’ : ‘http://www’) + ‘.google-
analytics.com/ga.js’;var s =
document.getElementsByTagName(‘script’)[0];
s.parentNode.insertBefore(ga, s);
Рабочая модификация
<script>(function(d, s) {
  var js, fjs = d.getElementsByTagName(s)[0], load =
function(url, id) {
     if (d.getElementById(id)) {return;}
     js = d.createElement(s);
     js.src = url; js.id = id;
     fjs.parentNode.insertBefore(js, fjs);
  };
  load('widget1.js', 'fbjssdk');
  load('widget2.js', 'gplus1js');
  load('widget3.js', 'tweetjs');
}(document, 'script'));</script>
Преимущества подхода

• Страница не виснет из-за сторонних виджетов

• Управление всеми сторонними
виджетами из одного места

• Гарантия подключения узла
всего один раз
(благодаря присвоению идентификатора)
External Widgets Performance

Weitere ähnliche Inhalte

Was ist angesagt?

МРТ для данных, Frontend Conf 2016
МРТ для данных, Frontend Conf 2016МРТ для данных, Frontend Conf 2016
МРТ для данных, Frontend Conf 2016
Anastasia Goryacheva
 
CatalogLoader 2014 Belarus Minsk DNUG
CatalogLoader 2014 Belarus Minsk DNUGCatalogLoader 2014 Belarus Minsk DNUG
CatalogLoader 2014 Belarus Minsk DNUG
Nikolai Kekish
 
Радости и гадости регрессионного тестирования вёрстки / Алексей Малейков (HTM...
Радости и гадости регрессионного тестирования вёрстки / Алексей Малейков (HTM...Радости и гадости регрессионного тестирования вёрстки / Алексей Малейков (HTM...
Радости и гадости регрессионного тестирования вёрстки / Алексей Малейков (HTM...
Ontico
 
PayPal интеграция. Запрещенная лекция 18+
PayPal интеграция. Запрещенная лекция 18+PayPal интеграция. Запрещенная лекция 18+
PayPal интеграция. Запрещенная лекция 18+
XB Software, Ltd.
 

Was ist angesagt? (20)

По-настоящему ВИЗУАЛЬНОЕ построение лендинг-страниц на WP Gutenberg!
По-настоящему ВИЗУАЛЬНОЕ построение лендинг-страниц на WP Gutenberg!По-настоящему ВИЗУАЛЬНОЕ построение лендинг-страниц на WP Gutenberg!
По-настоящему ВИЗУАЛЬНОЕ построение лендинг-страниц на WP Gutenberg!
 
The art of Node.js or how to do something cool using public data by Ilya Zapr...
The art of Node.js or how to do something cool using public data by Ilya Zapr...The art of Node.js or how to do something cool using public data by Ilya Zapr...
The art of Node.js or how to do something cool using public data by Ilya Zapr...
 
МРТ для данных, Frontend Conf 2016
МРТ для данных, Frontend Conf 2016МРТ для данных, Frontend Conf 2016
МРТ для данных, Frontend Conf 2016
 
Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)
Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)
Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)
 
Everything You Need to Know About WP_Query, WordCamp Russia 2014
Everything You Need to Know About WP_Query, WordCamp Russia 2014Everything You Need to Know About WP_Query, WordCamp Russia 2014
Everything You Need to Know About WP_Query, WordCamp Russia 2014
 
Рендеринг может больше: vue.js vs React, Андрей Солодовников
Рендеринг может больше: vue.js vs React, Андрей СолодовниковРендеринг может больше: vue.js vs React, Андрей Солодовников
Рендеринг может больше: vue.js vs React, Андрей Солодовников
 
"Жизнь без интернета" Кувалдин Артём, Яндекс
"Жизнь без интернета" Кувалдин Артём, Яндекс"Жизнь без интернета" Кувалдин Артём, Яндекс
"Жизнь без интернета" Кувалдин Артём, Яндекс
 
#13 "Управление состоянием в Redux" Роман Сальников
#13 "Управление состоянием в Redux" Роман Сальников#13 "Управление состоянием в Redux" Роман Сальников
#13 "Управление состоянием в Redux" Роман Сальников
 
#12 "Создание двух desktop приложений на node-webkit и Electron” Михаил Реенко
#12 "Создание двух desktop приложений на node-webkit и Electron” Михаил Реенко#12 "Создание двух desktop приложений на node-webkit и Electron” Михаил Реенко
#12 "Создание двух desktop приложений на node-webkit и Electron” Михаил Реенко
 
#11 "Отзывчивый UI без блокировки Event Loop" Денис Речкунов
#11 "Отзывчивый UI без блокировки Event Loop" Денис Речкунов#11 "Отзывчивый UI без блокировки Event Loop" Денис Речкунов
#11 "Отзывчивый UI без блокировки Event Loop" Денис Речкунов
 
"Опыт разработки универсальной библиотеки визуальных компонентов в HeadHunter...
"Опыт разработки универсальной библиотеки визуальных компонентов в HeadHunter..."Опыт разработки универсальной библиотеки визуальных компонентов в HeadHunter...
"Опыт разработки универсальной библиотеки визуальных компонентов в HeadHunter...
 
Николай Сиварев "Приручая сайты"
Николай Сиварев "Приручая сайты"Николай Сиварев "Приручая сайты"
Николай Сиварев "Приручая сайты"
 
CatalogLoader 2014 Belarus Minsk DNUG
CatalogLoader 2014 Belarus Minsk DNUGCatalogLoader 2014 Belarus Minsk DNUG
CatalogLoader 2014 Belarus Minsk DNUG
 
#6 "Изоморфный фреймворк Catberry.js" Денис Речкунов
#6 "Изоморфный фреймворк Catberry.js" Денис Речкунов#6 "Изоморфный фреймворк Catberry.js" Денис Речкунов
#6 "Изоморфный фреймворк Catberry.js" Денис Речкунов
 
Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)
Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)
Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)
 
Vue.js и его брат-близнец Vue-server.js / Андрей Солодовников (НГС)
Vue.js и его брат-близнец Vue-server.js / Андрей Солодовников (НГС)Vue.js и его брат-близнец Vue-server.js / Андрей Солодовников (НГС)
Vue.js и его брат-близнец Vue-server.js / Андрей Солодовников (НГС)
 
base.network — пиринговый веб на JavaScript / Денис Глазков (Lazada Rus)
base.network — пиринговый веб на JavaScript / Денис Глазков (Lazada Rus)base.network — пиринговый веб на JavaScript / Денис Глазков (Lazada Rus)
base.network — пиринговый веб на JavaScript / Денис Глазков (Lazada Rus)
 
Радости и гадости регрессионного тестирования вёрстки / Алексей Малейков (HTM...
Радости и гадости регрессионного тестирования вёрстки / Алексей Малейков (HTM...Радости и гадости регрессионного тестирования вёрстки / Алексей Малейков (HTM...
Радости и гадости регрессионного тестирования вёрстки / Алексей Малейков (HTM...
 
#3 "Webpack и Vue.JS: Создание больших приложений и их расширение" Кирилл Кай...
#3 "Webpack и Vue.JS: Создание больших приложений и их расширение" Кирилл Кай...#3 "Webpack и Vue.JS: Создание больших приложений и их расширение" Кирилл Кай...
#3 "Webpack и Vue.JS: Создание больших приложений и их расширение" Кирилл Кай...
 
PayPal интеграция. Запрещенная лекция 18+
PayPal интеграция. Запрещенная лекция 18+PayPal интеграция. Запрещенная лекция 18+
PayPal интеграция. Запрещенная лекция 18+
 

Andere mochten auch

Andere mochten auch (20)

Testing schools overview
Testing schools overviewTesting schools overview
Testing schools overview
 
Mastering Java ByteCode
Mastering Java ByteCodeMastering Java ByteCode
Mastering Java ByteCode
 
Frontend Servers and NGINX: What, Where and How
Frontend Servers and NGINX: What, Where and HowFrontend Servers and NGINX: What, Where and How
Frontend Servers and NGINX: What, Where and How
 
IGears: Template Architecture and Principles
IGears: Template Architecture and PrinciplesIGears: Template Architecture and Principles
IGears: Template Architecture and Principles
 
QA evolution to the present day
QA evolution to the present dayQA evolution to the present day
QA evolution to the present day
 
Developing for e commerce is important
Developing for e commerce is importantDeveloping for e commerce is important
Developing for e commerce is important
 
QA evolution, in pictures
QA evolution, in picturesQA evolution, in pictures
QA evolution, in pictures
 
All things php
All things phpAll things php
All things php
 
Java serialization
Java serializationJava serialization
Java serialization
 
Databases on Client Side
Databases on Client SideDatabases on Client Side
Databases on Client Side
 
Quick Intro to Clean Coding
Quick Intro to Clean CodingQuick Intro to Clean Coding
Quick Intro to Clean Coding
 
Доступность веб-сайтов: WWW для всех?
Доступность веб-сайтов: WWW для всех?Доступность веб-сайтов: WWW для всех?
Доступность веб-сайтов: WWW для всех?
 
Модульные сетки в реальном мире - IQLab Frontend Fusion 2012
Модульные сетки в реальном мире - IQLab Frontend Fusion 2012Модульные сетки в реальном мире - IQLab Frontend Fusion 2012
Модульные сетки в реальном мире - IQLab Frontend Fusion 2012
 
Lupan big enterprise ecommerce fusion 2013
Lupan   big enterprise ecommerce fusion 2013Lupan   big enterprise ecommerce fusion 2013
Lupan big enterprise ecommerce fusion 2013
 
User focused design
User focused designUser focused design
User focused design
 
Гибкость и Структурированность Oбъектно Oриентированноя CSS
Гибкость и Структурированность Oбъектно Oриентированноя CSSГибкость и Структурированность Oбъектно Oриентированноя CSS
Гибкость и Структурированность Oбъектно Oриентированноя CSS
 
Getting to know magento
Getting to know magentoGetting to know magento
Getting to know magento
 
Manifest of modern engineers
Manifest of modern engineersManifest of modern engineers
Manifest of modern engineers
 
User Behavior: Interacting With Important Website Elements
User Behavior: Interacting With Important Website ElementsUser Behavior: Interacting With Important Website Elements
User Behavior: Interacting With Important Website Elements
 
Эффективный JavaScript - IQLab Frontend Fusion 2012
Эффективный  JavaScript - IQLab Frontend Fusion 2012Эффективный  JavaScript - IQLab Frontend Fusion 2012
Эффективный JavaScript - IQLab Frontend Fusion 2012
 

Ähnlich wie External Widgets Performance

всплывающее окно при закрытии сайта
всплывающее окно при закрытии сайта  всплывающее окно при закрытии сайта
всплывающее окно при закрытии сайта
Olga Pirozhenko
 
Knockout.JS на примере 2ГИС-Онлайн
Knockout.JS на примере 2ГИС-ОнлайнKnockout.JS на примере 2ГИС-Онлайн
Knockout.JS на примере 2ГИС-Онлайн
DevDay
 
KnockoutJS на примере 2ГИС-Онлайн
KnockoutJS на примере 2ГИС-ОнлайнKnockoutJS на примере 2ГИС-Онлайн
KnockoutJS на примере 2ГИС-Онлайн
2ГИС Технологии
 
Кроссбраузерные решения в рекламной сети Яндекса
Кроссбраузерные решения в рекламной сети ЯндексаКроссбраузерные решения в рекламной сети Яндекса
Кроссбраузерные решения в рекламной сети Яндекса
Media Gorod
 
Web весна 2013 лекция 10
Web весна 2013 лекция 10Web весна 2013 лекция 10
Web весна 2013 лекция 10
Technopark
 
Knockoutjs на примере 2ГИС-Онлайн
Knockoutjs на примере 2ГИС-ОнлайнKnockoutjs на примере 2ГИС-Онлайн
Knockoutjs на примере 2ГИС-Онлайн
2ГИС Технологии
 
Web осень 2012 лекция 10
Web осень 2012 лекция 10Web осень 2012 лекция 10
Web осень 2012 лекция 10
Technopark
 
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин ИльяDUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
it-people
 
iMetrics 2012. Станислав Видяев - Google Russia. Настройка, обзор системы, но...
iMetrics 2012. Станислав Видяев - Google Russia. Настройка, обзор системы, но...iMetrics 2012. Станислав Видяев - Google Russia. Настройка, обзор системы, но...
iMetrics 2012. Станислав Видяев - Google Russia. Настройка, обзор системы, но...
Artyom Tsiplakov
 
"Гибридное приложение: полгода после релиза" Легчилин Андрей, Парадеев Роман,...
"Гибридное приложение: полгода после релиза" Легчилин Андрей, Парадеев Роман,..."Гибридное приложение: полгода после релиза" Легчилин Андрей, Парадеев Роман,...
"Гибридное приложение: полгода после релиза" Легчилин Андрей, Парадеев Роман,...
it-people
 

Ähnlich wie External Widgets Performance (20)

всплывающее окно при закрытии сайта
всплывающее окно при закрытии сайта  всплывающее окно при закрытии сайта
всплывающее окно при закрытии сайта
 
XSS. Обходы фильтров и защит.
XSS. Обходы фильтров и защит.XSS. Обходы фильтров и защит.
XSS. Обходы фильтров и защит.
 
Knockout.JS на примере 2ГИС-Онлайн
Knockout.JS на примере 2ГИС-ОнлайнKnockout.JS на примере 2ГИС-Онлайн
Knockout.JS на примере 2ГИС-Онлайн
 
KnockoutJS на примере 2ГИС-Онлайн
KnockoutJS на примере 2ГИС-ОнлайнKnockoutJS на примере 2ГИС-Онлайн
KnockoutJS на примере 2ГИС-Онлайн
 
Кроссбраузерные решения в рекламной сети Яндекса
Кроссбраузерные решения в рекламной сети ЯндексаКроссбраузерные решения в рекламной сети Яндекса
Кроссбраузерные решения в рекламной сети Яндекса
 
course js day 4
course js day 4course js day 4
course js day 4
 
Изоморфные приложения и Python - Виталий Глибин, Huntflow
Изоморфные приложения и Python - Виталий Глибин, HuntflowИзоморфные приложения и Python - Виталий Глибин, Huntflow
Изоморфные приложения и Python - Виталий Глибин, Huntflow
 
Jsfwdays 2013-2
Jsfwdays 2013-2Jsfwdays 2013-2
Jsfwdays 2013-2
 
Web весна 2013 лекция 10
Web весна 2013 лекция 10Web весна 2013 лекция 10
Web весна 2013 лекция 10
 
Knockoutjs на примере 2ГИС-Онлайн
Knockoutjs на примере 2ГИС-ОнлайнKnockoutjs на примере 2ГИС-Онлайн
Knockoutjs на примере 2ГИС-Онлайн
 
Внедрение системы веб аналитики в информационный сайт
Внедрение системы веб аналитики в информационный сайтВнедрение системы веб аналитики в информационный сайт
Внедрение системы веб аналитики в информационный сайт
 
Web осень 2012 лекция 10
Web осень 2012 лекция 10Web осень 2012 лекция 10
Web осень 2012 лекция 10
 
2014 Jeeconf - Geb Spock
2014 Jeeconf - Geb Spock2014 Jeeconf - Geb Spock
2014 Jeeconf - Geb Spock
 
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин ИльяDUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
 
iMetrics 2012. Станислав Видяев - Google Russia. Настройка, обзор системы, но...
iMetrics 2012. Станислав Видяев - Google Russia. Настройка, обзор системы, но...iMetrics 2012. Станислав Видяев - Google Russia. Настройка, обзор системы, но...
iMetrics 2012. Станислав Видяев - Google Russia. Настройка, обзор системы, но...
 
Мастер-класс по Google Analytics
Мастер-класс по Google AnalyticsМастер-класс по Google Analytics
Мастер-класс по Google Analytics
 
"Гибридное приложение: полгода после релиза" Легчилин Андрей, Парадеев Роман,...
"Гибридное приложение: полгода после релиза" Легчилин Андрей, Парадеев Роман,..."Гибридное приложение: полгода после релиза" Легчилин Андрей, Парадеев Роман,...
"Гибридное приложение: полгода после релиза" Легчилин Андрей, Парадеев Роман,...
 
СВЯТ ЛОГИН «Як провести пошук на xss атаку» Online QADay 2020 #2
СВЯТ ЛОГИН «Як провести пошук на xss атаку» Online QADay 2020 #2СВЯТ ЛОГИН «Як провести пошук на xss атаку» Online QADay 2020 #2
СВЯТ ЛОГИН «Як провести пошук на xss атаку» Online QADay 2020 #2
 
JavaScript как объектно-ориентированный язык программирования
JavaScript как объектно-ориентированный язык программированияJavaScript как объектно-ориентированный язык программирования
JavaScript как объектно-ориентированный язык программирования
 
Appium для народа
Appium для народаAppium для народа
Appium для народа
 

Mehr von Ecommerce Solution Provider SysIQ (14)

Unexpected achievements 2013
Unexpected achievements 2013Unexpected achievements 2013
Unexpected achievements 2013
 
Developing for e commerce is important
Developing for e commerce is importantDeveloping for e commerce is important
Developing for e commerce is important
 
Magento code audit
Magento code auditMagento code audit
Magento code audit
 
Scalability and performance for e commerce
Scalability and performance for e commerceScalability and performance for e commerce
Scalability and performance for e commerce
 
non-blocking java script
non-blocking java scriptnon-blocking java script
non-blocking java script
 
Going global
Going globalGoing global
Going global
 
Going Global
Going GlobalGoing Global
Going Global
 
Seo and Marketing Requirements in Web Architecture
Seo and Marketing Requirements in Web ArchitectureSeo and Marketing Requirements in Web Architecture
Seo and Marketing Requirements in Web Architecture
 
Management and Communications (IPAA)
Management and Communications (IPAA)Management and Communications (IPAA)
Management and Communications (IPAA)
 
Speed Up Your Website
Speed Up Your WebsiteSpeed Up Your Website
Speed Up Your Website
 
Interactive web prototyping
Interactive web prototypingInteractive web prototyping
Interactive web prototyping
 
Модульные сетки в реальном мире
Модульные сетки в реальном миреМодульные сетки в реальном мире
Модульные сетки в реальном мире
 
Правила хорошего SEO тона в Frontend разработке
Правила хорошего SEO тона в Frontend разработкеПравила хорошего SEO тона в Frontend разработке
Правила хорошего SEO тона в Frontend разработке
 
Understanding Annotations in Java
Understanding Annotations in JavaUnderstanding Annotations in Java
Understanding Annotations in Java
 

External Widgets Performance

  • 1. External widgets performance
  • 2. Проблема - внешние виджеты и скрипты Страница виснет на парсинге.
  • 3. Решение • Добавление через DOM • Связывание через onload/onreadystatechange • document.write() o Делаем свой document.write() o Выносим виджет в отдельный невидимый элемент o Загружаем в скрытый iframe, по onload копируем на страницу
  • 4. Google Analytics Async Snippet var ga = document.createElement(‘script’); ga.type = ‘text/javascript’; ga.async = true; ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl’ : ‘http://www’) + ‘.google- analytics.com/ga.js’;var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(ga, s);
  • 5. Рабочая модификация <script>(function(d, s) { var js, fjs = d.getElementsByTagName(s)[0], load = function(url, id) { if (d.getElementById(id)) {return;} js = d.createElement(s); js.src = url; js.id = id; fjs.parentNode.insertBefore(js, fjs); }; load('widget1.js', 'fbjssdk'); load('widget2.js', 'gplus1js'); load('widget3.js', 'tweetjs'); }(document, 'script'));</script>
  • 6. Преимущества подхода • Страница не виснет из-за сторонних виджетов • Управление всеми сторонними виджетами из одного места • Гарантия подключения узла всего один раз (благодаря присвоению идентификатора)