Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.02.2017, 18:36
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

Detect visited links
Доброго времени суток!

Появилась необходимость написать скрипт, который будет проверять несколько сайтов на посещаемость юзером.

Сразу же на ум пришла такая идея:

var links = document.querySelectorAll('a:visited');


Но не всё так просто, браузер не даёт получить такие ссылки.
Далее на ум приходит такая идея: с помощью CSS дать определённый цвет текста для :visited и проверять его с помощью getComputedStyle, но не всё так просто... браузер и это блокирует!

Ну и тут мне на ум пришла такая мысль:
Мы знаем, что по умолчанию все ссылки синие, а visited - розовые. А что, если visited покрасить в чёрный и наложить 10к ссылок друг на друга? Ведь "чёрные" ссылки по идее должны отрисоваться быстрее.

Набросал такой скрипт:

.links {
	position: absolute;
}
.links a {
	left: 0;
	position: absolute;
	top: 0;
}
.links a::after {
	content: 'abcdefghijklmnopqrstuvwxyz1234567890';
}
.links a:visited {
	color: #000;
}
.links span {
	opacity: 0.004;
}


window.addEventListener('DOMContentLoaded', function() {
	'use strict';

	function getDrawTime(link) {
		//Сохраняем начальный timestamp
		var d = Date.now();

		//Создаём и вставляем 10000 элементов наложением друг на друга
		for(var el1, el2, i = 0; i < 1E4; i++) {
			el1 = document.createElement('span');
			el2 = document.createElement('a');
			el2.href = link;
			el1.appendChild(el2);
			wrapper.appendChild(el1);
		}


		//Записываем разницу между начального и текущего timestamp'а
		var r = Date.now() - d;

		//Удаляем все элементы
		while(wrapper.firstChild) {
			wrapper.removeChild(wrapper.firstChild);
		}

		//Вохвращем ту самую разницу
		return r;
	}

	var wrapper = document.createElement('div');
	wrapper.className = 'links';
	document.body.appendChild(wrapper);


	//Вычислям среднее время непосещённой ссылки, для следующего сравнения с посещённой
	var notVisitedTime = (function() {
		for(var i = 0, n = 0; i < 5; i++) {
			n += getDrawTime('http://' + Math.random().toString(36) + '.cx');
		}
		return Math.floor(n / 5);
	})();


	var callback = function(data) {
			console.log(data);
		},
		i = 0,
		links = ['http://javascript.ru', 'http://test228.ru', 'http://google.ru'],
		visitedData = {};


	setTimeout(function fn() {
		var link = links[i];

		visitedData[link] = getDrawTime(link) < notVisitedTime - 10;

		if(++i < links.length) {
			setTimeout(fn, 10);
		}
		else {
			callback(visitedData);
		}
	}, 10);

});


По началу, мне казалось, что всё работает как нужно, но всё-таки что-то не так. Каждый раз разный результат.
У кого какие идеи и предложения, коллеги?
Ответить с цитированием
  #2 (permalink)  
Старый 08.02.2017, 18:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Ruslan_xDD,
Как определить была ли ссылка посещена
Ответить с цитированием
  #3 (permalink)  
Старый 08.02.2017, 18:57
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

рони, что-то я там не нашёл ответа. Неужели моим методом никак нельзя определить?
Ответить с цитированием
  #4 (permalink)  
Старый 08.02.2017, 19:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Ruslan_xDD,
вопрос старый, ответа нет ... можно разве что запоминать клик по ссылке Как привязать class к html элементу НАВСЕГДА?
Ответить с цитированием
  #5 (permalink)  
Старый 08.02.2017, 19:48
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

рони, нет, это вообще не то. Может есть идеи по перерисовки? Мне кажется, что можно как-то обхитрить замерами перерисовки.
Ответить с цитированием
  #6 (permalink)  
Старый 09.02.2017, 12:24
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

Ладно, такой вопрос: какой цвет самый быстрый и какой цвет самый медленный в плане отрисовки в CSS?
Можно ведь ещё в сочетании с background-color сделать. Так вот, какие цвета для color/background-color лучше использовать для :visited и какие лучше для обычных ссылок? Чтобы время отрисовки было различимо и можно было понять, что из ссылок visited.

Буду благодарен за ответы.
Ответить с цитированием
  #7 (permalink)  
Старый 09.02.2017, 16:04
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от Ruslan_xDD
какой цвет самый быстрый и какой цвет самый медленный в плане отрисовки в CSS?
А разве цвет влияет на скорость? Рисовать то будет ни CSS, и даже не браузер, а система, которой будет передан цвет, который будет отдан экрану, который будет передан графической системе. Чем большим количество байт кодируется цвет, тем больше затрат. А какой при этом цвет, красный или зеленый не важно, в 24 битной палитре они оба представлены как 4 байта.

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

Или суть вопроса иная? )
Ответить с цитированием
  #8 (permalink)  
Старый 09.02.2017, 16:14
Аватар для Alexandroppolus
Профессор
Отправить личное сообщение для Alexandroppolus Посмотреть профиль Найти все сообщения от Alexandroppolus
 
Регистрация: 25.10.2016
Сообщений: 1,004

Ruslan_xDD,

Информация о посещениях сайтов считается конфиденциальной. Потому для :visited есть ряд ограничений (по стилями т.д.), чтобы невозможно было что-то выяснить скриптом. Те препятствия, на которые ты наткнулся, не случайны.

В браузерных расширениях - да, можно просто глянуть историю.
Ответить с цитированием
  #9 (permalink)  
Старый 09.02.2017, 16:41
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

laimas, странно, я проверял, линки чёрного цвета добавляются быстрее, чем линки синего.
Ответить с цитированием
  #10 (permalink)  
Старый 09.02.2017, 17:04
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от Ruslan_xDD
я проверял, линки чёрного цвета добавляются быстрее, чем линки синего.
Ну это если с локальными цветами работать, ибо черный это все 0, а в синем один байт равен 255, который нужно преобразовать в бинарное значение. Выигрыш будет еще больше, если задавать цвет в RGB, а не как HEX представление #000, не потребуется лишних операций.

Но если цвет не локальный, то без разницы какой он.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Detect Mobile Browsers Szorstki Мобильный JavaScript 13 16.02.2016 13:27
Links в iframe ssvetlana Ваши сайты и скрипты 1 04.11.2014 19:19
JS'ом поменять textDecoration только для случаев link и visited lancer Элементы интерфейса 3 05.04.2008 20:51