{"id":480690,"date":"2026-05-22T15:09:28","date_gmt":"2026-05-22T15:09:28","guid":{"rendered":"https:\/\/savepearlharbor.com\/?p=480690"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=480690","title":{"rendered":"\u041a\u0430\u043a \u00ab\u0441\u043f\u044f\u0442\u00bb \u0432\u043a\u043b\u0430\u0434\u043a\u0438 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435"},"content":{"rendered":"<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u041f\u0440\u0438\u0432\u0435\u0442! \u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u041a\u043e\u0441\u0442\u044f, \u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432 \u0432 \u042eMoney. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u044e, \u043f\u043e\u0447\u0435\u043c\u0443 \u0432\u043a\u043b\u0430\u0434\u043a\u0430 \u043f\u043e\u0441\u043b\u0435 \u0432\u043e\u0437\u0432\u0440\u0430\u0442\u0430 \u0438\u0437 \u0444\u043e\u043d\u0430 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u0432\u0435\u0441\u0442\u0438 \u0441\u0435\u0431\u044f \u0441\u0442\u0440\u0430\u043d\u043d\u043e: \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043f\u043e\u0434\u0432\u0438\u0441\u0430\u0435\u0442, \u0442\u0430\u0439\u043c\u0435\u0440\u044b \u0441\u044a\u0435\u0437\u0436\u0430\u044e\u0442, \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043f\u0440\u0438\u0445\u043e\u0434\u044f\u0442 \u043f\u0430\u0447\u043a\u043e\u0439.<\/p>\n<p>\u041c\u0430\u0442\u0435\u0440\u0438\u0430\u043b \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u0441\u044f \u0442\u0435\u043c, \u043a\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 \u0441\u043b\u043e\u0436\u043d\u044b\u0435 SPA \u0441 realtime\u2011\u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f\u043c\u0438, WebSocket \u0438 \u043d\u0430\u0441\u044b\u0449\u0435\u043d\u043d\u044b\u043c UI \u2014 CRM, \u0434\u0430\u0448\u0431\u043e\u0440\u0434\u044b, \u043f\u043b\u0430\u0442\u0451\u0436\u043d\u044b\u0435 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0438.<\/p>\n<p>\u0422\u0435\u043c\u0430 \u0432\u044b\u0440\u043e\u0441\u043b\u0430 \u0438\u0437 \u0434\u043e\u043a\u043b\u0430\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f \u0431\u0443\u0434\u0443 \u0447\u0438\u0442\u0430\u0442\u044c \u043d\u0430 <a href=\"https:\/\/events.yoomoney.ru\/frontend-mix_2026\">Frontend Mix<\/a> \u2014 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u043e\u043c \u043c\u0438\u0442\u0430\u043f\u0435 \u042eMoney \u0434\u043b\u044f \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u2011\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432. \u041d\u043e \u0437\u0434\u0435\u0441\u044c \u0431\u0443\u0434\u0435\u0442 \u0438\u043c\u0435\u043d\u043d\u043e \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0440\u0430\u0437\u0431\u043e\u0440: \u0441 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c\u0438, \u043a\u043e\u0434\u043e\u043c \u0438 \u043e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0435\u043c \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0441 \u043d\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u043c\u0438 \u0432\u043a\u043b\u0430\u0434\u043a\u0430\u043c\u0438.<\/p>\n<p>\u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c:<\/p>\n<ul>\n<li>\n<p>\u043a\u0430\u043a \u0443\u0441\u0442\u0440\u043e\u0435\u043d\u044b Page Visibility API \u0438 Page Lifecycle API, <\/p>\n<\/li>\n<li>\n<p>\u0437\u0430\u0447\u0435\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u044e\u0442 \u0444\u043e\u043d\u043e\u0432\u044b\u0435 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u044b, <\/p>\n<\/li>\n<li>\n<p>\u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u0440\u0438 \u0437\u0430\u043c\u043e\u0440\u043e\u0437\u043a\u0435 \u0432\u043a\u043b\u0430\u0434\u043e\u043a, \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u043e\u043c \u0441\u043d\u0435 \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0442\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438\u0437 BFCache,<\/p>\n<\/li>\n<li>\n<p>\u0447\u0435\u043c \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f Chrome, Safari \u0438 Firefox, <\/p>\n<\/li>\n<li>\n<p>\u043a\u0430\u043a\u0438\u0435 API \u0443\u0436\u0435 \u0443\u0441\u0442\u0430\u0440\u0435\u043b\u0438,<\/p>\n<\/li>\n<li>\n<p>\u0430 \u043a\u0430\u043a\u0438\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044b \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u0435\u0435 \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u044f\u0445.<\/p>\n<\/li>\n<\/ul>\n<p>\u041d\u0430 \u043c\u0438\u0442\u0430\u043f\u0435 \u043e\u0431\u0441\u0443\u0434\u0438\u043c \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043d\u044e\u0430\u043d\u0441\u044b \u0438 \u0432\u043e\u043f\u0440\u043e\u0441\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0447\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0442 \u0443 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u0444\u043e\u043d\u043e\u0432\u044b\u043c\u0438 \u0432\u043a\u043b\u0430\u0434\u043a\u0430\u043c\u0438.<\/p>\n<h2>\u041a\u043e\u0433\u0434\u0430 \u0444\u043e\u043d\u043e\u0432\u044b\u0435 \u0432\u043a\u043b\u0430\u0434\u043a\u0438 \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043e\u0439<\/h2>\n<p>\u041e\u0431\u044b\u0447\u043d\u043e \u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u0447\u0442\u043e JavaScript \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0435\u043f\u0440\u0435\u0440\u044b\u0432\u043d\u043e, \u043f\u043e\u043a\u0430 \u0432\u043a\u043b\u0430\u0434\u043a\u0430 \u043e\u0442\u043a\u0440\u044b\u0442\u0430. \u041d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0442 \u0440\u0435\u0441\u0443\u0440\u0441\u044b: \u0437\u0430\u043c\u0435\u0434\u043b\u044f\u0435\u0442 \u0442\u0430\u0439\u043c\u0435\u0440\u044b, \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 JS, \u0430 \u0438\u043d\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0437\u0430\u043c\u043e\u0440\u0430\u0436\u0438\u0432\u0430\u0435\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443.<\/p>\n<p>\u0414\u043b\u044f \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0441\u0430\u0439\u0442\u043e\u0432 \u044d\u0442\u043e \u043d\u0435\u0437\u0430\u043c\u0435\u0442\u043d\u043e. \u041d\u043e \u0432 CRM, \u0447\u0430\u0442\u0430\u0445, \u043f\u043b\u0430\u0442\u0451\u0436\u043d\u044b\u0445 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u044f\u0445 \u0438 \u0434\u0430\u0448\u0431\u043e\u0440\u0434\u0430\u0445 \u0442\u0430\u043a\u0438\u0435 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0431\u044b\u0441\u0442\u0440\u043e \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u043e\u043c \u0431\u0430\u0433\u043e\u0432 \u2014 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u043f\u043e\u0441\u043b\u0435 \u0434\u043e\u043b\u0433\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u044f \u0432\u043a\u043b\u0430\u0434\u043a\u0438, \u0441\u043d\u0430 \u043d\u043e\u0443\u0442\u0431\u0443\u043a\u0430 \u0438\u043b\u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0442\u0430 \u0447\u0435\u0440\u0435\u0437 \u043a\u043d\u043e\u043f\u043a\u0443 \u00ab\u041d\u0430\u0437\u0430\u0434\u00bb.<\/p>\n<h2>\u041a\u0435\u0439\u0441 \u0438\u0437 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/h2>\n<p>\u0412 \u042eMoney \u044f \u0440\u0430\u0431\u043e\u0442\u0430\u044e \u043d\u0430\u0434 CRM \u0434\u043b\u044f \u043a\u043e\u043d\u0442\u0430\u043a\u0442\u043d\u043e\u0433\u043e \u0446\u0435\u043d\u0442\u0440\u0430: \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u044e\u0442 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u043e WebSocket \u0438 \u0434\u0435\u0440\u0436\u0430\u0442 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u043c\u0438 \u0434\u0435\u0441\u044f\u0442\u043a\u0438 \u0432\u043a\u043b\u0430\u0434\u043e\u043a \u043d\u0430 \u043f\u0440\u043e\u0442\u044f\u0436\u0435\u043d\u0438\u0438 \u0432\u0441\u0435\u0439 \u0441\u043c\u0435\u043d\u044b. \u0427\u0430\u0441\u0442\u044c \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u043e\u0432 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0430 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0435\u0440\u0432\u0435\u0440\u0430\u0445, \u0433\u0434\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u044b, \u2014 \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0437\u0430\u043c\u0435\u0442\u043d\u043e.<\/p>\n<figure class=\"full-width \"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/273\/14a\/521\/27314a521a49a077f82d9fb0992f23ed.png\" width=\"940\" height=\"524\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/273\/14a\/521\/27314a521a49a077f82d9fb0992f23ed.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/273\/14a\/521\/27314a521a49a077f82d9fb0992f23ed.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u042d\u0442\u043e\u0442 \u043a\u0435\u0439\u0441 \u2014 \u0447\u0430\u0441\u0442\u044c \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b Frontend Mix, \u043c\u0438\u0442\u0430\u043f\u0430 \u042eMoney \u043f\u0440\u043e \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u043e\u0439\u0434\u0451\u0442 28 \u043c\u0430\u044f \u043e\u043d\u043b\u0430\u0439\u043d \u0438 \u043e\u0444\u043b\u0430\u0439\u043d \u0432 \u0421\u0430\u043d\u043a\u0442\u2011\u041f\u0435\u0442\u0435\u0440\u0431\u0443\u0440\u0433\u0435.<\/p>\n<p>\u041f\u043e\u043c\u0438\u043c\u043e \u00ab\u0441\u043f\u044f\u0449\u0438\u0445\u00bb \u0432\u043a\u043b\u0430\u0434\u043e\u043a, \u0432 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0435 \u0435\u0449\u0451 \u0442\u0440\u0438 \u0434\u043e\u043a\u043b\u0430\u0434\u0430:<\/p>\n<ul>\n<li>\n<p>Spec\u2011Driven \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430 \u0434\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u043f\u0438\u0441\u0435\u043c \u0441 OpenAPI \u043a\u0430\u043a \u0435\u0434\u0438\u043d\u044b\u043c \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u043e\u043c \u043f\u0440\u0430\u0432\u0434\u044b \u0438 \u0430\u0432\u0442\u043e\u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0435\u0439 \u043a\u043e\u043d\u0441\u0438\u0441\u0442\u0435\u043d\u0442\u043d\u043e\u0433\u043e HTML.<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043c\u043e\u0434\u0443\u043b\u044f \u0448\u0443\u043c\u043e\u043f\u043e\u0434\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043a \u0440\u0430\u0431\u043e\u0447\u0435\u043c\u0443 \u043c\u0435\u0441\u0442\u0443 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u0430: React, WebSockets, WebRTC \u0438 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u043c\u043e\u0434\u0443\u043b\u044f.<\/p>\n<\/li>\n<li>\n<p>\u041a\u0440\u0443\u0433\u043b\u044b\u0439 \u0441\u0442\u043e\u043b \u043f\u0440\u043e AI \u0432\u043e \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435 \u2014 \u0432\u043b\u0438\u044f\u043d\u0438\u0435 \u043d\u0435\u0439\u0440\u043e\u0441\u0435\u0442\u0435\u0439 \u043d\u0430 \u0440\u044b\u043d\u043e\u043a, \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0438 \u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0435.<\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u0438 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u2014 \u043d\u0430 \u0441\u0430\u0439\u0442\u0435 Frontend Mix, \u0441\u0441\u044b\u043b\u043a\u0430 \u0432 \u043a\u043e\u043d\u0446\u0435 \u0441\u0442\u0430\u0442\u044c\u0438.<\/p>\n<h4>\u0421 \u043a\u0430\u043a\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043e\u0439 \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0438\u0441\u044c<\/h4>\n<p>\u041d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0442\u0438\u043a\u0435\u0442\u0430 \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f \u043f\u043b\u0430\u0432\u0430\u044e\u0449\u0438\u0439 \u0431\u0430\u0433: \u043f\u043e\u0441\u043b\u0435 \u0432\u043e\u0437\u0432\u0440\u0430\u0442\u0430 \u043d\u0430 \u0432\u043a\u043b\u0430\u0434\u043a\u0443 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0435\u043a\u0443\u043d\u0434 \u0442\u043e\u0440\u043c\u043e\u0437\u0438\u043b, \u0441\u043f\u0438\u043d\u043d\u0435\u0440\u044b \u0437\u0430\u0432\u0438\u0441\u0430\u043b\u0438, \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u043b\u0438 \u043f\u0430\u0447\u043a\u043e\u0439, \u0447\u0430\u0441\u0442\u044c \u043a\u043b\u0438\u043a\u043e\u0432 \u0431\u0443\u0434\u0442\u043e \u0442\u0435\u0440\u044f\u043b\u0430\u0441\u044c. \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u043b\u0430\u0441\u044c \u043d\u0435\u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e, \u043b\u043e\u0433\u0438 \u0438 \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u043d\u0433 \u043d\u0435 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u043b\u0438 \u044f\u0432\u043d\u044b\u0445 \u043e\u0448\u0438\u0431\u043e\u043a.<\/p>\n<p>\u0421\u043d\u0430\u0440\u0443\u0436\u0438 \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b\u043e \u0442\u0430\u043a:<\/p>\n<ul>\n<li>\n<p>\u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441\u0440\u0430\u0437\u0443 \u0441 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 \u0432\u043a\u043b\u0430\u0434\u043a\u0430\u043c\u0438 CRM \u0438 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u043c\u0438 \u0441\u0438\u0441\u0442\u0435\u043c\u0430\u043c\u0438;<\/p>\n<\/li>\n<li>\n<p>\u0441\u043f\u0443\u0441\u0442\u044f \u0432\u0440\u0435\u043c\u044f \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u043a \u0442\u0438\u043a\u0435\u0442\u0443, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u044c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u044f;<\/p>\n<\/li>\n<li>\n<p>\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u00ab\u043e\u0436\u0438\u0432\u0430\u0435\u0442\u00bb \u043d\u0435 \u0441\u0440\u0430\u0437\u0443: \u0437\u0430\u0432\u0438\u0441\u0430\u044e\u0442 \u0441\u043f\u0438\u043d\u043d\u0435\u0440\u044b, \u043f\u0430\u0447\u043a\u043e\u0439 \u043f\u0440\u0438\u0445\u043e\u0434\u044f\u0442 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f, \u0430 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043a\u043b\u0438\u043a\u0438 \u0431\u0443\u0434\u0442\u043e \u0442\u0435\u0440\u044f\u044e\u0442\u0441\u044f.<\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width \"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/ca1\/02b\/407\/ca102b407021111f63bbfa7cff0a4470.png\" width=\"1920\" height=\"1080\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/ca1\/02b\/407\/ca102b407021111f63bbfa7cff0a4470.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/ca1\/02b\/407\/ca102b407021111f63bbfa7cff0a4470.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u0421\u0435\u0440\u0432\u0435\u0440 \u043e\u0442\u0432\u0435\u0447\u0430\u043b \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e, WebSocket \u043d\u0435 \u0440\u0432\u0430\u043b\u0441\u044f, CPU \u043d\u0435 \u0431\u044b\u043b \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u043f\u0435\u0440\u0435\u0433\u0440\u0443\u0436\u0435\u043d. \u041e\u0431\u0449\u0430\u044f \u0437\u0430\u043a\u043e\u043d\u043e\u043c\u0435\u0440\u043d\u043e\u0441\u0442\u044c \u0431\u044b\u043b\u0430 \u043e\u0434\u043d\u0430: \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0447\u0430\u0449\u0435 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u043b\u0430 \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0432\u043a\u043b\u0430\u0434\u043a\u0430 \u0434\u043e\u043b\u0433\u043e \u043d\u0430\u0445\u043e\u0434\u0438\u043b\u0430\u0441\u044c \u0432 \u0444\u043e\u043d\u0435.<\/p>\n<h2>\u0427\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u043b\u043e \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c \u2014 \u0438 \u043a\u0430\u043a \u043c\u044b \u044d\u0442\u043e \u0440\u0435\u043a\u043e\u043d\u0441\u0442\u0440\u0443\u0438\u0440\u043e\u0432\u0430\u043b\u0438<\/h2>\n<p>\u041a\u0430\u0440\u0442\u0438\u043d\u0430 \u043e\u043a\u0430\u0437\u0430\u043b\u0430\u0441\u044c \u0442\u0430\u043a\u043e\u0439:<\/p>\n<ol>\n<li>\n<p>\u041e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0434\u0440\u0443\u0433\u0443\u044e \u0432\u043a\u043b\u0430\u0434\u043a\u0443.<\/p>\n<\/li>\n<li>\n<p>\u0427\u0435\u0440\u0435\u0437 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0437\u0430\u043c\u043e\u0440\u0430\u0436\u0438\u0432\u0430\u0435\u0442 \u0444\u043e\u043d\u043e\u0432\u0443\u044e \u0432\u043a\u043b\u0430\u0434\u043a\u0443 \u0434\u043b\u044f \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432. WebSocket \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u00ab\u0436\u0438\u0432\u044b\u043c\u00bb, \u0438 \u0432\u0445\u043e\u0434\u044f\u0449\u0438\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u044e\u0442 \u043d\u0430\u043a\u0430\u043f\u043b\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0431\u0443\u0444\u0435\u0440\u0435.<\/p>\n<\/li>\n<li>\n<p>\u041e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u043a \u0432\u043a\u043b\u0430\u0434\u043a\u0435.<\/p>\n<\/li>\n<li>\n<p>\u0411\u0440\u0430\u0443\u0437\u0435\u0440 \u00ab\u0440\u0430\u0437\u043c\u043e\u0440\u0430\u0436\u0438\u0432\u0430\u0435\u0442\u00bb \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u043f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u043d\u0430\u043a\u043e\u043f\u0438\u0432\u0448\u0438\u0435\u0441\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043f\u043e\u0447\u0442\u0438 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u043f\u043e\u043f\u0430\u0434\u0430\u044e\u0442 \u0432 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438.<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043e\u0431\u0440\u0443\u0448\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043b\u0430\u0432\u0438\u043d\u0430 \u0432\u044b\u0437\u043e\u0432\u043e\u0432 API, \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0445 \u0440\u0435\u043d\u0434\u0435\u0440\u043e\u0432 React \u0438 \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0438\u0445 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0439.<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430 \u0441\u043b\u0430\u0431\u043e\u043c \u0436\u0435\u043b\u0435\u0437\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u043e\u0449\u0443\u0442\u0438\u043c\u043e \u0442\u043e\u0440\u043c\u043e\u0437\u0438\u0442\u044c, \u0430 \u0447\u0430\u0441\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u0451\u0442 \u043e\u0442\u0432\u0435\u0447\u0430\u0442\u044c.<\/p>\n<\/li>\n<\/ol>\n<p>\u0412\u0441\u0435 \u0447\u0430\u0441\u0442\u0438 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u043f\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e. \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u043b\u0430 \u0432 \u043c\u043e\u043c\u0435\u043d\u0442 \u00ab\u043f\u0440\u043e\u0431\u0443\u0436\u0434\u0435\u043d\u0438\u044f\u00bb \u0432\u043a\u043b\u0430\u0434\u043a\u0438: \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0440\u0430\u0437\u043e\u043c \u043e\u0442\u0434\u0430\u0432\u0430\u043b \u043d\u0430\u043a\u043e\u043f\u043b\u0435\u043d\u043d\u044b\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u043b \u0432\u0441\u043f\u043b\u0435\u0441\u043a \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u2014 \u0438 \u043d\u0430 \u0441\u043b\u0430\u0431\u044b\u0445 \u043c\u0430\u0448\u0438\u043d\u0430\u0445 \u044d\u0442\u043e\u0433\u043e \u0445\u0432\u0430\u0442\u0430\u043b\u043e \u0434\u043b\u044f \u0437\u0430\u043c\u0435\u0442\u043d\u043e\u0433\u043e \u0444\u0440\u0438\u0437\u0430.<\/p>\n<p><strong>\u041a\u0430\u043a \u043c\u044b \u044d\u0442\u043e \u0434\u043e\u043a\u0430\u0437\u0430\u043b\u0438<\/strong><\/p>\n<p>\u0413\u0438\u043f\u043e\u0442\u0435\u0437\u0430 \u0441\u043b\u043e\u0436\u0438\u043b\u0430\u0441\u044c \u0431\u044b\u0441\u0442\u0440\u043e: \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0442\u043e\u0440\u043c\u043e\u0437\u0438\u043b \u0438\u043c\u0435\u043d\u043d\u043e \u043f\u0440\u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0442\u0435.<\/p>\n<figure class=\"full-width \"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/974\/22b\/c10\/97422bc1053921c5862b919fea96f64d.png\" width=\"695\" height=\"356\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/974\/22b\/c10\/97422bc1053921c5862b919fea96f64d.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/974\/22b\/c10\/97422bc1053921c5862b919fea96f64d.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u041c\u044b \u0432\u043a\u043b\u044e\u0447\u0438\u043b\u0438 \u043b\u043e\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430 \u2014 visibilitychange, pagehide\/pageshow, freeze\/resume \u2014 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 chrome:\/\/discards, \u0447\u0442\u043e\u0431\u044b \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u0437\u0430\u043c\u043e\u0440\u0430\u0436\u0438\u0432\u0430\u0442\u044c \u0432\u043a\u043b\u0430\u0434\u043a\u0438.<\/p>\n<p>\u0413\u0438\u043f\u043e\u0442\u0435\u0437\u0430 \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u043b\u0430\u0441\u044c: \u043f\u043e\u0441\u043b\u0435 resume \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u0430\u0437\u043e\u043c \u043e\u0442\u0434\u0430\u0432\u0430\u043b \u043d\u0430\u043a\u043e\u043f\u0438\u0432\u0448\u0438\u0435\u0441\u044f WebSocket-\u0441\u043e\u0431\u044b\u0442\u0438\u044f. \u0421\u0442\u0430\u043b\u043e \u044f\u0441\u043d\u043e, \u0447\u0442\u043e \u043f\u0440\u0438\u0447\u0438\u043d\u0430 \u2014 \u0432 \u0441\u0430\u043c\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 \u0440\u0430\u0431\u043e\u0442\u044b \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0441 \u0444\u043e\u043d\u043e\u0432\u044b\u043c\u0438 \u0432\u043a\u043b\u0430\u0434\u043a\u0430\u043c\u0438.<\/p>\n<h4>\u0420\u0435\u0448\u0435\u043d\u0438\u0435 (\u0441\u043f\u043e\u0439\u043b\u0435\u0440)<\/h4>\n<p>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u0440\u0435\u0448\u0438\u043b\u0438 \u0431\u0430\u0442\u0447\u0438\u043d\u0433\u043e\u043c WebSocket-\u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439: \u0432\u043c\u0435\u0441\u0442\u043e \u0441\u0435\u0440\u0438\u0438 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0445 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043f\u043e\u043b\u0443\u0447\u0430\u043b \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0435. \u042d\u0442\u043e \u0443\u0431\u0440\u0430\u043b\u043e \u043f\u0438\u043a\u043e\u0432\u0443\u044e \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u043f\u0440\u0438 \u00ab\u043f\u0440\u043e\u0431\u0443\u0436\u0434\u0435\u043d\u0438\u0438\u00bb \u0432\u043a\u043b\u0430\u0434\u043a\u0438. \u041d\u043e \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043d\u044f\u0442\u044c, \u043f\u043e\u0447\u0435\u043c\u0443 \u044d\u0442\u043e \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e, \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c\u0441\u044f, \u043a\u0430\u043a \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0443\u0441\u044b\u043f\u043b\u044f\u044e\u0442 \u0444\u043e\u043d\u043e\u0432\u044b\u0435 \u0432\u043a\u043b\u0430\u0434\u043a\u0438.<\/p>\n<h3>Page Visibility API<\/h3>\n<p>\u0411\u0430\u0437\u043e\u0432\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0444\u043e\u043d\u043e\u0432\u044b\u043c\u0438 \u0432\u043a\u043b\u0430\u0434\u043a\u0430\u043c\u0438. \u0414\u0430\u0451\u0442 document.visibilityState \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438 &#171;visible&#187; \/ &#171;hidden&#187; \u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 visibilitychange.<\/p>\n<pre><code>document.addEventListener('visibilitychange', () =&gt; {  if (document.visibilityState === 'hidden') {    \/\/ \u0412\u043a\u043b\u0430\u0434\u043a\u0430 \u0443\u0448\u043b\u0430 \u0432 \u0444\u043e\u043d \u2014 \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f    pauseLiveUpdates();    saveApplicationState();  } else {    \/\/ \u0412\u043a\u043b\u0430\u0434\u043a\u0430 \u0441\u043d\u043e\u0432\u0430 \u0430\u043a\u0442\u0438\u0432\u043d\u0430    resumeLiveUpdates();    checkConnections();  }});<\/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>\u041d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445 \u044d\u0442\u043e \u0441\u0430\u043c\u044b\u0439 \u043d\u0430\u0434\u0451\u0436\u043d\u044b\u0439 \u0441\u0438\u0433\u043d\u0430\u043b: beforeunload \u0438 unload \u0442\u0430\u043c \u043c\u043e\u0433\u0443\u0442 \u043d\u0435 \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c. \u041e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0435 \u2014 API \u0440\u0430\u0437\u043b\u0438\u0447\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u00ab\u0432\u0438\u0434\u043d\u043e\u00bb \u0438 \u00ab\u043d\u0435 \u0432\u0438\u0434\u043d\u043e\u00bb \u0438 \u043d\u0435 \u0433\u043e\u0432\u043e\u0440\u0438\u0442, \u0431\u044b\u043b\u0430 \u043b\u0438 \u0432\u043a\u043b\u0430\u0434\u043a\u0430 \u0437\u0430\u043c\u043e\u0440\u043e\u0436\u0435\u043d\u0430 \u0438\u043b\u0438 \u0443\u0436\u0435 \u0432\u044b\u0433\u0440\u0443\u0436\u0435\u043d\u0430 \u0438\u0437 \u043f\u0430\u043c\u044f\u0442\u0438.<\/p>\n<h2>Page Lifecycle API<\/h2>\n<p>Page Lifecycle API \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u0442 \u044d\u0442\u0443 \u043c\u043e\u0434\u0435\u043b\u044c \u0438 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u043f\u043e\u043b\u043d\u044b\u0439 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u044b\u0439 \u0446\u0438\u043a\u043b \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u042d\u0442\u043e <a href=\"https:\/\/wicg.github.io\/page-lifecycle\/\">\u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f<\/a> WICG, \u0438\u043d\u0438\u0446\u0438\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f Google, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u0432 Chromium-\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u043d\u0430\u0447\u0438\u043d\u0430\u044f \u0441 Chrome 68.<\/p>\n<p>Firefox \u0438 Safari \u043d\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b\u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f freeze\/resume, \u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u043f\u043e\u0445\u043e\u0436\u0438\u0435 \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0438: \u0442\u0440\u043e\u0442\u0442\u043b\u0438\u043d\u0433 \u0442\u0430\u0439\u043c\u0435\u0440\u043e\u0432, \u0437\u0430\u043c\u043e\u0440\u043e\u0437\u043a\u0443 \u0438 \u0432\u044b\u0433\u0440\u0443\u0437\u043a\u0443 \u0432\u043a\u043b\u0430\u0434\u043e\u043a. \u0414\u0430\u043b\u0435\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u0442\u0435\u0440\u043c\u0438\u043d\u043e\u043b\u043e\u0433\u0438\u044e Page Lifecycle API \u043a\u0430\u043a \u043e\u0431\u0449\u0443\u044e \u043c\u043e\u0434\u0435\u043b\u044c, \u043e\u0442\u043c\u0435\u0447\u0430\u044f \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0443 Chromium \u0442\u0430\u043c, \u0433\u0434\u0435 \u043e\u043d\u0430 \u0435\u0441\u0442\u044c.<\/p>\n<h2>\u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/h2>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td>\n<p align=\"left\"><strong>\u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435<\/strong><\/p>\n<\/td>\n<td data-colwidth=\"148\" width=\"148\">\n<p align=\"left\"><strong>\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\"><strong>\u0422\u0430\u0439\u043c\u0435\u0440\u044b<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\"><strong>JS<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\"><strong>\u0420\u0435\u0441\u0443\u0440\u0441\u044b<\/strong><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\"><strong>Active<\/strong><\/p>\n<\/td>\n<td data-colwidth=\"148\" width=\"148\">\n<p align=\"left\">\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0432\u0438\u0434\u043d\u0430 \u0438 \u0438\u043c\u0435\u0435\u0442 \u0444\u043e\u043a\u0443\u0441.<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u0411\u0435\u0437 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0439<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u0420\u0430\u0431\u043e\u0442\u0430\u0435\u0442<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u041d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e\u0435<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\"><strong>Passive<\/strong><\/p>\n<\/td>\n<td data-colwidth=\"148\" width=\"148\">\n<p align=\"left\">\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430   \u0432\u0438\u0434\u043d\u0430, \u0444\u043e\u043a\u0443\u0441 \u2014 \u0432 \u0434\u0440\u0443\u0433\u043e\u043c \u043e\u043a\u043d\u0435.<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u0411\u0435\u0437   \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0439<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u0420\u0430\u0431\u043e\u0442\u0430\u0435\u0442<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u041d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e\u0435<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\"><strong>Hidden<\/strong><\/p>\n<\/td>\n<td data-colwidth=\"148\" width=\"148\">\n<p align=\"left\">\u0412\u043a\u043b\u0430\u0434\u043a\u0430 \u0432 \u0444\u043e\u043d\u0435.<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u0422\u0440\u043e\u0442\u0442\u043b\u0438\u043d\u0433<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u0420\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u0435\u0435<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u0421\u043d\u0438\u0436\u0435\u043d\u043d\u043e\u0435<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\"><strong>Frozen<\/strong><\/p>\n<\/td>\n<td data-colwidth=\"148\" width=\"148\">\n<p align=\"left\">JS \u043d\u0430 \u043f\u0430\u0443\u0437\u0435, \u043a\u043e\u043b\u0431\u044d\u043a\u0438 \u043d\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f.<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u041d\u0435   \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442\u0441\u044f<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u0417\u0430\u043c\u043e\u0440\u043e\u0436\u0435\u043d<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u041c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\"><strong>Discarded<\/strong><\/p>\n<\/td>\n<td data-colwidth=\"148\" width=\"148\">\n<p align=\"left\">\u041f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0432\u044b\u0433\u0440\u0443\u0436\u0435\u043d\u0430 \u0438\u0437 \u043f\u0430\u043c\u044f\u0442\u0438<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u2014<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u041d\u0435\u0442<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u041d\u0443\u043b\u0435\u0432\u043e\u0435<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>\u0412\u0430\u0436\u043d\u044b\u0435 \u043d\u044e\u0430\u043d\u0441\u044b: \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 Frozen WebSocket \u043c\u043e\u0436\u0435\u0442 \u043e\u0441\u0442\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u043c, \u043d\u043e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 onmessage \u043d\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u2014 \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u043e\u0441\u043b\u0435 \u0440\u0430\u0437\u043c\u043e\u0440\u043e\u0437\u043a\u0438 \u0432\u043a\u043b\u0430\u0434\u043a\u0430 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u043f\u0430\u0447\u043a\u0443 \u043d\u0430\u043a\u043e\u043f\u0438\u0432\u0448\u0438\u0445\u0441\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u0439. \u041f\u0435\u0440\u0435\u0445\u043e\u0434 \u0432 Discarded \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0431\u0435\u0437 \u0441\u043e\u0431\u044b\u0442\u0438\u0439: \u0444\u0430\u043a\u0442 \u0432\u044b\u0433\u0440\u0443\u0437\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0441\u043b\u0435 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0447\u0435\u0440\u0435\u0437 document.wasDiscarded.<\/p>\n<figure class=\"full-width \"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/82f\/82e\/373\/82f82e373505d8dd8429b811521e3ed8.png\" alt=\"\u0413\u0440\u0430\u0444 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u043e\u0432 \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u043c\u0438\" title=\"\u0413\u0440\u0430\u0444 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u043e\u0432 \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u043c\u0438\" width=\"940\" height=\"525\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/82f\/82e\/373\/82f82e373505d8dd8429b811521e3ed8.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/82f\/82e\/373\/82f82e373505d8dd8429b811521e3ed8.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u0413\u0440\u0430\u0444 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u043e\u0432 \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u043c\u0438<\/figcaption><\/div>\n<\/figure>\n<p>\u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u0430\u0436\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043b\u0443\u0447\u0448\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c \u043d\u0430 visibilitychange, \u043d\u0435 \u0434\u043e\u0436\u0438\u0434\u0430\u044f\u0441\u044c freeze: \u043f\u0435\u0440\u0435\u0445\u043e\u0434 Hidden \u2192 Discarded \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043a\u043e\u0434 \u043d\u0435 \u0443\u0432\u0438\u0434\u0438\u0442.<\/p>\n<h2>\u041f\u043e\u043b\u043d\u0430\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430<\/h2>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td>\n<p align=\"left\"><strong>\u0421\u043e\u0431\u044b\u0442\u0438\u0435<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\"><strong>\u041e\u0431\u044a\u0435\u043a\u0442-\u0446\u0435\u043b\u044c<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\"><strong>\u041f\u0435\u0440\u0435\u0445\u043e\u0434<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\"><strong>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435<\/strong><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\"><strong>focus<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\">DOM-\u044d\u043b\u0435\u043c\u0435\u043d\u0442<\/p>\n<\/td>\n<td>\n<p align=\"left\">Passive \u2192 Active<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u0422\u043e\u043b\u044c\u043a\u043e \u0435\u0441\u043b\u0438 \u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043d\u0435 \u0431\u044b\u043b\u043e \u0444\u043e\u043a\u0443\u0441\u0430.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\"><strong>blur<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\">DOM-\u044d\u043b\u0435\u043c\u0435\u043d\u0442<\/p>\n<\/td>\n<td>\n<p align=\"left\">Active \u2192 Passive<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u0422\u043e\u043b\u044c\u043a\u043e \u0435\u0441\u043b\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0442\u0435\u0440\u044f\u0435\u0442 \u0444\u043e\u043a\u0443\u0441 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\"><strong>visibilitychange<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\">document<\/p>\n<\/td>\n<td>\n<p align=\"left\">Passive \u2194 Hidden<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0434\u043b\u044f \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d\u0438\u044f \u0443\u0445\u043e\u0434\u0430 \u0432 \u0444\u043e\u043d.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\"><strong>freeze \u2b50<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\">document<\/p>\n<\/td>\n<td>\n<p align=\"left\">Hidden \u2192 Frozen<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u0422\u043e\u043b\u044c\u043a\u043e Chromium 68+.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\"><strong>resume \u2b50<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\">document<\/p>\n<\/td>\n<td>\n<p align=\"left\">Frozen \u2192 Hidden\/Active<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u0422\u043e\u043b\u044c\u043a\u043e Chromium 68+.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\"><strong>pageshow<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\">window<\/p>\n<\/td>\n<td>\n<p align=\"left\">Frozen \u2192 Active<\/p>\n<\/td>\n<td>\n<p align=\"left\">event.persisted =   true \u043f\u0440\u0438 BFCache.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\"><strong>pagehide<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\">window<\/p>\n<\/td>\n<td>\n<p align=\"left\">Hidden \u2192 Frozen\/Terminated<\/p>\n<\/td>\n<td>\n<p align=\"left\">event.persisted = true \u043f\u0440\u0438 BFCache.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\"><strong>beforeunload<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\">window<\/p>\n<\/td>\n<td>\n<p align=\"left\">Hidden \u2192 Terminated<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u0422\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438   \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u0438.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\"><strong>unload<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\">window<\/p>\n<\/td>\n<td>\n<p align=\"left\">Hidden \u2192 Terminated<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u26a0\ufe0f \u0423\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u0439, \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u0435\u0442 BFCache.<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p><em>\u2b50 \u2014 \u0441\u043e\u0431\u044b\u0442\u0438\u044f, \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0435 Page Lifecycle API (Chromium only)<\/em><\/p>\n<h2>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e<\/h2>\n<pre><code>const getLifecycleState = () =&gt; {  if (document.visibilityState === 'hidden') return 'hidden';  if (document.hasFocus()) return 'active';  return 'passive';};let currentState = getLifecycleState();const logStateChange = (next) =&gt; {  if (next === currentState) return;  console.log(`[Lifecycle] ${currentState} \u2192 ${next}`);  currentState = next;};['pageshow', 'focus', 'blur', 'visibilitychange', 'resume'].forEach((type) =&gt; {  window.addEventListener(type, () =&gt; logStateChange(getLifecycleState()));});document.addEventListener('freeze', () =&gt; logStateChange('frozen'));window.addEventListener('pagehide', (event) =&gt; {  logStateChange(event.persisted ? 'frozen' : 'terminated');});<\/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<h2>\u041c\u0435\u0445\u0430\u043d\u0438\u043a\u0430 \u0442\u0440\u043e\u0442\u0442\u043b\u0438\u043d\u0433\u0430<\/h2>\n<p>\u0422\u0440\u043e\u0442\u0442\u043b\u0438\u043d\u0433 \u0432 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u0437\u0430\u0442\u0440\u0430\u0433\u0438\u0432\u0430\u0435\u0442 \u0442\u0430\u0439\u043c\u0435\u0440\u044b (<code>setTimeout<\/code>, <code>setInterval<\/code>), \u0438 \u043f\u043e\u043b\u0438\u0442\u0438\u043a\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u0432\u0441\u0451 \u0430\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u0435\u0435.<\/p>\n<p><strong>\u0411\u0430\u0437\u043e\u0432\u044b\u0439 \u0442\u0440\u043e\u0442\u0442\u043b\u0438\u043d\u0433<\/strong><\/p>\n<p>\u0422\u0430\u0439\u043c\u0435\u0440\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442\u0441\u044f \u043d\u0435 \u0447\u0430\u0449\u0435 \u043e\u0434\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u0430 \u0432 \u0441\u0435\u043a\u0443\u043d\u0434\u0443, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0438\u043d\u0442\u0435\u0440\u0432\u0430\u043b \u043c\u0435\u043d\u044c\u0448\u0435.<\/p>\n<ul>\n<li>\n<p>Chrome \u2014 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0447\u0435\u0440\u0435\u0437 10 \u0441\u0435\u043a\u0443\u043d\u0434 \u0432 \u0444\u043e\u043d\u0435;<\/p>\n<\/li>\n<li>\n<p>Firefox \u2014 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0447\u0435\u0440\u0435\u0437 30 \u0441\u0435\u043a\u0443\u043d\u0434;<\/p>\n<\/li>\n<li>\n<p>Safari \u2014 \u0442\u043e\u0436\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0442\u0440\u043e\u0442\u0442\u043b\u0438\u043d\u0433, \u043d\u043e \u0442\u043e\u0447\u043d\u044b\u0435 \u043f\u043e\u0440\u043e\u0433\u0438 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u043d\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u044b.<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u0418\u043d\u0442\u0435\u043d\u0441\u0438\u0432\u043d\u044b\u0439 \u0442\u0440\u043e\u0442\u0442\u043b\u0438\u043d\u0433 (Chrome 88+)<\/strong><\/p>\n<p>\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u2014 Intensive Wake Up Throttling (Chrome 88+). \u0412\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0438 \u0443\u0441\u043b\u043e\u0432\u0438\u0439:<\/p>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td data-colwidth=\"160\" width=\"160\">\n<p align=\"left\"><strong>\u0423\u0441\u043b\u043e\u0432\u0438\u0435<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\"><strong>\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435<\/strong><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td data-colwidth=\"160\" width=\"160\">\n<p align=\"left\"><strong>\u0412\u0440\u0435\u043c\u044f \u0432 \u0444\u043e\u043d\u0435<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\">\u0411\u043e\u043b\u0435\u0435 5 \u043c\u0438\u043d\u0443\u0442.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td data-colwidth=\"160\" width=\"160\">\n<p align=\"left\"><strong>\u0410\u0443\u0434\u0438\u043e<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\">\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043d\u0435 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442 \u0437\u0432\u0443\u043a \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 30 \u0441\u0435\u043a\u0443\u043d\u0434.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td data-colwidth=\"160\" width=\"160\">\n<p align=\"left\"><strong>WebRTC<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\">\u041d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td data-colwidth=\"160\" width=\"160\">\n<p align=\"left\"><strong>Timer chain<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\">\u0426\u0435\u043f\u043e\u0447\u043a\u0430 \u0442\u0430\u0439\u043c\u0435\u0440\u043e\u0432 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u2265 5 \u0432\u044b\u0437\u043e\u0432\u043e\u0432.<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>\u0412 \u044d\u0442\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435 \u0442\u0430\u0439\u043c\u0435\u0440\u044b \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442 \u043d\u0435 \u0447\u0430\u0449\u0435 1 \u0440\u0430\u0437\u0430 \u0432 \u043c\u0438\u043d\u0443\u0442\u0443.<\/p>\n<p>\u041e\u0431\u044b\u0447\u043d\u044b\u0439 \u0444\u043e\u043d:\u00a0\u00a0 setInterval(fn, 1000) \u2192 ~1 \u0440\u0430\u0437\/\u0441\u0435\u043a<br \/>\u0418\u043d\u0442\u0435\u043d\u0441\u0438\u0432\u043d\u044b\u0439:\u00a0\u00a0 setInterval(fn, 1000) \u2192 ~1 \u0440\u0430\u0437\/\u043c\u0438\u043d<\/p>\n<p><strong>\u0411\u044e\u0434\u0436\u0435\u0442\u043d\u0430\u044f \u043c\u043e\u0434\u0435\u043b\u044c (Chrome \u0438 Firefox)<\/strong><\/p>\n<p>Chrome \u0438 Firefox \u0442\u0430\u043a\u0436\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0431\u044e\u0434\u0436\u0435\u0442\u043d\u0443\u044e \u043c\u043e\u0434\u0435\u043b\u044c: \u043a\u0430\u0436\u0434\u0430\u044f \u0444\u043e\u043d\u043e\u0432\u0430\u044f \u0432\u043a\u043b\u0430\u0434\u043a\u0430 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043d\u044b\u0439 CPU-\u0431\u044e\u0434\u0436\u0435\u0442.<\/p>\n<ul>\n<li>\n<p>\u0437\u0430\u0434\u0430\u0447\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f, \u0442\u043e\u043b\u044c\u043a\u043e \u0435\u0441\u043b\u0438 \u0431\u044e\u0434\u0436\u0435\u0442 \u043d\u0435\u043e\u0442\u0440\u0438\u0446\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439;<\/p>\n<\/li>\n<li>\n<p>\u0432\u0440\u0435\u043c\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0437\u0430\u0434\u0430\u0447\u0438 \u0432\u044b\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u0438\u0437 \u0431\u044e\u0434\u0436\u0435\u0442\u0430;<\/p>\n<\/li>\n<li>\n<p>\u0431\u044e\u0434\u0436\u0435\u0442 \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u2014 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u043d\u0430 10 \u043c\u0441 \u0432 \u0441\u0435\u043a\u0443\u043d\u0434\u0443.<\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440: \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0439 \u0431\u044e\u0434\u0436\u0435\u0442 50 \u043c\u0441, \u0431\u044e\u0434\u0436\u0435\u0442 \u043f\u043e\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043d\u0430 10 \u043c\u0441\/\u0441:<\/p>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td>\n<p align=\"left\"><strong>\u0421\u0435\u043a\u0443\u043d\u0434\u0430<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\"><strong>\u041f\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\"><strong>\u0411\u044e\u0434\u0436\u0435\u0442 \u0434\u043e<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\"><strong>\u0427\u0442\u043e  \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043b\u043e\u0441\u044c<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\"><strong>\u0411\u044e\u0434\u0436\u0435\u0442 \u043f\u043e\u0441\u043b\u0435<\/strong><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\"><strong>1<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\">+10<\/p>\n<\/td>\n<td>\n<p align=\"left\">60<\/p>\n<\/td>\n<td>\n<p align=\"left\">T1 (15) + T2 (25)<\/p>\n<\/td>\n<td>\n<p align=\"left\">20<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\"><strong>2<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\">+10<\/p>\n<\/td>\n<td>\n<p align=\"left\">30<\/p>\n<\/td>\n<td>\n<p align=\"left\">T1 (15) +   T2 (25)<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u221210<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\"><strong>3<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\">+10<\/p>\n<\/td>\n<td>\n<p align=\"left\">0<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u0442\u043e\u043b\u044c\u043a\u043e T1 (15)<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u221215<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\"><strong>4<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\">+10<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u22125<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u043d\u0438\u0447\u0435\u0433\u043e<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u22125<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\"><strong>5<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\">+10<\/p>\n<\/td>\n<td>\n<p align=\"left\">5<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u0442\u043e\u043b\u044c\u043a\u043e T1 (15)<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u221210<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\"><strong>6<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\">+10<\/p>\n<\/td>\n<td>\n<p align=\"left\">0<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u0442\u043e\u043b\u044c\u043a\u043e T1   (15)<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u221215<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>\u0412\u044b\u0432\u043e\u0434: \u0447\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u0442\u0430\u0439\u043c\u0435\u0440\u043e\u0432 \u0438 \u0447\u0435\u043c \u0442\u044f\u0436\u0435\u043b\u0435\u0435 \u043a\u0430\u0436\u0434\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430, \u0442\u0435\u043c \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u0437\u0430\u043c\u0435\u0442\u043d\u044b \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0438.<\/p>\n<p><strong>\u0427\u0442\u043e \u0437\u0430\u0449\u0438\u0449\u0430\u0435\u0442 \u0432\u043a\u043b\u0430\u0434\u043a\u0443 \u043e\u0442 \u0442\u0440\u043e\u0442\u0442\u043b\u0438\u043d\u0433\u0430<\/strong><\/p>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td>\n<p align=\"left\"><strong>\u0424\u0430\u043a\u0442\u043e\u0440<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\"><strong>\u042d\u0444\u0444\u0435\u043a\u0442<\/strong><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\"><strong>\u0412\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0430\u0443\u0434\u0438\u043e<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\">\u0417\u0430\u0449\u0438\u0442\u0430 \u043e\u0442 \u0438\u043d\u0442\u0435\u043d\u0441\u0438\u0432\u043d\u043e\u0433\u043e \u0442\u0440\u043e\u0442\u0442\u043b\u0438\u043d\u0433\u0430.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\"><strong>\u0410\u043a\u0442\u0438\u0432\u043d\u044b\u0439 WebRTC<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\">\u0417\u0430\u0449\u0438\u0442\u0430 \u043e\u0442  \u0438\u043d\u0442\u0435\u043d\u0441\u0438\u0432\u043d\u043e\u0433\u043e \u0442\u0440\u043e\u0442\u0442\u043b\u0438\u043d\u0433\u0430.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\"><strong>Web Locks API<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\">\u0417\u0430\u0449\u0438\u0442\u0430 \u043e\u0442 \u0437\u0430\u043c\u043e\u0440\u043e\u0437\u043a\u0438.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\"><strong>\u0410\u043a\u0442\u0438\u0432\u043d\u044b\u0439 Service Worker<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\">\u0427\u0430\u0441\u0442\u0438\u0447\u043d\u0430\u044f \u0437\u0430\u0449\u0438\u0442\u0430.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\"><strong>IndexedDB-\u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\">\u0417\u0430\u0449\u0438\u0442\u0430 \u043e\u0442 \u0437\u0430\u043c\u043e\u0440\u043e\u0437\u043a\u0438 \u0432 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\"><strong>Web Push-\u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\">\u0417\u0430\u0449\u0438\u0442\u0430 \u043e\u0442 \u0432\u044b\u0433\u0440\u0443\u0437\u043a\u0438.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\"><strong>\u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 audio-context-timers<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\">\u0417\u0430\u0449\u0438\u0442\u0430 \u043e\u0442 \u0442\u0440\u043e\u0442\u0442\u043b\u0438\u043d\u0433\u0430 \u0447\u0435\u0440\u0435\u0437 AudioContext (\u043d\u0435\u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 \u043f\u0440\u0438\u0451\u043c).<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p><strong>\u0417\u0430\u043c\u043e\u0440\u043e\u0437\u043a\u0430 \u0432\u043a\u043b\u0430\u0434\u043a\u0438: \u0432\u0441\u0435 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0438<\/strong><\/p>\n<p>\u0417\u0430\u043c\u043e\u0440\u043e\u0437\u043a\u0430 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u0430 \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u044f\u0445.<\/p>\n<p><strong>\u0421\u0446\u0435\u043d\u0430\u0440\u0438\u0439 1: \u00ab\u0422\u0438\u0445\u0430\u044f\u00bb \u0444\u043e\u043d\u043e\u0432\u0430\u044f \u0432\u043a\u043b\u0430\u0434\u043a\u0430 (Chrome \u043d\u0430 Android)<\/strong><\/p>\n<p>\u041c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0439 Chrome \u0437\u0430\u043c\u043e\u0440\u0430\u0436\u0438\u0432\u0430\u0435\u0442 \u0444\u043e\u043d\u043e\u0432\u044b\u0435 \u0432\u043a\u043b\u0430\u0434\u043a\u0438, \u0441\u043a\u0440\u044b\u0442\u044b\u0435 \u0431\u043e\u043b\u0435\u0435 5 \u043c\u0438\u043d\u0443\u0442, \u043f\u0440\u0438 \u043d\u0435\u0445\u0432\u0430\u0442\u043a\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432.<\/p>\n<p><strong>\u0421\u0446\u0435\u043d\u0430\u0440\u0438\u0439 2: \u0440\u0435\u0436\u0438\u043c \u044d\u043d\u0435\u0440\u0433\u043e\u0441\u0431\u0435\u0440\u0435\u0436\u0435\u043d\u0438\u044f (Chrome 133+, \u0444\u0435\u0432\u0440\u0430\u043b\u044c 2025)<\/strong><\/p>\n<p>Chrome 133+ \u0437\u0430\u043c\u043e\u0440\u0430\u0436\u0438\u0432\u0430\u0435\u0442 CPU-\u0438\u043d\u0442\u0435\u043d\u0441\u0438\u0432\u043d\u044b\u0435 \u0444\u043e\u043d\u043e\u0432\u044b\u0435 \u0432\u043a\u043b\u0430\u0434\u043a\u0438 \u043f\u0440\u0438 \u0432\u043a\u043b\u044e\u0447\u0451\u043d\u043d\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435 \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0438 \u0437\u0430\u0440\u044f\u0434\u0430 (Energy Saver).<\/p>\n<p>\u0414\u043b\u044f \u0437\u0430\u043c\u043e\u0440\u043e\u0437\u043a\u0438 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0434\u043e\u043b\u0436\u043d\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f \u0443\u0441\u043b\u043e\u0432\u0438\u044f:<\/p>\n<ul>\n<li>\n<p>\u0432\u043a\u043b\u0430\u0434\u043a\u0430 \u0441\u043a\u0440\u044b\u0442\u0430 \u0438 \u043d\u0435 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442 \u0437\u0432\u0443\u043a \u0431\u043e\u043b\u0435\u0435 5 \u043c\u0438\u043d\u0443\u0442;<\/p>\n<\/li>\n<li>\n<p>\u0432\u043a\u043b\u0430\u0434\u043a\u0430 \u043f\u043e\u0442\u0440\u0435\u0431\u043b\u044f\u0435\u0442 \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b CPU.<\/p>\n<\/li>\n<\/ul>\n<p>\u0412\u043a\u043b\u0430\u0434\u043a\u0430 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043c\u043e\u0440\u043e\u0436\u0435\u043d\u0430, \u0435\u0441\u043b\u0438:<\/p>\n<ul>\n<li>\n<p>\u0430\u043a\u0442\u0438\u0432\u043d\u043e \u0430\u0443\u0434\u0438\u043e- \u0438\u043b\u0438 \u0432\u0438\u0434\u0435\u043e\u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435 \u0447\u0435\u0440\u0435\u0437 WebRTC;<\/p>\n<\/li>\n<li>\n<p>\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f <code>Web Lock<\/code> (<code>navigator.locks.request<\/code>);<\/p>\n<\/li>\n<li>\n<p>\u043e\u0442\u043a\u0440\u044b\u0442\u043e <code>IndexedDB<\/code>-\u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435, \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u044e\u0449\u0435\u0435 \u0442\u0440\u0430\u043d\u0437\u0430\u043a\u0446\u0438\u044e \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 \u0433\u0440\u0443\u043f\u043f\u044b \u0432\u043a\u043b\u0430\u0434\u043e\u043a.<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u0421\u0446\u0435\u043d\u0430\u0440\u0438\u0439 3: \u0432\u044b\u0433\u0440\u0443\u0437\u043a\u0430 \u043f\u0440\u0438 \u043d\u0435\u0445\u0432\u0430\u0442\u043a\u0435 \u043f\u0430\u043c\u044f\u0442\u0438 (<\/strong><code><strong>Discarded<\/strong><\/code><strong>)<\/strong><\/p>\n<p>\u041f\u0440\u0438 \u043d\u0435\u0445\u0432\u0430\u0442\u043a\u0435 RAM \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0432\u044b\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u0432\u043a\u043b\u0430\u0434\u043a\u0443 \u0431\u0435\u0437 \u0441\u043e\u0431\u044b\u0442\u0438\u0439. \u0424\u0430\u043a\u0442 \u0432\u044b\u0433\u0440\u0443\u0437\u043a\u0438 \u0432 Chrome \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 document.wasDiscarded \u043f\u043e\u0441\u043b\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438.<\/p>\n<pre><code>\/\/ \u041f\u0440\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044bif (document.wasDiscarded) {  console.warn('\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0431\u044b\u043b\u0430 \u0432\u044b\u0433\u0440\u0443\u0436\u0435\u043d\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u043c');  const saved = sessionStorage.getItem('appState');  if (saved) {    restoreState(JSON.parse(saved));  } else {    initializeFromServer();  }}<\/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>\u0427\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u0440\u0438 \u0437\u0430\u043c\u043e\u0440\u043e\u0437\u043a\u0435<\/strong><\/p>\n<p>\u041f\u0440\u0438 \u043d\u0430\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u0438 \u0437\u0430\u043c\u043e\u0440\u043e\u0437\u043a\u0438:<br \/> \u00a0 \u2717 JS-\u043a\u043e\u0434 \u043f\u0440\u0435\u043a\u0440\u0430\u0449\u0430\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435<br \/> \u00a0 \u2717 setTimeout \/ setInterval \u043d\u0435 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442<br \/> \u00a0 \u2717 \u041a\u043e\u043b\u0431\u044d\u043a\u0438 Promise \u043d\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f<br \/> \u00a0 \u2713 WebSocket-\u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435 \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 TCP \u043c\u043e\u0436\u0435\u0442 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c\u0441\u044f<br \/> \u00a0 \u2717 \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 ws.onmessage \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u043d\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f<br \/> \u00a0 \u2713 \u0421\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u043d\u0430\u043a\u0430\u043f\u043b\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0432 \u0431\u0443\u0444\u0435\u0440\u0435<\/p>\n<p> \u041f\u0440\u0438 \u0440\u0430\u0437\u043c\u043e\u0440\u043e\u0437\u043a\u0435:<br \/> \u00a0 \u2713 JS \u0432\u043e\u0437\u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441 \u0442\u043e\u0433\u043e \u043c\u0435\u0441\u0442\u0430, \u0433\u0434\u0435 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0441\u044f<br \/> \u00a0 \u2713 \u041d\u0430\u043a\u043e\u043f\u043b\u0435\u043d\u043d\u044b\u0435 WebSocket-\u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0440\u0430\u0437\u043e\u043c<br \/> \u00a0 \u2190 \u0418\u043c\u0435\u043d\u043d\u043e \u0437\u0434\u0435\u0441\u044c \u0447\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u0438 \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0442\u043e\u0440\u043c\u043e\u0437\u0430 UI \u0438 \u0433\u043e\u043d\u043a\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439: \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442 \u0431\u044b\u0441\u0442\u0440\u043e \u043f\u0440\u043e\u0438\u0433\u0440\u044b\u0432\u0430\u0442\u044c \u043d\u0430\u043a\u043e\u043f\u043b\u0435\u043d\u043d\u044b\u0435 \u00ab\u0438\u0441\u0442\u043e\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0435\u00bb \u0441\u043e\u0431\u044b\u0442\u0438\u044f, \u043f\u043e\u043a\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0443\u0436\u0435 \u0441\u043e\u0432\u0435\u0440\u0448\u0430\u0435\u0442 \u043d\u043e\u0432\u044b\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u2014 \u043a\u043b\u0438\u043a\u0430\u0435\u0442 \u043f\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0443, \u043c\u0435\u043d\u044f\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u043b\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u043d\u043e\u0432\u044b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b.<\/p>\n<p><strong>\u0420\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043d\u0430 \u0437\u0430\u043c\u043e\u0440\u043e\u0437\u043a\u0443 (Chromium)<\/strong><\/p>\n<pre><code>document.addEventListener('freeze', () =&gt; {  \/\/ \u0412\u043d\u0443\u0442\u0440\u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 freeze \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0439 \u043a\u043e\u0434  sessionStorage.setItem('appState', JSON.stringify(getAppState()));  sessionStorage.setItem('frozenAt', String(Date.now()));  \/\/ \u0421\u0435\u0442\u0435\u0432\u044b\u0435 \u043b\u043e\u0433\u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u0447\u0435\u0440\u0435\u0437 beacon  navigator.sendBeacon('\/freeze-log', JSON.stringify({ at: Date.now() }));});document.addEventListener('resume', () =&gt; {  const frozenAt = Number(sessionStorage.getItem('frozenAt'));  const frozenFor = Date.now() - frozenAt;  console.log(`\u0412\u043a\u043b\u0430\u0434\u043a\u0430 \u0431\u044b\u043b\u0430 \u0437\u0430\u043c\u043e\u0440\u043e\u0436\u0435\u043d\u0430 ${frozenFor} \u043c\u0441`);  reconnectWebSocket();  if (frozenFor &gt; 5_000) fetchMissedEvents(frozenAt);  sendResumeLog();});<\/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>\u0421\u0438\u0441\u0442\u0435\u043c\u043d\u044b\u0439 \u0441\u043e\u043d<\/strong><\/p>\n<p>\u0421\u043e\u043d \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430 \u2014 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0439: \u041e\u0421 \u043f\u0440\u0438\u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u0432\u0435\u0441\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430. \u041f\u043e\u0441\u043b\u0435 \u043f\u0440\u043e\u0431\u0443\u0436\u0434\u0435\u043d\u0438\u044f \u043d\u0430\u0434\u0451\u0436\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u043e\u0439 \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f visibilitychange (hidden \u2192 visible). \u0412 \u044d\u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442 \u043f\u043e\u043b\u0435\u0437\u043d\u043e:<\/p>\n<ul>\n<li>\n<p>\u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 WebSocket-\u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0439;<\/p>\n<\/li>\n<li>\n<p>\u0437\u0430\u043f\u0440\u043e\u0441\u0438\u0442\u044c \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430;<\/p>\n<\/li>\n<li>\n<p>\u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u043c\u0435\u0442\u043a\u0438 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0441\u043d\u0430.<\/p>\n<\/li>\n<\/ul>\n<pre><code>let hiddenAt = null;document.addEventListener('visibilitychange', () =&gt; {  if (document.visibilityState === 'hidden') {    hiddenAt = Date.now();    return;  }  if (hiddenAt === null) return;  const timeAwayMs = Date.now() - hiddenAt;  hiddenAt = null;  console.log(`\u0412\u043a\u043b\u0430\u0434\u043a\u0430 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u043b\u0430 ${timeAwayMs} \u043c\u0441`);  if (timeAwayMs &gt; 30_000) {    verifyConnections();    refreshStaleData();  }  if (timeAwayMs &gt; 5 * 60_000) {    forceFullRefresh();  }});<\/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<h2>\u041a\u0430\u043a \u0432\u0435\u0434\u0443\u0442 \u0441\u0435\u0431\u044f \u0440\u0430\u0437\u043d\u044b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b<\/h2>\n<p>\u0411\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0441\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u043e\u0434\u043d\u043e\u043c: \u0444\u043e\u043d\u043e\u0432\u044b\u0435 \u0432\u043a\u043b\u0430\u0434\u043a\u0438 \u043d\u0443\u0436\u043d\u043e \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0442\u044c. \u0414\u0435\u0442\u0430\u043b\u0438 \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f.<\/p>\n<ul>\n<li>\n<p><strong>Chrome \/ Chromium<\/strong> \u2014 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0442 Page Lifecycle API (<code>freeze\/resume<\/code>), \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 <code>chrome:\/\/discards<\/code> \u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b DevTools \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 BFCache. \u0418\u043c\u0435\u043d\u043d\u043e Chromium-\u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0447\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u043a\u0430\u043a \u044d\u0442\u0430\u043b\u043e\u043d.<\/p>\n<\/li>\n<li>\n<p><strong>Firefox<\/strong> \u2014 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 Page Lifecycle API \u043a\u0430\u043a \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u0441\u043e\u0431\u044b\u0442\u0438\u0439, \u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043f\u043e\u0445\u043e\u0436\u0438\u0435 \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0438: \u0431\u044e\u0434\u0436\u0435\u0442\u043d\u0443\u044e \u043c\u043e\u0434\u0435\u043b\u044c \u0442\u0430\u0439\u043c\u0435\u0440\u043e\u0432, \u0442\u0440\u043e\u0442\u0442\u043b\u0438\u043d\u0433 \u0438 \u0432\u044b\u0433\u0440\u0443\u0437\u043a\u0443 \u0432\u043a\u043b\u0430\u0434\u043e\u043a (<code>about:unloads<\/code>). \u0412\u043c\u0435\u0441\u0442\u043e <code>freeze<\/code> \u0444\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f <code>discard<\/code>.<\/p>\n<\/li>\n<li>\n<p><strong>Safari (\u0432\u043a\u043b\u044e\u0447\u0430\u044f iOS)<\/strong> \u2014 \u043e\u0434\u043d\u0438\u043c \u0438\u0437 \u043f\u0435\u0440\u0432\u044b\u0445 \u0432\u043d\u0435\u0434\u0440\u0438\u043b BFCache \u0438 \u0430\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u0443\u044e \u0432\u044b\u0433\u0440\u0443\u0437\u043a\u0443 \u0432\u043a\u043b\u0430\u0434\u043e\u043a \u043f\u0440\u0438 \u043d\u0435\u0445\u0432\u0430\u0442\u043a\u0435 \u043f\u0430\u043c\u044f\u0442\u0438. Page Lifecycle API \u0438 <code>SharedWorker<\/code> \u043d\u0430 iOS \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f, \u043d\u043e \u0442\u0440\u043e\u0442\u0442\u043b\u0438\u043d\u0433 \u0438 \u0437\u0430\u043c\u043e\u0440\u043e\u0437\u043a\u0430 \u0444\u043e\u043d\u043e\u0432\u044b\u0445 \u0432\u043a\u043b\u0430\u0434\u043e\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u043e\u0447\u0435\u043d\u044c \u0430\u043a\u0442\u0438\u0432\u043d\u043e.<\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0432\u044b\u0432\u043e\u0434 \u043e\u0434\u0438\u043d: \u043d\u0435\u043b\u044c\u0437\u044f \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u043d\u0430 \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u044b\u0435 \u0442\u0430\u0439\u043c\u0435\u0440\u044b \u0438 \u043d\u0435\u043f\u0440\u0435\u0440\u044b\u0432\u043d\u044b\u0439 JavaScript \u0432 \u0444\u043e\u043d\u0435. \u0414\u043b\u044f \u043a\u0440\u043e\u0441\u0441-\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0439 \u043b\u043e\u0433\u0438\u043a\u0438 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043e\u043f\u0438\u0440\u0430\u0442\u044c\u0441\u044f \u043d\u0430 visibilitychange, pagehide\/pageshow \u0438 PageLifecycle.js.<\/p>\n<h2>BFCache \u2014 \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u0430\u044f \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f<\/h2>\n<p>BFCache (<code>Back-Forward Cache<\/code>) \u2014 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0442\u0430 \u00ab\u043d\u0430\u0437\u0430\u0434\/\u0432\u043f\u0435\u0440\u0451\u0434\u00bb \u0431\u0435\u0437 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438. \u0411\u0440\u0430\u0443\u0437\u0435\u0440 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 \u0441\u043d\u0438\u043c\u043e\u043a \u0432\u043a\u043b\u0430\u0434\u043a\u0438: DOM, JS heap, \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0444\u043e\u0440\u043c, \u043f\u043e\u0437\u0438\u0446\u0438\u044e \u0441\u043a\u0440\u043e\u043b\u043b\u0430.<\/p>\n<p><strong>\u0418\u0441\u0442\u043e\u0440\u0438\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438<\/strong><\/p>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td>\n<p align=\"left\"><strong>\u0411\u0440\u0430\u0443\u0437\u0435\u0440<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\"><strong>\u0412\u0435\u0440\u0441\u0438\u044f<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\"><strong>\u0413\u043e\u0434<\/strong><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\"><strong>Safari<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\">1.0<\/p>\n<\/td>\n<td>\n<p align=\"left\">2002<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\"><strong>Firefox<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\">1.5<\/p>\n<\/td>\n<td>\n<p align=\"left\">2005<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\"><strong>Chrome<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\">96<\/p>\n<\/td>\n<td>\n<p align=\"left\">2021<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>\u041f\u043e \u0434\u0430\u043d\u043d\u044b\u043c Chrome, \u043a\u0430\u0436\u0434\u0430\u044f 10-\u044f \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f \u043d\u0430 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0435 \u0438 \u043a\u0430\u0436\u0434\u0430\u044f 5-\u044f \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u2014 \u044d\u0442\u043e \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044b \u00ab\u043d\u0430\u0437\u0430\u0434\/\u0432\u043f\u0435\u0440\u0451\u0434\u00bb. BFCache \u0434\u0435\u043b\u0430\u0435\u0442 \u0438\u0445 \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u044b\u043c\u0438 \u0438 \u0443\u043b\u0443\u0447\u0448\u0430\u0435\u0442 LCP.<\/p>\n<figure class=\"full-width \"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a75\/8ac\/ee6\/a758acee6e0c8ff8aa06ad06530cdcaa.png\" alt=\"\u041a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 BFCache\" title=\"\u041a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 BFCache\" width=\"940\" height=\"525\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/a75\/8ac\/ee6\/a758acee6e0c8ff8aa06ad06530cdcaa.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a75\/8ac\/ee6\/a758acee6e0c8ff8aa06ad06530cdcaa.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u041a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 BFCache<\/figcaption><\/div>\n<\/figure>\n<p><strong>\u0422\u0430\u0439\u043c-\u0430\u0443\u0442 BFCache<\/strong><\/p>\n<p>\u041e\u0431\u044b\u0447\u043d\u044b\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0434\u043e ~10 \u043c\u0438\u043d\u0443\u0442, \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0441 <code>Cache-Control: no-store<\/code> \u2014 \u0434\u043e 3 \u043c\u0438\u043d\u0443\u0442.<\/p>\n<p><strong>BFCache \u0438 <\/strong><code><strong>Cache-Control: no-store<\/strong><\/code><\/p>\n<p>\u0418\u0441\u0442\u043e\u0440\u0438\u0447\u0435\u0441\u043a\u0438 Cache-Control: no-store \u043e\u0442\u043a\u043b\u044e\u0447\u0430\u043b BFCache. \u0421 \u0432\u0435\u0441\u043d\u044b 2025 Chrome \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 BFCache \u0434\u0430\u0436\u0435 \u0434\u043b\u044f no-store, \u043d\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u043d\u0435 \u043f\u043e\u043f\u0430\u0434\u0451\u0442 \u0432 \u043a\u0435\u0448 \u043f\u0440\u0438 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u0445 WebSocket, WebTransport \u0438\u043b\u0438 WebRTC.<\/p>\n<p>Chrome \u0443\u0434\u0430\u043b\u0438\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0438\u0437 BFCache, \u0435\u0441\u043b\u0438 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f:<\/p>\n<ul>\n<li>\n<p>\u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0438\u0441\u044c cookies \u0438\u043b\u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438;<\/p>\n<\/li>\n<li>\n<p><code>fetch<\/code> \u0438\u043b\u0438 <code>XHR<\/code> \u0432\u0435\u0440\u043d\u0443\u043b\u0438 \u043e\u0442\u0432\u0435\u0442 \u0441 <code>Cache-Control: no-store<\/code>.<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u041f\u043e\u0434\u0432\u043e\u0434\u043d\u044b\u0435 \u043a\u0430\u043c\u043d\u0438 BFCache<\/strong><\/p>\n<p><strong>1. <\/strong><code><strong>useEffect<\/strong><\/code><strong>\u043d\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e<\/strong><\/p>\n<p>React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043d\u0435 \u043c\u043e\u043d\u0442\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0437\u0430\u043d\u043e\u0432\u043e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 <code>useEffect(fn, [])<\/code> \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u043d\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0441\u044f.<\/p>\n<pre><code>\/\/ \u274c \u041d\u0435 \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043f\u0440\u0438 \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0438 \u0438\u0437 BFCacheuseEffect(() =&gt; {  fetchData();}, []);\/\/ \u2705 \u041e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c BFCache \u044f\u0432\u043d\u043euseEffect(() =&gt; {  const onPageShow = (event) =&gt; {    if (event.persisted) fetchData();  };  window.addEventListener('pageshow', onPageShow);  return () =&gt; window.removeEventListener('pageshow', onPageShow);}, []);<\/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>2. \u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u043c<\/strong><\/p>\n<p>BFCache \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0432 \u0442\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0435\u0451 \u043f\u043e\u043a\u0438\u043d\u0443\u043b. \u0415\u0441\u043b\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0438\u0441\u044c \u2014 UI \u043f\u043e\u043a\u0430\u0436\u0435\u0442 \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0443\u044e \u043a\u0430\u0440\u0442\u0438\u043d\u0443. \u041e\u0441\u043e\u0431\u044b\u0439 \u043a\u0435\u0439\u0441: \u0435\u0441\u043b\u0438 \u043f\u0435\u0440\u0435\u0434 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u043e\u043c \u043d\u0430 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 URL \u043f\u043e\u043a\u0430\u0437\u0430\u043d \u043f\u043e\u043b\u043d\u043e\u044d\u043a\u0440\u0430\u043d\u043d\u044b\u0439 \u043f\u0440\u0435\u043b\u043e\u0430\u0434\u0435\u0440, \u043f\u0440\u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0442\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u043e\u043b\u0443\u0447\u0438\u0442 \u00ab\u043c\u0451\u0440\u0442\u0432\u044b\u0439\u00bb \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441.<\/p>\n<p><strong>3. \u041e\u0442\u043a\u0440\u044b\u0442\u044b\u0439 WebSocket \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0438\u0437 BFCache<\/strong><\/p>\n<p>\u041f\u043e \u0434\u0430\u043d\u043d\u044b\u043c HTTP Archive, ~71% \u0441\u0430\u0439\u0442\u043e\u0432 \u0441 WebSocket \u0442\u0435\u0440\u044f\u044e\u0442 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u044c \u0441 BFCache \u0438\u0437-\u0437\u0430 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u0445 \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0439.<\/p>\n<pre><code>\/\/ \u041f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0448\u0430\u0431\u043b\u043e\u043d, \u0435\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0434\u0440\u0443\u0436\u0438\u0442\u044c \u0441 BFCachewindow.addEventListener('pagehide', () =&gt; {  if (ws) {    ws.close(1000, 'pagehide');    ws = null;  }});\/\/ \u041f\u0435\u0440\u0435\u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0442\u0435 \u0438\u0437 BFCachewindow.addEventListener('pageshow', (event) =&gt; {  if (!event.persisted) return;  ws = new WebSocket(WS_URL);  setupWebSocketHandlers(ws);  fetchMissedEvents();});<\/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>\u041f\u0430\u0442\u0442\u0435\u0440\u043d \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442, \u043a\u043e\u0433\u0434\u0430 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u044c \u0441 BFCache \u0432\u0430\u0436\u043d\u0435\u0435 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0447\u0438\u0441\u043b\u0430 WebSocket reconnect\u2019\u043e\u0432.<\/p>\n<h4>\u041a\u0440\u0430\u0442\u043a\u0430\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u043f\u0440\u0438\u0447\u0438\u043d BFCache-\u043d\u0435\u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u0438<\/h4>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td>\n<p align=\"left\"><strong>\u041f\u0440\u0438\u0447\u0438\u043d\u0430<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\"><strong>\u0420\u0435\u0448\u0435\u043d\u0438\u0435<\/strong><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\"><strong>unload-\u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\">\u0423\u0434\u0430\u043b\u0438\u0442\u044c, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c pagehide.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\"><strong>\u041e\u0442\u043a\u0440\u044b\u0442\u044b\u0439 WebSocket<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\">\u0417\u0430\u043a\u0440\u044b\u0442\u044c \u0432 pagehide, \u043f\u0435\u0440\u0435\u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0432   pageshow.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\"><strong>\u041e\u0442\u043a\u0440\u044b\u0442\u043e\u0435 IndexedDB-\u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\">\u0417\u0430\u043a\u0440\u044b\u0442\u044c \u0432 pagehide.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\"><strong>\u0410\u043a\u0442\u0438\u0432\u043d\u044b\u0439 Web Lock<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\">\u041e\u0441\u0432\u043e\u0431\u043e\u0434\u0438\u0442\u044c \u0432 pagehide.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\"><strong>\u041e\u0442\u043a\u0440\u044b\u0442\u044b\u0439 BroadcastChannel<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\">\u0417\u0430\u043a\u0440\u044b\u0442\u044c \u0432 pagehide.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\"><strong>Cache-Control: no-store<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\">\u0427\u0430\u0441\u0442\u0438\u0447\u043d\u043e: Chrome \u0440\u0430\u0437\u0440\u0435\u0448\u0438\u043b \u0434\u043b\u044f   \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0430 \u0441\u043b\u0443\u0447\u0430\u0435\u0432.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\"><strong>\u041d\u0435\u0437\u0430\u0432\u0435\u0440\u0448\u0451\u043d\u043d\u044b\u0435 fetch \u0441 \u0442\u0435\u043b\u043e\u043c<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\">\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c   AbortController \u0432 pagehide.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\"><strong>beforeunload-\u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\">\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u0440\u0435\u0430\u043b\u044c\u043d\u043e   \u043d\u0435\u0441\u043e\u0445\u0440\u0430\u043d\u0451\u043d\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445, \u0441\u0440\u0430\u0437\u0443 \u0443\u0434\u0430\u043b\u044f\u0442\u044c.<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<h2>\u0423\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u0435 API: \u0447\u0435\u0433\u043e \u0438\u0437\u0431\u0435\u0433\u0430\u0442\u044c<\/h2>\n<h4>unload \u2014 \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u043d\u0430\u0432\u0441\u0435\u0433\u0434\u0430<\/h4>\n<p><code>\/\/ \u274c \u0422\u0430\u043a \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435\u043b\u044c\u0437\u044f<br \/> window.addEventListener('unload', saveData);<\/code><\/p>\n<p><strong>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u044f\u00a0<\/strong><code>unload<\/code><\/p>\n<ul>\n<li>\n<p><strong>\u041d\u0435\u043d\u0430\u0434\u0451\u0436\u043d\u043e\u0441\u0442\u044c:<\/strong>\u00a0\u043d\u0435 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u043f\u0440\u0438 \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u0438 \u0432\u043a\u043b\u0430\u0434\u043a\u0438 \u0436\u0435\u0441\u0442\u043e\u043c \u00ab\u0441\u0432\u0430\u0439\u043f\u00bb \u043d\u0430 iOS.<\/p>\n<\/li>\n<li>\n<p><strong>\u0411\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u043a\u0430 BFCache:<\/strong>\u00a0\u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u00a0<code>unload<\/code>\u00a0\u0434\u0435\u043b\u0430\u0435\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043d\u0435\u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0439 \u0441 \u043a\u044d\u0448\u0435\u043c \u043d\u0430\u0437\u0430\u0434\/\u0432\u043f\u0435\u0440\u0451\u0434 (BFCache) \u0432 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u043d\u044b\u0445 \u0432\u0435\u0440\u0441\u0438\u044f\u0445 Chrome \u0438 Firefox.<\/p>\n<\/li>\n<li>\n<p><strong>\u0423\u0441\u0442\u0430\u0440\u0435\u0432\u0430\u043d\u0438\u0435:<\/strong>\u00a0Google \u043f\u043b\u0430\u043d\u0438\u0440\u0443\u0435\u0442 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043e\u0442\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u043e\u0442 \u044d\u0442\u043e\u0433\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u044f (deprecation).<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u043c\u0430\u044f \u0437\u0430\u043c\u0435\u043d\u0430:<\/strong><br \/>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0446\u0438\u044e \u0441\u043e\u0431\u044b\u0442\u0438\u0439\u00a0<code>pagehide<\/code>\u00a0\u0438\u00a0<code>visibilitychange<\/code>.<\/p>\n<p><strong>beforeunload \u2014 \u0442\u043e\u043b\u044c\u043a\u043e \u0443\u0441\u043b\u043e\u0432\u043d\u043e<\/strong><\/p>\n<pre><code>\/\/ \u274c \u041d\u0435\u043b\u044c\u0437\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0431\u0435\u0437\u0443\u0441\u043b\u043e\u0432\u043d\u043e \u2014 \u044d\u0442\u043e \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u0435\u0442 BFCache window.addEventListener('beforeunload', handler); \/\/ \u2705 \u0422\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u043a\u0430 \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043e\u0445\u0440\u0430\u043d\u0451\u043d\u043d\u044b\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f, \u0438 \u0441\u0440\u0430\u0437\u0443 \u0441\u043d\u0438\u043c\u0430\u0442\u044c onUserStartsEditing(() =&gt; { \u00a0 window.addEventListener('beforeunload', warnAboutUnsavedChanges); }); onUserSavesChanges(() =&gt; { \u00a0 window.removeEventListener('beforeunload', warnAboutUnsavedChanges); });<\/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<h4>\u041d\u0430\u0434\u0451\u0436\u043d\u0430\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u0440\u0438 \u0443\u0445\u043e\u0434\u0435<\/h4>\n<pre><code>window.addEventListener('pagehide', () =&gt; {  \/\/ \u0412\u0430\u0440\u0438\u0430\u043d\u0442 1: sendBeacon \u2014 \u043f\u0440\u043e\u0441\u0442\u043e\u0439, \u0442\u043e\u043b\u044c\u043a\u043e POST, \u0431\u0435\u0437 \u0441\u0432\u043e\u0438\u0445 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u0432  navigator.sendBeacon('\/analytics', JSON.stringify(analyticsData));  \/\/ \u0412\u0430\u0440\u0438\u0430\u043d\u0442 2: fetch \u0441 keepalive \u2014 \u0431\u043e\u043b\u044c\u0448\u0435 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f  fetch('\/save-state', {    method: 'POST',    headers: { 'Content-Type': 'application\/json' },    body: JSON.stringify(appState),    keepalive: true, \/\/ \u0437\u0430\u043f\u0440\u043e\u0441 \u0437\u0430\u0432\u0435\u0440\u0448\u0438\u0442\u0441\u044f \u0434\u0430\u0436\u0435 \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u044f \u0432\u043a\u043b\u0430\u0434\u043a\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>\u041b\u0438\u043c\u0438\u0442 \u0443 \u043e\u0431\u043e\u0438\u0445 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u2014 64 \u041a\u0411. \u0411\u043e\u043b\u044c\u0448\u0438\u0435 payload \u0441\u0442\u043e\u0438\u0442 \u0441\u0436\u0438\u043c\u0430\u0442\u044c \u0437\u0430\u0440\u0430\u043d\u0435\u0435.<\/p>\n<h2>\u041f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044b\u0435 \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u044b<\/h2>\n<p><strong>\u0411\u0430\u0442\u0447\u0438\u043d\u0433 WebSocket-\u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439<\/strong><\/p>\n<p>\u0418\u0434\u0435\u044f \u2014 \u043a\u043e\u043f\u0438\u0442\u044c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0432 Map \u043f\u043e \u043a\u043b\u044e\u0447\u0443 \u0438 \u043a\u0430\u0436\u0434\u044b\u0435 50 \u043c\u0441 \u043e\u0442\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u0430\u0440\u0443\u0436\u0443 \u043e\u0434\u043d\u043e \u2014 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u043f\u043e \u043a\u043b\u044e\u0447\u0443:<\/p>\n<pre><code>const BATCH_DELAY_MS = 50;const pending = new Map();let timerId = null;function batch(message, onFlush) {  pending.set(message.type, message); \/\/ \u0434\u0435\u0434\u0443\u043f \u043f\u043e \u043a\u043b\u044e\u0447\u0443  if (timerId !== null) return;  timerId = setTimeout(() =&gt; {    timerId = null;    pending.forEach(onFlush);    pending.clear();  }, BATCH_DELAY_MS);}<\/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>\u0411\u0430\u0442\u0447\u0438\u043d\u0433 \u043d\u0435 \u0440\u0435\u0448\u0430\u0435\u0442 \u0432\u0441\u0451: \u0435\u0441\u043b\u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442 payload \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u043a \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044e, \u00ab\u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u043f\u043e \u043a\u043b\u044e\u0447\u0443\u00bb \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043c\u043e\u0436\u0435\u0442 \u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u0441\u0442\u0430\u0440\u0448\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u2014 UI \u043e\u0442\u043a\u0430\u0442\u0438\u0442\u0441\u044f \u043a \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u043c \u0434\u0430\u043d\u043d\u044b\u043c. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0431\u0430\u0442\u0447\u0438\u043d\u0433 \u043b\u0443\u0447\u0448\u0435 \u0441\u043e\u0447\u0435\u0442\u0430\u0442\u044c \u0441 \u0432\u0435\u0440\u0441\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0438\u043b\u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0439 \u0441\u0432\u0435\u0440\u043a\u043e\u0439 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c \u043f\u043e\u0441\u043b\u0435 resume \u0438 visibilitychange.<\/p>\n<p><strong>Lifecycle-\u043e\u0431\u0451\u0440\u0442\u043a\u0430 \u0434\u043b\u044f WebSocket<\/strong><\/p>\n<p>\u0423\u0434\u043e\u0431\u043d\u043e \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c WebSocket \u0432 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043a\u043b\u0430\u0441\u0441, \u0446\u0435\u043d\u0442\u0440\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u043e \u0440\u0435\u0430\u0433\u0438\u0440\u0443\u044e\u0449\u0438\u0439 \u043d\u0430 visibilitychange, freeze \u0438 BFCache:<\/p>\n<pre><code>class LifecycleAwareWebSocket {  #url;  #ws = null;  #hiddenAt = null;  #onMessage;  constructor(url, onMessage) {    this.#url = url;    this.#onMessage = onMessage;    this.#setupLifecycle();    this.#connect();  }  #connect() {    if (this.#ws?.readyState === WebSocket.OPEN) return;    this.#ws = new WebSocket(this.#url);    this.#ws.onmessage = ({ data }) =&gt; this.#onMessage(JSON.parse(data));  }  #setupLifecycle() {    document.addEventListener('visibilitychange', () =&gt; {      if (document.visibilityState === 'hidden') {        this.#hiddenAt = Date.now();      } else {        this.#onBecomeVisible();      }    });    \/\/ BFCache    window.addEventListener('pagehide', () =&gt; this.#ws?.close());    window.addEventListener('pageshow', (e) =&gt; {      if (e.persisted) this.#connect();    });    \/\/ \u0417\u0430\u043c\u043e\u0440\u043e\u0437\u043a\u0430 (Chromium)    document.addEventListener('resume', () =&gt; {      if (this.#ws?.readyState !== WebSocket.OPEN) this.#connect();    });  }  #onBecomeVisible() {    const timeAway = this.#hiddenAt ? Date.now() - this.#hiddenAt : 0;    this.#hiddenAt = null;    if (this.#ws?.readyState !== WebSocket.OPEN) this.#connect();    if (timeAway &gt; 30_000) fetchDelta(Date.now() - timeAway, this.#onMessage);  }}<\/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>SharedWorker: \u043e\u0434\u043d\u043e \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435 \u043d\u0430 \u0432\u0441\u0435 \u0432\u043a\u043b\u0430\u0434\u043a\u0438<\/strong><\/p>\n<p>\u041c\u043e\u0436\u043d\u043e \u0432\u044b\u043d\u0435\u0441\u0442\u0438 \u043e\u0434\u043d\u043e WebSocket-\u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435 \u0432 SharedWorker \u0438 \u0440\u0430\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0432\u0441\u0435\u043c \u0432\u043a\u043b\u0430\u0434\u043a\u0430\u043c:<\/p>\n<pre><code>\/\/ shared-ws-worker.jslet socket = null;const ports = new Set();self.addEventListener('connect', (event) =&gt; {  const [port] = event.ports;  ports.add(port);  port.start();  port.onmessage = ({ data }) =&gt; {    if (data.type === 'CONNECT' &amp;&amp; !socket) {      socket = new WebSocket(data.url);      socket.onmessage = ({ data: payload }) =&gt;        ports.forEach((p) =&gt; p.postMessage({ type: 'WS_MESSAGE', payload }));    }    if (data.type === 'SEND' &amp;&amp; socket?.readyState === WebSocket.OPEN) {      socket.send(data.payload);    }  };});\/\/ \u0412 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u0441\u043a\u0440\u0438\u043f\u0442\u0435 \u043a\u0430\u0436\u0434\u043e\u0439 \u0432\u043a\u043b\u0430\u0434\u043a\u0438const worker = new SharedWorker('\/shared-ws-worker.js');worker.port.start();worker.port.postMessage({ type: 'CONNECT', url: 'wss:\/\/api.example.com\/events' });worker.port.onmessage = ({ data }) =&gt; {  if (data.type === 'WS_MESSAGE') handleServerEvent(JSON.parse(data.payload));};<\/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>\u26a0\ufe0f SharedWorker \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 Safari \u043d\u0430 iOS. \u0410\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u0430 \u2014 Service Worker \u0438\u043b\u0438 BroadcastChannel + Web Locks.<\/p>\n<p><strong>Service Worker \u043a\u0430\u043a \u0437\u0430\u043c\u0435\u043d\u0430 \u0444\u043e\u043d\u043e\u0432\u043e\u0439 \u043b\u043e\u0433\u0438\u043a\u0438<\/strong><\/p>\n<p>\u0415\u0441\u043b\u0438 \u0444\u043e\u043d\u043e\u0432\u0430\u044f \u043b\u043e\u0433\u0438\u043a\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u043f\u0435\u0440\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u0437\u0430\u043c\u043e\u0440\u043e\u0437\u043a\u0443 \u2014 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u0442\u0435 \u0435\u0451 \u0432 Service Worker. \u041e\u043d \u043d\u0435 \u0437\u0430\u043c\u043e\u0440\u0430\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0438 \u043c\u043e\u0436\u0435\u0442 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c push-\u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f \u0438 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435.<\/p>\n<pre><code>\/\/ \u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u044f\u0435\u0442 Service Worker \u043e \u0441\u0432\u043e\u0451\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438document.addEventListener('freeze', () =&gt; {  navigator.serviceWorker.controller?.postMessage({    type: 'PAGE_FROZEN',    timestamp: Date.now(),  });});\/\/ \u0412\u043d\u0443\u0442\u0440\u0438 Service Worker \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430:\/\/ self.clients.matchAll() \u2192 client.lifecycleState === 'frozen' | 'active'<\/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>PageLifecycle.js: \u043a\u0440\u043e\u0441\u0441-\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u0430\u044f \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0446\u0438\u044f<\/strong><\/p>\n<p>\u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 Google \u0434\u043b\u044f \u0441\u0433\u043b\u0430\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u0440\u0430\u0437\u043b\u0438\u0447\u0438\u0439 \u043c\u0435\u0436\u0434\u0443 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438. \u041c\u0435\u043d\u0435\u0435 1 \u041a\u0411 \u0432 gzip.<\/p>\n<pre><code>import lifecycle from 'page-lifecycle';lifecycle.addEventListener('statechange', ({ oldState, newState }) =&gt; {  console.log(`Lifecycle: ${oldState} \u2192 ${newState}`);  const handlers = {    hidden: () =&gt; saveState(),    frozen: () =&gt; { closeConnections(); saveStateSynchronously(); },    terminated: () =&gt; sendFinalAnalytics(),    active: () =&gt; {      if (oldState === 'frozen' || oldState === 'hidden') refreshData();    },  };  handlers[newState]?.();});console.log(lifecycle.state); \/\/ \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435<\/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<h2>\u041e\u0442\u043b\u0430\u0434\u043a\u0430<\/h2>\n<p><strong>chrome:\/\/discards<\/strong><\/p>\n<figure class=\"full-width \"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/939\/c06\/b08\/939c06b08ad7b688df981c6ba09b7298.png\" width=\"940\" height=\"358\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/939\/c06\/b08\/939c06b08ad7b688df981c6ba09b7298.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/939\/c06\/b08\/939c06b08ad7b688df981c6ba09b7298.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u0412\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 Chrome \u2014 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432\u043a\u043b\u0430\u0434\u043e\u043a \u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u0432\u044b\u0437\u0432\u0430\u0442\u044c Freeze \u0438\u043b\u0438 Discard. \u041a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u043a\u043e\u043b\u043e\u043d\u043a\u0438:<\/p>\n<ul>\n<li>\n<p>Utility Rank \u2014 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442 \u0432\u043a\u043b\u0430\u0434\u043a\u0438. \u041f\u0435\u0440\u0432\u043e\u0439 \u0432\u044b\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u0442\u0430, \u0447\u0442\u043e \u0432 \u0441\u0430\u043c\u043e\u043c \u043d\u0438\u0437\u0443.<\/p>\n<\/li>\n<li>\n<p>Reactivation Score \u2014 \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e\u0441\u0442\u044c \u0432\u043e\u0437\u0432\u0440\u0430\u0442\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f (0\u20131). \u0427\u0435\u043c \u043d\u0438\u0436\u0435, \u0442\u0435\u043c \u0432\u044b\u0448\u0435 \u0448\u0430\u043d\u0441 \u0431\u044b\u0442\u044c \u0432\u044b\u0433\u0440\u0443\u0436\u0435\u043d\u043d\u043e\u0439.<\/p>\n<\/li>\n<\/ul>\n<p>\u0422\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u043d\u044f\u0442\u044c \u0444\u043b\u0430\u0433 Auto Discardable, \u0447\u0442\u043e\u0431\u044b Chrome \u043d\u0435 \u0442\u0440\u043e\u0433\u0430\u043b \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u0443\u044e \u0432\u043a\u043b\u0430\u0434\u043a\u0443.<\/p>\n<p><strong>\u0412\u0430\u0436\u043d\u043e: <\/strong>\u0437\u0430\u043a\u0440\u0435\u043f\u043b\u0451\u043d\u043d\u0430\u044f (pinned) \u0432\u043a\u043b\u0430\u0434\u043a\u0430 \u043e\u0442 \u0437\u0430\u043c\u043e\u0440\u043e\u0437\u043a\u0438 \u043d\u0435 \u0437\u0430\u0449\u0438\u0449\u0435\u043d\u0430. \u0417\u0430\u0449\u0438\u0449\u0435\u043d\u044b \u0432\u043a\u043b\u0430\u0434\u043a\u0438 \u0441 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0432\u0438\u0434\u0435\u043e\u043a\u043e\u043d\u0444\u0435\u0440\u0435\u043d\u0446\u0438\u0435\u0439, WebRTC, Web USB\/Bluetooth\/HID\/Serial, Web Lock \u0438\u043b\u0438 \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u044e\u0449\u0435\u0439 IndexedDB-\u0442\u0440\u0430\u043d\u0437\u0430\u043a\u0446\u0438\u0435\u0439.<\/p>\n<p><strong>DevTools \u2192 Application \u2192 Back\/forward cache<\/strong><\/p>\n<figure class=\"full-width \"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/4a4\/0bf\/369\/4a40bf369baa060fa05566ecae7f104f.png\" width=\"940\" height=\"322\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/4a4\/0bf\/369\/4a40bf369baa060fa05566ecae7f104f.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/4a4\/0bf\/369\/4a40bf369baa060fa05566ecae7f104f.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u041f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0441 BFCache \u0438 \u0441\u043f\u0438\u0441\u043e\u043a \u043f\u0440\u0438\u0447\u0438\u043d \u043d\u0435\u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u0438 \u0441 \u043a\u043b\u0430\u0441\u0441\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0435\u0439: Actionable \/ Pending Support \/ Not Actionable. \u041d\u0430\u0436\u043c\u0438\u0442\u0435 Run Test \u2014 DevTools \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0440\u043e\u0432\u0435\u0434\u0451\u0442 \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u0432\u043f\u0435\u0440\u0451\u0434 \u0438 \u043d\u0430\u0437\u0430\u0434.<\/p>\n<p><strong>\u041b\u043e\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0441 \u043e\u0442\u043c\u0435\u0442\u043a\u0430\u043c\u0438 \u0432\u0440\u0435\u043c\u0435\u043d\u0438<\/strong><\/p>\n<p>const log = (msg) =&gt; console.log(<code>[${new Date().toISOString()}] ${msg}<\/code>);<\/p>\n<p>\u0412\u043a\u043b\u044e\u0447\u0438\u0442\u0435 Preserve log \u2014 \u0438\u043d\u0430\u0447\u0435 \u0436\u0443\u0440\u043d\u0430\u043b \u043e\u0447\u0438\u0449\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u0438 \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0438 \u0438\u0437 BFCache. \u0414\u043b\u044f \u043d\u0430\u0434\u0451\u0436\u043d\u043e\u0439 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 navigator.sendBeacon \u0438\u043b\u0438 fetch \u0441 keepalive: true.<\/p>\n<p><strong>\u041f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0438 \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f<\/strong><\/p>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td>\n<p align=\"left\"><strong>\u0421\u0446\u0435\u043d\u0430\u0440\u0438\u0439<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\"><strong>\u041a\u0430\u043a \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0441\u0442\u0438<\/strong><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\"><strong>\u0411\u0430\u0437\u043e\u0432\u044b\u0439 \u0444\u043e\u043d<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\">\u041f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0438\u0442\u044c\u0441\u044f \u043d\u0430   \u0434\u0440\u0443\u0433\u0443\u044e \u0432\u043a\u043b\u0430\u0434\u043a\u0443 \u043d\u0430 15 \u0441\u0435\u043a\u0443\u043d\u0434.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\"><strong>\u0418\u043d\u0442\u0435\u043d\u0441\u0438\u0432\u043d\u044b\u0439   \u0442\u0440\u043e\u0442\u0442\u043b\u0438\u043d\u0433<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\">\u041e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0432\u043a\u043b\u0430\u0434\u043a\u0443 \u0432 \u0444\u043e\u043d\u0435 \u043d\u0430 5+ \u043c\u0438\u043d\u0443\u0442 \u0441 \u0446\u0435\u043f\u043e\u0447\u043a\u043e\u0439 \u0442\u0430\u0439\u043c\u0435\u0440\u043e\u0432.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\"><strong>\u0417\u0430\u043c\u043e\u0440\u043e\u0437\u043a\u0430<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\">chrome:\/\/discards \u2192  \u00abFreeze\u00bb.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\"><strong>\u0412\u044b\u0433\u0440\u0443\u0437\u043a\u0430<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\">chrome:\/\/discards \u2192 \u00abDiscard\u00bb.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\"><strong>BFCache<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\">\u041f\u0435\u0440\u0435\u0439\u0442\u0438 \u043d\u0430 \u0434\u0440\u0443\u0433\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u2192 \u043a\u043d\u043e\u043f\u043a\u0430 \u00ab\u041d\u0430\u0437\u0430\u0434\u00bb.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\"><strong>\u0421\u0438\u0441\u0442\u0435\u043c\u043d\u044b\u0439 \u0441\u043e\u043d<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\">\u0417\u0430\u043a\u0440\u044b\u0442\u044c \u043a\u0440\u044b\u0448\u043a\u0443 \u043d\u043e\u0443\u0442\u0431\u0443\u043a\u0430 \u043d\u0430 5\u201310 \u043c\u0438\u043d\u0443\u0442.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\"><strong>Energy Saver freeze<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\">\u0412\u043a\u043b\u044e\u0447\u0438\u0442\u044c Energy   Saver \u2192 \u0442\u044f\u0436\u0451\u043b\u044b\u0439 \u0444\u043e\u043d\u043e\u0432\u044b\u0439 \u0442\u0430\u0431 \u2192 5+ \u043c\u0438\u043d\u0443\u0442.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\"><strong>\u0410\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u0430\u044f \u0432\u044b\u0433\u0440\u0443\u0437\u043a\u0430 \u043d\u0430 iOS<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\">\u041e\u0442\u043a\u0440\u044b\u0442\u044c 10+ \u0432\u043a\u043b\u0430\u0434\u043e\u043a \u043d\u0430 iPhone \u0438   \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u044c\u0441\u044f \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438.<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<h2>\u0418\u0442\u043e\u0433\u0438<\/h2>\n<p><strong>\u0428\u0435\u0441\u0442\u044c \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u043e\u0432 \u0434\u043b\u044f real-time \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439:<\/strong><\/p>\n<p><strong>1. \u041d\u0435 \u043f\u043e\u043b\u0430\u0433\u0430\u0439\u0442\u0435\u0441\u044c \u043d\u0430 \u0442\u0430\u0439\u043c\u0435\u0440\u044b \u0432 \u0444\u043e\u043d\u0435. <\/strong>\u0424\u0443\u043d\u043a\u0446\u0438\u044f setInterval(fn, 1000) \u0432 \u0441\u043a\u0440\u044b\u0442\u043e\u0439 \u0432\u043a\u043b\u0430\u0434\u043a\u0435 \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f \u0440\u0430\u0437 \u0432 \u043c\u0438\u043d\u0443\u0442\u0443 \u2014 \u0438\u043b\u0438 \u043d\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f \u0432\u043e\u0432\u0441\u0435. \u0421\u0442\u0440\u043e\u0439\u0442\u0435 \u043b\u043e\u0433\u0438\u043a\u0443 \u0441 \u0443\u0447\u0451\u0442\u043e\u043c \u043d\u0435\u043d\u0430\u0434\u0451\u0436\u043d\u043e\u0441\u0442\u0438 \u0444\u043e\u043d\u043e\u0432\u044b\u0445 \u0442\u0430\u0439\u043c\u0435\u0440\u043e\u0432.<\/p>\n<p><strong>2. visibilitychange \u2014 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a. <\/strong>\u042d\u0442\u043e \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432\u043e \u0432\u0441\u0435\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u0438 \u043f\u043e\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u0432\u0441\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430 \u0432 \u0444\u043e\u043d \u0438 \u043e\u0431\u0440\u0430\u0442\u043d\u043e.<\/p>\n<p><strong>3. \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0439\u0442\u0435 \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f \u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u0440\u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0442\u0435.<\/strong> \u0421\u0447\u0438\u0442\u0430\u0439\u0442\u0435 \u0432\u0440\u0435\u043c\u044f \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u044f, \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0439\u0442\u0435 ws.readyState, \u043f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0439\u0442\u0435 \u0443 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u043f\u0440\u043e\u043f\u0443\u0449\u0435\u043d\u043d\u044b\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f.<\/p>\n<p><strong>4. \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u0435 WebSocket \u0432 pagehide \u0438 \u043f\u0435\u0440\u0435\u043e\u0442\u043a\u0440\u044b\u0442\u0438\u0435 \u0432 pageshow \u043f\u0440\u0438 event.persisted.<\/strong> \u0422\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u044c \u0441 BFCache \u0432 Chrome \u0438 \u0443\u043b\u0443\u0447\u0448\u0430\u0435\u0442 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043a\u043d\u043e\u043f\u043a\u0438 \u00ab\u041d\u0430\u0437\u0430\u0434\u00bb.<\/p>\n<p><strong>5. \u0417\u0430\u0431\u0443\u0434\u044c\u0442\u0435 \u043f\u0440\u043e unload. <\/strong>\u0412\u043c\u0435\u0441\u0442\u043e \u043d\u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 pagehide + fetch({ keepalive: true }) \u0438\u043b\u0438 navigator.sendBeacon(). \u0421\u043e\u0431\u044b\u0442\u0438\u0435 unload \u043d\u0435\u043d\u0430\u0434\u0451\u0436\u043d\u043e \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445 \u0438 \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u0435\u0442 BFCache.<\/p>\n<p><strong>6. Energy Saver \u2014 \u043d\u043e\u0432\u0430\u044f \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c (Chrome 133+). <\/strong>\u0421 \u0444\u0435\u0432\u0440\u0430\u043b\u044f 2025 \u0433\u043e\u0434\u0430 Chrome \u0437\u0430\u043c\u043e\u0440\u0430\u0436\u0438\u0432\u0430\u0435\u0442 CPU-\u0438\u043d\u0442\u0435\u043d\u0441\u0438\u0432\u043d\u044b\u0435 \u0444\u043e\u043d\u043e\u0432\u044b\u0435 \u0432\u043a\u043b\u0430\u0434\u043a\u0438 \u043f\u0440\u0438 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435 \u044d\u043d\u0435\u0440\u0433\u043e\u0441\u0431\u0435\u0440\u0435\u0436\u0435\u043d\u0438\u044f. \u041a\u0440\u0438\u0442\u0438\u0447\u043d\u0443\u044e \u0444\u043e\u043d\u043e\u0432\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u0442\u0435 \u0432 Service Worker.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0441\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u043b\u0438\u0441\u044c \u0441 \u043f\u043e\u0445\u043e\u0436\u0438\u043c\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\u043c\u0438 \u0441\u043e \u00ab\u0441\u043f\u044f\u0449\u0438\u043c\u0438\u00bb \u0432\u043a\u043b\u0430\u0434\u043a\u0430\u043c\u0438, \u0442\u0440\u043e\u0442\u0442\u043b\u0438\u043d\u0433\u043e\u043c \u0438 BFCache \u2014 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0435 \u043e\u0431\u0441\u0443\u0434\u0438\u0442\u044c \u044d\u0442\u043e \u043d\u0430 <a href=\"https:\/\/events.yoomoney.ru\/frontend-mix_2026\">Frontend Mix<\/a>. \u041d\u0430 \u0436\u0438\u0432\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c, \u043a\u0430\u043a \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0443\u0441\u044b\u043f\u043b\u044f\u0435\u0442 \u0432\u043a\u043b\u0430\u0434\u043a\u0438, \u043f\u043e\u0447\u0435\u043c\u0443 \u0438\u0437-\u0437\u0430 \u044d\u0442\u043e\u0433\u043e \u043b\u043e\u043c\u0430\u0435\u0442\u0441\u044f real-time \u0438 \u043a\u0430\u043a\u0438\u0435 \u043f\u0440\u0438\u0451\u043c\u044b \u0434\u0435\u0431\u0430\u0433\u0430 \u0438 resync \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c \u0438 \u0447\u0438\u043d\u0438\u0442\u044c \u0438\u0445 \u0432 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d\u0435.  <\/p>\n<p>\u041c\u0438\u0442\u0430\u043f \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0439, \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442 28 \u043c\u0430\u044f \u0432 19:00 (\u043c\u0441\u043a) \u0432 \u0421\u0430\u043d\u043a\u0442\u2011\u041f\u0435\u0442\u0435\u0440\u0431\u0443\u0440\u0433\u0435 \u0438 \u043e\u043d\u043b\u0430\u0439\u043d. \u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u0438 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u2014 <a href=\"https:\/\/events.yoomoney.ru\/frontend-mix_2026\">\u043d\u0430 \u0441\u0430\u0439\u0442\u0435 Frontend Mix<\/a>.<\/p>\n<h2>\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u044b<\/h2>\n<ul>\n<li>\n<p><a href=\"https:\/\/gitflic.ru\/project\/kostdm\/sleeping-tabs-sandbox\">\u0414\u0435\u043c\u043e-\u043f\u0440\u043e\u0435\u043a\u0442 \u043a \u0434\u043e\u043a\u043b\u0430\u0434\u0443<\/a>.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/developer.chrome.com\/docs\/web-platform\/page-lifecycle-api\">Page Lifecycle API \u2014 Chrome for Developers<\/a>.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/web.dev\/articles\/bfcache\">Back\/forward cache \u2014 web.dev<\/a>.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/developer.chrome.com\/blog\/freezing-on-energy-saver\">Freezing on Energy Saver \u2014 Chrome Blog<\/a>.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/developer.chrome.com\/docs\/web-platform\/bfcache-ccns\">BFCache + Cache-Control: no-store<\/a>.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/developer.chrome.com\/blog\/timer-throttling-in-chrome-88\">Heavy throttling of chained JS timers \u2014 Chrome 88<\/a>.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/developer.chrome.com\/docs\/devtools\/application\/back-forward-cache\">Test back\/forward cache \u2014 Chrome DevTools<\/a>.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/wicg.github.io\/page-lifecycle\/\">Page Lifecycle WICG Specification<\/a>.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/NotRestoredReasons\">NotRestoredReasons API \u2014 MDN<\/a>.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/www.npmjs.com\/package\/page-lifecycle\">PageLifecycle.js \u2014 npm<\/a>.<\/p>\n<\/li>\n<\/ul>\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\/1038288\/\">https:\/\/habr.com\/ru\/articles\/1038288\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u041f\u0440\u0438\u0432\u0435\u0442! \u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u041a\u043e\u0441\u0442\u044f, \u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432 \u0432 \u042eMoney. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u044e, \u043f\u043e\u0447\u0435\u043c\u0443 \u0432\u043a\u043b\u0430\u0434\u043a\u0430 \u043f\u043e\u0441\u043b\u0435 \u0432\u043e\u0437\u0432\u0440\u0430\u0442\u0430 \u0438\u0437 \u0444\u043e\u043d\u0430 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u0432\u0435\u0441\u0442\u0438 \u0441\u0435\u0431\u044f \u0441\u0442\u0440\u0430\u043d\u043d\u043e: \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043f\u043e\u0434\u0432\u0438\u0441\u0430\u0435\u0442, \u0442\u0430\u0439\u043c\u0435\u0440\u044b \u0441\u044a\u0435\u0437\u0436\u0430\u044e\u0442, \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043f\u0440\u0438\u0445\u043e\u0434\u044f\u0442 \u043f\u0430\u0447\u043a\u043e\u0439.\u041c\u0430\u0442\u0435\u0440\u0438\u0430\u043b \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u0441\u044f \u0442\u0435\u043c, \u043a\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 \u0441\u043b\u043e\u0436\u043d\u044b\u0435 SPA \u0441 realtime\u2011\u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f\u043c\u0438, WebSocket \u0438 \u043d\u0430\u0441\u044b\u0449\u0435\u043d\u043d\u044b\u043c UI \u2014 CRM, \u0434\u0430\u0448\u0431\u043e\u0440\u0434\u044b, \u043f\u043b\u0430\u0442\u0451\u0436\u043d\u044b\u0435 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0438.\u0422\u0435\u043c\u0430 \u0432\u044b\u0440\u043e\u0441\u043b\u0430 \u0438\u0437 \u0434\u043e\u043a\u043b\u0430\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f \u0431\u0443\u0434\u0443 \u0447\u0438\u0442\u0430\u0442\u044c \u043d\u0430 Frontend Mix \u2014 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u043e\u043c \u043c\u0438\u0442\u0430\u043f\u0435 \u042eMoney \u0434\u043b\u044f \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u2011\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432. \u041d\u043e \u0437\u0434\u0435\u0441\u044c \u0431\u0443\u0434\u0435\u0442 \u0438\u043c\u0435\u043d\u043d\u043e \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0440\u0430\u0437\u0431\u043e\u0440: \u0441 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c\u0438, \u043a\u043e\u0434\u043e\u043c \u0438 \u043e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0435\u043c \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0441 \u043d\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u043c\u0438 \u0432\u043a\u043b\u0430\u0434\u043a\u0430\u043c\u0438.\u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c:\u043a\u0430\u043a \u0443\u0441\u0442\u0440\u043e\u0435\u043d\u044b Page Visibility API \u0438 Page Lifecycle API, \u0437\u0430\u0447\u0435\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u044e\u0442 \u0444\u043e\u043d\u043e\u0432\u044b\u0435 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u044b, \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u0440\u0438 \u0437\u0430\u043c\u043e\u0440\u043e\u0437\u043a\u0435 \u0432\u043a\u043b\u0430\u0434\u043e\u043a, \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u043e\u043c \u0441\u043d\u0435 \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0442\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438\u0437 BFCache,\u0447\u0435\u043c \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f Chrome, Safari \u0438 Firefox, \u043a\u0430\u043a\u0438\u0435 API \u0443\u0436\u0435 \u0443\u0441\u0442\u0430\u0440\u0435\u043b\u0438,\u0430 \u043a\u0430\u043a\u0438\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044b \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u0435\u0435 \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u044f\u0445.\u041d\u0430 \u043c\u0438\u0442\u0430\u043f\u0435 \u043e\u0431\u0441\u0443\u0434\u0438\u043c \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043d\u044e\u0430\u043d\u0441\u044b \u0438 \u0432\u043e\u043f\u0440\u043e\u0441\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0447\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0442 \u0443 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u0444\u043e\u043d\u043e\u0432\u044b\u043c\u0438 \u0432\u043a\u043b\u0430\u0434\u043a\u0430\u043c\u0438.\u041a\u043e\u0433\u0434\u0430 \u0444\u043e\u043d\u043e\u0432\u044b\u0435 \u0432\u043a\u043b\u0430\u0434\u043a\u0438 \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043e\u0439\u041e\u0431\u044b\u0447\u043d\u043e \u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u0447\u0442\u043e JavaScript \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0435\u043f\u0440\u0435\u0440\u044b\u0432\u043d\u043e, \u043f\u043e\u043a\u0430 \u0432\u043a\u043b\u0430\u0434\u043a\u0430 \u043e\u0442\u043a\u0440\u044b\u0442\u0430. \u041d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0442 \u0440\u0435\u0441\u0443\u0440\u0441\u044b: \u0437\u0430\u043c\u0435\u0434\u043b\u044f\u0435\u0442 \u0442\u0430\u0439\u043c\u0435\u0440\u044b, \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 JS, \u0430 \u0438\u043d\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0437\u0430\u043c\u043e\u0440\u0430\u0436\u0438\u0432\u0430\u0435\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443.\u0414\u043b\u044f \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0441\u0430\u0439\u0442\u043e\u0432 \u044d\u0442\u043e \u043d\u0435\u0437\u0430\u043c\u0435\u0442\u043d\u043e. \u041d\u043e \u0432 CRM, \u0447\u0430\u0442\u0430\u0445, \u043f\u043b\u0430\u0442\u0451\u0436\u043d\u044b\u0445 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u044f\u0445 \u0438 \u0434\u0430\u0448\u0431\u043e\u0440\u0434\u0430\u0445 \u0442\u0430\u043a\u0438\u0435 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0431\u044b\u0441\u0442\u0440\u043e \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u043e\u043c \u0431\u0430\u0433\u043e\u0432 \u2014 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u043f\u043e\u0441\u043b\u0435 \u0434\u043e\u043b\u0433\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u044f \u0432\u043a\u043b\u0430\u0434\u043a\u0438, \u0441\u043d\u0430 \u043d\u043e\u0443\u0442\u0431\u0443\u043a\u0430 \u0438\u043b\u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0442\u0430 \u0447\u0435\u0440\u0435\u0437 \u043a\u043d\u043e\u043f\u043a\u0443 \u00ab\u041d\u0430\u0437\u0430\u0434\u00bb.\u041a\u0435\u0439\u0441 \u0438\u0437 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0412 \u042eMoney \u044f \u0440\u0430\u0431\u043e\u0442\u0430\u044e \u043d\u0430\u0434 CRM \u0434\u043b\u044f \u043a\u043e\u043d\u0442\u0430\u043a\u0442\u043d\u043e\u0433\u043e \u0446\u0435\u043d\u0442\u0440\u0430: \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u044e\u0442 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u043e WebSocket \u0438 \u0434\u0435\u0440\u0436\u0430\u0442 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u043c\u0438 \u0434\u0435\u0441\u044f\u0442\u043a\u0438 \u0432\u043a\u043b\u0430\u0434\u043e\u043a \u043d\u0430 \u043f\u0440\u043e\u0442\u044f\u0436\u0435\u043d\u0438\u0438 \u0432\u0441\u0435\u0439 \u0441\u043c\u0435\u043d\u044b. \u0427\u0430\u0441\u0442\u044c \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u043e\u0432 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0430 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0435\u0440\u0432\u0435\u0440\u0430\u0445, \u0433\u0434\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u044b, \u2014 \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0437\u0430\u043c\u0435\u0442\u043d\u043e.\u042d\u0442\u043e\u0442 \u043a\u0435\u0439\u0441 \u2014 \u0447\u0430\u0441\u0442\u044c \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b Frontend Mix, \u043c\u0438\u0442\u0430\u043f\u0430 \u042eMoney \u043f\u0440\u043e \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u043e\u0439\u0434\u0451\u0442 28 \u043c\u0430\u044f \u043e\u043d\u043b\u0430\u0439\u043d \u0438 \u043e\u0444\u043b\u0430\u0439\u043d \u0432 \u0421\u0430\u043d\u043a\u0442\u2011\u041f\u0435\u0442\u0435\u0440\u0431\u0443\u0440\u0433\u0435.\u041f\u043e\u043c\u0438\u043c\u043e \u00ab\u0441\u043f\u044f\u0449\u0438\u0445\u00bb \u0432\u043a\u043b\u0430\u0434\u043e\u043a, \u0432 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0435 \u0435\u0449\u0451 \u0442\u0440\u0438 \u0434\u043e\u043a\u043b\u0430\u0434\u0430:Spec\u2011Driven \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430 \u0434\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u043f\u0438\u0441\u0435\u043c \u0441 OpenAPI \u043a\u0430\u043a \u0435\u0434\u0438\u043d\u044b\u043c \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u043e\u043c \u043f\u0440\u0430\u0432\u0434\u044b \u0438 \u0430\u0432\u0442\u043e\u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0435\u0439 \u043a\u043e\u043d\u0441\u0438\u0441\u0442\u0435\u043d\u0442\u043d\u043e\u0433\u043e HTML.\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043c\u043e\u0434\u0443\u043b\u044f \u0448\u0443\u043c\u043e\u043f\u043e\u0434\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043a \u0440\u0430\u0431\u043e\u0447\u0435\u043c\u0443 \u043c\u0435\u0441\u0442\u0443 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u0430: React, WebSockets, WebRTC \u0438 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u043c\u043e\u0434\u0443\u043b\u044f.\u041a\u0440\u0443\u0433\u043b\u044b\u0439 \u0441\u0442\u043e\u043b \u043f\u0440\u043e AI \u0432\u043e \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435 \u2014 \u0432\u043b\u0438\u044f\u043d\u0438\u0435 \u043d\u0435\u0439\u0440\u043e\u0441\u0435\u0442\u0435\u0439 \u043d\u0430 \u0440\u044b\u043d\u043e\u043a, \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0438 \u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0435.\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u0438 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u2014 \u043d\u0430 \u0441\u0430\u0439\u0442\u0435 Frontend Mix, \u0441\u0441\u044b\u043b\u043a\u0430 \u0432 \u043a\u043e\u043d\u0446\u0435 \u0441\u0442\u0430\u0442\u044c\u0438.\u0421 \u043a\u0430\u043a\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043e\u0439 \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0438\u0441\u044c\u041d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0442\u0438\u043a\u0435\u0442\u0430 \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f \u043f\u043b\u0430\u0432\u0430\u044e\u0449\u0438\u0439 \u0431\u0430\u0433: \u043f\u043e\u0441\u043b\u0435 \u0432\u043e\u0437\u0432\u0440\u0430\u0442\u0430 \u043d\u0430 \u0432\u043a\u043b\u0430\u0434\u043a\u0443 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0435\u043a\u0443\u043d\u0434 \u0442\u043e\u0440\u043c\u043e\u0437\u0438\u043b, \u0441\u043f\u0438\u043d\u043d\u0435\u0440\u044b \u0437\u0430\u0432\u0438\u0441\u0430\u043b\u0438, \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u043b\u0438 \u043f\u0430\u0447\u043a\u043e\u0439, \u0447\u0430\u0441\u0442\u044c \u043a\u043b\u0438\u043a\u043e\u0432 \u0431\u0443\u0434\u0442\u043e \u0442\u0435\u0440\u044f\u043b\u0430\u0441\u044c. \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u043b\u0430\u0441\u044c \u043d\u0435\u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e, \u043b\u043e\u0433\u0438 \u0438 \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u043d\u0433 \u043d\u0435 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u043b\u0438 \u044f\u0432\u043d\u044b\u0445 \u043e\u0448\u0438\u0431\u043e\u043a.\u0421\u043d\u0430\u0440\u0443\u0436\u0438 \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b\u043e \u0442\u0430\u043a:\u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441\u0440\u0430\u0437\u0443 \u0441 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 \u0432\u043a\u043b\u0430\u0434\u043a\u0430\u043c\u0438 CRM \u0438 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u043c\u0438 \u0441\u0438\u0441\u0442\u0435\u043c\u0430\u043c\u0438;\u0441\u043f\u0443\u0441\u0442\u044f \u0432\u0440\u0435\u043c\u044f \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u043a \u0442\u0438\u043a\u0435\u0442\u0443, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u044c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u044f;\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u00ab\u043e\u0436\u0438\u0432\u0430\u0435\u0442\u00bb \u043d\u0435 \u0441\u0440\u0430\u0437\u0443: \u0437\u0430\u0432\u0438\u0441\u0430\u044e\u0442 \u0441\u043f\u0438\u043d\u043d\u0435\u0440\u044b, \u043f\u0430\u0447\u043a\u043e\u0439 \u043f\u0440\u0438\u0445\u043e\u0434\u044f\u0442 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f, \u0430 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043a\u043b\u0438\u043a\u0438 \u0431\u0443\u0434\u0442\u043e \u0442\u0435\u0440\u044f\u044e\u0442\u0441\u044f.\u0421\u0435\u0440\u0432\u0435\u0440 \u043e\u0442\u0432\u0435\u0447\u0430\u043b \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e, WebSocket \u043d\u0435 \u0440\u0432\u0430\u043b\u0441\u044f, CPU \u043d\u0435 \u0431\u044b\u043b \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u043f\u0435\u0440\u0435\u0433\u0440\u0443\u0436\u0435\u043d. \u041e\u0431\u0449\u0430\u044f \u0437\u0430\u043a\u043e\u043d\u043e\u043c\u0435\u0440\u043d\u043e\u0441\u0442\u044c \u0431\u044b\u043b\u0430 \u043e\u0434\u043d\u0430: \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0447\u0430\u0449\u0435 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u043b\u0430 \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0432\u043a\u043b\u0430\u0434\u043a\u0430 \u0434\u043e\u043b\u0433\u043e \u043d\u0430\u0445\u043e\u0434\u0438\u043b\u0430\u0441\u044c \u0432 \u0444\u043e\u043d\u0435.\u0427\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u043b\u043e \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c \u2014 \u0438 \u043a\u0430\u043a \u043c\u044b \u044d\u0442\u043e \u0440\u0435\u043a\u043e\u043d\u0441\u0442\u0440\u0443\u0438\u0440\u043e\u0432\u0430\u043b\u0438\u041a\u0430\u0440\u0442\u0438\u043d\u0430 \u043e\u043a\u0430\u0437\u0430\u043b\u0430\u0441\u044c \u0442\u0430\u043a\u043e\u0439:\u041e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0434\u0440\u0443\u0433\u0443\u044e \u0432\u043a\u043b\u0430\u0434\u043a\u0443.\u0427\u0435\u0440\u0435\u0437 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0437\u0430\u043c\u043e\u0440\u0430\u0436\u0438\u0432\u0430\u0435\u0442 \u0444\u043e\u043d\u043e\u0432\u0443\u044e \u0432\u043a\u043b\u0430\u0434\u043a\u0443 \u0434\u043b\u044f \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432. WebSocket \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u00ab\u0436\u0438\u0432\u044b\u043c\u00bb, \u0438 \u0432\u0445\u043e\u0434\u044f\u0449\u0438\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u044e\u0442 \u043d\u0430\u043a\u0430\u043f\u043b\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0431\u0443\u0444\u0435\u0440\u0435.\u041e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u043a \u0432\u043a\u043b\u0430\u0434\u043a\u0435.\u0411\u0440\u0430\u0443\u0437\u0435\u0440 \u00ab\u0440\u0430\u0437\u043c\u043e\u0440\u0430\u0436\u0438\u0432\u0430\u0435\u0442\u00bb \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u043f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u043d\u0430\u043a\u043e\u043f\u0438\u0432\u0448\u0438\u0435\u0441\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043f\u043e\u0447\u0442\u0438 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u043f\u043e\u043f\u0430\u0434\u0430\u044e\u0442 \u0432 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438.\u041d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043e\u0431\u0440\u0443\u0448\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043b\u0430\u0432\u0438\u043d\u0430 \u0432\u044b\u0437\u043e\u0432\u043e\u0432 API, \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0445 \u0440\u0435\u043d\u0434\u0435\u0440\u043e\u0432 React \u0438 \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0438\u0445 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0439.\u041d\u0430 \u0441\u043b\u0430\u0431\u043e\u043c \u0436\u0435\u043b\u0435\u0437\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u043e\u0449\u0443\u0442\u0438\u043c\u043e \u0442\u043e\u0440\u043c\u043e\u0437\u0438\u0442\u044c, \u0430 \u0447\u0430\u0441\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u0451\u0442 \u043e\u0442\u0432\u0435\u0447\u0430\u0442\u044c.\u0412\u0441\u0435 \u0447\u0430\u0441\u0442\u0438 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u043f\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e. \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u043b\u0430 \u0432 \u043c\u043e\u043c\u0435\u043d\u0442 \u00ab\u043f\u0440\u043e\u0431\u0443\u0436\u0434\u0435\u043d\u0438\u044f\u00bb \u0432\u043a\u043b\u0430\u0434\u043a\u0438: \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0440\u0430\u0437\u043e\u043c \u043e\u0442\u0434\u0430\u0432\u0430\u043b \u043d\u0430\u043a\u043e\u043f\u043b\u0435\u043d\u043d\u044b\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u043b \u0432\u0441\u043f\u043b\u0435\u0441\u043a \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u2014 \u0438 \u043d\u0430 \u0441\u043b\u0430\u0431\u044b\u0445 \u043c\u0430\u0448\u0438\u043d\u0430\u0445 \u044d\u0442\u043e\u0433\u043e \u0445\u0432\u0430\u0442\u0430\u043b\u043e \u0434\u043b\u044f \u0437\u0430\u043c\u0435\u0442\u043d\u043e\u0433\u043e \u0444\u0440\u0438\u0437\u0430.\u041a\u0430\u043a \u043c\u044b \u044d\u0442\u043e \u0434\u043e\u043a\u0430\u0437\u0430\u043b\u0438\u0413\u0438\u043f\u043e\u0442\u0435\u0437\u0430 \u0441\u043b\u043e\u0436\u0438\u043b\u0430\u0441\u044c \u0431\u044b\u0441\u0442\u0440\u043e: \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0442\u043e\u0440\u043c\u043e\u0437\u0438\u043b \u0438\u043c\u0435\u043d\u043d\u043e \u043f\u0440\u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0442\u0435.\u041c\u044b \u0432\u043a\u043b\u044e\u0447\u0438\u043b\u0438 \u043b\u043e\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430 \u2014 visibilitychange, pagehide\/pageshow, freeze\/resume \u2014 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 chrome:\/\/discards, \u0447\u0442\u043e\u0431\u044b \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u0437\u0430\u043c\u043e\u0440\u0430\u0436\u0438\u0432\u0430\u0442\u044c \u0432\u043a\u043b\u0430\u0434\u043a\u0438.\u0413\u0438\u043f\u043e\u0442\u0435\u0437\u0430 \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u043b\u0430\u0441\u044c: \u043f\u043e\u0441\u043b\u0435 resume \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u0430\u0437\u043e\u043c \u043e\u0442\u0434\u0430\u0432\u0430\u043b \u043d\u0430\u043a\u043e\u043f\u0438\u0432\u0448\u0438\u0435\u0441\u044f WebSocket-\u0441\u043e\u0431\u044b\u0442\u0438\u044f. \u0421\u0442\u0430\u043b\u043e \u044f\u0441\u043d\u043e, \u0447\u0442\u043e \u043f\u0440\u0438\u0447\u0438\u043d\u0430 \u2014 \u0432 \u0441\u0430\u043c\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 \u0440\u0430\u0431\u043e\u0442\u044b \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0441 \u0444\u043e\u043d\u043e\u0432\u044b\u043c\u0438 \u0432\u043a\u043b\u0430\u0434\u043a\u0430\u043c\u0438.\u0420\u0435\u0448\u0435\u043d\u0438\u0435 (\u0441\u043f\u043e\u0439\u043b\u0435\u0440)\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u0440\u0435\u0448\u0438\u043b\u0438 \u0431\u0430\u0442\u0447\u0438\u043d\u0433\u043e\u043c WebSocket-\u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439: \u0432\u043c\u0435\u0441\u0442\u043e \u0441\u0435\u0440\u0438\u0438 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0445 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043f\u043e\u043b\u0443\u0447\u0430\u043b \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0435. \u042d\u0442\u043e \u0443\u0431\u0440\u0430\u043b\u043e \u043f\u0438\u043a\u043e\u0432\u0443\u044e \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u043f\u0440\u0438 \u00ab\u043f\u0440\u043e\u0431\u0443\u0436\u0434\u0435\u043d\u0438\u0438\u00bb \u0432\u043a\u043b\u0430\u0434\u043a\u0438. \u041d\u043e \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043d\u044f\u0442\u044c, \u043f\u043e\u0447\u0435\u043c\u0443 \u044d\u0442\u043e \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e, \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c\u0441\u044f, \u043a\u0430\u043a \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0443\u0441\u044b\u043f\u043b\u044f\u044e\u0442 \u0444\u043e\u043d\u043e\u0432\u044b\u0435 \u0432\u043a\u043b\u0430\u0434\u043a\u0438.Page Visibility API\u0411\u0430\u0437\u043e\u0432\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0444\u043e\u043d\u043e\u0432\u044b\u043c\u0438 \u0432\u043a\u043b\u0430\u0434\u043a\u0430\u043c\u0438. \u0414\u0430\u0451\u0442 document.visibilityState \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438 &#171;visible&#187; \/ &#171;hidden&#187; \u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 visibilitychange.document.addEventListener(&#8216;visibilitychange&#8217;, () =&gt; {  if (document.visibilityState === &#8216;hidden&#8217;) {    \/\/ \u0412\u043a\u043b\u0430\u0434\u043a\u0430 \u0443\u0448\u043b\u0430 \u0432 \u0444\u043e\u043d \u2014 \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f    pauseLiveUpdates();    saveApplicationState();  } else {    \/\/ \u0412\u043a\u043b\u0430\u0434\u043a\u0430 \u0441\u043d\u043e\u0432\u0430 \u0430\u043a\u0442\u0438\u0432\u043d\u0430    resumeLiveUpdates();    checkConnections();  }});\u041d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445 \u044d\u0442\u043e \u0441\u0430\u043c\u044b\u0439 \u043d\u0430\u0434\u0451\u0436\u043d\u044b\u0439 \u0441\u0438\u0433\u043d\u0430\u043b: beforeunload \u0438 unload \u0442\u0430\u043c \u043c\u043e\u0433\u0443\u0442 \u043d\u0435 \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c. \u041e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0435 \u2014 API \u0440\u0430\u0437\u043b\u0438\u0447\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u00ab\u0432\u0438\u0434\u043d\u043e\u00bb \u0438 \u00ab\u043d\u0435 \u0432\u0438\u0434\u043d\u043e\u00bb \u0438 \u043d\u0435 \u0433\u043e\u0432\u043e\u0440\u0438\u0442, \u0431\u044b\u043b\u0430 \u043b\u0438 \u0432\u043a\u043b\u0430\u0434\u043a\u0430 \u0437\u0430\u043c\u043e\u0440\u043e\u0436\u0435\u043d\u0430 \u0438\u043b\u0438 \u0443\u0436\u0435 \u0432\u044b\u0433\u0440\u0443\u0436\u0435\u043d\u0430 \u0438\u0437 \u043f\u0430\u043c\u044f\u0442\u0438.Page Lifecycle APIPage Lifecycle API \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u0442 \u044d\u0442\u0443 \u043c\u043e\u0434\u0435\u043b\u044c \u0438 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u043f\u043e\u043b\u043d\u044b\u0439 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u044b\u0439 \u0446\u0438\u043a\u043b \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u042d\u0442\u043e \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f WICG, \u0438\u043d\u0438\u0446\u0438\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f Google, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u0432 Chromium-\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u043d\u0430\u0447\u0438\u043d\u0430\u044f \u0441 Chrome 68.Firefox \u0438 Safari \u043d\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b\u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f freeze\/resume, \u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u043f\u043e\u0445\u043e\u0436\u0438\u0435 \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0438: \u0442\u0440\u043e\u0442\u0442\u043b\u0438\u043d\u0433 \u0442\u0430\u0439\u043c\u0435\u0440\u043e\u0432, \u0437\u0430\u043c\u043e\u0440\u043e\u0437\u043a\u0443 \u0438 \u0432\u044b\u0433\u0440\u0443\u0437\u043a\u0443 \u0432\u043a\u043b\u0430\u0434\u043e\u043a. \u0414\u0430\u043b\u0435\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u0442\u0435\u0440\u043c\u0438\u043d\u043e\u043b\u043e\u0433\u0438\u044e Page Lifecycle API \u043a\u0430\u043a \u043e\u0431\u0449\u0443\u044e \u043c\u043e\u0434\u0435\u043b\u044c, \u043e\u0442\u043c\u0435\u0447\u0430\u044f \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0443 Chromium \u0442\u0430\u043c, \u0433\u0434\u0435 \u043e\u043d\u0430 \u0435\u0441\u0442\u044c.\u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b\u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u0422\u0430\u0439\u043c\u0435\u0440\u044bJS\u0420\u0435\u0441\u0443\u0440\u0441\u044bActive\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0432\u0438\u0434\u043d\u0430 \u0438 \u0438\u043c\u0435\u0435\u0442 \u0444\u043e\u043a\u0443\u0441.\u0411\u0435\u0437 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0439\u0420\u0430\u0431\u043e\u0442\u0430\u0435\u0442\u041d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e\u0435Passive\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430   \u0432\u0438\u0434\u043d\u0430, \u0444\u043e\u043a\u0443\u0441 \u2014 \u0432 \u0434\u0440\u0443\u0433\u043e\u043c \u043e\u043a\u043d\u0435.\u0411\u0435\u0437   \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0439\u0420\u0430\u0431\u043e\u0442\u0430\u0435\u0442\u041d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e\u0435Hidden\u0412\u043a\u043b\u0430\u0434\u043a\u0430 \u0432 \u0444\u043e\u043d\u0435.\u0422\u0440\u043e\u0442\u0442\u043b\u0438\u043d\u0433\u0420\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u0435\u0435\u0421\u043d\u0438\u0436\u0435\u043d\u043d\u043e\u0435FrozenJS \u043d\u0430 \u043f\u0430\u0443\u0437\u0435, \u043a\u043e\u043b\u0431\u044d\u043a\u0438 \u043d\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f.\u041d\u0435   \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442\u0441\u044f\u0417\u0430\u043c\u043e\u0440\u043e\u0436\u0435\u043d\u041c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435Discarded\u041f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0432\u044b\u0433\u0440\u0443\u0436\u0435\u043d\u0430 \u0438\u0437 \u043f\u0430\u043c\u044f\u0442\u0438\u2014\u041d\u0435\u0442\u041d\u0443\u043b\u0435\u0432\u043e\u0435\u0412\u0430\u0436\u043d\u044b\u0435 \u043d\u044e\u0430\u043d\u0441\u044b: \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 Frozen WebSocket \u043c\u043e\u0436\u0435\u0442 \u043e\u0441\u0442\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u043c, \u043d\u043e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 onmessage \u043d\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u2014 \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u043e\u0441\u043b\u0435 \u0440\u0430\u0437\u043c\u043e\u0440\u043e\u0437\u043a\u0438 \u0432\u043a\u043b\u0430\u0434\u043a\u0430 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u043f\u0430\u0447\u043a\u0443 \u043d\u0430\u043a\u043e\u043f\u0438\u0432\u0448\u0438\u0445\u0441\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u0439. \u041f\u0435\u0440\u0435\u0445\u043e\u0434 \u0432 Discarded \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0431\u0435\u0437 \u0441\u043e\u0431\u044b\u0442\u0438\u0439: \u0444\u0430\u043a\u0442 \u0432\u044b\u0433\u0440\u0443\u0437\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0441\u043b\u0435 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0447\u0435\u0440\u0435\u0437 document.wasDiscarded.\u0413\u0440\u0430\u0444 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u043e\u0432 \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u043c\u0438\u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u0430\u0436\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043b\u0443\u0447\u0448\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c \u043d\u0430 visibilitychange, \u043d\u0435 \u0434\u043e\u0436\u0438\u0434\u0430\u044f\u0441\u044c freeze: \u043f\u0435\u0440\u0435\u0445\u043e\u0434 Hidden \u2192 Discarded \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043a\u043e\u0434 \u043d\u0435 \u0443\u0432\u0438\u0434\u0438\u0442.\u041f\u043e\u043b\u043d\u0430\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430\u0421\u043e\u0431\u044b\u0442\u0438\u0435\u041e\u0431\u044a\u0435\u043a\u0442-\u0446\u0435\u043b\u044c\u041f\u0435\u0440\u0435\u0445\u043e\u0434\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435focusDOM-\u044d\u043b\u0435\u043c\u0435\u043d\u0442Passive \u2192 Active\u0422\u043e\u043b\u044c\u043a\u043e \u0435\u0441\u043b\u0438 \u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043d\u0435 \u0431\u044b\u043b\u043e \u0444\u043e\u043a\u0443\u0441\u0430.blurDOM-\u044d\u043b\u0435\u043c\u0435\u043d\u0442Active \u2192 Passive\u0422\u043e\u043b\u044c\u043a\u043e \u0435\u0441\u043b\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0442\u0435\u0440\u044f\u0435\u0442 \u0444\u043e\u043a\u0443\u0441 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e.visibilitychangedocumentPassive \u2194 Hidden\u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0434\u043b\u044f \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d\u0438\u044f \u0443\u0445\u043e\u0434\u0430 \u0432 \u0444\u043e\u043d.freeze \u2b50documentHidden \u2192 Frozen\u0422\u043e\u043b\u044c\u043a\u043e Chromium 68+.resume \u2b50documentFrozen \u2192 Hidden\/Active\u0422\u043e\u043b\u044c\u043a\u043e Chromium 68+.pageshowwindowFrozen \u2192 Activeevent.persisted =   true \u043f\u0440\u0438 BFCache.pagehidewindowHidden \u2192 Frozen\/Terminatedevent.persisted = true \u043f\u0440\u0438 BFCache.beforeunloadwindowHidden \u2192 Terminated\u0422\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438   \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u0438.unloadwindowHidden \u2192 Terminated\u26a0\ufe0f \u0423\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u0439, \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u0435\u0442 BFCache.\u2b50 \u2014 \u0441\u043e\u0431\u044b\u0442\u0438\u044f, \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0435 Page Lifecycle API (Chromium only)\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043econst getLifecycleState = () =&gt; {  if (document.visibilityState === &#8216;hidden&#8217;) return &#8216;hidden&#8217;;  if (document.hasFocus()) return &#8216;active&#8217;;  return &#8216;passive&#8217;;};let currentState = getLifecycleState();const logStateChange = (next) =&gt; {  if (next === currentState) return;  console.log(`[Lifecycle] ${currentState} \u2192 ${next}`);  currentState = next;};[&#8216;pageshow&#8217;, &#8216;focus&#8217;, &#8216;blur&#8217;, &#8216;visibilitychange&#8217;, &#8216;resume&#8217;].forEach((type) =&gt; {  window.addEventListener(type, () =&gt; logStateChange(getLifecycleState()));});document.addEventListener(&#8216;freeze&#8217;, () =&gt; logStateChange(&#8216;frozen&#8217;));window.addEventListener(&#8216;pagehide&#8217;, (event) =&gt; {  logStateChange(event.persisted ? &#8216;frozen&#8217; : &#8216;terminated&#8217;);});\u041c\u0435\u0445\u0430\u043d\u0438\u043a\u0430 \u0442\u0440\u043e\u0442\u0442\u043b\u0438\u043d\u0433\u0430\u0422\u0440\u043e\u0442\u0442\u043b\u0438\u043d\u0433 \u0432 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u0437\u0430\u0442\u0440\u0430\u0433\u0438\u0432\u0430\u0435\u0442 \u0442\u0430\u0439\u043c\u0435\u0440\u044b (setTimeout, setInterval), \u0438 \u043f\u043e\u043b\u0438\u0442\u0438\u043a\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u0432\u0441\u0451 \u0430\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u0435\u0435.\u0411\u0430\u0437\u043e\u0432\u044b\u0439 \u0442\u0440\u043e\u0442\u0442\u043b\u0438\u043d\u0433\u0422\u0430\u0439\u043c\u0435\u0440\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442\u0441\u044f \u043d\u0435 \u0447\u0430\u0449\u0435 \u043e\u0434\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u0430 \u0432 \u0441\u0435\u043a\u0443\u043d\u0434\u0443, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0438\u043d\u0442\u0435\u0440\u0432\u0430\u043b \u043c\u0435\u043d\u044c\u0448\u0435.Chrome \u2014 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0447\u0435\u0440\u0435\u0437 10 \u0441\u0435\u043a\u0443\u043d\u0434 \u0432 \u0444\u043e\u043d\u0435;Firefox \u2014 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0447\u0435\u0440\u0435\u0437 30 \u0441\u0435\u043a\u0443\u043d\u0434;Safari \u2014 \u0442\u043e\u0436\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0442\u0440\u043e\u0442\u0442\u043b\u0438\u043d\u0433, \u043d\u043e \u0442\u043e\u0447\u043d\u044b\u0435 \u043f\u043e\u0440\u043e\u0433\u0438 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u043d\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u044b.\u0418\u043d\u0442\u0435\u043d\u0441\u0438\u0432\u043d\u044b\u0439 \u0442\u0440\u043e\u0442\u0442\u043b\u0438\u043d\u0433 (Chrome 88+)\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u2014 Intensive Wake Up Throttling (Chrome 88+). \u0412\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0438 \u0443\u0441\u043b\u043e\u0432\u0438\u0439:\u0423\u0441\u043b\u043e\u0432\u0438\u0435\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u0412\u0440\u0435\u043c\u044f \u0432 \u0444\u043e\u043d\u0435\u0411\u043e\u043b\u0435\u0435 5 \u043c\u0438\u043d\u0443\u0442.\u0410\u0443\u0434\u0438\u043e\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043d\u0435 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442 \u0437\u0432\u0443\u043a \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 30 \u0441\u0435\u043a\u0443\u043d\u0434.WebRTC\u041d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f.Timer chain\u0426\u0435\u043f\u043e\u0447\u043a\u0430 \u0442\u0430\u0439\u043c\u0435\u0440\u043e\u0432 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u2265 5 \u0432\u044b\u0437\u043e\u0432\u043e\u0432.\u0412 \u044d\u0442\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435 \u0442\u0430\u0439\u043c\u0435\u0440\u044b \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442 \u043d\u0435 \u0447\u0430\u0449\u0435 1 \u0440\u0430\u0437\u0430 \u0432 \u043c\u0438\u043d\u0443\u0442\u0443.\u041e\u0431\u044b\u0447\u043d\u044b\u0439 \u0444\u043e\u043d:\u00a0\u00a0 setInterval(fn, 1000) \u2192 ~1 \u0440\u0430\u0437\/\u0441\u0435\u043a\u0418\u043d\u0442\u0435\u043d\u0441\u0438\u0432\u043d\u044b\u0439:\u00a0\u00a0 setInterval(fn, 1000) \u2192 ~1 \u0440\u0430\u0437\/\u043c\u0438\u043d\u0411\u044e\u0434\u0436\u0435\u0442\u043d\u0430\u044f \u043c\u043e\u0434\u0435\u043b\u044c (Chrome \u0438 Firefox)Chrome \u0438 Firefox \u0442\u0430\u043a\u0436\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0431\u044e\u0434\u0436\u0435\u0442\u043d\u0443\u044e \u043c\u043e\u0434\u0435\u043b\u044c: \u043a\u0430\u0436\u0434\u0430\u044f \u0444\u043e\u043d\u043e\u0432\u0430\u044f \u0432\u043a\u043b\u0430\u0434\u043a\u0430 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043d\u044b\u0439 CPU-\u0431\u044e\u0434\u0436\u0435\u0442.\u0437\u0430\u0434\u0430\u0447\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f, \u0442\u043e\u043b\u044c\u043a\u043e \u0435\u0441\u043b\u0438 \u0431\u044e\u0434\u0436\u0435\u0442 \u043d\u0435\u043e\u0442\u0440\u0438\u0446\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439;\u0432\u0440\u0435\u043c\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0437\u0430\u0434\u0430\u0447\u0438 \u0432\u044b\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u0438\u0437 \u0431\u044e\u0434\u0436\u0435\u0442\u0430;\u0431\u044e\u0434\u0436\u0435\u0442 \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u2014 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u043d\u0430 10 \u043c\u0441 \u0432 \u0441\u0435\u043a\u0443\u043d\u0434\u0443.\u041f\u0440\u0438\u043c\u0435\u0440: \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0439 \u0431\u044e\u0434\u0436\u0435\u0442 50 \u043c\u0441, \u0431\u044e\u0434\u0436\u0435\u0442 \u043f\u043e\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043d\u0430 10 \u043c\u0441\/\u0441:\u0421\u0435\u043a\u0443\u043d\u0434\u0430\u041f\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435\u0411\u044e\u0434\u0436\u0435\u0442 \u0434\u043e\u0427\u0442\u043e  \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043b\u043e\u0441\u044c\u0411\u044e\u0434\u0436\u0435\u0442 \u043f\u043e\u0441\u043b\u04351+1060T1 (15) + T2 (25)202+1030T1 (15) +   T2 (25)\u2212103+100\u0442\u043e\u043b\u044c\u043a\u043e T1 (15)\u2212154+10\u22125\u043d\u0438\u0447\u0435\u0433\u043e\u221255+105\u0442\u043e\u043b\u044c\u043a\u043e T1 (15)\u2212106+100\u0442\u043e\u043b\u044c\u043a\u043e T1   (15)\u221215\u0412\u044b\u0432\u043e\u0434: \u0447\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u0442\u0430\u0439\u043c\u0435\u0440\u043e\u0432 \u0438 \u0447\u0435\u043c \u0442\u044f\u0436\u0435\u043b\u0435\u0435 \u043a\u0430\u0436\u0434\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430, \u0442\u0435\u043c \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u0437\u0430\u043c\u0435\u0442\u043d\u044b \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0438.\u0427\u0442\u043e \u0437\u0430\u0449\u0438\u0449\u0430\u0435\u0442 \u0432\u043a\u043b\u0430\u0434\u043a\u0443 \u043e\u0442 \u0442\u0440\u043e\u0442\u0442\u043b\u0438\u043d\u0433\u0430\u0424\u0430\u043a\u0442\u043e\u0440\u042d\u0444\u0444\u0435\u043a\u0442\u0412\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0430\u0443\u0434\u0438\u043e\u0417\u0430\u0449\u0438\u0442\u0430 \u043e\u0442 \u0438\u043d\u0442\u0435\u043d\u0441\u0438\u0432\u043d\u043e\u0433\u043e \u0442\u0440\u043e\u0442\u0442\u043b\u0438\u043d\u0433\u0430.\u0410\u043a\u0442\u0438\u0432\u043d\u044b\u0439 WebRTC\u0417\u0430\u0449\u0438\u0442\u0430 \u043e\u0442  \u0438\u043d\u0442\u0435\u043d\u0441\u0438\u0432\u043d\u043e\u0433\u043e&#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-480690","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/480690","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=480690"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/480690\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=480690"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=480690"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=480690"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}