Мне и нескольким моим коллегам пришла в голову эта «глупая» идея попробовать преобразовать изображения в HTML-таблицы.По сути, это простая таблица HTML, в которой каждая ячейка имеет размер 1 на 1 пиксель и цвет фона CSS соответствует соответствующему пикселю в исходном изображении.
Давайте представим модель ситуации:
- Изображение размером 1920 x 1080 пикселей, преобразованное в таблицу HTML (что дает нам ровно 2 073 600 ячеек таблицы).
- Firefox и Chrome в Linux и Windows
- Запускна ноутбуке с процессором Intel Core i7-6820HQ и 16 гигабайтами оперативной памяти
Веб-страница, содержащая более 2 миллионов ячеек таблицы, изо всех сил пытается загрузиться в обоих браузерах как в Linux, так и в Windows, что занимает более 5 минут.полностью рендер.Internet Explorer 11 и Microsoft Edge не могут полностью загрузить страницу.Edge отображает страницу с сообщением об ошибке «что-то пошло не так», а IE полностью вылетает.
Теперь у нас есть старый Mac Mini в офисе (конец 2014 г., i5, 8 гигабайт оперативной памяти), и я подумал, что было бы смешновидеть, как он вылетает и горит при попытке рендеринга этой страницы, предполагая, что safari просто рухнул.
Однако он не только работал, но и отображал страницу значительно быстрее, чем машины с Windows и Linux, занимая только приблизительно45 секунд.
Когда мы попробовали одну и ту же страницу в Chrome на том же Mac, это заняло около 5 минут, как и на других машинах.
Таким образом, мой вопрос - почему Safari на4-летний Mac Mini отображает эту страницу намного быстрее, чем Chrome на том же Mac и любом другом браузере на значительно более мощном оборудовании?
Очень короткий пример кода.Полное демо можно увидеть по ссылке CodePen ниже.
<style>td { width: 1px; height: 1px; } table {border-collapse: collapse;}</style><table>
<tr>
<td style="background-color: rgb(255, 255, 255);"></td>
...
Пример со значительно меньшим изображением (CodePen Link)