«Сибком» — еще один производитель программируемых контроллеров для автоматизации промышленности
Среди разработок компании — локальные системы автоматизации на базе программируемых логических контроллеров (ПЛК), многоуровневые территориально-распределенные системы управления, системы диспетчерского управления и сбора данных. Для реализации проектов в рамках программы импортозамещения используется оборудование и программные комплексы нашего производства: ПТК «КАСКАД», ПЛК СК-4000, ПЛК СК-1000, блоки питания, реле, искробезопасные барьеры, шкафы. Для заказчиков очевидные плюсы: идет уменьшение затрат на оборудование, сокращаются сроки его изготовления и поставки.
СК-1000 — ЦЕНТРАЛЬНЫЙ ПРОЦЕССОР — СБПУ.424457.001 ОПИСАНИЕ: Мощный высокопроизводительный центральный процессор СК-1000 выполнен в компактном корпусе, функционал которого позволяет реализовать ряд технологических функций.
| Рабочая память | 75 Кбайт |
|---|---|
| Напряжение питания | 24 В |
| Коммуникационная скорость | 10/100 Мбит/с |
| Слот под SD Card | до 32 Гб |
| Дискретные входы | 14 |
| Дискретные выходы | 10 (релейные) |
| Аналоговые входы | 2 |
| Габаритные размеры (ШхВхГ) | 110×100×75 |
СК-4000 — ЦЕНТРАЛЬНЫЙ ПРОЦЕССОР — СБПУ.421417.401 ОПИСАНИЕ: Процессор используется для решения задач автоматизации средней степени сложности и обладает мощным технологическим функционалом.
ПТК «КАСКАД»
Программно-технический Комплекс Автоматизированных Систем Контроля, Администрирования и Диспетчеризации (ПТК «КАСКАД») разработан для создания систем управления крупных территориально распределенных систем. Отвечает повышенным требованиям к масштабируемости, надежности и безопасности.
Закодированы на отставание
Проблемы отечественной микроэлектроники приходится решать с помощью «Шилки»
Сможет ли Российская Федерация обойтись без западных партнеров в создании новых микропроцессоров и электронно-вычислительных машин? Это, пожалуй, одна из самых острых проблем импортозамещения в условиях санкций.
Последними ноу-хау с нами, понятно, и раньше никто не собирался делиться. На это могли рассчитывать только самые наивные мечтатели. Нам необходима форсированная разработка собственной электронной компонентной базы (ЭКБ), которая, к сожалению, многие годы серьезно уступает лучшим зарубежным образцам. Как возникло это роковое отставание на стратегическом направлении? Каковы пути решения проблемы?
Советские ЭВМ первого поколения запоздали по сравнению с американскими всего на несколько лет. Ламповые машины М-1 Исаака Брука, МЭСМ Сергея Лебедева, «Стрела» Юрия Базилевского, «Урал-1» Башира Рамеева оказались вполне эффективны для решения основных оборонных и научных задач страны.
Еще в августе 1948-го Башир Рамеев с Исааком Бруком представили первый в СССР проект «Автоматическая цифровая электронная машина». Пик развития ЭВМ пришелся на 1953–1968 годы. Главный инженер Пензенского НИИ математических машин, заместитель директора по научной работе Рамеев стал основоположником советской вычислительной техники. Ему выдан первый в СССР патент на электронную машину «Урал».
Спустя несколько лет их выпуск решено было прекратить и перейти на ЕС ЭВМ (единая система электронных вычислительных машин). Казалось бы, правильное решение. Ошибка заключалась в том, что мы пошли по пути клонирования американских IBM. В частности, серий System/360 и System/370, выпускавшихся в США c 1964 года. А любой клон, как известно, хуже оригинала. Путь копирования неизбежно ведет к зависимости от лидера, отставанию, что и произошло.
Машины ЕС ЭВМ активно работали в СССР и странах СЭВ с 1971 по 1990 год, после чего стали выводиться из эксплуатации. Какое-то время нам еще удавалось выпускать устройства «Ряд 3», «Ряд 4». В них были частично реализованы технические усовершенствования, не имевшие аналогов в машинах IBM. В частности, специализированные вычислительные блоки, векторные и матричные процессоры, работавшие на иных физических принципах (оптический). Но ситуацию в целом это не изменило, включая и оборонное направление.
В 1961–1967 годах для системы ПРО А-35, например, были созданы серия высокопроизводительных двухпроцессорных ЭВМ серии 5Э92 и вычислительная сеть на их базе, состоящая из 12 машин с полным аппаратным контролем и автоматическим резервированием. Они использовались в Центре контроля космического пространства (ЦККП), многих информационных и научных центрах военного профиля. В 1970-м при создании второго поколения ПРО в ИТМиВТ началась разработка перспективного вычислительного комплекса «Эльбрус» с производительностью 100 миллионов операций в секунду. Более поздняя его модификация (1985) в 10-процессорном исполнении достигла уже 125 миллионов операций в секунду, став первой промышленной ЭВМ с суперскалярной архитектурой и самым мощным суперкомпьютером СССР. Он эксплуатировался в ядерных НИИ, ЦУПе, системе ПРО А-135. Но после распада Советского Союза разработки были остановлены. Сказались также эмбарго на продажу компьютерной техники (ограничения КОКОМ), объявленное нам после ввода советских войск в Афганистан в 1980-м, экономический развал в годы перестройки. Производители из бывшего СССР не смогли бороться за рынок, они лишились госзаказов, оборотных средств, их организационные структуры подвергались приватизации и ликвидации. В результате наиболее серьезные специалисты перешли на работу в IBM, другие западные компании.
«То был, безусловно, просчет нашего руководства, поскольку мы до 1968-го, даже до 1973-го шли вровень с ведущими компаниями США. У НАСА были своя школа, своя схемотехника, свои конструкции, программное обеспечение, операционные системы, – вспоминает те годы генеральный директор предприятия «Рубин» Виктор Безяев. – Как, впрочем, и у нас: те же ЭВМ «Урал» использовались не только в народном хозяйстве, но и в Министерстве обороны. Полет Юрия Гагарина, управление космической связью обеспечивались этими машинами. В Центре управления космической связью (ЦУКОС), вычислительных центрах МО СССР стояли машины «Урал», системы «Корунд», «Лотос».
Спохватившись, политическое руководство СССР начало спешно строить заводы по производству ЭКБ в Минске («Интеграл»), Кишиневе, Ереване, Алма-Ате, Ташкенте… Все они после распада страны оказались за границей. В России сохранились только «Ангстрем» и «Микрон» (Зеленоград), которые долгое время влачили жалкое существование. В стране тогда возобладала политика пофигизма: зачем создавать свое, если все можно купить за нефтедоллары.
Провал в электронной компонентной базе стал вопиющим, и теперь мы пожинаем его плоды. Специалисты прекрасно знают, в каком состоянии находится наша вычислительная техника даже сегодня, спустя четверть века после рождения новой России. Мы многое покупаем на Западе, но в связи с экономическими санкциями вынуждены переориентироваться на Китай, страны Юго-Восточной Азии. Что дальше? Этого никто не знает, поскольку за год-два свою ЭКБ решением «партии и правительства» не создашь.
В 2015 году Минпромторг зафиксировал, что по «микропроцессорам отечественной разработки для персональных компьютеров с современными топологическими нормами (16 нанометров), высоким уровнем производительности. » отечественный рынок на 100 процентов занят импортом. В переводе на русский это означает: ничего своего.
В военном секторе микропроцессоров ситуация в 2014-м была ненамного лучше. Применение зарубежной ЭКБ в изделиях собственного производства достигало 5–10 процентов – для ракетной техники, 10–20 процентов – для систем управления комплексами, 20–30 процентов (от общей номенклатуры) – для систем опознавания государственной принадлежности. Электронные модули и блоки, поставляемые по кооперации, сейчас содержат до 70 процентов зарубежной ЭКБ. В производстве спутников «Глонасс-М» от 75 до 80 процентов – западные комплектующие. Ситуация, мягко говоря, острейшая, хотя в военной сфере ее удается сглаживать. Как? Загадка. Видимо, работают «серые» схемы поставок.
Пик развития ЭВМ пришелся на 1953–1968 годы. Фото: hsto.org
Еще сложнее дело с созданием самых совершенных процессоров и топоразмерами. По шагу технологического процесса на производствах микросхем Россия находится на уровне 90–65 нанометров (нанометр – миллиардная часть метра). Причем достоверной информации о серийном выпуске в России изделий с шагом технологического процесса 65 нанометров пока нет. Министр промышленности и торговли Денис Мантуров сообщил: в 2018 году начнется производство микроэлектроники по типоразмеру до 65 нанометров, что рассматривается как достижение. Но ведущие зарубежные компании уже работают с шагом 14 нанометров (Intel и Samsung) или 16 нм (TSMC). Ведется разработка техпроцесса под 10 и даже 7 нанометров.
Что это дает? Чем меньше кристаллы микросхем, тем большее их количество помещается на одну кремниевую пластину, она не только начинает обладать большей памятью, но и становится дешевле. Одновременно снижаются габариты электронных изделий, растет их производительность, падает потребление энергии.
Смена парадигм (отношения к данной проблеме) в стране произошла постепенно. Первыми осознали и забили тревогу в Министерстве обороны, поскольку именно военные отвечают за оборону и безопасность. Это произошло после прихода на пост главы военного ведомства Сергея Шойгу. Но вскрылись новые проблемы, в частности, с централизацией управления предприятиями ОПК, у которых много собственников, не подчиняющихся никому, даже Минпромторгу. По факту получается: в стране не существует единой системы управления промышленностью. Ею руководят корпорации, холдинги, концерны, одним словом, собственники. А это довольно разношерстная компания, хотя речь не об отношениях собственности, а о результатах работы. Минобороны может влиять на ситуацию только через ГОЗ.
Есть, конечно, приятные исключения из правил, когда производители работают в тесном взаимодействии с МО РФ. Одно из них – ОАО «НПП «Рубин», многопрофильное предприятие, поставляющее для Главного управления связи ВС РФ комплексные спутниковые аппаратные связи. Оно же представляет сервисные услуги по открытой и закрытой связи, производит системы управления ПВО. В возможностях одной из таких систем «Военно-промышленный курьер» удостоверился, побывав в зенитном ракетном полку Ивановской воздушно-десантной дивизии («Десант с алгоритмами»).
Самое главное в комплексе разведки и управления (МРУ-Д и МП-Д) как раз алгоритмы. Комплекс может управлять смешанными группировками (более 60 протоколов взаимодействия), работать с приданными средствами разведки в едином контуре, что является важнейшим элементом сетецентрической операции, когда действия человека минимизированы. Благодаря высокопроизводительным ЭВМ АСУ комплекса может управлять ЗРК «Бук», «Тор», «Тунгуска», «Стрела», ЗРПК «Панцирь», взаимодействует с ЗРС С-300. Причем вся ЭКБ в нем отечественная. Более того, уже разработано новое поколение под названием «Магистр», которое пока демонстрировалось только на закрытых показах. Все это хорошо, но такие изделия не решают проблемы в целом.
Мне на это скажут, что у нас есть различные ЗРК и ЗРС, существует многоэшелонированная система ПВО. Это так. Но не секрет, что она выстроена вокруг крупных городов и промышленных центров, таких как Москва, Санкт-Петербург, Новосибирск, Владивосток. А города с населением менее миллиона человек находятся в другой ситуации, не говоря уже о поселках и деревнях.
Вторая проблема в том, что в лихие 90-е весь север у нас фактически остался без радиолокационного прикрытия. Радиолокационные точки вдоль арктического побережья были ликвидированы. Лишь недавно удалось восстановить сплошное радиолокационное поле за счет станций СПРН (системы предупреждения о ракетном нападении). Но на низких высотах оно до сих пор имеет прорехи и нет никакой гарантии, что супостат не воспользуется этим.
Третья и самая серьезная – в своевременной засечке целей и их распределении по огневым средствам. Взять тот же комплекс разведки и управления ПВО МРУ-Д или МП-Д. Он может одновременно сопровождать, идентифицировать и распределять по пусковым установкам до 100 целей. Но в глобальном налете может участвовать и 200, и 300 крылатых ракет с дронами. А если их будет 500 или 1000? Такое количество целей уничтожить крайне сложно по целому ряду причин.
«Наша система управления опередила развитие огневых средств, которые могут оказаться неэффективны, особенно при работе по беспилотникам», – считает Безяев.
«Рой малоразмерных БЛА может перегрузить систему ПВО, что снизит эффективность стрельбы, – считает кандидат военных наук Анатолий Соколов. – БЛА с достаточной эффективной поверхностью рассеивания (ЭПР) в электромагнитном диапазоне обнаруживаются радарами, а миниатюрные с ЭПР не более 0,1 квадратного метра – с большим трудом. С учетом постановки противником помех – задача непростая».
Получается, за последние годы у нас созданы хорошие системы управления ПВО, есть эффективные огневые средства, соответствующие современным требованиям и способные бороться с серьезными целями. Но против «железных стрекоз» мы надежного противоядия еще не подобрали. Как нет стопроцентной защиты и от массированного налета крылатых ракет. Даже ПВО Москвы технически гарантировать этого не может.
И многое опять упирается в создание собственной ЭКБ.
«У нас предприятие высокотехнологичное: самый современный механический парк, автоматические линии для распайки печатных плат, автоматизированное монтажное производство. Но в аппаратных связи еще сохраняется большой процент импортных составляющих, – признается Безяев. – Локализация пока около 60 процентов».
И это на одном из лучших предприятий, по которому отчасти можно судить о состоянии других. План локализации здесь разработан до 2021 года. Если не подведет Минпромторг, который задает разработку ЭКБ в целом по стране, потребность в импортных составляющих через три года уменьшится. Но куда за это время скакнет развитие электронной компонентной базы за рубежом – большой вопрос.
Тот же «Рубин» намерен перейти на отечественные процессоры, в частности «Эльбрус 8С» (разработка ИНЭУМ при участии компании МЦСТ, входящей в Объединенную приборостроительную корпорацию). Кристалл микропроцессора в нем спроектирован по технологии 28 нанометров, имеет восемь процессорных ядер с улучшенной 64-разрядной архитектурой. Но во-первых, изделия пока очень дороги. Во-вторых, производительность у них все же недостаточно высока. А ведь в противовоздушном бою крайне важны даже доли секунды, когда надо почти мгновенно вычислить траекторию крылатой ракеты, просчитать варианты ее уничтожения.
Возьмем пример с единой системой управления тактического звена (ЕСУ ТЗ) «Созвездие» для Сухопутных войск. Она создается уже более 10 лет, а результаты оставляют желать лучшего. Разработка началась в 2000-м и продолжалась до 2010-го. Как рассказали «ВПК», докладывая о завершении работ начальнику Генерального штаба ВС РФ, один из высокопоставленных военных заявил тогда, что система полностью соответствует техническому заданию 2000 года, но не современным требованиям.
После этого начались ежегодные усовершенствования, продолжающиеся по сей день. Сначала появилось «Созвездие М2», потом «Созвездие-2015». Сейчас уже третье поколение. Если система не пройдет войсковую эксплуатацию и не начнет поступать в войска как серийная, это не решение. Отчасти объяснить все это можно сложностью задачи. ЕСУ ТЗ, как и ее иностранный аналог Future Combat Systems, кроме оборудования связи и навигации, включают крупнейшие компьютерные программы из когда-либо созданных в военной технике. ЕСУ ТЗ, по некоторым данным, содержит свыше 50 миллионов строк программного кода, что делает создание такой системы сложнее написания Microsoft Windows. Столь огромный объем кода связан с необходимостью управления большим количеством разнородной техники. Без отечественных высокопроизводительных процессоров тут никак не обойтись.
Все это говорит о том, что назрела необходимость ревизии министерств и ведомств, отвечающих за производство ЭКБ. С ельцинских времен в некоторых из них осели так называемые эффективные менеджеры. В том же Минпромторге, по мнению ветеранов радиопромышленности, много избыточных структур и не самых компетентных чиновников. К тому же на ведомство свалили все: самолеты, вертолеты, подводные лодки… Со знанием дела управлять разработкой и производством разношерстной номенклатуры ВВСТ крайне сложно. Чиновники невольно превращаются в простых учетчиков, которые собирают отчеты, но не могут предложить стратегию опережающего развития отрасли, составить ТЗ. Не слышно о результатах работы на этом направлении и из таких профильных структур, как инновационный центр «Сколково». Какова эффективность их работы?
Чтобы поправить ситуацию, необходимо:
разработать эффективную стратегию опережающего развития электронной промышленности и жестко контролировать ее выполнение;
во всех министерствах и ведомствах убрать лишние управленческие звенья;
создать комфортные условия для работы инженерной элиты;
обеспечить стабильное финансирование отрасли.
Почему бездарные футболисты, поп-дивы, различные смехачи получают заоблачные гонорары, а светила науки и техники, конструкторы и ученые, разработчики и производители высокотехнологичной продукции, испытатели ВВСТ вынуждены жить от оклада до оклада или искать счастья за пределами нашей Родины? Пока мы не ответим на этот простой вопрос, пока в стране будут снисходительно относиться к труду тех, кто создает высокотехнологическую продукцию и кует оборонную мощь, наши космические корабли будут падать, а распоряжение президента Российской Федерации о необходимости технологического прорыва – оставаться на бумаге.
Заголовок газетной версии – «Падение «Эльбруса».
Hsto org что это
1. Общая информация
API Хабр Карьеры заточен под интеграцию с внешними CRM-системами по управлению кандидатами. Он отдаёт отклики на вакансии, размещённые на нашем сервисе, а вместе с откликами и полное резюме откликнувшегося кандидата, включая все контактные данные, которые не скрыты настройками приватности. Скорость отдачи данных мгновенная, никаких ограничений на объем данных нет.
API не предназначен для работы с базой резюме напрямую и для ведения переписки с кандидатами.
Пользование API бесплатное. Вы платите только за размещение вакансий на нашем сервисе, как и все другие клиенты.
Для использования API нужно зарегистрировать приложение по адресу https://career.habr.com/profile/applications и настроить процесс авторизации по протоколу OAuth 2.0. Подробная документация по протоколу: RFC 6749.
Зарегистрированное приложение может запрашивать у пользователей сервиса разрешение доступа к их персональным данным, без получения и хранения их логина и пароля.
3. Процесс авторизации
В начале необходимо направить пользователя на страницу по адресу:
Если пользователь не авторизован на сайте, ему будет показана форма авторизации на сайте. После прохождения авторизации на сайте, пользователю будет выведена форма с запросом разрешения доступа вашего приложения к его персональным данным.
В ответ сервер пришлет JSON следующего вида:
Если обмен authorization_code произвести не удалось, то сервер вернётся ответ со статусом 400 Bad Request и следующим содержанием:
4. Сроки жизни токенов
5. Использование access-токена
Полученный access_token необходимо передавать в качестве параметра при любом запросе к API, например:
Успешный ответ приходит с кодом 200 OK и содержит информацию о текущем пользователе:
| Название поля | Тип | Описание |
|---|---|---|
| login | string | Логин пользователя |
| string | Email пользователя | |
| first_name | string | Имя |
| last_name | string | Фамилия |
| middle_name | string | Отчество |
| birthday | string | День рождения |
| avatar | string | Ссылка на аватар пользователя |
| location/city | string | Город |
| location/country | string | Страна |
| gender | string | Пол |
Успешный ответ приходит с кодом 200 OK и содержит массив вакансий:
Описание полей вакансии:
| Название поля | Тип | Описание |
|---|---|---|
| id | number | ID вакансии |
| title | string | Заголовок вакансии |
| published_at | string | Дата публикации |
| url | string | Ссылка на вакансию |
| location | string | Регион размещения вакансии |
| city | string | Город размещения вакансии |
| marked | boolean | Признак того, что вакансия выделена |
| company/name | string | Название компании |
| company/alias_name | string | Алиас компании |
| company/url | string | Ссылка на компанию |
| company/logo_url | string | Ссылка на логотип компании |
| employment_type | string | Тип трудоустройства |
| salary | string | Вилка зарплат |
| published | boolean | Статус публикации |
| paid | boolean | Статус оплаты |
Успешный ответ приходит с кодом 200 OK и содержит массив компаний пользователя:
Описание полей компании пользователя:
| Название поля | Тип | Описание |
|---|---|---|
| name | string | Название компании |
| alias_name | string | Алиас компании |
Успешный ответ приходит с кодом 200 OK и содержит массив кураторов вашей компании:
Описание полей куратора компании:
| Название поля | Тип | Описание |
|---|---|---|
| login | string | Логин пользователя на Хабр Карьере |
Успешный ответ приходит с кодом 200 OK и содержит массив счетов компании пользователя:
Описание полей счета компании пользователя:
| Название поля | Тип | Описание |
|---|---|---|
| id | number | Идентификатор счета |
| name | string | Название счета |
| balance | object | Баланс счета |
Успешный ответ приходит с кодом 200 OK и содержит массив откликов на вакансию:
Описание полей отклика:
Успешный ответ приходит с кодом 200 OK и содержит полную информацию о пользователе:
Контролируем scroll полностью или реализация события React: onRenderChildrenComplete
Всем привет! Я фуллстек, пишу код для сервиса TolstoyComments. В процессе работы был накоплен ценный опыт, как решать разного рода задачи на React. Этим опытом я хочу поделиться.
Бывало так, что после загрузки страницы, вам нужно сделать прокрутку экрана к заданному месту? Все ли всегда получалось с первого раза? И что делать если скролл все равно дергается в процессе загрузки страницы?
Ссылка на источник картинки https://donttakefake.com/otkuda-vzyalsya-mem-nelzya-prosto-tak-vzyat-i-rasskazyvaet-rezhisser-vlastelina-kolets/ Генератор мемов: iloveimg.com
Это пример самой комментируемой статьи на хабре когда скролл не с первого раза показывает нужный комментарий
Пример самой комментируемой статьи на хабре когда скролл не с первого раза показывает нужный комментарий
В примере я хотел показать, что даже на хабре это работает не с первого раза. Видно, что после инициализации страницы, нужный комментарий оказался в нужном месте, потом он куда-то улетел, а потом снова оказался в нужном месте.
Почему же так происходит?
Все дело в высоте содержимого над комментарием! Если в процессе отрисовки страницы изменится высота содержимого над комментарием, то позиционирование скролла будет потеряно.
Разберем более детально пример в начале статьи. Сначала загружается HTML и делается доскролл до нужного комментария. Потом скролл теряется, так как высота содержимого над комментарием изменилась и скролл уже показывает не туда куда надо. После этого происходит коррекция скролла и он снова начинает показывать куда надо. Здесь я делаю предположение, что возможно разработчики хабра это предусмотрели и на всякий случай сделали костыль, который срабатывает как раз в том случае если скролл все таки теряется.
Почему высота содержимого меняется?
Самый простой случай, когда содержимое верстки может менять свою высоту связано с выводом картинок. Картинки в верстке имеют ширину и высоту и чаще всего их вывод делается адаптивным за счет css стилей. Чаще всего пользуются вот таким сочетанием стилей:
Это магическая конструкция заставляет браузеры пропорционально масштабировать изображение, под разную ширину экрана. Но чтобы она корректно работала нужно выполнить одно условие: нужно чтобы в теге img были прописаны исходные размеры изображения: ширина и высота (параметры width и height).
Взглянем на верстку картинок в комментариях на Хабре:
Как можно видеть, атрибутов width и height тут нет, а значить браузер не сможет корректно определить высоту содержимого страницы до того, как начнется загрузка самой картинки.
Получается, чтобы обойти проблему с выводом картинок нужно:
Либо заранее прописывать корректные значения width и height
Либо вешать на картинку события onload onerror и обрабатывать эти события чтобы узнать о том когда картинка загрузится или не загрузится.
А по другому никак?
Да конечно, есть еще вариант как сделано на хабре, я кстати тоже так сделал при разработке комментариев на портале myslo.ru (пример ссылки на комментарий и отработки доскролла)
С помощью этих функций происходит повторная докрутка скролла если с первого раза что-то пошло не так. Конечно это приводит к некрасивым сайд эффектам на странице.
Как избавиться от сайд эффектов?
Все просто, нужно избавиться от динамического контента! Шучу конечно, на практике такое невозможно и это нужно как-то решать.
Самый простой пример реализации скролла до нужного элемента на react:
Есть некоторый компонент, после инициализации которого происходит вызов useLayoutEffect и перемещение скролла. В этом примере у нас нет элементов, которые могут менять свою высоту в процессе рендеринга страницы. Поэтому доскролл будет работать корректно.
Пример доскролла до элемента на codesandbox.
Теперь добавим немного динамического контента
Пример с подгрузкой картинок на codesandbox
Если внимательно посмотреть что будет происходить в этом примере то можно заметить как скролл сразу отображается на нужном месте но полоса скролла как-то странно уменьшается. Что же тут происходит?
Сначала происходит полная загрузка HTML. Потом браузер делает фокус скролла на нужном нам элементе. А потом происходит подгрузка картинок выше места скролла. Но поскольку все современные браузеры умные, то они автоматически двигает скролл так чтобы содержимое не смещалось относительно левого верхнего угла.
Браузер пытается любой ценой сохранить нужное нам положение скролла. Иногда у него это получается, иногда нет.
В случае использования scrollintoview браузер понимает на каком элементе нужно сохранить положение скролла до полной загрузки страницы, и поэтому положение скролла не теряется. Но что делать если у нас SPA и мы хотим реализовать восстановление положения скролла при переходе на шаг назад?
В этом случае, проблема в том что мы не можем использовать метод scrollintoview. Мы можем использовать window.scrollTo но этот метод уже не имеет такого умного поведения сохранения положения скролла.
Можно ли корректно восстановить скролл?
Для удобства я сделал вывод числового значения положения скролла и записал процесс обновления страницы в замедленном виде.
Страница загружается, потом происходит перемещение скролла на 1000 (как и нужно). Но потом скролл становится 1294 и даже 1589. Откуда такие значения скролла?
Пример с выводом текущего положения скролла, решенный через костыль codesandbox
Разберем написанный код:
Эта строка должна восстанавливать положение скролла, но она не работает, так как на странице есть динамические компоненты с изменяемой высотой.
Меня такое решение не устраивает!
Скролл дергается в процессе отрисовки страницы и это мягко говоря не красиво, а грубо говоря раздражает.
На этом месте уже можно сформулировать задачу:
Дано, страница с динамическими элементами, которые могут менять свою высоту в процессе отрисовки.
Нужно реализовать такой метод onRenderChildrenComplete чтобы он вызывался сразу после завершения отрисовки всех дочерних компонентов.
А если динамический компонент добавлен через условие? Здесь могут возникнуть сложности.
Формулируя выше описанные требования я решил все реализовать через контекст:
Здесь описана реализация заглушки для контекста.
После подключения хука в нем будет вызван инкримент счетчика countInit. А после завершения рендеринга в компоненте будет вызвано событие onRender и тем самым значения счетчика countRender совпадет со значением счетчика countInit. При совпадении этих значений произойдет вызова события onRenderChildrenComplete.
После загрузке всех картинок на странице происходит вызов метода, в котором запускается позиционирование скролла.
Конечно в реальных проектах могут быть совершенно разные динамические компоненты, намного сложнее приведенного примера с картинками. Здесь так же может идти речь о компонентах, которые нуждается в дополнительном fetch. Но тем не менее, описанный выше способ позволяет решить и эти проблемы.
Резюме
Контролировать положение скролла непросто. Велика вероятность получить сайд эффект или потерю положения скролла если делать позиционирование не в нужный момент. В мире React эту проблему можно решить и получить возможность корректного восстановления скролла для SPA сайтов. Пример в статье с картинками явно показывает что даже в случае нескольких динамических компонентов, событие завершения рендеринга всех дочерних компонентов отрабатывает корректно.
Приведенный мною код не решает всех проблем динамического рендеринга. Здесь по-прежнему остается просто поле скрытых нюансов, каждый из которых характерен для конкретной задачи.
