Nano Hash - криптовалюты, майнинг, программирование

Мозаика из ста квадратов по 1px против мозаики из четырех квадратов по 25px

Этот вопрос больше связан с тем, как браузер обрабатывает объекты, созданные/отображаемые с помощью HTML и CSS, а не просто вопросом сценария.

Если у меня есть элемент div размером 100 на 100 пикселей, и я хочу его чтобы иметь красивый полупрозрачный синий фон, но я не хочу использовать CSS для установки цвета фона на RGBA (а затем просто настроить альфа-канал) из-за проблем с совместимостью браузера, поэтому вместо этого я создаю файл .png, который является сплошным полупрозрачным синим и установите фоновое изображение div в этот файл png, а затем разместите его....

Я могу выложить сотню квадратов изображения размером 1 пиксель.

or

Я могу разместить четыре квадрата изображения размером 25 пикселей.

Оба будут создавать одинаковый эффект, за исключением того, что квадрат изображения 1px будет загружаться НАМНОГО быстрее, чем квадрат изображения 25px .... но мне интересно, будет ли наличие 100 квадратов изображения на экране отставать от браузера больше, чем только 4 изображения на экране это изображения большего размера? Сам браузер создает новую ссылку для каждой плитки изображения, а затем должен отслеживать их все и обновлять их положение?

Кажется, что размещение 100 000 изображений размером 1 на 1 пиксель на веб-экране будет отставать больше, чем размещение на экране одного изображения размером 100 000 на 100 000 пикселей? Особенно, если пользователь прокручивает вверх или вниз. Верно?

browser html css image-processing
20.10.2013

  • Я думаю, что в этом случае загружается только одно маленькое изображение. Я делал что-то подобное раньше, когда использовал небольшой квадрат .png вместо rgba. Я не помню подробностей, но он загружался намного быстрее, чем квадраты CSS. На днях я воссоздал его, и вы можете видеть, что CSS работает медленно. Вы должны сделать по одному из каждого и посмотреть временную шкалу инструментов разработчика и посмотреть, какой из них загружается быстрее. codepen.io/sheriffderek/pen/plAzv 20.10.2013
  • Кажется, это легко проверить. Вы? 20.10.2013

Ответы:


1

Задача повторения изображения n раз зависит от машины пользователя. Это зависит от вычислительной мощности машины среднего пользователя.

Если учесть, что в среднем вы получите 2-3 ГГц вычислительной мощности компьютера среднего пользователя и сравните это со средней скоростью загрузки 10 Мбит/с, я бы сказал, что узким местом является скорость загрузки. В наши дни отставание от скорости сети почти не заметно, поэтому разница будет настолько мала, что о ней не стоит беспокоиться, но, тем не менее, сетевое отставание при загрузке большего изображения, вероятно, будет хуже, чем отставание процессора для мозаичного изображения. изображение для браузера.

Независимо от того, разбиваете ли вы изображение большего размера 20 раз или меньшее изображение 200 раз, браузер все равно будет использовать один и тот же цикл выполнения для выполнения разбиения изображения, просто больше итераций в последнем, поэтому я думаю, что процессор будет намного эффективнее, чем сеть.

Кроме того, я бы сказал, что если вы можете добиться того же эффекта с меньшими изображениями, более продуманно и вежливо по отношению к вашим пользователям использовать абсолютную минимальную пропускную способность, возможную с этими безумными ценами интернет-провайдеров и ограничениями пропускной способности.

21.10.2013
  • Благодарю вас! Как раз то, что я искал! 21.10.2013
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..