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

Широко распространено мнение, что число Пи является нормальным числом, а это означает, что любая строка цифр должна появляться где-то в своем десятичном представлении. Однако на самом деле математики еще не смогли этого доказать!

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

(1) При первой загрузке веб-сайта отображается всего несколько сотен цифр. Затем мы загружаем файл со всеми цифрами 1M в фоновом режиме. Размер файла 977 КБ (или 461 КБ в сжатом виде), примерно столько же, сколько большое изображение.

(2) Затем мы используем метод, который также можно найти на многих сайтах социальных сетей, когда вы просматриваете их бесконечную ленту новостей. Мы показываем вам только те цифры, которые в данный момент видны в окне просмотра, плюс несколько строк выше и ниже. Поскольку мы используем шрифт фиксированной ширины, очень эффективно определить, какие цифры должны быть видны в определенной позиции прокрутки.

(3) Когда вы прокручиваете список вниз, мы непрерывно берем элементы HTML, которые исчезли вверху, изменяем их содержимое, а затем добавляем их обратно внизу (и наоборот, когда вы прокручиваете вверх). Это означает, что мы используем только фиксированное количество элементов HTML (в нашем случае 100), независимо от того, сколько цифр мы хотим показать. Браузер хранит полную строку цифр в памяти, но это все же намного эффективнее, чем фактический рендеринг пикселей для каждой цифры на экране.

(4) При поиске подстроки мы можем просто использовать встроенную в JavaScript функцию String.indexOf, которая хорошо работает даже на недорогих мобильных устройствах. Как только мы узнаем, с какой цифры начинается ваша подстрока, легко вычислить, куда именно нам нужно прокрутить.

(5) Однако мы не хотим повторять один и тот же поисковый запрос снова и снова. Вот почему мы кэшируем результаты каждого поиска. Если вы нажмете клавишу Backspace, мы сразу узнаем результат. Если вы добавите дополнительную цифру в конце, мы сможем начать поиск с последнего результата, а не перебирать все предыдущие цифры заново.

Первоначально опубликовано на https://www.patreon.com.