Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: 9 способов оптимизации производительности Front-End

Поскольку современные браузеры стали поддерживать больше возможностей, а веб-индустрия стремительно перемещается в сторону мобильных устройств, появилась необходимость писать компактный и оптимизированный код, который не заставит долго ждать пользователя, пока загрузится сайт. Front-end хорош тем, что в нем содержится много простых стратегий и конвенций кода, которые мы можем использовать для обеспечения оптимальной производительности. В этой статье мы собрали 9 простых советов, которые помогут с оптимизацией кода.

Сразу должен сказать, что часть приемов было подсмотрено нами на западных просторах интернетов, а часть добавили мы. В любом случае, в рунете такого материала не было. Нам часто приходится писать большие системы и оптимизировать скорость загрузки, поэтому стараемся бороться за каждый байт. Отсюда и решили написать про эту важную тему.

1. Используйте DocumentFragments или innerHTML вместо массовых внедрений в элементы

Такие операции, как построение DOM-структуры, после загрузки страницы, увеличивают нагрузку на браузер. Несмотря на улучшение производительности браузеров, построение DOM-дерева медлительно, следовательно, знание данных нюансов поможет Вам в повышении скорости загрузки Вашей страницы. Именно поэтому важно свести к минимуму создание сложноструктурного DOM-дерева.

К примеру, у нас есть ul элемент в пределах страницы, который изменяется через JavaScript после вызова AJAX, чтобы получить элемент списка JSON. Зачастую разработчики будут делать что-то вроде этого:

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 var list = document.querySelector('ul');
 
 ajaxResult.items.forEach(function(item) {
 
    // создадим элемент списка li
    
    var li = document.createElement('li');
    
    li.innerHTML = item.text;
    
   // Здесь произойдут разнообразные структурные операции с нашим элементом,
   
   // например: добавление классов, модификация атрибутов и т.д. 
   
   // добавим элемент li к родительскому элементу ul
   
  list.apppendChild(li);
  
 });
Код выше показывает неправильный путь заполнения ul элементами – скорость дополнения DOM – дерева замедляется. Если вы действительно хотите использовать document.createElement и обработать элемент как узел дерева, было бы более производительно вместо этого использовать DocumentFragement.

DocumentFragement является так званым «мини-родителем», «облачным хранилищем» для его дочерних элементов. В нашем примере следует считать DocumentFragement как невидимый ul элемент, который находится за пределами DOM. Это позволит хранить Ваши узлы виртуально, пока они не будут введены в DOM. Первоначальный образец кода будет оптимизирован с помощью DocumentFragement следующим образом:

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var frag = document.createDocumentFragment();
 
 ajaxResult.items.forEach(function(item) {
 
   // создадим элемент списка li
    
   var li = document.createElement('li');
    
   li.innerHTML = item.text;
    
    // Здесь произойдут разнообразные структурные операции с нашим элементом,
    
    // например: добавление классов, модификация атрибутов и т.д. 
    
    // *добавим наш элемент в фрагмент, вместо родительского элемента*
    
    frag.appendChild(li);
    
 });
Добавление дочерних элементов в отдельный DocumentFragement, а затем добавление данного фрагмента к родительскому списку используется с помощью только одной операции DOM. Таким образом, это получается намного быстрее, чем массовые внедрения. Если вам не нужно работать с такими элементами списка как узлы, то более выгодно строить HTML с помощью строк:

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
var htmlStr = '';
 
 ajaxResult.items.forEach(function(item) {
 
    // Построим строку
    
    htmlStr += '<li>' + item.text + '</li>';
    
 });
 
   // Комбинация элементов списка через innerHTML
   
 document.querySelector('ul').innerHTML = htmlStr;
Таким образом, внедряя созданную строку через innerHTML по-прежнему остается только одна операция DOM и меньше кода даже чем у DocumentFragment метода.

2. Часто выполняемые события / методы

В большей части работы необходимо добавлять обработку событий, которые будут происходить довольно часто, во время взаимодействия с пользователем. К примеру события window's resize или onmouseover. Если обработка данных событий слишком ресурсозатратная, Вы можете дать большую загрузку на браузер, а это, в свою очередь, приведет к плохим последствиям на стороне пользователя. Вот откуда пришел метод debouncing. Debouncing будет ограничивать количество раз выполнения функции в пределах заданного временного интервала. Вот пример использования функции debouncing:

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
 // При работе с UnderscoreJS
 
 function debounce(func, wait, immediate) {
 
    var timeout;
    
    return function() {
    
        var context = this, args = arguments;
        
        var later = function() {
        
            timeout = null;
            
            if (!immediate) func.apply(context, args);
            
        };
        
        var callNow = immediate && !timeout;
        
        clearTimeout(timeout);
        
        timeout = setTimeout(later, wait);
        
        if (callNow) func.apply(context, args);
        
    };
  }
 
  // Добавим обработку события resize но не чаще чем через каждые 300 миллисекунд
 
  window.addEventListener('resize', debounce(function(event) {
 
   // Обработать событие resize (как Вам вздумается)
 
 }, 300));
Debounce метод возвращает функцию, которая оборачивает ответ, ограничивая его скорость выполнения до предела, указанного во втором аргументе. Теперь Ваши постоянные ответы не смогут повредить браузер пользователя.

3. Статичный кэш, не существенный контент в веб хранилище

API-интерфейсы по типу Web хранилищ стали огромным усилением и упрощением работы с API Cookie, которую разработчики использовали в течение многих лет. Одна из стратегий, которую можно использовать при работе с памятью для хранения несущественных данных был статичный контент. Здесь подразумеваются фрагменты HTML, содержание статьи, которая была загружена с помощью AJAX и других разнообразных методов, которые нужно запрашивать не более одного раза. Ниже показан небольшой код на JavaScript для работы с веб хранилищем:

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
52
53
54
55
56
this[key] = value;
 
        }
    };
 
  return {
    
    get: function(key) {
        
        return this.isFresh(key);
            
    },
    
    set: function(key, value, minutes) {
        
        var expDate = new Date();
            
        expDate.setMinutes(expDate.getMinutes() + (minutes || 0));
 
        try {
            
            cacheObj.setItem(key, JSON.stringify({
                
                value: value,
                    
                expires: expDate.getTime()
                    
                }));
            }
            
            catch(e) {}
            
        },
        
    isFresh: function(key) {
        
        // Возвращаем значение или false
            
        var item;
            
        try {
            
            item = JSON.parse(cacheObj.getItem(key));
                
            }
            
        catch(e) {}
            
            if(!item) return false;
 
        // Высчитаем дату
            
            return new Date().getTime() > item.expires ? false : item.value;
        }
     }
 });
Этот плагин с помощью базовых get и set методов, либо через isFresh метод, проверяет, актуально ли сохраненное значение.

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
 require(['storage'], function(storage) {
 
    var content = storage.get('sidebarContent');
    
    if(!content) {
    
        // Выполним AJAX запрос для получения контента
 
        // ... потом хранилище вернет контент через определенное время
        
        storage.set('sidebarContent', content, 60); 
    }
    
 });
Таким образом, мы избавляемся от частых повторяющихся запросов к серверу. Проанализируйте свои сайты на предмет материала, который не является динамичным, но вполне может быть часто запрашиваемым. Используйте данный способ для повышения эффективности сайта.

4. Использование curl.js

Асинхронная загрузка ресурсов стала популярной благодаря XMLHttpRequest (объект, который разрешен для AJAX), чтобы не блокировать загрузку ресурсов, уменьшить время загрузки страницы и позволить загрузить содержимое без ее перезагрузки.

Здесь будет использоваться замечательный плагин Джона Ханна curl.js. Curl загрузчик – это типичный асинхронный загрузчик, но немного с другими параметрами конфигурации, полезными плагинами и многим другим. Вот несколько примеров использования curl.js:

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
// Базовое использование
 
    curl(['social', 'dom'], function(social, dom) {
    
    dom.setElementContent('.social-container', social.loadWidgets());
    
 });
 
 // Определяет модуль, который использует Google Analytics
 
 define(["js!//google-analytics.com/ga.js"], function() {
 
    // Возвращает Google Analytics контроллер
    
    return {
    
        trackPageView: function(href) {
        
            _gaq.push(["_trackPageview", url]);
            
        },
        trackEvent: function(eventName, href) {
        
            _gaq.push(["_trackEvent", "Interactions", eventName, "", href || window.location, true]);
            
         }
     };
 });
 
 // Единожды загружает JavaScript файл без обратной связи
 
 curl(['js!//somesite.com/widgets.js']);
 
 // Загрузит JavaScript and CSS файлы в модуле
 
 curl(['js!libs/prism/prism.js', 'css!libs/prism/prism.css'], function() {
 
    Prism.highlightAll();
    
 });
 
 // Загружает a URL (через an AJAX запрос)
 
 curl(['text!sidebar.php', 'storage', 'dom'], function(content, storage, dom) {
 
    storage.set('sidebar', content, 60);
    
    dom.setElementContent('.sidebar', content);
    
 });
Когда Вы начнете использовать данный метод, вместо простых асинхронных загрузчиков, разница будет заметна сразу, но, что более важно, эту разницу увидят пользователи!

Например, загружаем только виджеты Twitter, Facebook и Google Plus, если DIV с классом CSS-social существует. Если данного блока нет, виджеты мы не грузим. Следовательно, используя принцип «проверить – если это нужно перед загрузкой – то грузим» спасет пользователя от закачки нескольких совершенно ненужных килобайт.

5. Используйте Array.prototype.join вместо конкатенации строк

Одна микро-оптимизация на стороне клиента с помощью Array.prototype.join заменяет обычную конкатенацию. К примеру, в пункте №1 (см. выше), было использована элементарная конкатенация строк. А вот так это будет выглядеть после данной оптимизации

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
var items = [];
 
 ajaxResult.items.forEach(function(item) {
 
    // Построим строку
    
    items.push('<li>', item.text, '</li>');
    
    });
 
    // Комбинация элементов списка через innerHTML
    
 document.querySelector('ul').innerHTML = items.join('');
В следующей части мы закончим освоение оптимизации сайта.
Ответ: 6. Использование CSS Animations, когда это возможно

Можно утверждать, что рост библиотек JavaScript, таких как JQuery и MooTools привели к сложным анимационным оформлениям. Сегодня многие разработчики все еще используют JavaScript, чтобы оживить элементы, несмотря на то, что соответствующие браузеры поддерживают CSS анимации через transform и keyframe.

CSS анимации более эффективны, чем анимации JavaScript. CSS анимации также имеют дополнительное преимущество (обычно) — намного меньше кода. Многие анимации CSS обрабатываются GPU, и, таким образом, более сглажены. К примеру:

CSS
1
2
3
4
5
6
7
.myAnimation {
 
    animation: someAnimation 1s;
    
    transform: translate3d(0, 0, 0); /* ускорение */
    
 }
Подобные свойства CSS анимации повышают производительность и качество анимации используя субпиксельную интерполяцию. Такую анимацию процессору проще выполнять, так как задействуется графический движок, это очень важно для мобильных устройств. Однако наиболее приемлемым будет использование CSS анимации вместе с подключением управления через js. Например, когда правила анимации прописаны в CSS, а с помощью JavaScript мы изменяем входящие параметры (цвет, фон, размер и т.д.)

7. Используйте делегирование событий

Представьте себе неупорядоченный список ul, который может содержать любое количество дочерних элементов li, и каждый li должен что-то сделать по щелчку мыши. Вы можете добавить обработчики событий к отдельным элементам, но что, если элементы будут добавляться или удаляться часто? Вам предстоит иметь дело с добавлением и удалением обработчиков событий, а также самих элементов. Вот где нам понадобится делегирование событий.

Делегирование события заменяет необходимость добавления обработчиков событий к отдельным элементам вместо размещения одного обработчика событий для родителя. Когда это событие срабатывает, event.target проверяет, выполняются ли условия для вызова функции обработки данного события.

Вот невероятно простой пример того, что происходит:

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Берем элемент и добавляем к нему обработчик события click...
 
 document.querySelector('#parent-list').addEventListener('click', function(e) {
 
    // e.target кликабельный элемент!
    
    // Если это необходимый нам элемент
    
    if(e.target && e.target.tagName == 'LI') {
    
        // Необходимый элемент найден! Действуем!
        
    }
 });
Все фреймворки JavaScript обеспечивают соответствие делегирования селектора. Дело в том, что Вы избегаете размещения обработчиков событий на отдельные элементы, установив один на родителя. Этот метод более эффективен и менее затратен.

8. Используйте data URL’s, вместо SRC’s

Скорость загрузки страницы напрямую зависит от использования спрайтов и написания компактного кода. Число запросов отсылаемых данной страницей также играют роль в производительности. Минимизация запросов помогает Вашему сайту грузиться быстрее и один из способов устранения запросов (не считая использования спрайтов) использовать Data URL вместо атрибутов image SRC:

HTML5
1
2
3
4
5
6
7
8
9
10
11
<!—До… -->
 
 <img src="/images/logo.png" />
 
 <!-- …После -->
 
 <img src="data: image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAPAAA/+4ADkFkb2
 
 JlAGTAAAAAAf/bAIQABgQEBAUEBgUFBgkGBQYJCwgGBggLDAoKCwoKDBAMDAwMDAwQDA4PEA8ODBMTFBQTExwbGxscHx8fHx8fH
 
 x8fHwEHBwcNDA0YEBAYGhURFRofHx8fHx8fHx8fHx8fHx8fH ...." />
Конечно же размер страницы увеличится, но вы уменьшаете время ожидания и количество запросов к серверу. Большинство браузеров сейчас поддерживают Data URL’s в CSS файлах (для фоновых изображений) так что этот метод в целом широко может быть использован.

9. Используйте Media Queries для загрузки фоновых изображений необычных размеров.

В предыдущем пункте упоминалось об использовании спрайтов картинок для ускорения загрузки сайта. Но как быть в случае с адаптивным сайтом, где необходимо масштабировать картинки, будь-то фоновое изображение, иконка поиска и т.д. Проводить такие операции со спрайтами достаточно неудобно и занимает большое количество времени. Вот тут и приходят на помощь медиа-запросы.

CSS supports имеют более широкую поддержку, а медиа-запросы CSS близки к CSS «логике. Медиа-запросы CSS чаще всего используются для настройки (регулирования) CSS свойства под устройство (обычно по ширине экрана); с помощью этого способа мы часто меняем ширину или плавающую позицию элемента. Почему бы не изменить фоновые изображения на основе этого способа?

CSS
1
2
3
4
5
6
7
8
/* стандартно на Desktop */
 
 .someElement { background-image: url(sunset.jpg); }
 
 @media only screen and (max-width : 1024px) {
 
    .someElement { background-image: url(sunset-small.jpg); }
 }
Фрагмент выше загружает изображение меньшего размера, если пользователь использует мобильное устройство (имеется ввиду размер файла, не соотношение сторон). Таким способом, достаточно отрисовать спрайт меньшего размера, что избавит от необходимости проводить манипуляции с изображениями програмным методом или разрезать спрайт для мобильных устройств и т.д.

Большинство стран взимают плату за используемые данные (не безлимитные), а значит, Вы сможете экономить деньги за счет сокращения времени загрузки.

Небольшие обновления, большие успехи

Очень часто разработчики ставят себя и свой стиль кода на первое место вместо того, чтобы подумать сначала о своих пользователях. Много небольших обновлений построены для улучшения комфорта пользователя, таким образом, каждый бит оптимизации загрузки улучшает впечатление о Вашем сайте. Google выпустил достаточно удобное расширение для своего браузера, которое поможет Вам проанализировать скорость загрузки Вашего сайта и узнать, что еще можно оптимизировать, для повышение загрузки страницы. Называется данное расширение PageSpeed Insights. Использовать его можно через стандартную панель разработчика. Данный виджет покажет Вам минимальный анализ Вашего портала и даст советы по его оптимизации, к примеру:



В любом случае, оптимизировать сайт нужно максимально. Чем быстрее он будет работать, тем больше будут удовлетворены пользователи, тем больше заработает сайт. К сожалению, далеко не все задумываются об этом. Это даже видно по спросу: нам часто заказывают аудиты юзабилити или Back-End, и редко кто просит провести аудит Front-End, хотя он абсолютно не сложно делается и может дать хорошее поле для улучшений.
Вопрос: Нет моб. оптимизации по Гугл. Не помогает тег viewport

Никак не могу добиться оптимизации сайта для моб. устройств, согласно соответствующего инструмента проверки Гугл. Казалось бы
HTML5
1
<meta name="viewport" content="width=device-width">
вставлен и на моих смартфоне и планшете, всё нормально отображается. Однако, поисковик и инструмент проверки оптимизации для моб. устройст Гугл, выдаёт - "Страница не оптимизирована для мобильных устройств".

В чём может быть причина ? Что изменить ?

 Комментарий модератора 
Используйте соответствующие теги в редакторе для форматирования кода [HTML], [CSS] и т.д.!
Ответ: Триколор, Находите инструмент PageSpeed Insights, думаю это то, чем вы пользуетесь раз знаете, что сайт по мнению гугла не оптимизирован. Анализируете урл сайта, смотрите рейтинг от 1 до 100, смотрите какие решения оптимизации предлагает вам инструмент, исправляете и будет вам счастье!
Вопрос: Как влияет на оптимизацию сайта установка платежного модуля

Может вы мне поможете, ни на одном форуме ответ так и не получила.
Делаю сайт на WP и инетресует, а как влияет на оптимизацию сайта установка платежного модуля?
ведь мой агрегатор NetPay — переадресует клиента на платежный шлюз, то есть на другую страницу более посещаемого сайта? что делать в этом случае? я же не могу отказаться от оплат картами? "
Ответ:
Сообщение от Латина
Делаю сайт на WP и инетресует, а как влияет на оптимизацию сайта установка платежного модуля?
Вы можете отслеживать поисковых ботов по useragent и не показывать их скрипты платежной системы. Хоть боты поисковиков умеют выполнять скрипты, все-равно рекомендуется делать редирект а не размещать прямую ссылку. Можно даже через какую-то отдельную страницу, а ее запретить в robots.txt к индексации.
Вопрос: seo оптимизация

В общем, изучаю сейчас seo и есть вопросы. Нужен человек с опытом, который может помочь разобраться. В целом вопросы для человека в теме не сложные и не займут много времени. Если есть люди готовые помочь напишите здесь или в личку и тогда уже буду спрашивать конкретно.
Ответ:
Цитата:
Я к собеседованию готовлюсь на junior'а. Просто нужна помощь небольшая.

спрашивайте тут, не стесняйтесь
поможем ответами как нибудь...

----------
Вопрос: Нужна оптимизация

Всем привет, нужно оптимизировать сайт под просмотр с мобильных устройств, сайт , все работает, но отображается с моб устройств не корректно, если кто может напишите мне на адрес yalta-opt-2006@mail.ru. так же напишите сразу стоимость работы
Ответ:
Ой сколько это вам будет стоить...
Чтобы нормальную адаптивность сделать. Вы ведь сами не понимаете где какие элементы должны быть при каких экранах...
Так что мой вам совет - оставляйте деревянную разметку, а для мобил мета тег с original-width пропишите.
Вопрос: Какие плагины нужны для создание сайта

Здраствуйте, работаю в рекламной фирме, и начальство поручило сделать сайт на вордпрессе, проблема в том что я никогда не работал с вп. Интерисует какие плагины нужны что бы реализовать такой же функционал как на вот этом сайте pixers .ру
Ответ: если вам нужен сайт с магазином, то ставьте woocommerce и ищите нормальный шаблон (например от themeforest). Обычно в хороших шаблонах есть все необходимые плагины, которые нужны для подобного функционала.
если смотреть по pixers, то там огромное количество плагинов, и скорее всего платно разработанный дизайн.
для вп вам нужен плагин для мультиязычности (wpml например), и сам вп стоит у них в режиме мультидоменов я так понимаю.
так же советую для сео использовать Yoast seo
Вопрос: Найти нужного родителя

Необходимо найти нужного родителя, но не известно сколько до него тегов.

Т.е. .parent().parent().parent() не подойдет, так как не известно заранее какая вложенность. Необходимо, например, найти родителя с необходимым классом.
Ответ:
Сообщение от SKLNSK
Необходимо найти нужного родителя, но не известно сколько до него тегов.
Что тогда известно про "нужного" родителя?
Вопрос: Нужна консультация по созданию кода css

Нужна помощь по созданию кода для калькулятора СSS. Есть код HTML, и наброски по CSS.
Нужна срочно помощь.
Ответ: Вам нужна верстка калькулятора? Каким вы видите результат?
Вопрос: Нужна помощь (голосование без перезагрузки)

Нужна помощь, в реализации лайк/дизлайк без перезагрузки.
CODE (javascript):

  1.  
  2. <script>
  3. $(document).ready(function() {
  4.         $('span#like').click(function(){
  5.                 setVote('like', $(this));
  6.         });    
  7.         $('span#dislike').click(function(){
  8.                 setVote('dislike', $(this));
  9.         });    
  10. });
  11. function setVote(type, element){
  12.         // получение данных из полей
  13.         var id_news = element.parent().find('#id_news').val(); 
  14.         $.ajax({               
  15.                 type: "POST",
  16.                 url: "../../ajax_votes.php",
  17.                 data: {
  18.                         'id_news': id_news,
  19.                         'type': type
  20.                 },
  21.                 dataType: "json",                    
  22.            $('#bb').html(data.newvalue); // водим результат в нужное место          
  23.                         // в случае, когда пришло success. Отработало без ошибок
  24.                         if(data.result == 'success'){
  25.                        
  26.                         }else{
  27.                                 // вывод сообщения об ошибке
  28.                                 alert(data.msg);
  29.                         }
  30.                 }
  31.         });
  32. }
  33. </script>
  34.  


Обработчик PHP
PHP:

  1.  
  2. include ("inc/functions.php");
  3. $error = false;
  4. $newsId = (int) $_POST['id_news'];
  5. $type = $_POST['type'];
  6.  $stm  = db_connect()->prepare("SELECT * FROM `pozdravleniya` WHERE id=:id LIMIT 1");      
  7.  $stm->execute(('id'=>$newsId));      
  8.  $data = $stm->fetch();
  9.         if($type == 'like') {
  10.            $like=$data['counts']+1;
  11.            $stm  = db_connect()->prepare("UPDATE pozdravleniya  SET counts=:like WHERE id=:id");
  12.         $stm->execute(('like'=>$like, 'id'=>$newsId));
  13.         }
  14. if($error){
  15.         // если есть ошибки то отправляем ошибку и ее текст
  16.         echo (('result' => 'error', 'msg' => $error));
  17. }else{
  18.         // если нет ошибок сообщаем об успехе
  19.         echo (('result' => 'success', 'newvalue' => $like));
  20. }
  21.  


И вывод результата:
PHP:

  1.  
  2. echo"<table border=0 width=100% class='p_table'><tr>";
  3.   $x=0;              
  4.     while ( $info = $stm->fetch() ){                                
  5.       $x++;        
  6. echo "<td width='40%' valign=top bgcolor=#ffffff><div class='p_text'>".$info['text_p']."".$adm_edit." <br><div class='likes'><div id=bb>".$info['counts']."</div></div><span id='like'><img src='$dom/img/like.png' class='like' title='Нравится :)'/></span><img src='$dom/img/unlike.png' class='dislike' title='Не нравится :('/>
  7.      <br/> <input type='hidden' id='id_news' value=".$info['id'].">
  8.      </div></td></td>";
  9.       if ($x==2){
  10.         echo "</tr>";
  11.         $x=0;
  12.       }                      
  13.  }                                    
  14. echo"</table>";


Все работает и заносит в базу новые значения без перезагрузки, НО, почему то новые значения обновляются только в одном блоке (блок выделен чифрой 1), а не там где нажал. Например, нажимаю на лайк где цифра 2 (значение 33) оно обновляется но в блоке под цифрой 1
Мне кажется что я не правильно делаю вывод уже новых значение.
Прошу Вашей помощи!
Прикреплено изображение (Нажмите для увеличения)

Ответ:
Это так в PDO передается переменная
PHP:

  1. $stm->execute(('id'=>$newsId));

Id - мне нужно для того что бы записать значение сколько раз я кликнул (like) для определенного поздравления. Запись производится в базу все ровно, туда куда кликнул и относится к нужному тексту.
Ниже запрос и ответ при кликаз на блок 1 и блок 2
Прикреплено изображение (Нажмите для увеличения)

(Отредактировано автором: 30 Ноября, 2016 - 20:30:27)

Вопрос: Как используя чистый JavaScript присвоить элементу нужный ID

Здравствуйте друзья!

Столкнулся с проблемой, что не знаю, как элементу присвоить id.
Классы без проблем присваивается с помощью кода:

Код Javascript
1
document.getElementById('name_id').className='name_class';
Подскажите пожалуйста, как мне изменить этот код, чтобы выбранному элементу с указанным классом присваивался нужный ID?
Другими словами нужно поменять местами работу верхнего скрипта.

Заранее спасибо!
Ответ:

Не по теме:

Aialonix, а я бы еще посоветовал обратить внимание на методы и . Если вы с CSS знакомы, то выбрать нужный элемент(ы) будет гораздо проще. К тому же, эти методы, в отличии от getElementsByClassName, поддерживает даже осёл восьмой версии.