Pull to refresh

Comments 96

Отлично!

Кстати, практическое применение вполне может быть, слишком хорошая и простая идея, чтобы быть бесполезной :)
Ну вообще я предполагал что это так, но решил проверить на каком кол-ве divов станет плохо браузеру.
UFO just landed and posted this here
И гипертекстовый, заметьте! :)
Реквистируем Мицгола.
а где там гипертекст-то? :\
Чтоб картинка была видна с отключёнными изображениями, ещё легче вставить в виде base64 кода в src.
Спасибо за тесты. Моя, более больная идея сделать джаваскрипт редактор изобращений тока что немного обломалась. Будем искать…
Из тойже истории, когда было нечего делать, наваял небольшой графический редактор на raphael+js: pihel.jino.ru/canvas/
Так симпатизирует SVG. Но масдайщики как всегда в своём духе. Может одумаются?
У них уже есть VML. Но так один стандарт конечно лучше.
UFO just landed and posted this here
По сравнению с Гомером Симпсоном (http://www.romancortes.com/blog/homer-css/) как-то слабовато ;)
sciphone n19+android 1.5+opera mini — первый хард ресет за 3 месяца=)))
телефон просто высрал кирпичами — «ЗА ЧТО??»
ну типо экран погас, только подстветка кнопок работает.
Типо на на 3(5,7,10)-сек удержание кнопки выключить не реагирует(типо она прогармная.)
Так что пришлось тыкнуть иголкой в фиговину, о которой кадый вледлец WM знает не по-наслышке=)
Это софт ресет. =) Хард ресет — это когда полный возврат к заводским установкам с удалением пользовательских данных и его обычно так просто не сделать =)
у моей WM хард резет был при сочетании кнопки софт-резета и кнопки включения и удержания их несколько секунд
1) Одинаковые цвета в идущих подряд пикселях нужно объединять в один элемент.
2) Вместо div лучше взять что-то покороче, b или i.
3) Конвертировать нужно не JPG, иначе много шума и первый пункт будет без толку.
4) RGB(255,255,255) длинее, чем #fff.
5) Gzip! Gzip! Gzip!
> 4) RGB(255,255,255) длинее, чем #fff.
еще рациональнее сделать цсску с каким-нибудь классом
.w{
background: #fff
}
Один преобладающий цвет можно вынести в background родителя.
после того как сервер ляжет я думаю все это сделается )))

ЗЫ забавно но ФФ быстрее отрисовал ЭТО на неакктивной вкладе, чем на активной *SCRATCH*
Это логично, ведь он не дёргает дерево и не перерисовывает каждый раз
Спасибо, я примерно такие же действия думал проделать.
1)Попробую продумать более эффективный алгоритм оптимизации
2)div на i или b — думал об этом, но экономию в 4 символа сначала посчитал незначительной, но практика показала что стоит это применить.
3)Спасибо, об этом не думал.
4)думал, но чтобы получить 6-ти значный hex каждый раз надо вызывать функцию по преобразованию rgb в hex — и я решил сервер пожалеть. Но вообще попробую.
5)Тоже хороший совет, спасибо!
Она у вас каждый раз чтоли генерируется? А кеширование?
Ну пока все вообще допотопно — для чистоты эксперимента, но прочитав все комменты, думаю надо сделать продвинутую версию, на этот раз чтобы не пределы браузеров оценивать, а чтобы получить более менее приемлемый результат по размеру файла и скорости его загрузки.
это видимо нагрузочное тестирование железа )))
Исходный код страницы на FF 3.6 так долго грузился, что я не поленился уйти заваривать чай.

В качестве оптимизации можно тащить с собой base64 от gif (ну или lzw от bmp) а рендерить в div'ы джаваскриптом через DOM, да и много как ещё можно.

А вообще, забавно.
Еще при оптимизации можно использовать цвет бордера.

Даже какой-то спортивный азарт появился — во сколько раз получиться уменьшить код ))
еще, как уже писали выше — вынести цсс
плюс к этому использовать разные односимвольные теги (a i b p u)
можно вообще отказаться от кодирования цветов через параметр style, прописать палитру в css и использовать классы — так код сократится почти вдвое.
также можно жать хтмл-код gzipом :)

хмм, еще можно подумать об альфа-канале ))
Любой «экстрим» помогает узнать границы технологии.
Я не ожидал, что такой относительно небольшой файл будет так тормозить.
Он notepad'ом++ открывается еле-еле (~816KB). А другой файлик (~9,6MB) просто летает в нем.
Может быть попробовать дивы выводить не в одну строку?
Спасибо, вы подвесили мой нетбук на 2 минуты
а ты попробуй ещё это файербагом посмотреть ;)
Пожалуй, я не буду этого делать
товарищи!
зато мы теперь все знаем зачем нам нужны 128 ядерные процессоры! )))
рано или поздно, обычно очень поздно (под утро), такие идеи приходят каждому =) но реализовать не у всех хватает нервов, или просто вовремя задают себе вопрос «Зачем? Лучше спать пойду»
Вашу б энергию, да в мирное русло… :)
Кстати, если теоретически прикинуть, взять мощный сервер, добавить javascript, то можно даже на анимацию замахнуться или даже на видео… Но реализацию этой задумки, я думаю, надо отложить пока лет на 5)))
Действительно, зачем нам тег <video>, какой-то HTML5.
Мы в лоб джаваскриптом видео реализeзуем )))
Поэтому нас русских никогда не победить! :)
У вас после 5, ноль в скобку превратился кажись…
Свежая аццкая идея: можно делать на этой основе капчи! :D
Я уже автору в личку это предложил, даже посильную помощь :)

А что автору нужно сделать, так это каждый див на новую строку поставить. Это будет куда легче для редакторов :)
Да ну. Берусь написать за полчаса скрипт, который не основе тех div'ов будет генерить растровую картинку обратно.
Более того, для успешного машинного распознавания капчи цвета не обязательно должны быть такие, как в оригинале. Поэтому можно спокойно забить на то, что часть цветов будет описана в CSS
есть впечатление, что кто-то слишком серьезно воспринял данную идею :)
я то — нет :)
А вот товарищ выше уже предлагал помощь автору топика в написании такой капчи :)
тогда ждем нового стартапа!
желательно чтобы это был Chrome, он точно справится.
У меня, кстати, в хроме открывается намного медленнее, чем в Опере. Еще и глючить при изменении масштаба страницы.
UFO just landed and posted this here
А разве с использованием таблицы работать быстрее не будет?
Firefox 3.6, всё хорошо, но опосля закрытия вкладки сборщик мусора собирает долго.
Перенесите в Информационная Безопасность — это же готовый эксплоит для Firefox )
при помощи php и библиотеке GD2

Ммм… Новый способ склонять слова :)
пробегаем по всем его пикселя

Афтар скушал букву
узнаем код цвет

Мощно. Узнаём и код, и цвет. Хотя речь явно про код цвета. Опять букву скушал, афтар очень голодный :)
такойже
наслождаться

Сахар — слОдкий

Афтар в ударе. Желаю чтобы в следующий раз ему приснился словарик :0)

Идея — баян. Даже не оптимизировали код с помощью CSS (то что Вы сделали в атрибуте style каждого div-а я затрудняюсь назвать, но это явно не оптимизация, а ерунда на постном масле)

PS: топику поставил минус, но за полученное мной удовольствие (от разбора текста по винтикам) ставлю в карму плюс. С искренней надеждой не увидеть больше такого на Хабре )))
Ммм… Новый способ склонять слова :)
Афтар скушал букву
Мощно. Узнаём и код, и цвет. Хотя речь явно про код цвета. Опять букву скушал, афтар очень голодный :)
Сахар — слОдкий
Афтар в ударе. Желаю чтобы в следующий раз ему приснился словарик :0)

всегда раздражали люди подобного типа — умники которые пытаются изящно пошутить, но получается натянутая хуита.
PS: я грамотный. Поэтому болезненно реагирую на ошибки и коверканье русского языка. Сам ошибок практически не делаю, зато опечатками страдаю

раз ты такой граммар-наци, че ж ты «автора» коверкаешь?
UFO just landed and posted this here
Ни рыба ни мясо

Вот примерно именно это я и хотел выразить ;)
Хоть один человек понял :)
Это было не коверканье. А тонкий намёк на толстые обстоятельства. Вам не понять
хреново потому что намекаешь может быть?
а то, что щас заявляешь, что публично с издевкой обращался к автору топика, то ты вдвойне мудак.
ты там снизу ответил:
А теперь, пожалуйста, огласите мои ошибки. Публично, я разрешаю :))) Заинтриговали, серьёзно

у тебя по ходу совсем все плохо с головой, поэтому претензий к тебе больше не имею
публично с издевкой

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

К чему это цитирование? Что тут не так в моей просьбе «огласите мои ошибки»? Мне говорят про МОИ ошибки, я их у себя НЕ замечаю и прошу их огласить

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

PS: ах да. Минусуйте, минусуйте, я из принципа не буду ставить Вам минус в карму
PPS: если надумаете давать ответный комментарий, не забудьте указать свою дату рождения. Интересно же. Я так вот хоть и «мудак», а не скрываю данную информацию. Вы же вешаете таблички на других, скрывая сведения о себе
PPPS: и тыкать мне тоже не надо, мы с вами на брудершафт не пили. В связи с этим «тыканьем» мне тем более интересно узнать Ваш возраст
Зато я наелся! Жалко, что не вы были моим учителем в школе; столь доходчивые объяснения, я уверен, принесли бы мне куда больше пользы!
Вы бы сначала на свои ошибки обратили внимание, чтобы потом стыдно не было. О таких вещах, к слову, принято писать лично автору.
А теперь, пожалуйста, огласите мои ошибки. Публично, я разрешаю :))) Заинтриговали, серьёзно
(«афтар» не в счёт, я это слово прокомментировал чуть выше)

В личку я пишу, вместо того чтобы предавать опечатки публичной огласке (да-да, поверьте), но не всегда. Данный случай был слишком тяжёлым и поэтому я решился на более болезненную процедуру, предвидя весь поток критики в мой адрес
Можно круто сократить, если сделать картинку в виде json массива с цветами в hex, а потом с помощью javascripta выводить.
Новый шаг к созданию векторного гипертекстового самизнаетекого? :)
Вообще круто, жаль что сравнительно долго грузиться.
UFO just landed and posted this here
Хм… А если это использовать при оптимизации загрузки страницы сделав в таком виде, к примеру, иконки 16x16px? Меньше запросов к серверу — быстрее грузится страница
Если я правильно посчитал:
минимальный — видимо это наименьший возможный размер кода для одного пикселя, если не рассматривать вариант с объединением в один блок одинаковых цветов, то 17 символов (в UTF) умножим дважды на 16 — получим 4352 байта для одной иконки. При этом, картинка, даже в PNG, весить будет около 450-500 байт.
так, HTML съелся. Вот что хотел написать — {р class=«a»}{/р} — видимо это наименьший возможный размер кода
<p class="a"> — достаточно. P можно не закрывать (черт, как я сам не додумался выше порекомендовать p :)
А если оптимизировать как тут предлагали?
-задать класс
-использовать тэги короче
-объединить близлежащие дивы
-цвета перевести в HEX

Ну id точно нет, т.к. для иконок 16X16, в рамках одного дизайна, впринципе можно выделить каждый цвет в отдельный однобуквенный класс, и потом использовать повторно. А id — это для каждого пикселя (читай блока) нужен будет свой класс, что повлечет за собой еще css-ину куда большего размера.
Хм… А разве #w {background:#fff;} не имеет место быть?
ну так элемент с ID «w» может быть только один на странице. Поэтому, в лучшем случае, css получиться примерно таким #w1, #w2, #3 {background:#fff;}. А если мы создадим просто класс .w{background:#fff;} и для всех белых пикселей будет указывать его, то это даст большую экономию, если рассматривать итоговый результат.
Пожалуй, да.
А если вернуться к вопросу оптимизации страницы и предположить, что наши иконки имеют, в основном, одну цветовую гамму то тут можно добиться экономии в размерах (не только в запросах на сервер). Такой способ можно использовать наряду с тем, который предлагают на webo.in
Попробовать бы конвертер на примерах…
UFO just landed and posted this here
Data:_URL не очень дружит c IE.
К тому же можно большую часть изображения разместить в css, а значит для него будет доступно кэширование
Так я же привёл вторую ссылку, там workaround для IE.
Это уже промышленное и экономичное решение, используется в duris.ru, web optimizer.
Для небольших иконок и прозрачных гифов самое то.
Кстати, в тему про капчи, можноли с помощью php генерить анимированный gif? Если можно, тогда надо сделать чтобы символы в капчи появлялись поочередно. Причем скорость появления была различной.
Причем скорость появления была различной.
Да, вот это точно обескуражит электронный мозг. «Как это с разной скоростью», подумает он и откажется распознавать.
А еще такие картинки должны отображаться даже если в браузере выключен показ изображений
Ну картинки отключают чтобы трафик экономить, а такой способ явно этому не содействует. Лучше классическая замена на текст.
А можно как-то покомпактней такой код сделать? Штука-то хорошая, для использования в качестве подставления ОЧЕНЬ нужной на сайте картинки — может и пригодиться.

Еще можно сделать неплохой тест на скорость ренедеринга. Опера вот показала, даже не подавилась — только картинку построчно несколько секунд прорисовывала (проц Turion 64 X2 1.61Ghz, Win7), исходник вообще не задумываясь вывела даже с огромным JS от AdMuncher. А вот IE8 намертво загрузил систему… Уже 10 минут думает.
UFO just landed and posted this here
почти офтопик — я бы поменял тэг html-вёрска на html-вёрстка
Самое прикольное, что на этой идее можно сделать капчу, которую генерить различными тегами и прогеры задолбаются писать парсары-распознавалки таких капч.
Sign up to leave a comment.

Articles