SlideShare una empresa de Scribd logo
1 de 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

Más contenido relacionado

La actualidad más candente

По-настоящему ВИЗУАЛЬНОЕ построение лендинг-страниц на WP Gutenberg!
По-настоящему ВИЗУАЛЬНОЕ построение лендинг-страниц на WP Gutenberg!По-настоящему ВИЗУАЛЬНОЕ построение лендинг-страниц на WP Gutenberg!
По-настоящему ВИЗУАЛЬНОЕ построение лендинг-страниц на WP Gutenberg!Yevhen Kotelnytskyi
 
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...OdessaJS Conf
 
МРТ для данных, Frontend Conf 2016
МРТ для данных, Frontend Conf 2016МРТ для данных, Frontend Conf 2016
МРТ для данных, Frontend Conf 2016Anastasia Goryacheva
 
Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)
Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)
Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)Ontico
 
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 2014Sergey Biryukov
 
Рендеринг может больше: vue.js vs React, Андрей Солодовников
Рендеринг может больше: vue.js vs React, Андрей СолодовниковРендеринг может больше: vue.js vs React, Андрей Солодовников
Рендеринг может больше: vue.js vs React, Андрей СолодовниковDevDay
 
"Жизнь без интернета" Кувалдин Артём, Яндекс
"Жизнь без интернета" Кувалдин Артём, Яндекс"Жизнь без интернета" Кувалдин Артём, Яндекс
"Жизнь без интернета" Кувалдин Артём, Яндексit-people
 
#13 "Управление состоянием в Redux" Роман Сальников
#13 "Управление состоянием в Redux" Роман Сальников#13 "Управление состоянием в Redux" Роман Сальников
#13 "Управление состоянием в Redux" Роман СальниковJSib
 
#12 "Создание двух desktop приложений на node-webkit и Electron” Михаил Реенко
#12 "Создание двух desktop приложений на node-webkit и Electron” Михаил Реенко#12 "Создание двух desktop приложений на node-webkit и Electron” Михаил Реенко
#12 "Создание двух desktop приложений на node-webkit и Electron” Михаил РеенкоJSib
 
#11 "Отзывчивый UI без блокировки Event Loop" Денис Речкунов
#11 "Отзывчивый UI без блокировки Event Loop" Денис Речкунов#11 "Отзывчивый UI без блокировки Event Loop" Денис Речкунов
#11 "Отзывчивый UI без блокировки Event Loop" Денис РечкуновJSib
 
"Опыт разработки универсальной библиотеки визуальных компонентов в HeadHunter...
"Опыт разработки универсальной библиотеки визуальных компонентов в HeadHunter..."Опыт разработки универсальной библиотеки визуальных компонентов в HeadHunter...
"Опыт разработки универсальной библиотеки визуальных компонентов в HeadHunter...MoscowJS
 
Николай Сиварев "Приручая сайты"
Николай Сиварев "Приручая сайты"Николай Сиварев "Приручая сайты"
Николай Сиварев "Приручая сайты"Yandex
 
CatalogLoader 2014 Belarus Minsk DNUG
CatalogLoader 2014 Belarus Minsk DNUGCatalogLoader 2014 Belarus Minsk DNUG
CatalogLoader 2014 Belarus Minsk DNUGNikolai Kekish
 
#6 "Изоморфный фреймворк Catberry.js" Денис Речкунов
#6 "Изоморфный фреймворк Catberry.js" Денис Речкунов#6 "Изоморфный фреймворк Catberry.js" Денис Речкунов
#6 "Изоморфный фреймворк Catberry.js" Денис РечкуновJSib
 
Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)
Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)
Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)Ontico
 
Vue.js и его брат-близнец Vue-server.js / Андрей Солодовников (НГС)
Vue.js и его брат-близнец Vue-server.js / Андрей Солодовников (НГС)Vue.js и его брат-близнец Vue-server.js / Андрей Солодовников (НГС)
Vue.js и его брат-близнец Vue-server.js / Андрей Солодовников (НГС)Ontico
 
base.network — пиринговый веб на JavaScript / Денис Глазков (Lazada Rus)
base.network — пиринговый веб на JavaScript / Денис Глазков (Lazada Rus)base.network — пиринговый веб на JavaScript / Денис Глазков (Lazada Rus)
base.network — пиринговый веб на JavaScript / Денис Глазков (Lazada Rus)Ontico
 
Радости и гадости регрессионного тестирования вёрстки / Алексей Малейков (HTM...
Радости и гадости регрессионного тестирования вёрстки / Алексей Малейков (HTM...Радости и гадости регрессионного тестирования вёрстки / Алексей Малейков (HTM...
Радости и гадости регрессионного тестирования вёрстки / Алексей Малейков (HTM...Ontico
 
#3 "Webpack и Vue.JS: Создание больших приложений и их расширение" Кирилл Кай...
#3 "Webpack и Vue.JS: Создание больших приложений и их расширение" Кирилл Кай...#3 "Webpack и Vue.JS: Создание больших приложений и их расширение" Кирилл Кай...
#3 "Webpack и Vue.JS: Создание больших приложений и их расширение" Кирилл Кай...JSib
 
PayPal интеграция. Запрещенная лекция 18+
PayPal интеграция. Запрещенная лекция 18+PayPal интеграция. Запрещенная лекция 18+
PayPal интеграция. Запрещенная лекция 18+XB Software, Ltd.
 

La actualidad más candente (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+
 

Destacado

Доступность веб-сайтов: WWW для всех?
Доступность веб-сайтов: WWW для всех?Доступность веб-сайтов: WWW для всех?
Доступность веб-сайтов: WWW для всех?Ecommerce Solution Provider SysIQ
 
Модульные сетки в реальном мире - IQLab Frontend Fusion 2012
Модульные сетки в реальном мире - IQLab Frontend Fusion 2012Модульные сетки в реальном мире - IQLab Frontend Fusion 2012
Модульные сетки в реальном мире - IQLab Frontend Fusion 2012Ecommerce Solution Provider SysIQ
 
Гибкость и Структурированность Oбъектно Oриентированноя CSS
Гибкость и Структурированность Oбъектно Oриентированноя CSSГибкость и Структурированность Oбъектно Oриентированноя CSS
Гибкость и Структурированность Oбъектно Oриентированноя CSSEcommerce Solution Provider SysIQ
 
Эффективный JavaScript - IQLab Frontend Fusion 2012
Эффективный  JavaScript - IQLab Frontend Fusion 2012Эффективный  JavaScript - IQLab Frontend Fusion 2012
Эффективный JavaScript - IQLab Frontend Fusion 2012Ecommerce Solution Provider SysIQ
 

Destacado (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
 

Similar a External Widgets Performance

всплывающее окно при закрытии сайта
всплывающее окно при закрытии сайта  всплывающее окно при закрытии сайта
всплывающее окно при закрытии сайта Olga Pirozhenko
 
XSS. Обходы фильтров и защит.
XSS. Обходы фильтров и защит.XSS. Обходы фильтров и защит.
XSS. Обходы фильтров и защит.Дмитрий Бумов
 
Knockout.JS на примере 2ГИС-Онлайн
Knockout.JS на примере 2ГИС-ОнлайнKnockout.JS на примере 2ГИС-Онлайн
Knockout.JS на примере 2ГИС-ОнлайнDevDay
 
KnockoutJS на примере 2ГИС-Онлайн
KnockoutJS на примере 2ГИС-ОнлайнKnockoutJS на примере 2ГИС-Онлайн
KnockoutJS на примере 2ГИС-Онлайн2ГИС Технологии
 
Кроссбраузерные решения в рекламной сети Яндекса
Кроссбраузерные решения в рекламной сети ЯндексаКроссбраузерные решения в рекламной сети Яндекса
Кроссбраузерные решения в рекламной сети ЯндексаMedia Gorod
 
Изоморфные приложения и Python - Виталий Глибин, Huntflow
Изоморфные приложения и Python - Виталий Глибин, HuntflowИзоморфные приложения и Python - Виталий Глибин, Huntflow
Изоморфные приложения и Python - Виталий Глибин, Huntflowit-people
 
Web весна 2013 лекция 10
Web весна 2013 лекция 10Web весна 2013 лекция 10
Web весна 2013 лекция 10Technopark
 
Knockoutjs на примере 2ГИС-Онлайн
Knockoutjs на примере 2ГИС-ОнлайнKnockoutjs на примере 2ГИС-Онлайн
Knockoutjs на примере 2ГИС-Онлайн2ГИС Технологии
 
Внедрение системы веб аналитики в информационный сайт
Внедрение системы веб аналитики в информационный сайтВнедрение системы веб аналитики в информационный сайт
Внедрение системы веб аналитики в информационный сайтRezonans
 
Web осень 2012 лекция 10
Web осень 2012 лекция 10Web осень 2012 лекция 10
Web осень 2012 лекция 10Technopark
 
2014 Jeeconf - Geb Spock
2014 Jeeconf - Geb Spock2014 Jeeconf - Geb Spock
2014 Jeeconf - Geb SpockBohdan Danyliuk
 
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
 
Мастер-класс по Google Analytics
Мастер-класс по Google AnalyticsМастер-класс по Google Analytics
Мастер-класс по Google AnalyticsiMetrics
 
"Гибридное приложение: полгода после релиза" Легчилин Андрей, Парадеев Роман,...
"Гибридное приложение: полгода после релиза" Легчилин Андрей, Парадеев Роман,..."Гибридное приложение: полгода после релиза" Легчилин Андрей, Парадеев Роман,...
"Гибридное приложение: полгода после релиза" Легчилин Андрей, Парадеев Роман,...it-people
 
СВЯТ ЛОГИН «Як провести пошук на xss атаку» Online QADay 2020 #2
СВЯТ ЛОГИН «Як провести пошук на xss атаку» Online QADay 2020 #2СВЯТ ЛОГИН «Як провести пошук на xss атаку» Online QADay 2020 #2
СВЯТ ЛОГИН «Як провести пошук на xss атаку» Online QADay 2020 #2GoQA
 
Appium для народа
Appium для народаAppium для народа
Appium для народаSQALab
 

Similar a 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 для народа
 

Más de 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. Преимущества подхода • Страница не виснет из-за сторонних виджетов • Управление всеми сторонними виджетами из одного места • Гарантия подключения узла всего один раз (благодаря присвоению идентификатора)