{"id":491003,"date":"2026-08-14T21:07:46","date_gmt":"2026-08-14T21:07:46","guid":{"rendered":"https:\/\/savepearlharbor.com\/?p=491003"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=491003","title":{"rendered":"\u0417\u0430\u043c\u0435\u0442\u043a\u0438 \u043a\u0430\u043a \u0447\u0430\u0442\u044b: \u043f\u043e\u0447\u0435\u043c\u0443 \u044f \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u043b \u0438\u0441\u043a\u0430\u0442\u044c \u043f\u0430\u043f\u043a\u0443 \u0438 \u043d\u0430\u0447\u0430\u043b \u0438\u0441\u043a\u0430\u0442\u044c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435"},"content":{"rendered":"<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442 \u044f \u0410\u0440\u0442\u0443\u0440 \u0412\u0430\u043b\u0438\u0435\u0432, \u043f\u044f\u0442\u043d\u0438\u0447\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f, \u043f\u043e\u0435\u0445\u0430\u043b\u0438.<\/p>\n<h3>\u041f\u0440\u0438\u0432\u044b\u0447\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u044b\u0434\u0430\u0451\u0442 \u0434\u0438\u0430\u0433\u043d\u043e\u0437<\/h3>\n<p>\u042f \u043b\u043e\u0432\u043b\u044e \u0441\u0435\u0431\u044f \u043d\u0430 \u043c\u044b\u0441\u043b\u0438: \u043c\u044b\u0441\u043b\u044c \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c &#8212; \u0440\u0443\u043a\u0430 \u0442\u044f\u043d\u0435\u0442\u0441\u044f \u043d\u0435 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0437\u0430\u043c\u0435\u0442\u043e\u043a, \u0430 \u0432 Telegram, \u0432 \u0441\u0432\u043e\u0439 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0447\u0430\u0442. \u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439, \u0431\u0435\u0437 \u0442\u0443\u0440\u0431\u043e-\u0440\u0435\u0436\u0438\u043c\u043e\u0432 \u0438 \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0439. \u041f\u0440\u043e\u0441\u0442\u043e &#171;\u0418\u0437\u0431\u0440\u0430\u043d\u043d\u043e\u0435&#187;. \u0418 \u0434\u0435\u043b\u043e \u043d\u0435 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0442\u0430\u043c \u0443\u0434\u043e\u0431\u043d\u0435\u0435 <em>\u0445\u0440\u0430\u043d\u0438\u0442\u044c<\/em> &#8212; \u0434\u0435\u043b\u043e \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0442\u0430\u043c \u043f\u0440\u0438\u044f\u0442\u043d\u0435\u0435 <em>\u043f\u0438\u0441\u0430\u0442\u044c<\/em>. \u0421\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0432\u043b\u0435\u0442\u0430\u0435\u0442 \u0432 \u043b\u0435\u043d\u0442\u0443 \u0441 \u043b\u0451\u0433\u043a\u0438\u043c \u043f\u0440\u0443\u0436\u0438\u043d\u043d\u044b\u043c \u043e\u0442\u0441\u043a\u043e\u043a\u043e\u043c, \u043a\u0443\u0440\u0441\u043e\u0440 \u0443\u0436\u0435 \u0441\u0442\u043e\u0438\u0442 \u0442\u0430\u043c, \u0433\u0434\u0435 \u043d\u0443\u0436\u043d\u043e, \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u0430 \u043d\u0435 \u043f\u0440\u043e\u0441\u0435\u0434\u0430\u0435\u0442, \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0442\u043e\u0440\u043c\u043e\u0437\u0438\u0442 \u0434\u0430\u0436\u0435 \u043d\u0430 \u043f\u044f\u0442\u0438\u043b\u0435\u0442\u043d\u0435\u043c \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0435. \u042d\u0442\u043e \u043d\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u044f &#8212; \u044d\u0442\u043e \u043e\u0449\u0443\u0449\u0435\u043d\u0438\u0435. \u0418 \u0438\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u043e \u043e\u0449\u0443\u0449\u0435\u043d\u0438\u0435 \u043e\u0431\u044b\u0447\u043d\u044b\u0435 note-taking \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0442\u0430\u043a \u0438 \u043d\u0435 \u0441\u043c\u043e\u0433\u043b\u0438 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0441\u0442\u0438.<\/p>\n<h3>\u041f\u043e\u0447\u0435\u043c\u0443 \u044d\u0442\u043e \u043d\u0435 &#171;\u043f\u0440\u043e\u0441\u0442\u043e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438&#187;<\/h3>\n<p>\u0418\u043d\u0436\u0435\u043d\u0435\u0440\u044b Telegram \u0433\u043e\u0434\u0430\u043c\u0438 \u0434\u043e\u0432\u043e\u0434\u0438\u043b\u0438 \u0434\u043e \u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0441\u0442\u0438 \u0442\u043e, \u0447\u0442\u043e \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u043e\u0432 \u0441\u0447\u0438\u0442\u0430\u0435\u0442 \u043a\u043e\u0441\u043c\u0435\u0442\u0438\u043a\u043e\u0439: \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440-\u0434\u0432\u0438\u0436\u043e\u043a \u043f\u043e\u0432\u0435\u0440\u0445 Skia, \u0440\u0443\u0447\u043d\u0430\u044f \u0440\u0430\u0441\u0442\u0435\u0440\u0438\u0437\u0430\u0446\u0438\u044f \u0441\u0442\u0438\u043a\u0435\u0440\u043e\u0432 \u0438 \u0442\u0435\u043a\u0441\u0442\u0430, \u0438\u043d\u0442\u0435\u0440\u043f\u043e\u043b\u044f\u0446\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u043a\u0430\u0434\u0440\u0430\u043c\u0438 \u0432\u043c\u0435\u0441\u0442\u043e \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u044b\u0445 \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0445 transition&#8217;\u043e\u0432, spring-\u0444\u0438\u0437\u0438\u043a\u0430 \u0432\u043c\u0435\u0441\u0442\u043e ease-in-out \u043a\u0440\u0438\u0432\u044b\u0445 \u0438\u0437 \u0443\u0447\u0435\u0431\u043d\u0438\u043a\u0430. \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u2014 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 <em>\u043d\u0435 \u043e\u0449\u0443\u0449\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441<\/em>. \u0422\u044b \u043d\u0435 \u0436\u0434\u0451\u0448\u044c, \u043f\u043e\u043a\u0430 \u044d\u043a\u0440\u0430\u043d \u043e\u0442\u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044f, \u043d\u0435 \u0432\u0438\u0434\u0438\u0448\u044c \u0434\u0440\u043e\u0436\u0430\u043d\u0438\u0435 \u043f\u0440\u0438 \u0431\u044b\u0441\u0442\u0440\u043e\u043c \u0441\u043a\u0440\u043e\u043b\u043b\u0435 \u0442\u044b\u0441\u044f\u0447 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439, \u043d\u0435 \u0447\u0443\u0432\u0441\u0442\u0432\u0443\u0435\u0448\u044c paint lag \u043f\u0440\u0438 \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u0438 \u0447\u0430\u0442\u0430 \u0441 \u0438\u0441\u0442\u043e\u0440\u0438\u0435\u0439 \u0432 \u0433\u043e\u0434\u044b.<\/p>\n<p>\u0414\u043b\u044f \u043c\u0435\u0441\u0441\u0435\u043d\u0434\u0436\u0435\u0440\u0430 \u044d\u0442\u043e \u043a\u043e\u043d\u043a\u0443\u0440\u0435\u043d\u0442\u043d\u043e\u0435 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u043e. \u041d\u043e \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e \u2014 \u044d\u0442\u043e \u0435\u0449\u0451 \u0438 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u044b\u0439 \u0434\u0432\u0438\u0436\u043e\u043a \u0434\u043b\u044f \u0437\u0430\u043c\u0435\u0442\u043e\u043a, \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0438\u043a\u0442\u043e \u043d\u0435 \u0434\u043e\u0434\u0443\u043c\u0430\u043b\u0441\u044f \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0435\u0433\u043e \u0432 \u044d\u0442\u0443 \u0441\u0442\u043e\u0440\u043e\u043d\u0443. \u041f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0437\u0430\u043c\u0435\u0442\u043a\u0430 \u2014 \u044d\u0442\u043e, \u043f\u043e \u0441\u0443\u0442\u0438, \u0442\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435 \u043e\u0434\u043d\u043e\u0440\u0430\u0437\u043e\u0432\u043e\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435: \u0440\u043e\u0434\u0438\u043b\u0430\u0441\u044c, \u0443\u043b\u0435\u0442\u0435\u043b\u0430 \u0432 \u043b\u0435\u043d\u0442\u0443, \u043b\u0435\u0433\u043b\u0430 \u0432 \u0438\u0441\u0442\u043e\u0440\u0438\u044e. \u0420\u0430\u0437\u043d\u0438\u0446\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u0435\u043b\u0435.  <\/p>\n<h3>\u041f\u043e\u0447\u0435\u043c\u0443 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0437\u0430\u043c\u0435\u0442\u043a\u0438 \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u043b\u0438 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0432 \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u043e\u043c \u0432\u0438\u0434\u0435<\/h3>\n<p>\u0420\u0430\u043d\u044c\u0448\u0435 &#171;\u0437\u0430\u043c\u0435\u0442\u043a\u0430&#187; \u0431\u044b\u043b\u0430 \u043c\u0435\u0442\u0430\u0444\u043e\u0440\u043e\u0439 \u0431\u0443\u043c\u0430\u0436\u043a\u0438 \u043d\u0430 \u0441\u0442\u043e\u043b\u0435: \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a, \u0442\u0435\u043b\u043e, \u043f\u0430\u043f\u043a\u0430, \u0432 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0435\u0451 \u043d\u0430\u0434\u043e <em>\u0440\u0435\u0448\u0438\u0442\u044c<\/em> \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c. \u0412\u0441\u044f \u044d\u0442\u0430 \u043c\u0435\u0442\u0430\u0444\u043e\u0440\u0430 \u0434\u0435\u0440\u0436\u0430\u043b\u0430\u0441\u044c \u043d\u0430 \u043e\u0434\u043d\u043e\u043c \u0434\u043e\u043f\u0443\u0449\u0435\u043d\u0438\u0438 \u2014 \u0447\u0442\u043e \u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0435\u0441\u0442\u044c \u0432\u0440\u0435\u043c\u044f \u043f\u043e\u0434\u0443\u043c\u0430\u0442\u044c, \u043f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u0437\u0430\u043f\u0438\u0441\u0430\u0442\u044c. \u042d\u0442\u043e \u0434\u043e\u043f\u0443\u0449\u0435\u043d\u0438\u0435 \u0443\u043c\u0435\u0440\u043b\u043e \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u0442\u0435\u043c, \u043a\u0430\u043a \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0441\u044f \u0441\u0430\u043c \u0430\u043a\u0442 &#171;\u0432\u0441\u043f\u043e\u043c\u043d\u0438\u0442\u044c \u043c\u044b\u0441\u043b\u044c&#187;: \u0442\u0435\u043f\u0435\u0440\u044c \u043e\u043d\u0430 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u043c\u0435\u0436\u0434\u0443 \u0434\u0435\u043b\u043e\u043c, \u043d\u0430 \u0445\u043e\u0434\u0443, \u0432 \u043c\u0435\u0442\u0440\u043e, \u043f\u043e\u0441\u0440\u0435\u0434\u0438 \u0441\u043e\u0437\u0432\u043e\u043d\u0430 \u2014 \u0438 \u043b\u0438\u0431\u043e \u0444\u0438\u043a\u0441\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0437\u0430 \u0441\u0435\u043a\u0443\u043d\u0434\u0443, \u043b\u0438\u0431\u043e \u0442\u0435\u0440\u044f\u0435\u0442\u0441\u044f \u043d\u0430\u0432\u0441\u0435\u0433\u0434\u0430.<\/p>\n<p>\u041f\u0430\u043f\u043a\u0438, \u0446\u0432\u0435\u0442\u043d\u044b\u0435 \u0441\u0442\u0438\u043a\u0435\u0440\u044b, \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u044d\u043a\u0440\u0430\u043d\u044b &#171;\u0432\u044b\u0431\u0435\u0440\u0438 \u0446\u0432\u0435\u0442&#187; \u2014 \u0432\u0441\u0451 \u044d\u0442\u043e \u0431\u044b\u043b\u043e \u0441\u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043e \u0434\u043b\u044f \u043c\u0438\u0440\u0430, \u0433\u0434\u0435 \u0437\u0430\u043f\u0438\u0441\u044c \u043c\u044b\u0441\u043b\u0438 \u0431\u044b\u043b\u0430 \u043e\u0441\u043e\u0437\u043d\u0430\u043d\u043d\u044b\u043c, \u043d\u0435\u0442\u043e\u0440\u043e\u043f\u043b\u0438\u0432\u044b\u043c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435\u043c. \u0410 \u0441\u0435\u0433\u043e\u0434\u043d\u044f \u0437\u0430\u043f\u0438\u0441\u044c \u043c\u044b\u0441\u043b\u0438 \u0441\u043e\u0440\u0435\u0432\u043d\u0443\u0435\u0442\u0441\u044f \u0437\u0430 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0441 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0435\u043c \u043e\u0442 \u0431\u0430\u043d\u043a\u0430 \u0438 \u0441\u0442\u043e\u0440\u0438\u0441 \u0434\u0440\u0443\u0433\u0430. \u0412 \u044d\u0442\u043e\u0439 \u0433\u043e\u043d\u043a\u0435 \u0432\u044b\u0438\u0433\u0440\u044b\u0432\u0430\u0435\u0442 \u043d\u0435 \u0442\u043e\u0442 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441, \u0447\u0442\u043e \u043a\u0440\u0430\u0441\u0438\u0432\u0435\u0435 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u043d, \u0430 \u0442\u043e\u0442, \u0447\u0442\u043e \u043e\u0442\u043a\u043b\u0438\u043a\u0430\u0435\u0442\u0441\u044f \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u0447\u0435\u043b\u043e\u0432\u0435\u0447\u0435\u0441\u043a\u043e\u0439 \u043c\u044b\u0441\u043b\u0438. \u041c\u0435\u0441\u0441\u0435\u043d\u0434\u0436\u0435\u0440\u044b \u0432\u044b\u0438\u0433\u0440\u0430\u043b\u0438 \u044d\u0442\u0443 \u0433\u043e\u043d\u043a\u0443 \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e \u2014 \u043e\u043d\u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u043f\u043e\u0434 \u0434\u0440\u0443\u0433\u0443\u044e \u0437\u0430\u0434\u0430\u0447\u0443 (\u043f\u0435\u0440\u0435\u043f\u0438\u0441\u043a\u0443), \u043d\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043e\u043a\u0430\u0437\u0430\u043b\u0441\u044f \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u044b\u043c \u0438 \u0434\u043b\u044f \u043c\u044b\u0448\u043b\u0435\u043d\u0438\u044f \u0432\u0441\u043b\u0443\u0445 \u0441 \u0441\u0430\u043c\u0438\u043c \u0441\u043e\u0431\u043e\u0439. \u041c\u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u043e \u0431\u044b\u043b\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f xiaomi \u0437\u0430\u043c\u0435\u0442\u043a\u0430\u043c\u0438 \u043d\u043e \u0432\u0440\u0435\u043c\u044f \u0440\u0430\u0441\u0441\u0442\u0430\u0432\u0438\u043b\u043e \u0432\u0441\u0435 \u0437\u0430 \u0441\u0435\u0431\u044f.<\/p>\n<p>\u041f\u043e\u044d\u0442\u043e\u043c\u0443 &#171;\u043e\u0431\u044b\u0447\u043d\u044b\u0435 \u0437\u0430\u043c\u0435\u0442\u043a\u0438&#187; \u043d\u0435 \u0443\u043c\u0435\u0440\u043b\u0438 \u0438\u0437-\u0437\u0430 \u043f\u043b\u043e\u0445\u043e\u0433\u043e \u0434\u0438\u0437\u0430\u0439\u043d\u0430. \u041e\u043d\u0438 \u0443\u043c\u0435\u0440\u043b\u0438, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u043b\u0438 \u0431\u044b\u0442\u044c \u0441\u0430\u043c\u044b\u043c \u0431\u044b\u0441\u0442\u0440\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u0437\u0430\u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043c\u044b\u0441\u043b\u044c \u2014 \u0430 Telegram, \u0441\u0430\u043c \u0442\u043e\u0433\u043e \u043d\u0435 \u0436\u0435\u043b\u0430\u044f, \u0441\u0442\u0430\u043b \u0438\u043c.<\/p>\n<h3>\u0421\u0430\u043c\u0430 \u043c\u0435\u0447\u0442\u0430<\/h3>\n<p>\u041c\u0435\u0447\u0442\u0430 \u043f\u0440\u043e\u0441\u0442\u0430\u044f \u0438 \u043d\u0430\u0433\u043b\u0430\u044f \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e: \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0437\u0430\u043c\u0435\u0442\u043e\u043a, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043e\u0449\u0443\u0449\u0430\u0435\u0442\u0441\u044f \u0440\u043e\u0432\u043d\u043e \u0442\u0430\u043a \u0436\u0435, \u043a\u0430\u043a \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0418\u0437\u0431\u0440\u0430\u043d\u043d\u043e\u0435 \u0432 Telegram. \u0422\u043e\u0442 \u0436\u0435 \u0440\u0435\u043d\u0434\u0435\u0440 \u0431\u0435\u0437 \u0435\u0434\u0438\u043d\u043e\u0433\u043e \u0440\u044b\u0432\u043a\u0430 \u043d\u0430 \u0434\u0435\u0441\u044f\u0442\u043a\u0430\u0445 \u0442\u044b\u0441\u044f\u0447 \u0437\u0430\u043f\u0438\u0441\u0435\u0439. \u0422\u0435 \u0436\u0435 \u043f\u0440\u0443\u0436\u0438\u043d\u043d\u044b\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u2014 \u043d\u0435 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0435, \u0430 \u043f\u0441\u0438\u0445\u043e\u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u0430\u0436\u043d\u044b\u0435: \u043e\u043d\u0438 \u0434\u0430\u044e\u0442 \u043c\u043e\u0437\u0433\u0443 \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043d\u0438\u0435 &#171;\u0437\u0430\u043f\u0438\u0441\u0430\u043d\u043e&#187; \u0431\u044b\u0441\u0442\u0440\u0435\u0435, \u0447\u0435\u043c \u0443\u0441\u043f\u0435\u0432\u0430\u0435\u0442 \u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u043e\u043c\u043d\u0435\u043d\u0438\u0435 &#171;\u0430 \u0442\u043e\u0447\u043d\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u043b\u043e\u0441\u044c?&#187;. \u0422\u043e\u0442 \u0436\u0435 \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u044b\u0439 \u043e\u0442\u043a\u043b\u0438\u043a \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b, \u0442\u043e\u0442 \u0436\u0435 \u043f\u043b\u0430\u0432\u043d\u044b\u0439 \u0438\u043d\u0435\u0440\u0446\u0438\u043e\u043d\u043d\u044b\u0439 \u0441\u043a\u0440\u043e\u043b\u043b, \u0442\u0430 \u0436\u0435 \u043d\u0435\u0437\u0430\u043c\u0435\u0442\u043d\u043e\u0441\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u2014 \u043a\u043e\u0433\u0434\u0430 \u0442\u044b \u043d\u0435 \u043e\u0441\u043e\u0437\u043d\u0430\u0451\u0448\u044c, \u0447\u0442\u043e \u0441\u043c\u043e\u0442\u0440\u0438\u0448\u044c \u043d\u0430 UI, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043e\u043d \u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u0442\u0440\u0435\u043d\u0438\u044f.<\/p>\n<p>\u0420\u0430\u0437\u043d\u0438\u0446\u0430 \u0441 \u0441\u0430\u043c\u0438\u043c Telegram \u2014 \u043d\u0435 \u0432 \u0434\u0432\u0438\u0436\u043a\u0435, \u0430 \u0432 \u0446\u0435\u043b\u0438. \u041d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u0441\u043e\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0448\u0443\u043c\u0430, \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u0447\u0443\u0436\u0438\u0445 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439, \u0432\u044b\u0442\u0435\u0441\u043d\u044f\u044e\u0449\u0438\u0445 \u0442\u0432\u043e\u0438 \u043c\u044b\u0441\u043b\u0438 \u0432\u043d\u0438\u0437 \u043b\u0435\u043d\u0442\u044b. \u0422\u043e\u043b\u044c\u043a\u043e \u0442\u0432\u043e\u0439 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0447\u0430\u0442 \u0441 \u0441\u0430\u043c\u0438\u043c \u0441\u043e\u0431\u043e\u0439, \u043d\u043e \u0441 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0438\u043c \u043f\u043e\u043b\u043d\u043e\u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u043c \u043f\u043e\u0438\u0441\u043a\u043e\u043c, \u0442\u0435\u0433\u0430\u043c\u0438 \u0438 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043e\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0418\u0437\u0431\u0440\u0430\u043d\u043d\u043e\u043c\u0443 \u0432 Telegram \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0434\u043e\u0434\u0443\u043c\u0430\u043b\u0438\u0441\u044c \u0434\u0430\u0442\u044c \u2014 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u044d\u0442\u043e \u043d\u0435 \u0431\u044b\u043b\u043e \u0438\u0445 \u0437\u0430\u0434\u0430\u0447\u0435\u0439.<\/p>\n<p>\u042d\u0442\u043e \u043d\u0435 \u043d\u043e\u0441\u0442\u0430\u043b\u044c\u0433\u0438\u044f \u043f\u043e \u0431\u0443\u043c\u0430\u0436\u043d\u044b\u043c \u0441\u0442\u0438\u043a\u0435\u0440\u0430\u043c. \u042d\u0442\u043e \u043f\u0440\u0438\u0437\u043d\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0438 \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u043f\u0440\u0438\u044f\u0442\u043d\u043e\u0441\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u2014 \u043d\u0435 \u0443\u043a\u0440\u0430\u0448\u0435\u043d\u0438\u0435 \u043f\u043e\u0432\u0435\u0440\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u0430 \u0447\u0430\u0441\u0442\u044c \u0441\u0430\u043c\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438. \u041c\u044b\u0441\u043b\u044c, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0442\u044f\u0436\u0435\u043b\u043e \u0437\u0430\u043f\u0438\u0441\u0430\u0442\u044c, \u2014 \u043f\u043e\u0442\u0435\u0440\u044f\u043d\u043d\u0430\u044f \u043c\u044b\u0441\u043b\u044c. \u0418 \u0435\u0441\u043b\u0438 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0435\u0451 \u043b\u0435\u0433\u043a\u043e, \u043d\u0443\u0436\u043d\u043e architecture \u0443\u0440\u043e\u0432\u043d\u044f \u043c\u0435\u0441\u0441\u0435\u043d\u0434\u0436\u0435\u0440\u0430, \u0430 \u043d\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0437\u0430\u043c\u0435\u0442\u043e\u043a \u2014 \u0437\u043d\u0430\u0447\u0438\u0442, \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0443\u0434\u0430 \u0438 \u043d\u0443\u0436\u043d\u043e \u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c.<\/p>\n<h2>\u0422\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0447\u0430\u0441\u0442\u044c: \u043a\u0430\u043a \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043e-\u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u043c\u0443 \u0431\u044b\u0441\u0442\u0440\u043e<\/h2>\n<p>\u041f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u044e \u043c\u0435\u0447\u0442\u0443 \u0441 \u043f\u0440\u043e\u0448\u043b\u043e\u0433\u043e \u0440\u0430\u0437\u0430, \u043d\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u2014 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e, \u0441 \u043a\u043e\u0434\u043e\u043c \u0438 \u043e\u0431\u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u044f. \u0411\u0435\u0440\u0443 \u0437\u0430 \u043e\u0441\u043d\u043e\u0432\u0443 \u0432\u0430\u0448 \u0441\u0442\u0435\u043a \u0432 TaskFlow-Ai (React 19 + Vite + better-sqlite3), \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0442\u0430\u043c \u0443\u0436\u0435 \u0432\u0438\u0434\u043d\u043e \u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0435, \u0438 \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0435 \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u044b \u0440\u044f\u0434\u043e\u043c.<\/p>\n<h3>\u0412\u0438\u0440\u0442\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043b\u0435\u043d\u0442\u044b \u2014 \u0438\u043d\u0430\u0447\u0435 10 000 \u0437\u0430\u043c\u0435\u0442\u043e\u043a \u0443\u0431\u044c\u044e\u0442 \u0440\u0435\u043d\u0434\u0435\u0440<\/h3>\n<p>Telegram \u043d\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 \u0432\u0441\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0447\u0430\u0442\u0430 \u0432 DOM\/View-\u0438\u0435\u0440\u0430\u0440\u0445\u0438\u044e \u2014 \u043e\u043d \u0434\u0435\u0440\u0436\u0438\u0442 \u0432 \u043f\u0430\u043c\u044f\u0442\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u0438\u0434\u0438\u043c\u0443\u044e \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u043f\u043b\u044e\u0441 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0431\u0443\u0444\u0435\u0440, \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442.<\/p>\n<p><code>QuickNotes.tsx<\/code> \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 <a href=\"http:\/\/notes.map\" rel=\"noopener noreferrer nofollow\"><code>notes.map<\/code><\/a><code>(...)<\/code> \u0431\u0435\u0437 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u2014 \u043d\u0430 50 \u0437\u0430\u043c\u0435\u0442\u043a\u0430\u0445 \u043d\u0435\u0437\u0430\u043c\u0435\u0442\u043d\u043e, \u043d\u0430 5000 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043d\u0430\u0447\u043d\u0451\u0442 \u0442\u043e\u0440\u043c\u043e\u0437\u0438\u0442\u044c \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u0440\u0435-\u0440\u0435\u043d\u0434\u0435\u0440\u0435 \u0441\u043f\u0438\u0441\u043a\u0430.<\/p>\n<pre><code class=\"typescript\">\/\/ \u041f\u043b\u043e\u0445\u043e (\u0442\u0435\u043a\u0443\u0449\u0438\u0439 QuickNotes.tsx) \u2014 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 \u0412\u0421\u0415 \u0437\u0430\u043c\u0435\u0442\u043a\u0438 \u0441\u0440\u0430\u0437\u0443{sortedNotes.map(note =&gt; &lt;NoteCard key={note.id} note={note} \/&gt;)}\/\/ \u0425\u043e\u0440\u043e\u0448\u043e \u2014 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043e\u043a\u043d\u0430import { useVirtualizer } from '@tanstack\/react-virtual';function NotesFeed({ notes }: { notes: Note[] }) {  const parentRef = useRef&lt;HTMLDivElement&gt;(null);  const virtualizer = useVirtualizer({    count: notes.length,    getScrollElement: () =&gt; parentRef.current,    estimateSize: () =&gt; 72, \/\/ \u0441\u0440\u0435\u0434\u043d\u044f\u044f \u0432\u044b\u0441\u043e\u0442\u0430 \"\u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f\"    overscan: 8,            \/\/ \u0431\u0443\u0444\u0435\u0440 \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 \u044d\u043a\u0440\u0430\u043d\u0430  });  return (    &lt;div ref={parentRef} style={{ overflow: 'auto', height: '100%' }}&gt;      &lt;div style={{ height: virtualizer.getTotalSize(), position: 'relative' }}&gt;        {virtualizer.getVirtualItems().map(row =&gt; (          &lt;div            key={row.key}            style={{ position: 'absolute', top: 0, transform: `translateY(${row.start}px)` }}          &gt;            &lt;NoteCard note={notes[row.index]} \/&gt;          &lt;\/div&gt;        ))}      &lt;\/div&gt;    &lt;\/div&gt;  );}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:87px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p><strong>\u041f\u043e\u0447\u0435\u043c\u0443 \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043a:<\/strong> DOM-\u0443\u0437\u0435\u043b \u0441\u0442\u043e\u0438\u0442 \u043f\u0430\u043c\u044f\u0442\u0438 \u0438 layout-\u043f\u0435\u0440\u0435\u0441\u0447\u0451\u0442\u0430. React \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u0441\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441 diff&#8217;\u043e\u043c <em>\u0434\u0430\u043d\u043d\u044b\u0445<\/em>, \u043d\u043e \u043d\u0435 \u0441\u043f\u0430\u0441\u0430\u0435\u0442 \u043e\u0442 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043e\u0431\u044f\u0437\u0430\u043d \u043f\u043e\u0441\u0447\u0438\u0442\u0430\u0442\u044c layout \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u0434\u0435\u0440\u0435\u0432\u0435. \u0412\u0438\u0440\u0442\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u2014 \u044d\u0442\u043e \u043d\u0435 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f React, \u044d\u0442\u043e \u043e\u0431\u0445\u043e\u0434 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f \u0441\u0430\u043c\u043e\u0433\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430.  <\/p>\n<h3>\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u2014 \u0442\u043e\u043b\u044c\u043a\u043e transform\/opacity, \u043d\u0438\u043a\u043e\u0433\u0434\u0430 height\/margin<\/h3>\n<p>\u041f\u0440\u0443\u0436\u0438\u043d\u043d\u044b\u0439 &#171;\u043e\u0442\u0441\u043a\u043e\u043a&#187; \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0432 Telegram \u2014 \u044d\u0442\u043e \u043d\u0435 \u0443\u043a\u0440\u0430\u0448\u0435\u043d\u0438\u0435, \u0430 GPU-\u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0442\u043d\u044b\u0439 \u0441\u043b\u043e\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435 \u0442\u0440\u043e\u0433\u0430\u0435\u0442 layout \u0432\u043e\u043e\u0431\u0449\u0435.<\/p>\n<pre><code class=\"typescript\">\/\/ \u041f\u043b\u043e\u0445\u043e \u2014 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f height\/margin \u0442\u0440\u0438\u0433\u0433\u0435\u0440\u0438\u0442 layout \u043d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 \u043a\u0430\u0434\u0440.note-enter { max-height: 0; margin-bottom: 0; }.note-enter-active { max-height: 200px; margin-bottom: 12px; transition: all 0.3s; }\/\/ \u0425\u043e\u0440\u043e\u0448\u043e \u2014 \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0442\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 + spring \u0432\u043c\u0435\u0441\u0442\u043e easeimport { motion } from 'framer-motion';&lt;motion.div  initial={{ opacity: 0, scale: 0.92, y: 12 }}  animate={{ opacity: 1, scale: 1, y: 0 }}  transition={{ type: 'spring', stiffness: 500, damping: 32 }}&gt;  &lt;NoteCard note={note} \/&gt;&lt;\/motion.div&gt;<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p><strong>\u041f\u043e\u0447\u0435\u043c\u0443:<\/strong> <code>opacity<\/code> \u0438 <code>transform<\/code> \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043c\u043e\u0436\u0435\u0442 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 GPU-\u0441\u043b\u043e\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u043e\u0442 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u043f\u043e\u0442\u043e\u043a\u0430 \u2014 main thread \u0441\u0432\u043e\u0431\u043e\u0434\u0435\u043d, jank \u043d\u0435 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u0434\u0430\u0436\u0435 \u043f\u043e\u0434 \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u043e\u0439. <code>height<\/code>\/<code>margin<\/code>\/<code>top<\/code> \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u043f\u0435\u0440\u0435\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c layout \u043a\u0430\u0436\u0434\u044b\u0439 \u043a\u0430\u0434\u0440 (reflow) \u2014 \u044d\u0442\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u043e \u0434\u0440\u0435\u0431\u0435\u0437\u0436\u0430\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0447\u0443\u0432\u0441\u0442\u0432\u0443\u0435\u0442\u0441\u044f \u043a\u0430\u043a &#171;\u0442\u043e\u0440\u043c\u043e\u0437\u0438\u0442&#187;. Spring \u0432\u043c\u0435\u0441\u0442\u043e <code>ease-in-out<\/code> \u2014 \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043f\u0440\u0443\u0436\u0438\u043d\u0430 \u0440\u0435\u0430\u0433\u0438\u0440\u0443\u0435\u0442 \u043d\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u0443\u044e \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f (\u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0435\u0440\u0432\u0430\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0441\u0432\u0430\u0439\u043f\u043e\u043c \u043d\u0430 \u0441\u0435\u0440\u0435\u0434\u0438\u043d\u0435), \u0430 \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u043a\u0440\u0438\u0432\u0430\u044f \u2014 \u043d\u0435\u0442.  <\/p>\n<h3>\u041e\u043f\u0442\u0438\u043c\u0438\u0441\u0442\u0438\u0447\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440 \u2014 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0434\u043e \u043e\u0442\u0432\u0435\u0442\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0430<\/h3>\n<p>\u0412 Telegram \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u043b\u0435\u043d\u0442\u0435 \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e, \u0441 \u043e\u0434\u043d\u043e\u0439 \u0441\u0435\u0440\u043e\u0439 &#171;\u0433\u0430\u043b\u043e\u0447\u043a\u043e\u0439&#187;, \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0430 \u0434\u0432\u0435 \u0433\u0430\u043b\u043e\u0447\u043a\u0438 \u0443\u0436\u0435 \u043f\u043e\u0441\u043b\u0435 \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043d\u0438\u044f \u2014 \u043d\u043e \u0442\u044b \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0436\u0434\u0451\u0448\u044c \u0441\u0435\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0441\u0432\u043e\u0439 \u0442\u0435\u043a\u0441\u0442.<\/p>\n<pre><code class=\"typescript\">const sendNote = async (text: string) =&gt; {  const tempId = generateUUID();  const optimisticNote: Note = { id: tempId, content: text, createdAt: new Date().toISOString(), pending: true, ...defaults };  setNotes(prev =&gt; [...prev, optimisticNote]); \/\/ \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e \u0432 UI  try {    const saved = await sqliteApi.createNote(optimisticNote);    setNotes(prev =&gt; prev.map(n =&gt; n.id === tempId ? { ...saved, pending: false } : n));  } catch {    setNotes(prev =&gt; prev.map(n =&gt; n.id === tempId ? { ...n, failed: true } : n));  }};<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p><strong>\u041f\u043e\u0447\u0435\u043c\u0443:<\/strong> \u0417\u0430\u0434\u0435\u0440\u0436\u043a\u0430 \u043c\u0435\u0436\u0434\u0443 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435\u043c \u0438 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u043c \u043e\u0442\u043a\u043b\u0438\u043a\u043e\u043c \u2014 \u0433\u043b\u0430\u0432\u043d\u044b\u0439 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u043e\u0449\u0443\u0449\u0435\u043d\u0438\u044f &#171;\u0442\u043e\u0440\u043c\u043e\u0437\u0438\u0442&#187;, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0441\u0435\u0442\u044c \u0431\u044b\u0441\u0442\u0440\u0430\u044f. 100 \u043c\u0441 round-trip \u043a \u0441\u0435\u0440\u0432\u0435\u0440\u0443 \u0447\u0435\u043b\u043e\u0432\u0435\u043a \u043d\u0435 \u0437\u0430\u043c\u0435\u0447\u0430\u0435\u0442 \u043a\u0430\u043a \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0443 \u0441\u0435\u0442\u0438, \u043d\u043e \u0437\u0430\u043c\u0435\u0447\u0430\u0435\u0442 \u043a\u0430\u043a \u043b\u0430\u0433 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430. \u041e\u043f\u0442\u0438\u043c\u0438\u0441\u0442\u0438\u0447\u043d\u043e\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0443\u0431\u0438\u0440\u0430\u0435\u0442 \u044d\u0442\u0443 \u0441\u0432\u044f\u0437\u044c: UI = \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043e\u0442 \u0432\u0432\u043e\u0434\u0430, \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u044f \u2014 \u0444\u043e\u043d\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441.  <\/p>\n<pre><code class=\"typescript\">\/\/ \u041f\u043b\u043e\u0445\u043e (\u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u043a\u043e\u0434)useEffect(() =&gt; {  loadMessages();  const interval = setInterval(loadMessages, 3000);  return () =&gt; clearInterval(interval);}, []);\/\/ + JSON.stringify \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u043d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 \u0432\u044b\u0437\u043e\u0432\/\/ \u0425\u043e\u0440\u043e\u0448\u043e \u2014 \u0434\u043b\u044f \u0437\u0430\u043c\u0435\u0442\u043e\u043a (single-user, \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435) \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0435 \u043d\u0443\u0436\u0435\u043d pollingconst addNote = (note: Note) =&gt; {  setNotes(prev =&gt; [...prev, note]);   \/\/ \u0441\u0440\u0430\u0437\u0443 \u0432 state  sqliteApi.createNote(note);          \/\/ \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e \u0432 \u0444\u043e\u043d\u0435, \u0431\u0435\u0437 \u043e\u0436\u0438\u0434\u0430\u043d\u0438\u044f};\/\/ \u0415\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u0430 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u0432\u043a\u043b\u0430\u0434\u043a\u0430\u043c\u0438\/\u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438 \u2014 BroadcastChannel \u0438\u043b\u0438 SSE,\/\/ \u0430 \u043d\u0435 \u0438\u043d\u0442\u0435\u0440\u0432\u0430\u043b\u044c\u043d\u044b\u0439 \u043e\u043f\u0440\u043e\u0441const channel = new BroadcastChannel('notes_sync');channel.onmessage = (e) =&gt; setNotes(prev =&gt; mergeById(prev, e.data));<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p><strong>\u041f\u043e\u0447\u0435\u043c\u0443:<\/strong> Polling \u2014 \u044d\u0442\u043e \u043a\u043e\u043c\u043f\u0440\u043e\u043c\u0438\u0441\u0441 \u0434\u043b\u044f \u043c\u043d\u043e\u0433\u043e\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0447\u0430\u0442\u0430, \u0433\u0434\u0435 \u043d\u0443\u0436\u043d\u043e \u0443\u0437\u043d\u0430\u0442\u044c \u043e \u0447\u0443\u0436\u0438\u0445 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f\u0445 \u0431\u0435\u0437 WebSocket. \u0414\u043b\u044f \u0437\u0430\u043c\u0435\u0442\u043e\u043a \u0441\u0435\u0431\u0435 \u0442\u0430\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u0440\u043e\u043c\u0438\u0441\u0441\u0430 \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u2014 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043f\u0438\u0441\u0430\u0442\u0435\u043b\u044c \u044d\u0442\u043e \u0442\u044b \u0441\u0430\u043c, \u0437\u043d\u0430\u0447\u0438\u0442 state \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e \u0432 \u043c\u043e\u043c\u0435\u043d\u0442 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f, \u0431\u0435\u0437 \u0432\u0441\u044f\u043a\u043e\u0433\u043e &#171;\u043f\u043e\u0434\u043e\u0436\u0434\u0438 3 \u0441\u0435\u043a\u0443\u043d\u0434\u044b \u0438 \u0441\u0440\u0430\u0432\u043d\u0438 JSON&#187;.  <\/p>\n<h3>\u041f\u043e\u043b\u043d\u043e\u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0439 \u043f\u043e\u0438\u0441\u043a \u2014 FTS5 \u0432\u043c\u0435\u0441\u0442\u043e LIKE &#8216;%&#8230;%&#8217; \u043f\u043e JSON-\u0431\u043b\u043e\u0431\u0443<\/h3>\n<p>\u0421\u0435\u0439\u0447\u0430\u0441 \u0442\u0430\u0431\u043b\u0438\u0446\u0430 <code>notes<\/code> \u0445\u0440\u0430\u043d\u0438\u0442 \u0432\u0441\u0451 \u0432 \u043e\u0434\u043d\u043e\u0439 \u043a\u043e\u043b\u043e\u043d\u043a\u0435 <code>data TEXT<\/code> (<code>database.ts:51-55<\/code>). \u041f\u043e\u0438\u0441\u043a \u043f\u043e \u043d\u0435\u0439 \u043e\u0437\u043d\u0430\u0447\u0430\u043b \u0431\u044b <code>SELECT * FROM notes<\/code> + <code>JSON.parse<\/code> \u043d\u0430 <strong>\u043a\u0430\u0436\u0434\u043e\u0439<\/strong> \u0441\u0442\u0440\u043e\u043a\u0435 \u0432 JS \u2014 O(n) \u0441 \u0442\u044f\u0436\u0451\u043b\u044b\u043c \u043f\u0430\u0440\u0441\u0438\u043d\u0433\u043e\u043c \u043d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 \u0432\u0432\u043e\u0434 \u0441\u0438\u043c\u0432\u043e\u043b\u0430.<\/p>\n<pre><code class=\"typescript\">-- \u0412\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u0430\u044f FTS5-\u0442\u0430\u0431\u043b\u0438\u0446\u0430, \u0438\u043d\u0434\u0435\u043a\u0441\u0438\u0440\u0443\u044e\u0449\u0430\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043eCREATE VIRTUAL TABLE IF NOT EXISTS notes_fts USING fts5(  title, content, note_id UNINDEXED);-- \u0422\u0440\u0438\u0433\u0433\u0435\u0440\u044b \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0441 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0442\u0430\u0431\u043b\u0438\u0446\u0435\u0439CREATE TRIGGER notes_ai AFTER INSERT ON notes BEGIN  INSERT INTO notes_fts(rowid, title, content, note_id)  VALUES (new.rowid, json_extract(new.data,'$.title'), json_extract(new.data,'$.content'), new.id);END;<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<pre><code class=\"typescript\">\/\/ \u041f\u043e\u0438\u0441\u043a \u2014 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434\u044b \u0434\u0430\u0436\u0435 \u043d\u0430 100k \u0437\u0430\u043f\u0438\u0441\u0435\u0439, \u0440\u0430\u043d\u0436\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u043e \u0440\u0435\u043b\u0435\u0432\u0430\u043d\u0442\u043d\u043e\u0441\u0442\u0438 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043econst search = (query: string) =&gt; {  return db.prepare(`    SELECT notes.* FROM notes_fts    JOIN notes ON notes.rowid = notes_fts.rowid    WHERE notes_fts MATCH ?    ORDER BY rank    LIMIT 50  `).all(query + '*');};<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p><strong>\u041f\u043e\u0447\u0435\u043c\u0443:<\/strong> FTS5 \u0441\u0442\u0440\u043e\u0438\u0442 \u0438\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0438\u043d\u0434\u0435\u043a\u0441 (\u0441\u043b\u043e\u0432\u043e \u2192 \u0441\u043f\u0438\u0441\u043e\u043a \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u043e\u0432) \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u043f\u0440\u0438 \u0437\u0430\u043f\u0438\u0441\u0438, \u0430 \u043d\u0435 \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u043f\u043e\u0438\u0441\u043a\u0435. \u041f\u043e\u0438\u0441\u043a \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0438\u0437 &#171;\u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0438 \u0440\u0430\u0441\u043f\u0430\u0440\u0441\u0438\u0442\u044c \u0432\u0441\u0451&#187; \u0432 &#171;\u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432 \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u0438\u043d\u0434\u0435\u043a\u0441&#187; \u2014 \u0430\u0441\u0438\u043c\u043f\u0442\u043e\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0434\u0440\u0443\u0433\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430: O(n) \u043d\u0430 \u0437\u0430\u043f\u0438\u0441\u044c \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043d\u0430 O(log n) \u043d\u0430 \u0447\u0442\u0435\u043d\u0438\u0435 \u0432\u043c\u0435\u0441\u0442\u043e O(n) \u043d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 \u0447\u0438\u0445 \u043f\u043e\u0438\u0441\u043a\u0430.<\/p>\n<h2>\u041f\u043e\u0447\u0435\u043c\u0443 \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c \u044d\u0442\u043e \u0432\u0441\u0451 \u2014 \u043a\u043e\u043c\u043f\u0440\u043e\u043c\u0438\u0441\u0441: C++ \u043f\u0440\u043e\u0442\u0438\u0432 \u0440\u0430\u043d\u0442\u0430\u0439\u043c\u043e\u0432<\/h2>\n<p>\u041a\u043b\u044e\u0447\u0435\u0432\u0430\u044f \u0447\u0435\u0441\u0442\u043d\u0430\u044f \u043c\u044b\u0441\u043b\u044c: FTS5 \u0431\u044b\u0441\u0442\u0440\u044b\u0439 \u043d\u0435 \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u0432\u044b \u043f\u043e\u0437\u0432\u0430\u043b\u0438 \u0435\u0433\u043e \u0438\u0437 JS \u2014 \u043e\u043d \u0431\u044b\u0441\u0442\u0440\u044b\u0439, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e <strong>\u0441\u0430\u043c \u0434\u0432\u0438\u0436\u043e\u043a SQLite \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 C<\/strong> \u0438 \u0441\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d \u0432 \u043c\u0430\u0448\u0438\u043d\u043d\u044b\u0439 \u043a\u043e\u0434. <code>better-sqlite3<\/code> \u2014 \u044d\u0442\u043e \u0442\u043e\u043d\u043a\u0430\u044f synchronous-\u0431\u0438\u043d\u0434\u0438\u043d\u0433\u0430 \u043f\u043e\u0432\u0435\u0440\u0445 \u044d\u0442\u043e\u0433\u043e C-\u043a\u043e\u0434\u0430, \u0430 \u043d\u0435 \u043f\u0435\u0440\u0435\u0438\u0437\u043e\u0431\u0440\u0435\u0442\u0435\u043d\u0438\u0435 B-tree \u043d\u0430 JavaScript. \u0422\u043e \u0435\u0441\u0442\u044c \u0434\u0430\u0436\u0435 \u0432 \u0432\u0430\u0448\u0435\u043c &#171;\u0431\u044b\u0441\u0442\u0440\u043e\u043c&#187; \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0434\u0430\u044e\u0442 C, \u0430 \u043d\u0435 JS \u0432\u043e\u043a\u0440\u0443\u0433 \u043d\u0435\u0433\u043e. \u0418 \u0432\u043e\u0442 \u044d\u0442\u043e \u2014 \u043d\u0435 \u0447\u0430\u0441\u0442\u043d\u044b\u0439 \u0441\u043b\u0443\u0447\u0430\u0439, \u0430 \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u044b\u0439 \u043f\u0430\u0442\u0442\u0435\u0440\u043d.<\/p>\n<h3>\u0421\u0431\u043e\u0440\u0449\u0438\u043a \u043c\u0443\u0441\u043e\u0440\u0430 \u2014 \u0433\u043b\u0430\u0432\u043d\u044b\u0439 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u043d\u0435\u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u043e\u0433\u043e \u043b\u0430\u0433\u0430<\/h3>\n<p>\u0412 C++ \u0432\u0440\u0435\u043c\u044f \u0436\u0438\u0437\u043d\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 (RAII, \u0441\u0442\u0435\u043a, <code>unique_ptr<\/code>). \u041e\u0441\u0432\u043e\u0431\u043e\u0436\u0434\u0435\u043d\u0438\u0435 \u043f\u0430\u043c\u044f\u0442\u0438 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e \u0438 \u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u043e \u2014 \u043d\u043e\u043b\u044c \u043f\u0430\u0443\u0437 &#171;\u0441\u0442\u043e\u043f-\u043c\u0438\u0440&#187;.<\/p>\n<pre><code class=\"cpp\">\/\/ C++: \u043e\u0431\u044a\u0435\u043a\u0442 \u0443\u043d\u0438\u0447\u0442\u043e\u0436\u0430\u0435\u0442\u0441\u044f \u0434\u0435\u0442\u0435\u0440\u043c\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e, \u0432 \u043a\u043e\u043d\u0446\u0435 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438{    ChatMessage msg = loadMessage(id); \/\/ \u0441\u0442\u0435\u043a \u0438\u043b\u0438 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u0443\u0435\u043c\u0430\u044f \u043a\u0443\u0447\u0430    render(msg);} \/\/ \u0434\u0435\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u0432\u044b\u0437\u0432\u0430\u043d \u0417\u0414\u0415\u0421\u042c, \u0442\u043e\u0447\u043a\u0430 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u0430 \u043d\u0430 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<pre><code class=\"cpp\">\/\/ JS\/V8: \u043f\u0430\u043c\u044f\u0442\u044c \u043e\u0441\u0432\u043e\u0431\u043e\u0436\u0434\u0430\u0435\u0442\u0441\u044f \u041f\u041e\u0422\u041e\u041c, \u043a\u043e\u0433\u0434\u0430 \u0440\u0435\u0448\u0438\u0442 GC \u2014 \u043d\u0435 \u0432\u044blet msg = loadMessage(id);render(msg);\/\/ \u043e\u0431\u044a\u0435\u043a\u0442 \u0432\u0438\u0441\u0438\u0442 \u0432 \u043a\u0443\u0447\u0435, \u043f\u043e\u043a\u0430 V8 \u043d\u0435 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442 minor\/major GC \u2014\/\/ \u0430 \u043e\u043d \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043e\u0441\u0440\u0435\u0434\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0441\u043a\u0440\u043e\u043b\u043b\u0430<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p><strong>\u041f\u043e\u0447\u0435\u043c\u0443 \u044d\u0442\u043e \u0432\u0430\u0436\u043d\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0439:<\/strong> V8 \u043f\u0435\u0440\u0438\u043e\u0434\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 JS (&#171;stop-the-world&#187; \u0444\u0430\u0437\u0430 mark-sweep), \u0438 \u044d\u0442\u0430 \u043f\u0430\u0443\u0437\u0430 \u043c\u043e\u0436\u0435\u0442 \u0441\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c 5-50 \u043c\u0441 \u2014 \u0440\u043e\u0432\u043d\u043e \u043e\u0434\u0438\u043d-\u0434\u0432\u0430 \u043f\u0440\u043e\u043f\u0443\u0449\u0435\u043d\u043d\u044b\u0445 \u043a\u0430\u0434\u0440\u0430 \u043f\u0440\u0438 60fps. \u0422\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u0448\u044c \u044d\u0442\u043e \u0437\u0430\u043f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u0442\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u0448\u044c \u044d\u0442\u043e \u0438\u0441\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e, \u0442\u044b \u043c\u043e\u0436\u0435\u0448\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0434\u0435\u044f\u0442\u044c\u0441\u044f, \u0447\u0442\u043e GC \u043d\u0435 \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 \u043c\u043e\u043c\u0435\u043d\u0442, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0441\u0432\u0430\u0439\u043f\u0430\u0435\u0442 \u043b\u0435\u043d\u0442\u0443 \u0438\u0437 10 000 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439. \u0412 C++ \u0442\u0430\u043a\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u0438 \u043d\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u2014 \u043d\u0435\u0442 \u043f\u0430\u0443\u0437\u044b, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043d\u0435\u0442 \u0444\u0430\u0437\u044b &#171;\u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0432\u0441\u0451 \u0438 \u043f\u0440\u043e\u0439\u0442\u0438\u0441\u044c \u043f\u043e \u043a\u0443\u0447\u0435&#187;.  <\/p>\n<h3>\u041f\u0430\u043c\u044f\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442\u0430: \u043f\u043b\u043e\u0442\u043d\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 vs \u043a\u0443\u0447\u0430 \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0435\u0439<\/h3>\n<pre><code class=\"cpp\">\/\/ C++: \u043c\u0430\u0441\u0441\u0438\u0432 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439 \u2014 \u044d\u0442\u043e \u043d\u0435\u043f\u0440\u0435\u0440\u044b\u0432\u043d\u044b\u0439 \u0431\u043b\u043e\u043a \u043f\u0430\u043c\u044f\u0442\u0438struct Message { int64_t id; char text[256]; int64_t timestamp; };std::vector&lt;Message&gt; messages; \/\/ \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043b\u0435\u0436\u0430\u0442 \u043f\u043e\u0434\u0440\u044f\u0434 \u0432 RAM<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<pre><code class=\"cpp\">\/\/ JS: \u043c\u0430\u0441\u0441\u0438\u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u2014 \u044d\u0442\u043e \u043c\u0430\u0441\u0441\u0438\u0432 \u0423\u041a\u0410\u0417\u0410\u0422\u0415\u041b\u0415\u0419 \u043d\u0430 \u0440\u0430\u0437\u0431\u0440\u043e\u0441\u0430\u043d\u043d\u044b\u0435 \u043f\u043e \u043a\u0443\u0447\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044bconst messages = [  { id: 1, text: \"...\", timestamp: 123 }, \/\/ \u043e\u0431\u044a\u0435\u043a\u0442 A \u0433\u0434\u0435-\u0442\u043e \u0432 \u043a\u0443\u0447\u0435  { id: 2, text: \"...\", timestamp: 456 }, \/\/ \u043e\u0431\u044a\u0435\u043a\u0442 B \u0432 \u0434\u0440\u0443\u0433\u043e\u043c \u043c\u0435\u0441\u0442\u0435 \u043a\u0443\u0447\u0438];<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p><strong>\u041f\u043e\u0447\u0435\u043c\u0443 \u044d\u0442\u043e \u0432\u0430\u0436\u043d\u043e:<\/strong> \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440 \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442 \u043f\u043e <code>std::vector&lt;Message&gt;<\/code>, \u043e\u043d \u0447\u0438\u0442\u0430\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0438\u0437 \u043a\u044d\u0448\u0430 L1\/L2 \u2014 \u044d\u0442\u043e \u0441\u0430\u043c\u044b\u0439 \u0431\u044b\u0441\u0442\u0440\u044b\u0439 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043f\u0430\u043c\u044f\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u043e\u043e\u0431\u0449\u0435 \u0435\u0441\u0442\u044c \u0432 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0435 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0430 (prefetcher \u0443\u0433\u0430\u0434\u044b\u0432\u0430\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0431\u043b\u043e\u043a \u0437\u0430\u0440\u0430\u043d\u0435\u0435). \u041a\u043e\u0433\u0434\u0430 JS-\u0434\u0432\u0438\u0436\u043e\u043a \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442 \u043f\u043e \u043c\u0430\u0441\u0441\u0438\u0432\u0443 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432, \u043e\u043d \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u0439 \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0438 \u043f\u0440\u044b\u0433\u0430\u0435\u0442 \u043f\u043e \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u043c \u0430\u0434\u0440\u0435\u0441\u0430\u043c \u0432 \u043a\u0443\u0447\u0435 (&#171;pointer chasing&#187;) \u2014 \u043f\u043e\u0447\u0442\u0438 \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 cache miss \u043d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u0430 \u044d\u0442\u043e \u0432 10-100 \u0440\u0430\u0437 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u0435\u0435, \u0447\u0435\u043c \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u0447\u0442\u0435\u043d\u0438\u0435. \u041f\u0440\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0435 \u0442\u044b\u0441\u044f\u0447 \u044f\u0447\u0435\u0435\u043a \u0447\u0430\u0442\u0430 \u2014 \u044d\u0442\u043e \u0440\u0430\u0437\u043d\u0438\u0446\u0430 \u043c\u0435\u0436\u0434\u0443 &#171;\u043f\u043b\u0430\u0432\u043d\u043e&#187; \u0438 &#171;\u0434\u0451\u0440\u0433\u0430\u0435\u0442\u0441\u044f&#187;.<\/p>\n<h3>3. JIT \u2014 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438<\/h3>\n<p>C++ \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0432 \u043c\u0430\u0448\u0438\u043d\u043d\u044b\u0439 \u043a\u043e\u0434 \u043e\u0434\u0438\u043d \u0440\u0430\u0437, \u0434\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430. JS-\u0434\u0432\u0438\u0436\u043e\u043a \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0438\u043d\u0442\u0435\u0440\u043f\u0440\u0435\u0442\u0438\u0440\u0443\u0435\u0442 \u0431\u0430\u0439\u0442\u043a\u043e\u0434, \u043f\u043e\u0442\u043e\u043c \u2014 \u0435\u0441\u043b\u0438 \u043a\u043e\u0434 &#171;\u0433\u043e\u0440\u044f\u0447\u0438\u0439&#187; \u2014 \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u0442 \u0447\u0435\u0440\u0435\u0437 JIT (TurboFan \u0432 V8), \u0430 \u0435\u0441\u043b\u0438 \u0442\u0438\u043f\u044b \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0432\u0434\u0440\u0443\u0433 \u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0432 \u0440\u0430\u043d\u0442\u0430\u0439\u043c\u0435 \u2014 <strong>\u0434\u0435\u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u0443\u0435\u0442<\/strong> \u043e\u0431\u0440\u0430\u0442\u043d\u043e \u0432 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u044b\u0439 \u043f\u0443\u0442\u044c.  <\/p>\n<pre><code class=\"cpp\">\/\/ \u0412\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043d\u0435\u0432\u0438\u043d\u043d\u043e, \u0430 \u043d\u0430 \u0434\u0435\u043b\u0435 \u0443\u0431\u0438\u0432\u0430\u0435\u0442 JIT-\u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044efunction render(note) {  return note.pinned ? note.color : undefined; \/\/ note.color \u0438\u043d\u043e\u0433\u0434\u0430 string, \u0438\u043d\u043e\u0433\u0434\u0430 undefined}\/\/ V8 \u0441\u0442\u0440\u043e\u0438\u0442 \"hidden class\" \u043f\u043e\u0434 \u0444\u043e\u0440\u043c\u0443 \u043e\u0431\u044a\u0435\u043a\u0442\u0430; \u0435\u0441\u043b\u0438 \u0444\u043e\u0440\u043c\u0430 \u0441\u043a\u0430\u0447\u0435\u0442 \u2014\/\/ inline cache \u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f, \u043c\u0435\u0442\u043e\u0434 \u0441\u043d\u043e\u0432\u0430 \u0438\u043d\u0442\u0435\u0440\u043f\u0440\u0435\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p><strong>\u041f\u043e\u0447\u0435\u043c\u0443 \u044d\u0442\u043e \u0432\u0430\u0436\u043d\u043e:<\/strong> \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c JS-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0435\u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u0430 \u0432\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u2014 \u043f\u0435\u0440\u0432\u044b\u0435 \u043a\u0430\u0434\u0440\u044b \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0438\u043b\u0438 \u043f\u043e\u0441\u043b\u0435 \u0441\u043c\u0435\u043d\u044b \u0444\u043e\u0440\u043c\u044b \u0434\u0430\u043d\u043d\u044b\u0445 \u0437\u0430\u0432\u0435\u0434\u043e\u043c\u043e \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u0435\u0435, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0434\u0432\u0438\u0436\u043a\u0443 \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u043d\u043e\u0432\u043e &#171;\u043f\u0440\u043e\u0433\u0440\u0435\u0442\u044c\u0441\u044f&#187;. \u0423 Telegram Desktop (\u0447\u0438\u0441\u0442\u044b\u0439 C++\/Qt) \u0438 \u0443 \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440-\u0441\u043b\u043e\u044f Telegram Android (\u0441\u0432\u043e\u0439 Canvas-\u0434\u0432\u0438\u0436\u043e\u043a \u043f\u043e\u0432\u0435\u0440\u0445 Java, \u043d\u043e \u043a\u0440\u0438\u0442\u0438\u0447\u043d\u044b\u0435 \u043f\u0443\u0442\u0438 \u2014 \u043d\u0430 C++\/JNI) \u0442\u0430\u043a\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u043d\u0435\u0442 \u0432 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0435: \u043a\u043e\u0434 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e \u0431\u044b\u0441\u0442\u0440\u044b\u0439 \u0441 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043a\u0430\u0434\u0440\u0430.  \u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u0447\u0442\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0431\u0435\u0441\u043f\u043e\u043a\u043e\u0439\u0441\u0442\u0432\u043e \u0432 \u043a\u043e\u0434\u0435 \u044d\u0442\u043e Qt. <\/p>\n<h3>\u041e\u0434\u043d\u043e\u043f\u043e\u0442\u043e\u0447\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u043e\u0442\u0438\u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u043e\u0442\u043e\u043a\u043e\u0432<\/h3>\n<p>JS \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u2014 \u043e\u0434\u0438\u043d \u0433\u043b\u0430\u0432\u043d\u044b\u0439 \u043f\u043e\u0442\u043e\u043a \u043d\u0430 \u0432\u0435\u0441\u044c \u0440\u0435\u043d\u0434\u0435\u0440, layout, \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0438 \u0432\u0430\u0448\u0443 \u043b\u043e\u0433\u0438\u043a\u0443 \u0440\u0430\u0437\u043e\u043c. \u0425\u043e\u0447\u0435\u0448\u044c \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u0438\u0437\u043c \u2014 \u0438\u0437\u0432\u043e\u043b\u044c \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 Web Worker \u0447\u0435\u0440\u0435\u0437 <code>structured clone<\/code> (\u044d\u0442\u043e \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435!) \u0438 \u043e\u0431\u0440\u0430\u0442\u043d\u043e.<\/p>\n<pre><code class=\"cpp\">\/\/ \"\u041f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u0438\u0437\u043c\" \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u2014 \u044d\u0442\u043e \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0442\u0443\u0434\u0430-\u043e\u0431\u0440\u0430\u0442\u043d\u043eworker.postMessage(hugeNotesArray); \/\/ \u043a\u043b\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0432\u0441\u0435\u0433\u043e \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0432 \u0434\u0440\u0443\u0433\u043e\u0439 \u043f\u043e\u0442\u043e\u043aworker.onmessage = (e) =&gt; setNotes(e.data); \/\/ \u043a\u043b\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043e\u0431\u0440\u0430\u0442\u043d\u043e<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<pre><code class=\"cpp\">\/\/ C++: \u043f\u043e\u0442\u043e\u043a\u0438 \u0447\u0438\u0442\u0430\u044e\u0442 \u041e\u0411\u0429\u0423\u042e \u043f\u0430\u043c\u044f\u0442\u044c \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e, \u0431\u0435\u0437 \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044fstd::thread renderThread([&amp;messages]() {    for (auto&amp; msg : messages) render(msg); \/\/ \u043f\u0440\u044f\u043c\u043e\u0439 \u0434\u043e\u0441\u0442\u0443\u043f, \u043d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u043a\u043b\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f});<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p><strong>\u0417\u0430\u0447\u0435\u043c \u0432\u043e\u043e\u0431\u0449\u0435 \u0442\u0430\u043a\u0430\u044f \u0444\u0438\u0433\u043d\u044f:<\/strong> \u0434\u0435\u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u0442\u0438\u043a\u0435\u0440\u043e\u0432, \u0440\u0430\u0437\u0431\u043e\u0440 \u0438\u0441\u0442\u043e\u0440\u0438\u0438 \u0447\u0430\u0442\u0430, \u0438\u043d\u0434\u0435\u043a\u0441\u0430\u0446\u0438\u044f \u0442\u0435\u043a\u0441\u0442\u0430 \u0432 Telegram Desktop \u0438\u0434\u0451\u0442 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0438\u0445 \u043f\u043e\u0442\u043e\u043a\u0430\u0445 \u0441 \u043e\u0431\u0449\u0435\u0439 \u043f\u0430\u043c\u044f\u0442\u044c\u044e \u2014 \u0431\u0435\u0437 \u043d\u0430\u043b\u043e\u0433\u0430 \u043d\u0430 \u0441\u0435\u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e. \u0412 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u0438\u0437\u043c \u0444\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e \u0435\u0441\u0442\u044c, \u043d\u043e \u0446\u0435\u043d\u0430 \u0432\u0445\u043e\u0434\u0430 (\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445) \u0447\u0430\u0441\u0442\u043e \u0441\u044a\u0435\u0434\u0430\u0435\u0442 \u0432\u0435\u0441\u044c \u0432\u044b\u0438\u0433\u0440\u044b\u0448 \u043d\u0430 \u043e\u0431\u044a\u0451\u043c\u0430\u0445, \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u043d\u044b\u0445 \u0434\u043b\u044f \u0438\u0441\u0442\u043e\u0440\u0438\u0438 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u043a\u0438.  <\/p>\n<h3>\u0422\u0430\u043a \u043f\u043e\u0447\u0435\u043c\u0443 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 Telegram \u043e\u0449\u0443\u0449\u0430\u044e\u0442\u0441\u044f &#171;\u0431\u0435\u0437\u0443\u043c\u043d\u044b\u043c\u0438&#187;<\/h3>\n<p>\u0421\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u044f \u0432\u0441\u0451 \u0432\u043c\u0435\u0441\u0442\u0435: \u043d\u0435\u0442 \u043d\u0435\u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u044b\u0445 GC-\u043f\u0430\u0443\u0437 \u2192 \u043a\u0430\u0434\u0440 \u0432\u0441\u0435\u0433\u0434\u0430 \u0443\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 16 \u043c\u0441. \u0414\u0430\u043d\u043d\u044b\u0435 \u043b\u0435\u0436\u0430\u0442 \u043f\u043b\u043e\u0442\u043d\u043e \u0432 \u043f\u0430\u043c\u044f\u0442\u0438 \u2192 \u0440\u0435\u043d\u0434\u0435\u0440 \u0442\u044b\u0441\u044f\u0447 \u044f\u0447\u0435\u0435\u043a \u043d\u0435 \u0443\u043f\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u0432 \u043a\u044d\u0448-\u043f\u0440\u043e\u043c\u0430\u0445\u0438. \u041a\u043e\u0434 \u0441\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u2192 \u043d\u0435\u0442 \u0440\u0430\u0437\u043e\u0433\u0440\u0435\u0432\u0430 \u0438 \u0434\u0435\u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0439 \u043f\u043e\u0441\u0440\u0435\u0434\u0438 \u0441\u043a\u0440\u043e\u043b\u043b\u0430. \u0420\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0438\u0434\u0451\u0442 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0432 GPU-\u0441\u043b\u043e\u0439 \u0447\u0435\u0440\u0435\u0437 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0434\u0432\u0438\u0436\u043e\u043a (Skia \u043d\u0430 Desktop, \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 Canvas + \u0430\u043f\u043f\u0430\u0440\u0430\u0442\u043d\u044b\u0435 \u0441\u043b\u043e\u0438 \u043d\u0430 Android), <strong>\u043c\u0438\u043d\u0443\u044f DOM, CSS layout engine \u0438 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0439 DOM diffing \u0446\u0435\u043b\u0438\u043a\u043e\u043c<\/strong> \u2014 \u0442\u043e\u0433\u0434\u0430 \u043a\u0430\u043a \u043b\u044e\u0431\u043e\u0435 React\/CSS-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043e\u0431\u044f\u0437\u0430\u043d\u043e \u043f\u0440\u043e\u0439\u0442\u0438 \u0447\u0435\u0440\u0435\u0437 reflow\/repaint\/composite \u043f\u0430\u0439\u043f\u043b\u0430\u0439\u043d \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u0430\u043c \u043f\u043e \u0441\u0435\u0431\u0435 \u2014 \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0439, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442 \u043d\u0435 \u0437\u0430\u0442\u043e\u0447\u0435\u043d\u043d\u044b\u0439 \u043f\u043e\u0434 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e \u0432\u0430\u0448\u0443 \u043b\u0435\u043d\u0442\u0443 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439.<\/p>\n<h3>\u0427\u0435\u0441\u0442\u043d\u0430\u044f \u043e\u0433\u043e\u0432\u043e\u0440\u043a\u0430<\/h3>\n<p>\u042d\u0442\u043e \u043d\u0435 \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u0432\u0435\u0441\u044c \u0441\u0442\u0435\u043a TaskFlow-Ai \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u043d\u0430 C++ \u2014 SQLite\/FTS5 \u0438 \u0442\u0430\u043a C \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c, \u0430 \u0440\u0430\u0437\u0443\u043c\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439 React \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u0435\u0442 90% \u0440\u0430\u0437\u0440\u044b\u0432\u0430 \u0434\u043b\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0437\u0430\u043c\u0435\u0442\u043e\u043a \u0442\u0430\u043a\u043e\u0433\u043e \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0430. \u0420\u0430\u0437\u043d\u0438\u0446\u0430 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043a\u0440\u0438\u0442\u0438\u0447\u043d\u043e\u0439 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u043e\u0431\u044a\u0435\u043c\u0430\u0445 \u0438 \u0447\u0430\u0441\u0442\u043e\u0442\u0435 \u043a\u0430\u0434\u0440\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 Telegram \u043e\u0431\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u0435\u0442 \u043c\u0438\u043b\u043b\u0438\u0430\u0440\u0434\u0430\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439 \u0432 \u0434\u0435\u043d\u044c \u2014 \u0434\u043b\u044f \u043b\u0438\u0447\u043d\u044b\u0445 \u0437\u0430\u043c\u0435\u0442\u043e\u043a \u044d\u0442\u043e \u0441\u043a\u043e\u0440\u0435\u0435 \u043f\u043e\u0442\u043e\u043b\u043e\u043a \u0430\u043c\u0431\u0438\u0446\u0438\u0439, \u0447\u0435\u043c \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u043f\u0440\u044f\u043c\u043e \u0441\u0435\u0439\u0447\u0430\u0441.<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u0432\u044b\u0436\u0430\u0442\u044c \u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c \u0438\u0437 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0441\u0442\u0435\u043a\u0430 \u0431\u0435\u0437 \u043e\u0432\u0435\u0440\u0445\u0435\u043d\u0434\u0430, <strong>\u043b\u0443\u0447\u0448\u0435 \u0432\u0441\u0435\u0433\u043e \u043f\u043e\u0434\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0433\u043e\u0442\u043e\u0432\u044b\u0435 \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0438 \u0443 \u0442\u0435\u0445, \u043a\u0442\u043e \u0443\u0436\u0435 \u0440\u0435\u0448\u0438\u043b \u044d\u0442\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b:<\/strong><\/p>\n<ul>\n<li>\n<p><strong>\u0412 UI-\u0441\u043b\u043e\u0435 (React):<\/strong><\/p>\n<ul>\n<li>\n<p><strong>\u0412\u0438\u0440\u0442\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0438 Layout:<\/strong> \u0418\u0437\u0443\u0447\u0438 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 <strong>@tanstack\/react-virtual<\/strong> \u0438\u043b\u0438 <strong>ustatic\/react-window<\/strong>. \u041e\u0431\u0440\u0430\u0442\u0438 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u043a\u0430\u043a \u043e\u043d\u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u044e\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u0443\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 DOM-\u0434\u0435\u0440\u0435\u0432\u043e \u043f\u043b\u043e\u0441\u043a\u0438\u043c.<\/p>\n<\/li>\n<li>\n<p><strong>\u041f\u043b\u0430\u0432\u043d\u044b\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438:<\/strong> \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438, \u043a\u0430\u043a \u0432 <strong>Framer Motion<\/strong> \u0438\u043b\u0438 <strong>React Spring<\/strong> \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0432\u044b\u043d\u043e\u0441\u044f\u0442\u0441\u044f \u043d\u0430 GPU \u0447\u0435\u0440\u0435\u0437 <code>transform<\/code> \u0438 <code>opacity<\/code> \u0432 \u043e\u0431\u0445\u043e\u0434 \u0442\u044f\u0436\u0435\u043b\u043e\u0433\u043e React-\u0440\u0435\u0440\u0435\u043d\u0434\u0435\u0440\u0430.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>\u0412 \u043b\u043e\u0433\u0438\u043a\u0435 \u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0435 \u0434\u0430\u043d\u043d\u044b\u0445:<\/strong><\/p>\n<ul>\n<li>\n<p><strong>\u041e\u043f\u0442\u0438\u043c\u0438\u0441\u0442\u0438\u0447\u043d\u044b\u0439 UI:<\/strong> \u041e\u0442\u043b\u0438\u0447\u043d\u044b\u0439 \u0440\u0435\u0444\u0435\u0440\u0435\u043d\u0441 \u2014 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u044b <strong>TanStack Query (React Query)<\/strong> \u0432 \u0441\u0435\u043a\u0446\u0438\u0438 <em>Optimistic Updates<\/em>, \u043b\u0438\u0431\u043e \u043b\u043e\u0433\u0438\u043a\u0430 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0432 <a href=\"http:\/\/Linear.app\" rel=\"noopener noreferrer nofollow\"><strong>Linear.app<\/strong><\/a> (\u0438\u0445 \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u044b \u043c\u043d\u043e\u0433\u043e \u043f\u0438\u0441\u0430\u043b\u0438 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0434\u043e \u043e\u0442\u0432\u0435\u0442\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0430).<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>\u0412 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u0431\u0430\u0437\u043e\u0439:<\/strong><\/p>\n<ul>\n<li>\n<p><strong>\u0411\u044b\u0441\u0442\u0440\u044b\u0439 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u043e\u0438\u0441\u043a:<\/strong> \u0417\u0430\u0433\u043b\u044f\u043d\u0438 \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0432\u0440\u043e\u0434\u0435 <strong>Logseq<\/strong> \u0438\u043b\u0438 <strong>Obsidian<\/strong> (\u043a\u043e\u043c\u044c\u044e\u043d\u0438\u0442\u0438-\u043f\u043b\u0430\u0433\u0438\u043d\u044b), \u0447\u0442\u043e\u0431\u044b \u0443\u0432\u0438\u0434\u0435\u0442\u044c, \u043a\u0430\u043a \u043e\u043d\u0438 \u0433\u043e\u0442\u043e\u0432\u044f\u0442 SQLite\/FTS5 \u0434\u043b\u044f \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e\u0439 \u0438\u043d\u0434\u0435\u043a\u0441\u0430\u0446\u0438\u0438 \u0441\u0432\u044f\u0437\u0435\u0439 \u043c\u0435\u0436\u0434\u0443 \u0437\u0430\u043c\u0435\u0442\u043a\u0430\u043c\u0438 (backlinks) \u0438 \u043f\u043e\u043b\u043d\u043e\u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0433\u043e \u043f\u043e\u0438\u0441\u043a\u0430 \u043f\u0440\u044f\u043c\u043e \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>\u0412 \u0446\u0435\u043b\u043e\u043c \u044f \u0432\u043e\u0441\u0445\u0438\u0449\u0430\u044e\u0441\u044c \u0442\u043e\u0439 \u0431\u0435\u0437\u0443\u043c\u043d\u043e\u0439 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c\u044e, \u0434\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 Telegram \u0434\u043e\u0432\u0451\u043b \u0441\u0432\u043e\u0439 \u043f\u0440\u043e\u0434\u0443\u043a\u0442, \u0438 \u0442\u0435\u043c \u0443\u0440\u043e\u0432\u043d\u0435\u043c \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u0442\u043e\u0438\u0442 \u0437\u0430 \u044d\u0442\u043e\u0439 \u043f\u043b\u0430\u0432\u043d\u043e\u0441\u0442\u044c\u044e. \u0410 \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u2014 \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0440\u0435\u0448\u0435\u043d\u0438\u0439 \u043b\u0435\u0436\u0438\u0442 \u0432 \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u043c \u0434\u043e\u0441\u0442\u0443\u043f\u0435. \u0422\u0430\u043a \u0437\u0430\u0447\u0435\u043c \u0437\u0430\u043d\u043e\u0432\u043e \u0438\u0437\u043e\u0431\u0440\u0435\u0442\u0430\u0442\u044c \u0432\u0435\u043b\u043e\u0441\u0438\u043f\u0435\u0434, \u0435\u0441\u043b\u0438 \u043c\u043e\u0436\u043d\u043e \u0438\u0437\u0443\u0447\u0430\u0442\u044c \u043f\u043e\u0434\u0445\u043e\u0434\u044b \u043b\u044e\u0434\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0433\u043e\u0434\u0430\u043c\u0438 \u0440\u0435\u0448\u0430\u043b\u0438 \u0440\u043e\u0432\u043d\u043e \u044d\u0442\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b?<\/p>\n<p>\u041c\u043d\u0435 \u0432\u043e\u043e\u0431\u0449\u0435 \u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u044d\u043f\u043e\u0445\u0430 \u00ab\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430-\u043e\u0434\u0438\u043d\u043e\u0447\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u0442\u044c \u0432\u0441\u0451 \u0441\u0430\u043c\u00bb, \u0434\u0430\u0432\u043d\u043e \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u043b\u0430\u0441\u044c. \u0421\u0435\u0439\u0447\u0430\u0441 \u0441\u0438\u043b\u044c\u043d\u0430\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u2014 \u044d\u0442\u043e \u0443\u043c\u0435\u043d\u0438\u0435 \u043e\u043f\u0438\u0440\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0447\u0443\u0436\u043e\u0439 \u043e\u043f\u044b\u0442, \u0447\u0438\u0442\u0430\u0442\u044c \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438, \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c \u0433\u043e\u0442\u043e\u0432\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0438 \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u0438\u0437 \u043d\u0438\u0445 \u0447\u0442\u043e-\u0442\u043e \u0441\u0432\u043e\u0451. \u0413\u0434\u0435-\u0442\u043e \u043d\u0430 Stack Overflow \u044f \u043a\u043e\u0433\u0434\u0430-\u0442\u043e \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u043b \u043f\u043e\u0445\u043e\u0436\u0443\u044e \u043c\u044b\u0441\u043b\u044c: <strong>\u0432\u0440\u0435\u043c\u044f \u043e\u0434\u0438\u043d\u043e\u0447\u0435\u043a \u043f\u0440\u043e\u0448\u043b\u043e \u2014 \u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u0432\u0435\u0449\u0438 \u0442\u0435\u043f\u0435\u0440\u044c \u0441\u043e\u0437\u0434\u0430\u044e\u0442 \u043a\u043e\u043c\u0430\u043d\u0434\u044b<\/strong>. \u0422\u043e\u0447\u043d\u0443\u044e \u0446\u0438\u0442\u0430\u0442\u0443 \u0443\u0436\u0435 \u043d\u0435 \u0432\u0441\u043f\u043e\u043c\u043d\u044e, \u043d\u043e \u0441\u0430\u043c\u0430 \u0438\u0434\u0435\u044f \u043c\u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0431\u043b\u0438\u0437\u043a\u0430.<\/p>\n<p>\u0418 \u0434\u0430, \u0440\u0435\u0431\u044f\u0442: \u044d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u2014 \u043f\u0440\u0435\u0436\u0434\u0435 \u0432\u0441\u0435\u0433\u043e \u043c\u043e\u0451 \u0436\u0435\u043b\u0430\u043d\u0438\u0435 \u0447\u0442\u043e-\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0438 \u043f\u043e\u043f\u044b\u0442\u043a\u0430 \u043e\u0444\u043e\u0440\u043c\u0438\u0442\u044c \u0438\u0434\u0435\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0434\u0430\u0432\u043d\u043e \u043a\u0440\u0443\u0442\u0438\u0442\u0441\u044f \u0443 \u043c\u0435\u043d\u044f \u0432 \u0433\u043e\u043b\u043e\u0432\u0435. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0445\u043e\u0442\u044f \u0431\u044b \u0437\u0430 \u0441\u0430\u043c\u0443 \u0438\u0434\u0435\u044e \u043f\u043e\u043c\u0438\u0434\u043e\u0440\u0430\u043c\u0438, \u043f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u043d\u0435 \u0431\u0440\u043e\u0441\u0430\u0439\u0442\u0435\u0441\u044c. \u0417\u0430 \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u2014 \u043f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u0442\u0430\u043c \u044f \u043a \u043a\u0440\u0438\u0442\u0438\u043a\u0435 \u0433\u043e\u0442\u043e\u0432 \ud83d\ude42<\/p>\n<p>\u042f \u043f\u0440\u043e\u0441\u0442\u043e \u0437\u0430\u043c\u0435\u0442\u0438\u043b \u0437\u0430 \u0441\u043e\u0431\u043e\u0439 \u043e\u0434\u043d\u0443 \u0432\u0435\u0449\u044c: <strong>\u0432\u0441\u0435 \u0441\u0432\u043e\u0438 \u0437\u0430\u043c\u0435\u0442\u043a\u0438 \u044f \u0443\u0436\u0435 \u0434\u0430\u0432\u043d\u043e \u0432\u0438\u0436\u0443 \u043d\u0435 \u043a\u0430\u043a \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u044b, \u0430 \u043a\u0430\u043a \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0432 \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u043e\u043c \u0447\u0430\u0442\u0435 \u0441 \u0441\u0430\u043c\u0438\u043c \u0441\u043e\u0431\u043e\u0439.<\/strong> \u0421\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0438\u0437 \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u0431\u043b\u044e\u0434\u0435\u043d\u0438\u044f \u0438 \u0440\u043e\u0434\u0438\u043b\u0430\u0441\u044c \u0432\u0441\u044f \u0441\u0442\u0430\u0442\u044c\u044f.<\/p>\n<p>\u0421\u043f\u0430\u0441\u0438\u0431\u043e \u0432\u0441\u0435\u043c, \u043a\u0442\u043e \u0434\u043e\u0447\u0438\u0442\u0430\u043b \u0434\u043e \u043a\u043e\u043d\u0446\u0430.<\/p>\n<p>\u042f \u0410\u0440\u0442\u0443\u0440 \u0412\u0430\u043b\u0438\u0435\u0432. \u0421\u0435\u0433\u043e\u0434\u043d\u044f \u043f\u044f\u0442\u043d\u0438\u0446\u0430 \u2014 \u0430 \u0437\u043d\u0430\u0447\u0438\u0442, \u044f \u043f\u0438\u0448\u0443.<\/p>\n<\/div>\n<p>\u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/1070702\/\">https:\/\/habr.com\/ru\/articles\/1070702\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442 \u044f \u0410\u0440\u0442\u0443\u0440 \u0412\u0430\u043b\u0438\u0435\u0432, \u043f\u044f\u0442\u043d\u0438\u0447\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f, \u043f\u043e\u0435\u0445\u0430\u043b\u0438.\u041f\u0440\u0438\u0432\u044b\u0447\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u044b\u0434\u0430\u0451\u0442 \u0434\u0438\u0430\u0433\u043d\u043e\u0437\u042f \u043b\u043e\u0432\u043b\u044e \u0441\u0435\u0431\u044f \u043d\u0430 \u043c\u044b\u0441\u043b\u0438: \u043c\u044b\u0441\u043b\u044c \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c &#8212; \u0440\u0443\u043a\u0430 \u0442\u044f\u043d\u0435\u0442\u0441\u044f \u043d\u0435 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0437\u0430\u043c\u0435\u0442\u043e\u043a, \u0430 \u0432 Telegram, \u0432 \u0441\u0432\u043e\u0439 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0447\u0430\u0442. \u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439, \u0431\u0435\u0437 \u0442\u0443\u0440\u0431\u043e-\u0440\u0435\u0436\u0438\u043c\u043e\u0432 \u0438 \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0439. \u041f\u0440\u043e\u0441\u0442\u043e &#171;\u0418\u0437\u0431\u0440\u0430\u043d\u043d\u043e\u0435&#187;. \u0418 \u0434\u0435\u043b\u043e \u043d\u0435 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0442\u0430\u043c \u0443\u0434\u043e\u0431\u043d\u0435\u0435 \u0445\u0440\u0430\u043d\u0438\u0442\u044c &#8212; \u0434\u0435\u043b\u043e \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0442\u0430\u043c \u043f\u0440\u0438\u044f\u0442\u043d\u0435\u0435 \u043f\u0438\u0441\u0430\u0442\u044c. \u0421\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0432\u043b\u0435\u0442\u0430\u0435\u0442 \u0432 \u043b\u0435\u043d\u0442\u0443 \u0441 \u043b\u0451\u0433\u043a\u0438\u043c \u043f\u0440\u0443\u0436\u0438\u043d\u043d\u044b\u043c \u043e\u0442\u0441\u043a\u043e\u043a\u043e\u043c, \u043a\u0443\u0440\u0441\u043e\u0440 \u0443\u0436\u0435 \u0441\u0442\u043e\u0438\u0442 \u0442\u0430\u043c, \u0433\u0434\u0435 \u043d\u0443\u0436\u043d\u043e, \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u0430 \u043d\u0435 \u043f\u0440\u043e\u0441\u0435\u0434\u0430\u0435\u0442, \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0442\u043e\u0440\u043c\u043e\u0437\u0438\u0442 \u0434\u0430\u0436\u0435 \u043d\u0430 \u043f\u044f\u0442\u0438\u043b\u0435\u0442\u043d\u0435\u043c \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0435. \u042d\u0442\u043e \u043d\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u044f &#8212; \u044d\u0442\u043e \u043e\u0449\u0443\u0449\u0435\u043d\u0438\u0435. \u0418 \u0438\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u043e \u043e\u0449\u0443\u0449\u0435\u043d\u0438\u0435 \u043e\u0431\u044b\u0447\u043d\u044b\u0435 note-taking \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0442\u0430\u043a \u0438 \u043d\u0435 \u0441\u043c\u043e\u0433\u043b\u0438 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0441\u0442\u0438.\u041f\u043e\u0447\u0435\u043c\u0443 \u044d\u0442\u043e \u043d\u0435 &#171;\u043f\u0440\u043e\u0441\u0442\u043e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438&#187;\u0418\u043d\u0436\u0435\u043d\u0435\u0440\u044b Telegram \u0433\u043e\u0434\u0430\u043c\u0438 \u0434\u043e\u0432\u043e\u0434\u0438\u043b\u0438 \u0434\u043e \u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0441\u0442\u0438 \u0442\u043e, \u0447\u0442\u043e \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u043e\u0432 \u0441\u0447\u0438\u0442\u0430\u0435\u0442 \u043a\u043e\u0441\u043c\u0435\u0442\u0438\u043a\u043e\u0439: \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440-\u0434\u0432\u0438\u0436\u043e\u043a \u043f\u043e\u0432\u0435\u0440\u0445 Skia, \u0440\u0443\u0447\u043d\u0430\u044f \u0440\u0430\u0441\u0442\u0435\u0440\u0438\u0437\u0430\u0446\u0438\u044f \u0441\u0442\u0438\u043a\u0435\u0440\u043e\u0432 \u0438 \u0442\u0435\u043a\u0441\u0442\u0430, \u0438\u043d\u0442\u0435\u0440\u043f\u043e\u043b\u044f\u0446\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u043a\u0430\u0434\u0440\u0430\u043c\u0438 \u0432\u043c\u0435\u0441\u0442\u043e \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u044b\u0445 \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0445 transition&#8217;\u043e\u0432, spring-\u0444\u0438\u0437\u0438\u043a\u0430 \u0432\u043c\u0435\u0441\u0442\u043e ease-in-out \u043a\u0440\u0438\u0432\u044b\u0445 \u0438\u0437 \u0443\u0447\u0435\u0431\u043d\u0438\u043a\u0430. \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u2014 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435 \u043e\u0449\u0443\u0449\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441. \u0422\u044b \u043d\u0435 \u0436\u0434\u0451\u0448\u044c, \u043f\u043e\u043a\u0430 \u044d\u043a\u0440\u0430\u043d \u043e\u0442\u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044f, \u043d\u0435 \u0432\u0438\u0434\u0438\u0448\u044c \u0434\u0440\u043e\u0436\u0430\u043d\u0438\u0435 \u043f\u0440\u0438 \u0431\u044b\u0441\u0442\u0440\u043e\u043c \u0441\u043a\u0440\u043e\u043b\u043b\u0435 \u0442\u044b\u0441\u044f\u0447 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439, \u043d\u0435 \u0447\u0443\u0432\u0441\u0442\u0432\u0443\u0435\u0448\u044c paint lag \u043f\u0440\u0438 \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u0438 \u0447\u0430\u0442\u0430 \u0441 \u0438\u0441\u0442\u043e\u0440\u0438\u0435\u0439 \u0432 \u0433\u043e\u0434\u044b.\u0414\u043b\u044f \u043c\u0435\u0441\u0441\u0435\u043d\u0434\u0436\u0435\u0440\u0430 \u044d\u0442\u043e \u043a\u043e\u043d\u043a\u0443\u0440\u0435\u043d\u0442\u043d\u043e\u0435 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u043e. \u041d\u043e \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e \u2014 \u044d\u0442\u043e \u0435\u0449\u0451 \u0438 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u044b\u0439 \u0434\u0432\u0438\u0436\u043e\u043a \u0434\u043b\u044f \u0437\u0430\u043c\u0435\u0442\u043e\u043a, \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0438\u043a\u0442\u043e \u043d\u0435 \u0434\u043e\u0434\u0443\u043c\u0430\u043b\u0441\u044f \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0435\u0433\u043e \u0432 \u044d\u0442\u0443 \u0441\u0442\u043e\u0440\u043e\u043d\u0443. \u041f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0437\u0430\u043c\u0435\u0442\u043a\u0430 \u2014 \u044d\u0442\u043e, \u043f\u043e \u0441\u0443\u0442\u0438, \u0442\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435 \u043e\u0434\u043d\u043e\u0440\u0430\u0437\u043e\u0432\u043e\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435: \u0440\u043e\u0434\u0438\u043b\u0430\u0441\u044c, \u0443\u043b\u0435\u0442\u0435\u043b\u0430 \u0432 \u043b\u0435\u043d\u0442\u0443, \u043b\u0435\u0433\u043b\u0430 \u0432 \u0438\u0441\u0442\u043e\u0440\u0438\u044e. \u0420\u0430\u0437\u043d\u0438\u0446\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u0435\u043b\u0435.  \u041f\u043e\u0447\u0435\u043c\u0443 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0437\u0430\u043c\u0435\u0442\u043a\u0438 \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u043b\u0438 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0432 \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u043e\u043c \u0432\u0438\u0434\u0435\u0420\u0430\u043d\u044c\u0448\u0435 &#171;\u0437\u0430\u043c\u0435\u0442\u043a\u0430&#187; \u0431\u044b\u043b\u0430 \u043c\u0435\u0442\u0430\u0444\u043e\u0440\u043e\u0439 \u0431\u0443\u043c\u0430\u0436\u043a\u0438 \u043d\u0430 \u0441\u0442\u043e\u043b\u0435: \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a, \u0442\u0435\u043b\u043e, \u043f\u0430\u043f\u043a\u0430, \u0432 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0435\u0451 \u043d\u0430\u0434\u043e \u0440\u0435\u0448\u0438\u0442\u044c \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c. \u0412\u0441\u044f \u044d\u0442\u0430 \u043c\u0435\u0442\u0430\u0444\u043e\u0440\u0430 \u0434\u0435\u0440\u0436\u0430\u043b\u0430\u0441\u044c \u043d\u0430 \u043e\u0434\u043d\u043e\u043c \u0434\u043e\u043f\u0443\u0449\u0435\u043d\u0438\u0438 \u2014 \u0447\u0442\u043e \u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0435\u0441\u0442\u044c \u0432\u0440\u0435\u043c\u044f \u043f\u043e\u0434\u0443\u043c\u0430\u0442\u044c, \u043f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u0437\u0430\u043f\u0438\u0441\u0430\u0442\u044c. \u042d\u0442\u043e \u0434\u043e\u043f\u0443\u0449\u0435\u043d\u0438\u0435 \u0443\u043c\u0435\u0440\u043b\u043e \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u0442\u0435\u043c, \u043a\u0430\u043a \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0441\u044f \u0441\u0430\u043c \u0430\u043a\u0442 &#171;\u0432\u0441\u043f\u043e\u043c\u043d\u0438\u0442\u044c \u043c\u044b\u0441\u043b\u044c&#187;: \u0442\u0435\u043f\u0435\u0440\u044c \u043e\u043d\u0430 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u043c\u0435\u0436\u0434\u0443 \u0434\u0435\u043b\u043e\u043c, \u043d\u0430 \u0445\u043e\u0434\u0443, \u0432 \u043c\u0435\u0442\u0440\u043e, \u043f\u043e\u0441\u0440\u0435\u0434\u0438 \u0441\u043e\u0437\u0432\u043e\u043d\u0430 \u2014 \u0438 \u043b\u0438\u0431\u043e \u0444\u0438\u043a\u0441\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0437\u0430 \u0441\u0435\u043a\u0443\u043d\u0434\u0443, \u043b\u0438\u0431\u043e \u0442\u0435\u0440\u044f\u0435\u0442\u0441\u044f \u043d\u0430\u0432\u0441\u0435\u0433\u0434\u0430.\u041f\u0430\u043f\u043a\u0438, \u0446\u0432\u0435\u0442\u043d\u044b\u0435 \u0441\u0442\u0438\u043a\u0435\u0440\u044b, \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u044d\u043a\u0440\u0430\u043d\u044b &#171;\u0432\u044b\u0431\u0435\u0440\u0438 \u0446\u0432\u0435\u0442&#187; \u2014 \u0432\u0441\u0451 \u044d\u0442\u043e \u0431\u044b\u043b\u043e \u0441\u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043e \u0434\u043b\u044f \u043c\u0438\u0440\u0430, \u0433\u0434\u0435 \u0437\u0430\u043f\u0438\u0441\u044c \u043c\u044b\u0441\u043b\u0438 \u0431\u044b\u043b\u0430 \u043e\u0441\u043e\u0437\u043d\u0430\u043d\u043d\u044b\u043c, \u043d\u0435\u0442\u043e\u0440\u043e\u043f\u043b\u0438\u0432\u044b\u043c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435\u043c. \u0410 \u0441\u0435\u0433\u043e\u0434\u043d\u044f \u0437\u0430\u043f\u0438\u0441\u044c \u043c\u044b\u0441\u043b\u0438 \u0441\u043e\u0440\u0435\u0432\u043d\u0443\u0435\u0442\u0441\u044f \u0437\u0430 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0441 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0435\u043c \u043e\u0442 \u0431\u0430\u043d\u043a\u0430 \u0438 \u0441\u0442\u043e\u0440\u0438\u0441 \u0434\u0440\u0443\u0433\u0430. \u0412 \u044d\u0442\u043e\u0439 \u0433\u043e\u043d\u043a\u0435 \u0432\u044b\u0438\u0433\u0440\u044b\u0432\u0430\u0435\u0442 \u043d\u0435 \u0442\u043e\u0442 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441, \u0447\u0442\u043e \u043a\u0440\u0430\u0441\u0438\u0432\u0435\u0435 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u043d, \u0430 \u0442\u043e\u0442, \u0447\u0442\u043e \u043e\u0442\u043a\u043b\u0438\u043a\u0430\u0435\u0442\u0441\u044f \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u0447\u0435\u043b\u043e\u0432\u0435\u0447\u0435\u0441\u043a\u043e\u0439 \u043c\u044b\u0441\u043b\u0438. \u041c\u0435\u0441\u0441\u0435\u043d\u0434\u0436\u0435\u0440\u044b \u0432\u044b\u0438\u0433\u0440\u0430\u043b\u0438 \u044d\u0442\u0443 \u0433\u043e\u043d\u043a\u0443 \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e \u2014 \u043e\u043d\u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u043f\u043e\u0434 \u0434\u0440\u0443\u0433\u0443\u044e \u0437\u0430\u0434\u0430\u0447\u0443 (\u043f\u0435\u0440\u0435\u043f\u0438\u0441\u043a\u0443), \u043d\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043e\u043a\u0430\u0437\u0430\u043b\u0441\u044f \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u044b\u043c \u0438 \u0434\u043b\u044f \u043c\u044b\u0448\u043b\u0435\u043d\u0438\u044f \u0432\u0441\u043b\u0443\u0445 \u0441 \u0441\u0430\u043c\u0438\u043c \u0441\u043e\u0431\u043e\u0439. \u041c\u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u043e \u0431\u044b\u043b\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f xiaomi \u0437\u0430\u043c\u0435\u0442\u043a\u0430\u043c\u0438 \u043d\u043e \u0432\u0440\u0435\u043c\u044f \u0440\u0430\u0441\u0441\u0442\u0430\u0432\u0438\u043b\u043e \u0432\u0441\u0435 \u0437\u0430 \u0441\u0435\u0431\u044f.\u041f\u043e\u044d\u0442\u043e\u043c\u0443 &#171;\u043e\u0431\u044b\u0447\u043d\u044b\u0435 \u0437\u0430\u043c\u0435\u0442\u043a\u0438&#187; \u043d\u0435 \u0443\u043c\u0435\u0440\u043b\u0438 \u0438\u0437-\u0437\u0430 \u043f\u043b\u043e\u0445\u043e\u0433\u043e \u0434\u0438\u0437\u0430\u0439\u043d\u0430. \u041e\u043d\u0438 \u0443\u043c\u0435\u0440\u043b\u0438, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u043b\u0438 \u0431\u044b\u0442\u044c \u0441\u0430\u043c\u044b\u043c \u0431\u044b\u0441\u0442\u0440\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u0437\u0430\u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043c\u044b\u0441\u043b\u044c \u2014 \u0430 Telegram, \u0441\u0430\u043c \u0442\u043e\u0433\u043e \u043d\u0435 \u0436\u0435\u043b\u0430\u044f, \u0441\u0442\u0430\u043b \u0438\u043c.\u0421\u0430\u043c\u0430 \u043c\u0435\u0447\u0442\u0430\u041c\u0435\u0447\u0442\u0430 \u043f\u0440\u043e\u0441\u0442\u0430\u044f \u0438 \u043d\u0430\u0433\u043b\u0430\u044f \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e: \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0437\u0430\u043c\u0435\u0442\u043e\u043a, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043e\u0449\u0443\u0449\u0430\u0435\u0442\u0441\u044f \u0440\u043e\u0432\u043d\u043e \u0442\u0430\u043a \u0436\u0435, \u043a\u0430\u043a \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0418\u0437\u0431\u0440\u0430\u043d\u043d\u043e\u0435 \u0432 Telegram. \u0422\u043e\u0442 \u0436\u0435 \u0440\u0435\u043d\u0434\u0435\u0440 \u0431\u0435\u0437 \u0435\u0434\u0438\u043d\u043e\u0433\u043e \u0440\u044b\u0432\u043a\u0430 \u043d\u0430 \u0434\u0435\u0441\u044f\u0442\u043a\u0430\u0445 \u0442\u044b\u0441\u044f\u0447 \u0437\u0430\u043f\u0438\u0441\u0435\u0439. \u0422\u0435 \u0436\u0435 \u043f\u0440\u0443\u0436\u0438\u043d\u043d\u044b\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u2014 \u043d\u0435 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0435, \u0430 \u043f\u0441\u0438\u0445\u043e\u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u0430\u0436\u043d\u044b\u0435: \u043e\u043d\u0438 \u0434\u0430\u044e\u0442 \u043c\u043e\u0437\u0433\u0443 \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043d\u0438\u0435 &#171;\u0437\u0430\u043f\u0438\u0441\u0430\u043d\u043e&#187; \u0431\u044b\u0441\u0442\u0440\u0435\u0435, \u0447\u0435\u043c \u0443\u0441\u043f\u0435\u0432\u0430\u0435\u0442 \u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u043e\u043c\u043d\u0435\u043d\u0438\u0435 &#171;\u0430 \u0442\u043e\u0447\u043d\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u043b\u043e\u0441\u044c?&#187;. \u0422\u043e\u0442 \u0436\u0435 \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u044b\u0439 \u043e\u0442\u043a\u043b\u0438\u043a \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b, \u0442\u043e\u0442 \u0436\u0435 \u043f\u043b\u0430\u0432\u043d\u044b\u0439 \u0438\u043d\u0435\u0440\u0446\u0438\u043e\u043d\u043d\u044b\u0439 \u0441\u043a\u0440\u043e\u043b\u043b, \u0442\u0430 \u0436\u0435 \u043d\u0435\u0437\u0430\u043c\u0435\u0442\u043d\u043e\u0441\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u2014 \u043a\u043e\u0433\u0434\u0430 \u0442\u044b \u043d\u0435 \u043e\u0441\u043e\u0437\u043d\u0430\u0451\u0448\u044c, \u0447\u0442\u043e \u0441\u043c\u043e\u0442\u0440\u0438\u0448\u044c \u043d\u0430 UI, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043e\u043d \u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u0442\u0440\u0435\u043d\u0438\u044f.\u0420\u0430\u0437\u043d\u0438\u0446\u0430 \u0441 \u0441\u0430\u043c\u0438\u043c Telegram \u2014 \u043d\u0435 \u0432 \u0434\u0432\u0438\u0436\u043a\u0435, \u0430 \u0432 \u0446\u0435\u043b\u0438. \u041d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u0441\u043e\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0448\u0443\u043c\u0430, \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u0447\u0443\u0436\u0438\u0445 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439, \u0432\u044b\u0442\u0435\u0441\u043d\u044f\u044e\u0449\u0438\u0445 \u0442\u0432\u043e\u0438 \u043c\u044b\u0441\u043b\u0438 \u0432\u043d\u0438\u0437 \u043b\u0435\u043d\u0442\u044b. \u0422\u043e\u043b\u044c\u043a\u043e \u0442\u0432\u043e\u0439 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0447\u0430\u0442 \u0441 \u0441\u0430\u043c\u0438\u043c \u0441\u043e\u0431\u043e\u0439, \u043d\u043e \u0441 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0438\u043c \u043f\u043e\u043b\u043d\u043e\u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u043c \u043f\u043e\u0438\u0441\u043a\u043e\u043c, \u0442\u0435\u0433\u0430\u043c\u0438 \u0438 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043e\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0418\u0437\u0431\u0440\u0430\u043d\u043d\u043e\u043c\u0443 \u0432 Telegram \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0434\u043e\u0434\u0443\u043c\u0430\u043b\u0438\u0441\u044c \u0434\u0430\u0442\u044c \u2014 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u044d\u0442\u043e \u043d\u0435 \u0431\u044b\u043b\u043e \u0438\u0445 \u0437\u0430\u0434\u0430\u0447\u0435\u0439.\u042d\u0442\u043e \u043d\u0435 \u043d\u043e\u0441\u0442\u0430\u043b\u044c\u0433\u0438\u044f \u043f\u043e \u0431\u0443\u043c\u0430\u0436\u043d\u044b\u043c \u0441\u0442\u0438\u043a\u0435\u0440\u0430\u043c. \u042d\u0442\u043e \u043f\u0440\u0438\u0437\u043d\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0438 \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u043f\u0440\u0438\u044f\u0442\u043d\u043e\u0441\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u2014 \u043d\u0435 \u0443\u043a\u0440\u0430\u0448\u0435\u043d\u0438\u0435 \u043f\u043e\u0432\u0435\u0440\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u0430 \u0447\u0430\u0441\u0442\u044c \u0441\u0430\u043c\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438. \u041c\u044b\u0441\u043b\u044c, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0442\u044f\u0436\u0435\u043b\u043e \u0437\u0430\u043f\u0438\u0441\u0430\u0442\u044c, \u2014 \u043f\u043e\u0442\u0435\u0440\u044f\u043d\u043d\u0430\u044f \u043c\u044b\u0441\u043b\u044c. \u0418 \u0435\u0441\u043b\u0438 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0435\u0451 \u043b\u0435\u0433\u043a\u043e, \u043d\u0443\u0436\u043d\u043e architecture \u0443\u0440\u043e\u0432\u043d\u044f \u043c\u0435\u0441\u0441\u0435\u043d\u0434\u0436\u0435\u0440\u0430, \u0430 \u043d\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0437\u0430\u043c\u0435\u0442\u043e\u043a \u2014 \u0437\u043d\u0430\u0447\u0438\u0442, \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0443\u0434\u0430 \u0438 \u043d\u0443\u0436\u043d\u043e \u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c.\u0422\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0447\u0430\u0441\u0442\u044c: \u043a\u0430\u043a \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043e-\u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u043c\u0443 \u0431\u044b\u0441\u0442\u0440\u043e\u041f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u044e \u043c\u0435\u0447\u0442\u0443 \u0441 \u043f\u0440\u043e\u0448\u043b\u043e\u0433\u043e \u0440\u0430\u0437\u0430, \u043d\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u2014 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e, \u0441 \u043a\u043e\u0434\u043e\u043c \u0438 \u043e\u0431\u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u044f. \u0411\u0435\u0440\u0443 \u0437\u0430 \u043e\u0441\u043d\u043e\u0432\u0443 \u0432\u0430\u0448 \u0441\u0442\u0435\u043a \u0432 TaskFlow-Ai (React 19 + Vite + better-sqlite3), \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0442\u0430\u043c \u0443\u0436\u0435 \u0432\u0438\u0434\u043d\u043e \u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0435, \u0438 \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0435 \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u044b \u0440\u044f\u0434\u043e\u043c.\u0412\u0438\u0440\u0442\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043b\u0435\u043d\u0442\u044b \u2014 \u0438\u043d\u0430\u0447\u0435 10 000 \u0437\u0430\u043c\u0435\u0442\u043e\u043a \u0443\u0431\u044c\u044e\u0442 \u0440\u0435\u043d\u0434\u0435\u0440Telegram \u043d\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 \u0432\u0441\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0447\u0430\u0442\u0430 \u0432 DOM\/View-\u0438\u0435\u0440\u0430\u0440\u0445\u0438\u044e \u2014 \u043e\u043d \u0434\u0435\u0440\u0436\u0438\u0442 \u0432 \u043f\u0430\u043c\u044f\u0442\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u0438\u0434\u0438\u043c\u0443\u044e \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u043f\u043b\u044e\u0441 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0431\u0443\u0444\u0435\u0440, \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442.QuickNotes.tsx \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 notes.map(&#8230;) \u0431\u0435\u0437 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u2014 \u043d\u0430 50 \u0437\u0430\u043c\u0435\u0442\u043a\u0430\u0445 \u043d\u0435\u0437\u0430\u043c\u0435\u0442\u043d\u043e, \u043d\u0430 5000 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043d\u0430\u0447\u043d\u0451\u0442 \u0442\u043e\u0440\u043c\u043e\u0437\u0438\u0442\u044c \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u0440\u0435-\u0440\u0435\u043d\u0434\u0435\u0440\u0435 \u0441\u043f\u0438\u0441\u043a\u0430.\/\/ \u041f\u043b\u043e\u0445\u043e (\u0442\u0435\u043a\u0443\u0449\u0438\u0439 QuickNotes.tsx) \u2014 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 \u0412\u0421\u0415 \u0437\u0430\u043c\u0435\u0442\u043a\u0438 \u0441\u0440\u0430\u0437\u0443{sortedNotes.map(note =&gt; &lt;NoteCard key={note.id} note={note} \/&gt;)}\/\/ \u0425\u043e\u0440\u043e\u0448\u043e \u2014 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043e\u043a\u043d\u0430import { useVirtualizer } from &#8216;@tanstack\/react-virtual&#8217;;function NotesFeed({ notes }: { notes: Note[] }) {  const parentRef = useRef&lt;HTMLDivElement&gt;(null);  const virtualizer = useVirtualizer({    count: notes.length,    getScrollElement: () =&gt; parentRef.current,    estimateSize: () =&gt; 72, \/\/ \u0441\u0440\u0435\u0434\u043d\u044f\u044f \u0432\u044b\u0441\u043e\u0442\u0430 &#171;\u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f&#187;    overscan: 8,            \/\/ \u0431\u0443\u0444\u0435\u0440 \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 \u044d\u043a\u0440\u0430\u043d\u0430  });  return (    &lt;div ref={parentRef} style={{ overflow: &#8216;auto&#8217;, height: &#8216;100%&#8217; }}&gt;      &lt;div style={{ height: virtualizer.getTotalSize(), position: &#8216;relative&#8217; }}&gt;        {virtualizer.getVirtualItems().map(row =&gt; (          &lt;div            key={row.key}            style={{ position: &#8216;absolute&#8217;, top: 0, transform: `translateY(${row.start}px)` }}          &gt;            &lt;NoteCard note={notes[row.index]} \/&gt;          &lt;\/div&gt;        ))}      &lt;\/div&gt;    &lt;\/div&gt;  );}\u041f\u043e\u0447\u0435\u043c\u0443 \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043a: DOM-\u0443\u0437\u0435\u043b \u0441\u0442\u043e\u0438\u0442 \u043f\u0430\u043c\u044f\u0442\u0438 \u0438 layout-\u043f\u0435\u0440\u0435\u0441\u0447\u0451\u0442\u0430. React \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u0441\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441 diff&#8217;\u043e\u043c \u0434\u0430\u043d\u043d\u044b\u0445, \u043d\u043e \u043d\u0435 \u0441\u043f\u0430\u0441\u0430\u0435\u0442 \u043e\u0442 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043e\u0431\u044f\u0437\u0430\u043d \u043f\u043e\u0441\u0447\u0438\u0442\u0430\u0442\u044c layout \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u0434\u0435\u0440\u0435\u0432\u0435. \u0412\u0438\u0440\u0442\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u2014 \u044d\u0442\u043e \u043d\u0435 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f React, \u044d\u0442\u043e \u043e\u0431\u0445\u043e\u0434 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f \u0441\u0430\u043c\u043e\u0433\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430.  \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u2014 \u0442\u043e\u043b\u044c\u043a\u043e transform\/opacity, \u043d\u0438\u043a\u043e\u0433\u0434\u0430 height\/margin\u041f\u0440\u0443\u0436\u0438\u043d\u043d\u044b\u0439 &#171;\u043e\u0442\u0441\u043a\u043e\u043a&#187; \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0432 Telegram \u2014 \u044d\u0442\u043e \u043d\u0435 \u0443\u043a\u0440\u0430\u0448\u0435\u043d\u0438\u0435, \u0430 GPU-\u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0442\u043d\u044b\u0439 \u0441\u043b\u043e\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435 \u0442\u0440\u043e\u0433\u0430\u0435\u0442 layout \u0432\u043e\u043e\u0431\u0449\u0435.\/\/ \u041f\u043b\u043e\u0445\u043e \u2014 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f height\/margin \u0442\u0440\u0438\u0433\u0433\u0435\u0440\u0438\u0442 layout \u043d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 \u043a\u0430\u0434\u0440.note-enter { max-height: 0; margin-bottom: 0; }.note-enter-active { max-height: 200px; margin-bottom: 12px; transition: all 0.3s; }\/\/ \u0425\u043e\u0440\u043e\u0448\u043e \u2014 \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0442\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 + spring \u0432\u043c\u0435\u0441\u0442\u043e easeimport { motion } from &#8216;framer-motion&#8217;;&lt;motion.div  initial={{ opacity: 0, scale: 0.92, y: 12 }}  animate={{ opacity: 1, scale: 1, y: 0 }}  transition={{ type: &#8216;spring&#8217;, stiffness: 500, damping: 32 }}&gt;  &lt;NoteCard note={note} \/&gt;&lt;\/motion.div&gt;\u041f\u043e\u0447\u0435\u043c\u0443: opacity \u0438 transform \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043c\u043e\u0436\u0435\u0442 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 GPU-\u0441\u043b\u043e\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u043e\u0442 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u043f\u043e\u0442\u043e\u043a\u0430 \u2014 main thread \u0441\u0432\u043e\u0431\u043e\u0434\u0435\u043d, jank \u043d\u0435 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u0434\u0430\u0436\u0435 \u043f\u043e\u0434 \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u043e\u0439. height\/margin\/top \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u043f\u0435\u0440\u0435\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c layout \u043a\u0430\u0436\u0434\u044b\u0439 \u043a\u0430\u0434\u0440 (reflow) \u2014 \u044d\u0442\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u043e \u0434\u0440\u0435\u0431\u0435\u0437\u0436\u0430\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0447\u0443\u0432\u0441\u0442\u0432\u0443\u0435\u0442\u0441\u044f \u043a\u0430\u043a &#171;\u0442\u043e\u0440\u043c\u043e\u0437\u0438\u0442&#187;. Spring \u0432\u043c\u0435\u0441\u0442\u043e ease-in-out \u2014 \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043f\u0440\u0443\u0436\u0438\u043d\u0430 \u0440\u0435\u0430\u0433\u0438\u0440\u0443\u0435\u0442 \u043d\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u0443\u044e \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f (\u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0435\u0440\u0432\u0430\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0441\u0432\u0430\u0439\u043f\u043e\u043c \u043d\u0430 \u0441\u0435\u0440\u0435\u0434\u0438\u043d\u0435), \u0430 \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u043a\u0440\u0438\u0432\u0430\u044f \u2014 \u043d\u0435\u0442.  \u041e\u043f\u0442\u0438\u043c\u0438\u0441\u0442\u0438\u0447\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440 \u2014 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0434\u043e \u043e\u0442\u0432\u0435\u0442\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0430\u0412 Telegram \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u043b\u0435\u043d\u0442\u0435 \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e, \u0441 \u043e\u0434\u043d\u043e\u0439 \u0441\u0435\u0440\u043e\u0439 &#171;\u0433\u0430\u043b\u043e\u0447\u043a\u043e\u0439&#187;, \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0430 \u0434\u0432\u0435 \u0433\u0430\u043b\u043e\u0447\u043a\u0438 \u0443\u0436\u0435 \u043f\u043e\u0441\u043b\u0435 \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043d\u0438\u044f \u2014 \u043d\u043e \u0442\u044b \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0436\u0434\u0451\u0448\u044c \u0441\u0435\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0441\u0432\u043e\u0439 \u0442\u0435\u043a\u0441\u0442.const sendNote = async (text: string) =&gt; {  const tempId = generateUUID();  const optimisticNote: Note = { id: tempId, content: text, createdAt: new Date().toISOString(), pending: true, &#8230;defaults };  setNotes(prev =&gt; [&#8230;prev, optimisticNote]); \/\/ \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e \u0432 UI  try {    const saved = await sqliteApi.createNote(optimisticNote);    setNotes(prev =&gt; prev.map(n =&gt; n.id === tempId ? { &#8230;saved, pending: false } : n));  } catch {    setNotes(prev =&gt; prev.map(n =&gt; n.id === tempId ? { &#8230;n, failed: true } : n));  }};\u041f\u043e\u0447\u0435\u043c\u0443: \u0417\u0430\u0434\u0435\u0440\u0436\u043a\u0430 \u043c\u0435\u0436\u0434\u0443 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435\u043c \u0438 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u043c \u043e\u0442\u043a\u043b\u0438\u043a\u043e\u043c \u2014 \u0433\u043b\u0430\u0432\u043d\u044b\u0439 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u043e\u0449\u0443\u0449\u0435\u043d\u0438\u044f &#171;\u0442\u043e\u0440\u043c\u043e\u0437\u0438\u0442&#187;, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0441\u0435\u0442\u044c \u0431\u044b\u0441\u0442\u0440\u0430\u044f. 100 \u043c\u0441 round-trip \u043a \u0441\u0435\u0440\u0432\u0435\u0440\u0443 \u0447\u0435\u043b\u043e\u0432\u0435\u043a \u043d\u0435 \u0437\u0430\u043c\u0435\u0447\u0430\u0435\u0442 \u043a\u0430\u043a \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0443 \u0441\u0435\u0442\u0438, \u043d\u043e \u0437\u0430\u043c\u0435\u0447\u0430\u0435\u0442 \u043a\u0430\u043a \u043b\u0430\u0433 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430. \u041e\u043f\u0442\u0438\u043c\u0438\u0441\u0442\u0438\u0447\u043d\u043e\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0443\u0431\u0438\u0440\u0430\u0435\u0442 \u044d\u0442\u0443 \u0441\u0432\u044f\u0437\u044c: UI = \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043e\u0442 \u0432\u0432\u043e\u0434\u0430, \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u044f \u2014 \u0444\u043e\u043d\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441.  \/\/ \u041f\u043b\u043e\u0445\u043e (\u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u043a\u043e\u0434)useEffect(() =&gt; {  loadMessages();  const interval = setInterval(loadMessages, 3000);  return () =&gt; clearInterval(interval);}, []);\/\/ + JSON.stringify \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u043d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 \u0432\u044b\u0437\u043e\u0432\/\/ \u0425\u043e\u0440\u043e\u0448\u043e \u2014 \u0434\u043b\u044f \u0437\u0430\u043c\u0435\u0442\u043e\u043a (single-user, \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435) \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0435 \u043d\u0443\u0436\u0435\u043d pollingconst addNote = (note: Note) =&gt; {  setNotes(prev =&gt; [&#8230;prev, note]);   \/\/ \u0441\u0440\u0430\u0437\u0443 \u0432 state  sqliteApi.createNote(note);          \/\/ \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e \u0432 \u0444\u043e\u043d\u0435, \u0431\u0435\u0437 \u043e\u0436\u0438\u0434\u0430\u043d\u0438\u044f};\/\/ \u0415\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u0430 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u0432\u043a\u043b\u0430\u0434\u043a\u0430\u043c\u0438\/\u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438 \u2014 BroadcastChannel \u0438\u043b\u0438 SSE,\/\/ \u0430 \u043d\u0435 \u0438\u043d\u0442\u0435\u0440\u0432\u0430\u043b\u044c\u043d\u044b\u0439 \u043e\u043f\u0440\u043e\u0441const channel = new BroadcastChannel(&#8216;notes_sync&#8217;);channel.onmessage = (e) =&gt; setNotes(prev =&gt; mergeById(prev, e.data));\u041f\u043e\u0447\u0435\u043c\u0443: Polling \u2014 \u044d\u0442\u043e \u043a\u043e\u043c\u043f\u0440\u043e\u043c\u0438\u0441\u0441 \u0434\u043b\u044f \u043c\u043d\u043e\u0433\u043e\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0447\u0430\u0442\u0430, \u0433\u0434\u0435 \u043d\u0443\u0436\u043d\u043e \u0443\u0437\u043d\u0430\u0442\u044c \u043e \u0447\u0443\u0436\u0438\u0445 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f\u0445 \u0431\u0435\u0437 WebSocket. \u0414\u043b\u044f \u0437\u0430\u043c\u0435\u0442\u043e\u043a \u0441\u0435\u0431\u0435 \u0442\u0430\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u0440\u043e\u043c\u0438\u0441\u0441\u0430 \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u2014 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043f\u0438\u0441\u0430\u0442\u0435\u043b\u044c \u044d\u0442\u043e \u0442\u044b \u0441\u0430\u043c, \u0437\u043d\u0430\u0447\u0438\u0442 state \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e \u0432 \u043c\u043e\u043c\u0435\u043d\u0442 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f, \u0431\u0435\u0437 \u0432\u0441\u044f\u043a\u043e\u0433\u043e &#171;\u043f\u043e\u0434\u043e\u0436\u0434\u0438 3 \u0441\u0435\u043a\u0443\u043d\u0434\u044b \u0438 \u0441\u0440\u0430\u0432\u043d\u0438 JSON&#187;.  \u041f\u043e\u043b\u043d\u043e\u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0439 \u043f\u043e\u0438\u0441\u043a \u2014 FTS5 \u0432\u043c\u0435\u0441\u0442\u043e LIKE &#8216;%&#8230;%&#8217; \u043f\u043e JSON-\u0431\u043b\u043e\u0431\u0443\u0421\u0435\u0439\u0447\u0430\u0441 \u0442\u0430\u0431\u043b\u0438\u0446\u0430 notes \u0445\u0440\u0430\u043d\u0438\u0442 \u0432\u0441\u0451 \u0432 \u043e\u0434\u043d\u043e\u0439 \u043a\u043e\u043b\u043e\u043d\u043a\u0435 data TEXT (database.ts:51-55). \u041f\u043e\u0438\u0441\u043a \u043f\u043e \u043d\u0435\u0439 \u043e\u0437\u043d\u0430\u0447\u0430\u043b \u0431\u044b SELECT * FROM notes + JSON.parse \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435 \u0432 JS \u2014 O(n) \u0441 \u0442\u044f\u0436\u0451\u043b\u044b\u043c \u043f\u0430\u0440\u0441\u0438\u043d\u0433\u043e\u043c \u043d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 \u0432\u0432\u043e\u0434 \u0441\u0438\u043c\u0432\u043e\u043b\u0430.&#8212; \u0412\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u0430\u044f FTS5-\u0442\u0430\u0431\u043b\u0438\u0446\u0430, \u0438\u043d\u0434\u0435\u043a\u0441\u0438\u0440\u0443\u044e\u0449\u0430\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043eCREATE VIRTUAL TABLE IF NOT EXISTS notes_fts USING fts5(  title, content, note_id UNINDEXED);&#8212; \u0422\u0440\u0438\u0433\u0433\u0435\u0440\u044b \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0441 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0442\u0430\u0431\u043b\u0438\u0446\u0435\u0439CREATE TRIGGER notes_ai AFTER INSERT ON notes BEGIN  INSERT INTO notes_fts(rowid, title, content, note_id)  VALUES (new.rowid, json_extract(new.data,&#8217;$.title&#8217;), json_extract(new.data,&#8217;$.content&#8217;), new.id);END;\/\/ \u041f\u043e\u0438\u0441\u043a \u2014 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434\u044b \u0434\u0430\u0436\u0435&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-491003","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/491003","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=491003"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/491003\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=491003"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=491003"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=491003"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}