ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Слишком большой размер JS кода
6 сообщений из 6, страница 1 из 1
Слишком большой размер JS кода
    #39630267
cjseriy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
cjseriy
Гость
Приветствую!

Google Tag Manager (GTM) при сохранении кода в custom HTML tag ругается, что он больше 102400 символов.

Сам я только начинаю осваивать JS. Подскажите, пожалуйста, как эффективнее уменьшить размер кода так, чтобы это не повлияло на скорость отработки этого custom HTML tag.

Изначально код имеет подобный вид (только в моем случае размер кода значительно больше):

Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<script>
// Define JavaScript for each page variation of this experiment.
var pageVariations = [
  function() {},  // Original: Do nothing. This will render the default HTML.
  function() {    // Variation 1: Banner Image
    document.getElementById('banner').src = 'bay-bridge.jpg';
  },
  function() {    // Variation 2: Sub-heading Text
    document.getElementById('heading').innerHTML = 'Look, a Bridge!';
  },
  function() {    // Variation 3: Button Text
    document.getElementById('button').innerHTML = 'Learn more';
  },
  function() {    // Variation 4: Button Color
    document.getElementById('button').className = 'button button-blue';
  }
];

// Wait for the DOM to load, then execute the view for the chosen variation.
$(document).ready(function(){
  // Execute the chosen view
  pageVariations[chosenVariation]
});
</script>




Как вариант я думаю сохранить каждый Variation в отдельный js файл на сервера сайта и в custom HTML tag прописывать не весь код, изменяющий страницу, а только код запрашивающий внешний код, который сохранен на сервере сайта.
Это верное решение?

Вот так:

Код: javascript
1.
2.
3.
4.
5.
6.
 function() {    // Variation 1: Banner Image
       var script = document.createElement('script');
       script.src = 'mysite.com/js/variation1.js';
       var head = document.getElementsByTagName("head")[0];
       head.appendChild(script);
          },
...
Рейтинг: 0 / 0
14.04.2018, 15:55
| Ответить | Цитировать | Написать  
Слишком большой размер JS кода
    #39630280
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
function ebid(id){
    return document.getElementById(id)
}

var pageVariations = [
  function() {},  // Original: Do nothing. This will render the default HTML.
  function() {    // Variation 1: Banner Image
    ebid('banner').src = 'bay-bridge.jpg';
  },
  function() {    // Variation 2: Sub-heading Text
    ebid('heading').innerHTML = 'Look, a Bridge!';
  },
  function() {    // Variation 3: Button Text
    ebid('button').innerHTML = 'Learn more';
  },
  function() {    // Variation 4: Button Color
    ebid('button').className = 'button button-blue';
  }
];
...
Рейтинг: 0 / 0
14.04.2018, 17:32
| Ответить | Цитировать | Написать  
Слишком большой размер JS кода
    #39630290
cjseriy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
cjseriy
Гость
Да, уточню. Размер кода большой за счет большого кол-ва изменений на странице, то есть в 1 вариации кода может быть очень много. Примерно так:

Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
  document.getElementById('heading').innerHTML = 'Look, a Bridge!';
 document.getElementById('timeline').outerHTML= ''; 
 document.getElementById('table_div').outerHTML= ''; 
 //Удаляем текст под заголовком
 document.getElementsByClassName("col-lg-12 text-center")[2].getElementsByTagName("p")[1].outerHTML = ''; 
 document.getElementsByClassName("col-lg-12 text-center")[2].getElementsByTagName("p")[1].outerHTML = ''; 
 //Restore pie-charts style
 document.querySelectorAll('canvas')[0].style.display = 'block'; 
 document.querySelectorAll('canvas')[1].style.display = 'block'; 
 document.querySelectorAll('canvas')[2].style.display = 'block'; 
 document.getElementsByClassName('chart-content')[0].style.marginTop= "0"; 
 document.getElementsByClassName('chart-content')[1].style.marginTop= "0"; 
 document.getElementsByClassName('chart-content')[2].style.marginTop= "0"; 
 document.getElementsByClassName('chart')[0].style.width = "230px"; 
 document.getElementsByClassName('chart')[1].style.width = "230px"; 
 document.getElementsByClassName('chart')[2].style.width = "230px"; 
    document.getElementById('heading').innerHTML = 'Look, a Bridge!';
    document.getElementById('heading').innerHTML = 'Look, a Bridge!';
    document.getElementById('heading').innerHTML = 'Look, a Bridge!';
    document.getElementById('heading').innerHTML = 'Look, a Bridge!';
    document.getElementById('heading').innerHTML = 'Look, a Bridge!';
    document.getElementById('heading').innerHTML = 'Look, a Bridge!';
    document.getElementById('heading').innerHTML = 'Look, a Bridge!';
    document.getElementById('heading').innerHTML = 'Look, a Bridge!';
    document.getElementById('heading').innerHTML = 'Look, a Bridge!';
    document.getElementById('heading').innerHTML = 'Look, a Bridge!';
    document.getElementById('heading').innerHTML = 'Look, a Bridge!';
    document.getElementById('heading').innerHTML = 'Look, a Bridge!';
    document.getElementById('heading').innerHTML = 'Look, a Bridge!';
    document.getElementById('heading').innerHTML = 'Look, a Bridge!';
    document.getElementById('heading').innerHTML = 'Look, a Bridge!';
    document.getElementById('heading').innerHTML = 'Look, a Bridge!';
    document.getElementById('heading').innerHTML = 'Look, a Bridge!';
    document.getElementById('heading').innerHTML = 'Look, a Bridge!';



Глобально руками переписывать код долго, поэтому не рассматриваю пока этот вариант. Надо было учесть это до. Не знал, что упрусь в ограничения.
...
Рейтинг: 0 / 0
14.04.2018, 18:43
| Ответить | Цитировать | Написать  
Слишком большой размер JS кода
    #39630295
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
cjseriy,
это переписывание зачем???
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
    document.getElementById('heading').innerHTML = 'Look, a Bridge!';
    document.getElementById('heading').innerHTML = 'Look, a Bridge!';
    document.getElementById('heading').innerHTML = 'Look, a Bridge!';
    document.getElementById('heading').innerHTML = 'Look, a Bridge!';
    document.getElementById('heading').innerHTML = 'Look, a Bridge!';
    document.getElementById('heading').innerHTML = 'Look, a Bridge!';
    document.getElementById('heading').innerHTML = 'Look, a Bridge!';
    document.getElementById('heading').innerHTML = 'Look, a Bridge!';
    document.getElementById('heading').innerHTML = 'Look, a Bridge!';
    document.getElementById('heading').innerHTML = 'Look, a Bridge!';
    document.getElementById('heading').innerHTML = 'Look, a Bridge!';
    document.getElementById('heading').innerHTML = 'Look, a Bridge!';
    document.getElementById('heading').innerHTML = 'Look, a Bridge!';
    document.getElementById('heading').innerHTML = 'Look, a Bridge!';
    document.getElementById('heading').innerHTML = 'Look, a Bridge!';
    document.getElementById('heading').innerHTML = 'Look, a Bridge!';
    document.getElementById('heading').innerHTML = 'Look, a Bridge!';
    document.getElementById('heading').innerHTML = 'Look, a Bridge!';
...
Рейтинг: 0 / 0
14.04.2018, 19:02
| Ответить | Цитировать | Написать  
Слишком большой размер JS кода
    #39630313
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
cjseriy,

Вы бы задачу толком описали, вполне вероятно, что она решается кодом не слишком большого размера.
Учитывая то, что Вы только начинаете осваивать JavaScript.
...
Рейтинг: 0 / 0
14.04.2018, 20:28
| Ответить | Цитировать | Написать  
Слишком большой размер JS кода
    #39630320
cjseriy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
cjseriy
Гость
skyANAcjseriy,

Вы бы задачу толком описали, вполне вероятно, что она решается кодом не слишком большого размера.
Учитывая то, что Вы только начинаете осваивать JavaScript.

Это для примера, чтобы показать размеры кода.

Код используется в custom HTML tag в Google Tag Manager для того, чтобы показывать разные варианты страницы (меняя каждый раз какие-то элементы).

Таких вариантов 32.
Например один из вариантов:
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
document.getElementsByClassName("pull-left")[1].lastElementChild.innerText='14'; 
 document.getElementsByClassName('col-lg-3 col-md-3 col-sm-3')[1].getElementsByClassName('row')[0].innerHTML=""; 
 document.getElementsByClassName('col-lg-3 col-md-3 col-sm-3')[0].getElementsByClassName('row')[0].innerHTML=""; 
 document.getElementsByClassName('col-lg-3 col-md-3 col-sm-3')[2].getElementsByClassName('row')[0].innerHTML=""; 
 $("div[class='col-lg-3 col-md-3 col-sm-3'").css('padding', '8px 0 20px 0'); 
	document.getElementById('name').style.display= 'none'; 
  document.getElementsByClassName("section-heading")[2].innerHTML="some textsome textsome textsome textsome textsome text"; 
 document.getElementsByClassName("section-subheading ")[2].innerHTML="some textsome textsome textsome textsome textsome text"; 
 document.getElementsByClassName("section-subheading ")[2].style.display="inline-block"; 
 document.getElementsByClassName("section-subheading ")[2].style.color="#0767ed"; 
 document.getElementsByClassName("section-subheading ")[2].style.backgroundColor="#ffffff"; 
 document.querySelector("#video .section-subheading").style.width="180px"; 
 document.querySelector("#video .section-subheading").style.height="22px"; 
 document.querySelector("#video .section-subheading").style.lineHeight="1.2"; 
	document.getElementsByClassName('col-lg-3 col-md-3 col-sm-3')[1].insertAdjacentHTML('afterend','<p style="margin-bottom: -0.5em; color: white; text-align: center; margin-top: -1.5em; font-size: 14px;"><strong>some textsome textsome textsome textsome textsome text</strong><p style="font-size: 14px; color: white; text-align: center;">(some textsome textsome textsome textsome textsome text)</p></p>'); 
 	document.getElementsByClassName("section-subheading ")[3].innerHTML="some textsome textsome textsome textsome textsome text"; 
 document.getElementById('timeline').outerHTML= ''; 
 document.getElementById('table_div').outerHTML= ''; 
 document.getElementsByClassName("col-lg-12 text-center")[2].getElementsByTagName("p")[1].outerHTML = ''; 
 document.getElementsByClassName("col-lg-12 text-center")[2].getElementsByTagName("p")[1].outerHTML = ''; 
 document.querySelectorAll('canvas')[0].style.display = 'block'; 
 document.querySelectorAll('canvas')[1].style.display = 'block'; 
 document.querySelectorAll('canvas')[2].style.display = 'block'; 
 document.getElementsByClassName('chart-content')[0].style.marginTop= "0"; 
 document.getElementsByClassName('chart-content')[1].style.marginTop= "0"; 
 document.getElementsByClassName('chart-content')[2].style.marginTop= "0"; 
 document.getElementsByClassName('chart')[0].style.width = "230px"; 
 document.getElementsByClassName('chart')[1].style.width = "230px"; 
 document.getElementsByClassName('chart')[2].style.width = "230px"; 
	document.getElementsByClassName("section-heading")[0].innerHTML="some textsome textsome textsome textsome textsome text"; 
 document.getElementsByClassName("section-subheading")[0].innerHTML="some textsome textsome textsome textsome textsome text; 
 document.getElementsByClassName("section-subheading")[0].style.color="#0a5fa0"; 
 document.getElementsByClassName("section-subheading")[3].style.color="#0a5fa0"; 
 document.getElementsByClassName("section-subheading")[4].style.color="#0a5fa0"; 
  document.getElementsByClassName("col-md-3")[0].getElementsByTagName("p")[0].innerHTML="some textsome textsome textsome textsome textsome text"; 
 document.getElementsByClassName("col-md-3")[1].getElementsByTagName("p")[0].innerHTML="some textsome textsome textsome textsome textsome text"; 
 document.getElementsByClassName("col-md-3")[2].getElementsByTagName("p")[0].innerHTML="some textsome textsome textsome textsome textsome text"; 
 document.getElementsByClassName("col-md-3")[3].getElementsByTagName("p")[0].innerHTML="some textsome textsome textsome textsome textsome text; 
 document.getElementsByClassName("col-md-3")[0].getElementsByTagName("p")[0].style.textAlign="left"; 
 document.getElementsByClassName("col-md-3")[1].getElementsByTagName("p")[0].style.textAlign="left"; 
 document.getElementsByClassName("col-md-3")[2].getElementsByTagName("p")[0].style.textAlign="left"; 
 document.getElementsByClassName("col-md-3")[3].getElementsByTagName("p")[0].style.textAlign="left"; 
 document.getElementsByClassName("col-md-3")[0].getElementsByTagName("p")[0].innerHTML="some textsome textsome textsome textsome textsome text"; 
 document.getElementsByClassName("col-md-3")[1].getElementsByTagName("p")[0].innerHTML="some textsome textsome textsome textsome textsome text"; 
 document.getElementsByClassName("col-md-3")[2].getElementsByTagName("p")[0].innerHTML="some textsome textsome textsome textsome textsome text"; 
 document.getElementsByClassName("col-md-3")[3].getElementsByTagName("p")[0].innerHTML="some textsome textsome textsome textsome textsome text"; 
 document.getElementsByClassName("col-md-3")[0].getElementsByTagName("p")[0].style.textAlign="left"; 
 document.getElementsByClassName("col-md-3")[1].getElementsByTagName("p")[0].style.textAlign="left"; 
 document.getElementsByClassName("col-md-3")[2].getElementsByTagName("p")[0].style.textAlign="left"; 
 document.getElementsByClassName("col-md-3")[3].getElementsByTagName("p")[0].style.textAlign="left"; 
	document.getElementsByClassName("service-heading")[1].innerHTML="some textsome textsome textsome textsome textsome text";



Так я не знал, что упрусь в ограничения Google Tag Manager по размеру кода, то изначально не ставил задачу по оптимизации кода и его компактности.
Сейчас не хотелось бы переписывать код, поэтому и хотелось бы знать на сколько корректен в данном случае вынос кода вариантов в отдельные js файлы и какие минусы у такого подхода.

То есть в Google Tag Manager заменить код вариаций на такой:

Код: javascript
1.
2.
3.
4.
5.
6.
function() {    // Variation 1:
       var script = document.createElement('script');
       script.src = 'mysite.com/js/variation1.js';
       var head = document.getElementsByTagName("head")[0];
       head.appendChild(script);
          },




Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<script>
// Define JavaScript for each page variation of this experiment.
var pageVariations = [
  function() {},  // Original: Do nothing. This will render the default HTML.
  function() {    // Variation 1:
       var script = document.createElement('script');
       script.src = 'mysite.com/js/variation1.js';
       var head = document.getElementsByTagName("head")[0];
       head.appendChild(script);
          },
  function() {    // Variation 2: 
       var script = document.createElement('script');
       script.src = 'mysite.com/js/variation1.js';
       var head = document.getElementsByTagName("head")[0];
       head.appendChild(script);
          },
  function() {    // Variation 3: 
       var script = document.createElement('script');
       script.src = 'mysite.com/js/variation3.js';
       var head = document.getElementsByTagName("head")[0];
       head.appendChild(script);
          },
  function() {    // Variation 4: 
       var script = document.createElement('script');
       script.src = 'mysite.com/js/variation4.js';
       var head = document.getElementsByTagName("head")[0];
       head.appendChild(script);
          }
];

// Wait for the DOM to load, then execute the view for the chosen variation.
$(document).ready(function(){
  // Execute the chosen view
  pageVariations[chosenVariation]
});
</script>
...
Рейтинг: 0 / 0
14.04.2018, 21:08
| Ответить | Цитировать | Написать  
6 сообщений из 6, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Слишком большой размер JS кода
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
NoSQL.ru       Новости, Чат       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&gotonew=1&tid=1444212]:
 0ms
get settings:
 8ms
get forum list:
 13ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 171ms
get topic data:
 12ms
get first new msg:
 8ms
get forum data:
 3ms
get page messages:
 51ms
get tp. blocked users:
 2ms
others: 241ms
total:  515ms
созд. / загр.: 515ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]