{"id":285609,"date":"2017-04-27T15:30:04","date_gmt":"2017-04-27T11:30:04","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=285609"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=285609","title":{"rendered":"\u041a\u0430\u043a \u043c\u044b \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043b\u0438 Twitter Lite"},"content":{"rendered":"<h2>Twitter Lite \u0438 \u0432\u044b\u0441\u043e\u043a\u043e\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u044b\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 React<\/h2>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/c64\/b58\/183\/c64b5818384b4fec9fe4ce0056531aeb.png\"\/><\/p>\n<blockquote><p><i>\u0412\u0437\u0433\u043b\u044f\u0434 \u043d\u0430 \u0442\u043e, \u043a\u0430\u043a \u0443\u0434\u0430\u043b\u044f\u043b\u0438 \u043e\u0431\u044b\u0447\u043d\u044b\u0435 \u0438 \u043d\u0435\u043e\u0431\u044b\u0447\u043d\u044b\u0435 \u0443\u0437\u043a\u0438\u0435 \u043c\u0435\u0441\u0442\u0430 \u0432 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043e\u0434\u043d\u043e\u0433\u043e \u0438\u0437 \u043a\u0440\u0443\u043f\u043d\u0435\u0439\u0448\u0438\u0445 \u0432 \u043c\u0438\u0440\u0435 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u044b\u0445 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 (PWA) \u043d\u0430 React.js \u2014 <a href=\"https:\/\/mobile.twitter.com\/\">Twitter Lite<\/a><\/i><\/p><\/blockquote>\n<p>  \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0431\u044b\u0441\u0442\u0440\u043e\u0433\u043e \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043c\u043d\u043e\u0433\u0438\u0445 \u0446\u0438\u043a\u043b\u043e\u0432 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u0439, \u043a\u0443\u0434\u0430 \u0442\u0440\u0430\u0442\u0438\u0442\u0441\u044f \u0432\u0440\u0435\u043c\u044f. \u041d\u0443\u0436\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u044c, \u043f\u043e\u0447\u0435\u043c\u0443 \u044d\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442, \u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f. \u041a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u043d\u0435 \u0431\u044b\u0432\u0430\u0435\u0442 \u043e\u0434\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u044f. \u041f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u2014 \u044d\u0442\u043e \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u0430\u044f \u0438\u0433\u0440\u0430, \u0433\u0434\u0435 \u043c\u044b \u0438\u0449\u0435\u043c \u0438 \u0438\u0437\u043c\u0435\u0440\u044f\u0435\u043c \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0434\u043b\u044f \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044f. \u0412 Twitter Lite \u0441\u0434\u0435\u043b\u0430\u043d\u043e \u043c\u043d\u043e\u0433\u043e \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0445 \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u0439 \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0441\u0444\u0435\u0440\u0430\u0445: \u043e\u0442 \u043f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0434\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 React (\u0438 \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430), \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0438 \u043c\u043d\u043e\u0433\u043e \u0434\u0440\u0443\u0433\u043e\u0433\u043e. \u0411\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0435, \u043d\u043e \u043e\u043d\u0438 \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u044e\u0442\u0441\u044f, \u0438 \u0432 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u043e\u0434\u043d\u043e \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0438 \u0431\u044b\u0441\u0442\u0440\u044b\u0445 <i><a href=\"https:\/\/developers.google.com\/web\/progressive-web-apps\/\">\u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u044b\u0445 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439<\/a><\/i>.<br \/>  <a name=\"habracut\"><\/a>  <\/p>\n<h3>\u041f\u0435\u0440\u0435\u0434 \u043d\u0430\u0447\u0430\u043b\u043e\u043c \u0447\u0442\u0435\u043d\u0438\u044f<\/h3>\n<p>  \u0415\u0441\u043b\u0438 \u0432\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0447\u0430\u043b\u0438 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f \u0438 \u0440\u0430\u0431\u043e\u0442\u0443 \u043d\u0430\u0434 \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u0435\u043c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0441\u0432\u043e\u0435\u0433\u043e \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0442\u043e \u043d\u0430\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e <a href=\"http:\/\/www.brendangregg.com\/flamegraphs.html\">\u0438\u0437\u0443\u0447\u0438\u0442\u044c, \u043a\u0430\u043a \u0447\u0438\u0442\u0430\u0442\u044c flame-\u0433\u0440\u0430\u0444\u0438\u043a\u0438<\/a>, \u0435\u0441\u043b\u0438 \u0432\u044b \u0435\u0449\u0451 \u044d\u0442\u043e\u0433\u043e \u043d\u0435 \u0437\u043d\u0430\u0435\u0442\u0435.<\/p>\n<p>  \u0412 \u043a\u0430\u0436\u0434\u043e\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u043f\u0440\u0438\u0432\u043e\u0434\u044f\u0442\u0441\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u043e\u0432 \u0441 \u0437\u0430\u043f\u0438\u0441\u044c\u044e \u0442\u0430\u0439\u043c\u043b\u0430\u0439\u043d\u043e\u0432 \u0438\u0437 Chrome Developer Tools. \u0427\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u043f\u043e\u043d\u044f\u0442\u043d\u0435\u0435, \u044f \u0432\u044b\u0434\u0435\u043b\u044f\u044e \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u0439 \u043f\u0430\u0440\u0435 \u0441\u043a\u0440\u0438\u0448\u043e\u0442\u043e\u0432, \u0447\u0442\u043e \u043f\u043b\u043e\u0445\u043e (\u0441\u0432\u0435\u0440\u0445\u0443), \u0430 \u0447\u0442\u043e \u0445\u043e\u0440\u043e\u0448\u043e (\u0441\u043d\u0438\u0437\u0443).<\/p>\n<p>  <i>\u041e\u0441\u043e\u0431\u043e\u0435 \u0437\u0430\u043c\u0435\u0447\u0430\u043d\u0438\u0435 \u043f\u043e \u043f\u043e\u0432\u043e\u0434\u0443 \u0442\u0430\u0439\u043c\u043b\u0430\u0439\u043d\u043e\u0432 \u0438 flame-\u0433\u0440\u0430\u0444\u0438\u043a\u043e\u0432. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043c\u044b \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u0443\u0435\u043c\u0441\u044f \u043d\u0430 \u043e\u0447\u0435\u043d\u044c \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432, \u0442\u043e \u043e\u0431\u044b\u0447\u043d\u043e \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0438\u0445 \u0432 \u0438\u0441\u043a\u0443\u0441\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u043c \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0438: \u0432 5 \u0440\u0430\u0437 \u0437\u0430\u043c\u0435\u0434\u043b\u0435\u043d\u043d\u044b\u043c CPU \u0438 \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435\u043c 3G. \u042d\u0442\u043e \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0431\u043e\u043b\u0435\u0435 \u0440\u0435\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u043d\u043e, \u043d\u043e \u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u043f\u0440\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0447\u0451\u0442\u0447\u0435. \u041f\u0435\u0440\u0435\u043a\u043e\u0441 \u043c\u043e\u0436\u0435\u0442 \u0443\u0441\u0443\u0433\u0443\u0431\u0438\u0442\u044c\u0441\u044f, \u0435\u0441\u043b\u0438 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c <a href=\"https:\/\/facebook.github.io\/react\/blog\/2016\/11\/16\/react-v15.4.0.html#profiling-components-with-chrome-timeline\">\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u0440\u043e\u0444\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f React v15.4.0<\/a>. \u0420\u0435\u0430\u043b\u044c\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0432 \u0442\u0430\u0439\u043c\u043b\u0430\u0439\u043d\u0430\u0445 \u043d\u0430 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0435 \u0431\u0443\u0434\u0443\u0442 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0432\u044b\u0448\u0435, \u0447\u0435\u043c \u0432 \u043d\u0430\u0448\u0438\u0445 \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u044f\u0445.<\/i> <\/p>\n<hr\/>\n<p>  <\/p>\n<h1>\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0434\u043b\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430<\/h1>\n<p>  <\/p>\n<h3>\u0420\u0430\u0437\u0434\u0435\u043b\u044f\u0439\u0442\u0435 \u043a\u043e\u0434 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u043e\u0432<\/h3>\n<p>  Webpack \u043c\u043e\u0449\u0435\u043d, \u043d\u043e \u0442\u0440\u0443\u0434\u0435\u043d \u0432 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0438. \u041d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0443 \u043d\u0430\u0441 \u0431\u044b\u043b\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441 <a href=\"https:\/\/webpack.js.org\/plugins\/commons-chunk-plugin\/\">CommonsChunkPlugin<\/a> \u0438 \u0442\u0435\u043c, \u043a\u0430\u043a \u043e\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u043b \u0441 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u0438\u0437 \u043d\u0430\u0448\u0438\u0445 \u043a\u043e\u043b\u044c\u0446\u0435\u0432\u044b\u0445 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u043a\u043e\u0434\u0430. \u0418\u0437-\u0437\u0430 \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u043b\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u0442\u0440\u0435\u043c\u044f \u0444\u0430\u0439\u043b\u0430\u043c\u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 JavaScript \u043e\u0431\u0449\u0438\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c \u0431\u043e\u043b\u0435\u0435 1\u00a0\u041c\u0411 (420\u00a0\u041a\u0411 gzip \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0435).<\/p>\n<p>  \u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u043e\u0434\u043d\u043e\u0433\u043e \u0438\u043b\u0438 \u0434\u0430\u0436\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043e\u0447\u0435\u043d\u044c \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 JavaScript, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0445 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b, \u2014 \u043e\u0433\u0440\u043e\u043c\u043d\u043e\u0435 \u0443\u0437\u043a\u043e\u0435 \u043c\u0435\u0441\u0442\u043e \u0434\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439, \u043d\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0435\u0435 \u0431\u044b\u0441\u0442\u0440\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0438 \u043d\u0430\u0447\u0430\u0442\u044c \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441 \u0441\u0430\u0439\u0442\u043e\u043c. \u0421 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u0440\u0435\u043c\u044f \u0438\u0445 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u043f\u043e \u0441\u0435\u0442\u0438, \u043d\u043e \u0438 \u0432\u0440\u0435\u043c\u044f \u043f\u0430\u0440\u0441\u0438\u043d\u0433\u0430 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435.<\/p>\n<p>  \u041f\u043e\u0441\u043b\u0435 \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0441\u043f\u043e\u0440\u043e\u0432, \u043c\u044b \u043d\u0430\u043a\u043e\u043d\u0435\u0446-\u0442\u043e \u0441\u043c\u043e\u0433\u043b\u0438 \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u044c CommonsChunk \u043d\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u043a\u0443\u0441\u043a\u0438 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u043e\u0432 (\u043f\u0440\u0438\u043c\u0435\u0440 \u043d\u0438\u0436\u0435). \u042d\u0442\u043e\u0442 \u0434\u0435\u043d\u044c \u043d\u0430\u0441\u0442\u0443\u043f\u0438\u043b, \u043a\u043e\u0433\u0434\u0430 \u0440\u0430\u0437\u0431\u043e\u0440 \u043a\u043e\u0434\u0430 \u0443\u043f\u0430\u043b \u0432 \u043d\u0430\u0448\u0438 \u043f\u043e\u0447\u0442\u043e\u0432\u044b\u0435 \u044f\u0449\u0438\u043a\u0438:<\/p>\n<pre><code class=\"javascript\">const plugins = [   \/\/ extract vendor and webpack's module manifest   new webpack.optimize.CommonsChunkPlugin({     names: [ 'vendor', 'manifest' ],     minChunks: Infinity   }),   \/\/ extract common modules from all the chunks (requires no 'name' property)   new webpack.optimize.CommonsChunkPlugin({     async: true,     children: true,     minChunks: 4   }) ];<\/code><\/pre>\n<p>  <\/p>\n<blockquote><p><i>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0433\u0440\u0430\u043d\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043a\u043e\u0434\u0430 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u043e\u0432. \u0411\u043e\u043b\u0435\u0435 \u0431\u044b\u0441\u0442\u0440\u044b\u0439 \u043f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0439 \u0438 HomeTimeline \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0434\u043e\u0441\u0442\u0438\u0433\u0430\u044e\u0442\u0441\u044f \u0446\u0435\u043d\u043e\u0439 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u044f \u043e\u0431\u0449\u0435\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0440\u0430\u0437\u0431\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 40 \u0441 \u043b\u0438\u0448\u043d\u0438\u043c \u043a\u0443\u0441\u043e\u0447\u043a\u043e\u0432 \u0438 \u0430\u043c\u043e\u0440\u0442\u0438\u0437\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043d\u0430 \u043f\u0440\u043e\u0442\u044f\u0436\u0435\u043d\u0438\u0438 \u0432\u0441\u0435\u0439 \u0441\u0435\u0441\u0441\u0438\u0438. \u2014 <a href=\"https:\/\/medium.com\/@necolas\">\u041d\u0438\u043a\u043e\u043b\u0430\u0441 \u0413\u0430\u043b\u043b\u0430\u0445\u0435\u0440<\/a><\/i><\/p><\/blockquote>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/584\/ea2\/b02\/584ea2b0229640989c28d5afcdb13f4e.png\"\/><br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/ad8\/128\/bcd\/ad8128bcdc4e68fcbb485359317b19b6.png\"\/><br \/>  <font color=\"gray\">\u0422\u0430\u0439\u043c\u043b\u0430\u0439\u043d\u044b \u0434\u043e (\u0441\u0432\u0435\u0440\u0445\u0443) \u0438 \u043f\u043e\u0441\u043b\u0435 (\u0441\u043d\u0438\u0437\u0443) \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043a\u043e\u0434\u0430<\/font> <\/p>\n<p>  \u041d\u0430\u0448\u0430 \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0430\u044f \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b\u0430 \u0431\u043e\u043b\u0435\u0435 5 \u0441\u0435\u043a\u0443\u043d\u0434 \u0434\u043b\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u043f\u0430\u043a\u0435\u0442\u0430, \u0430 \u043f\u043e\u0441\u043b\u0435 \u0440\u0430\u0437\u0431\u0438\u0435\u043d\u0438\u044f \u043d\u0430 \u043a\u0443\u0441\u043a\u0438 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u043e\u0432 \u0432\u0440\u0435\u043c\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0435\u0434\u0432\u0430 \u0434\u043e\u0441\u0442\u0438\u0433\u0430\u0435\u0442 3 \u0441\u0435\u043a\u0443\u043d\u0434 (\u0432 \u0441\u0438\u043c\u0443\u043b\u044f\u0446\u0438\u0438 \u0441\u0435\u0442\u0438 3G).<\/p>\n<p>  \u0422\u0430\u043a\u043e\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043c\u044b \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u0432 \u0441\u0430\u043c\u043e\u043c \u043d\u0430\u0447\u0430\u043b\u0435 \u0440\u0430\u0431\u043e\u0442 \u043f\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u043d\u043e \u043e\u0434\u043d\u043e-\u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0441\u0440\u0430\u0437\u0443 \u043f\u0440\u0438\u0432\u0435\u043b\u043e \u043a \u043a\u0430\u0440\u0434\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432 \u0432 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0435 \u0434\u043b\u044f \u0430\u0443\u0434\u0438\u0442\u0430 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 Google <a href=\"https:\/\/developers.google.com\/web\/tools\/lighthouse\/\">Lighthouse<\/a>:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/0e1\/1cd\/b51\/0e11cdb51d2ae716b2dcc1a6405c0fe2.png\"\/><br \/>  <font color=\"gray\">\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0432 Lighthouse \u0441\u0430\u0439\u0442\u0430 \u0434\u043e (\u0441\u043b\u0435\u0432\u0430) \u0438 \u043f\u043e\u0441\u043b\u0435 (\u0441\u043f\u0440\u0430\u0432\u0430) \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438<\/font> <\/p>\n<hr\/>\n<p>  <\/p>\n<h3>\u0418\u0437\u0431\u0435\u0433\u0430\u0439\u0442\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043e\u0437\u0434\u0430\u044e\u0442 \u043f\u043e\u0434\u0442\u043e\u0440\u043c\u0430\u0436\u0438\u0432\u0430\u043d\u0438\u044f<\/h3>\n<p>  \u0412 \u0442\u0435\u0447\u0435\u043d\u0438\u0435 \u043c\u043d\u043e\u0433\u0438\u0445 \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0439 <a href=\"http:\/\/itsze.ro\/blog\/2017\/04\/09\/infinite-list-and-react.html\">\u0442\u0430\u0439\u043c\u043b\u0430\u0439\u043d\u043e\u0432 \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0439 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438<\/a> \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u0440\u0430\u0437\u043d\u044b\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u0434\u043b\u044f \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438 \u2014 \u044d\u0442\u043e \u043d\u0443\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438\u043d\u044f\u0442\u044c \u0440\u0435\u0448\u0435\u043d\u0438\u0435, \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0442\u044c \u043b\u0438 API \u0434\u043b\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0442\u0432\u0438\u0442\u043e\u0432. \u0414\u043e \u043d\u0435\u0434\u0430\u0432\u043d\u0435\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 <a href=\"https:\/\/github.com\/brigade\/react-waypoint\">react-waypoint<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u043f\u043e\u043b\u043d\u0435 \u043d\u0430\u0441 \u0443\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u043b. \u041e\u0434\u043d\u0430\u043a\u043e \u043e\u043d \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0431\u044b\u0441\u0442\u0440 \u0434\u043b\u044f \u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u044f \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0439 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043e\u0434\u043d\u043e\u0433\u043e \u0438\u0437 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p>  \u0422\u043e\u0447\u043a\u0438 (waypoints) \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u044e\u0442 \u043c\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043d\u044b\u0445 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0435\u0439 \u043f\u043e \u0432\u044b\u0441\u043e\u0442\u0435, \u0448\u0438\u0440\u0438\u043d\u0435 \u0438 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0447\u0442\u043e\u0431\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0442\u0435\u043a\u0443\u0449\u0443\u044e \u043f\u043e\u0437\u0438\u0446\u0438\u044e \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438, \u043a\u0430\u043a \u0434\u0430\u043b\u0435\u043a\u043e \u0432\u044b \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0435\u0441\u044c \u043e\u0442 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043a\u0440\u0430\u044f, \u0432 \u043a\u0430\u043a\u043e\u043c \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442\u0435 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0443. \u0412\u0441\u044f \u044d\u0442\u0430 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043f\u043e\u043b\u0435\u0437\u043d\u0430, \u043d\u043e \u043e\u043d\u0430 \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438 \u0438 \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u043e\u0440\u043e\u0433\u043e \u043e\u0431\u0445\u043e\u0434\u0438\u0442\u0441\u044f: \u044d\u0442\u0438 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0442 \u043f\u043e\u0434\u0442\u043e\u0440\u043c\u0430\u0436\u0438\u0432\u0430\u043d\u0438\u044f (jank) \u2014 \u0438 \u043c\u043d\u043e\u0433\u043e.<\/p>\n<p>  \u041d\u043e \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u044c, \u0447\u0442\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438\u043c\u0435\u044e\u0442 \u0432 \u0432\u0438\u0434\u0443, \u043a\u043e\u0433\u0434\u0430 \u0438\u043d\u0444\u043e\u0440\u043c\u0438\u0440\u0443\u044e\u0442 \u043d\u0430\u0441 \u043e \u043f\u043e\u0434\u0442\u043e\u0440\u043c\u0430\u0436\u0438\u0432\u0430\u043d\u0438\u044f\u0445.<\/p>\n<blockquote><p><i>\u0411\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u044e\u0442 \u044d\u043a\u0440\u0430\u043d 60 \u0440\u0430\u0437 \u0432 \u0441\u0435\u043a\u0443\u043d\u0434\u0443. \u0415\u0441\u043b\u0438 \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u0435\u0442\u0441\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0438\u043b\u0438 \u044d\u0444\u0444\u0435\u043a\u0442 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430 \u0438\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u0440\u043e\u043a\u0440\u0443\u0447\u0438\u0432\u0430\u0435\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u0442\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0434\u0441\u0442\u0440\u043e\u0438\u0442\u044c\u0441\u044f \u043f\u043e\u0434 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0438 \u0432\u044b\u0434\u0430\u0432\u0430\u0442\u044c \u043e\u0434\u043d\u0443 \u043d\u043e\u0432\u0443\u044e \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443, \u0438\u043b\u0438 \u0444\u0440\u0435\u0439\u043c, \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u0435 \u0438\u0437 \u044d\u0442\u0438\u0445 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0439 \u044d\u043a\u0440\u0430\u043d\u0430.<\/p>\n<p>  \u0423 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0438\u0437 \u044d\u0442\u0438\u0445 \u0444\u0440\u0435\u0439\u043c\u043e\u0432 \u0431\u044e\u0434\u0436\u0435\u0442 \u0447\u0443\u0442\u044c \u0431\u043e\u043b\u0435\u0435 16\u00a0\u043c\u0441 (1\u00a0\u0441\u0435\u043a\u0443\u043d\u0434\u0430\u00a0\/\u00a060\u00a0= 16,66\u00a0\u043c\u0441). \u041e\u0434\u043d\u0430\u043a\u043e \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443 \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0437\u0430\u0434\u0430\u0447\u0438, \u0442\u0430\u043a \u0447\u0442\u043e \u0432\u0441\u044f \u0432\u0430\u0448\u0430 \u0440\u0430\u0431\u043e\u0442\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0443\u043b\u043e\u0436\u0438\u0442\u044c\u0441\u044f \u0432 10\u00a0\u043c\u0441. \u0415\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u0443\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u0442\u0435\u0441\u044c \u0432 \u0431\u044e\u0434\u0436\u0435\u0442, \u0442\u043e \u0447\u0430\u0441\u0442\u043e\u0442\u0430 \u0432\u044b\u0434\u0430\u0447\u0438 \u043a\u0430\u0434\u0440\u043e\u0432 \u0441\u043d\u0438\u0436\u0430\u0435\u0442\u0441\u044f, \u0438 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0434\u0432\u0438\u0433\u0430\u0435\u0442\u0441\u044f \u0440\u044b\u0432\u043a\u0430\u043c\u0438 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435. \u042d\u0442\u043e \u0447\u0430\u0441\u0442\u043e \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u043f\u043e\u0434\u0442\u043e\u0440\u043c\u0430\u0436\u0438\u0432\u0430\u043d\u0438\u044f\u043c\u0438 (jank), \u0438 \u043e\u043d\u043e \u043e\u0442\u0440\u0438\u0446\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u043e \u0440\u0430\u0431\u043e\u0442\u044b \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. \u2014 <a href=\"https:\/\/developers.google.com\/web\/fundamentals\/performance\/rendering\/\">\u041f\u043e\u043b \u041b\u044c\u044e\u0438\u0441 \u0432 \u00ab\u041f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430\u00bb<\/a><\/i><\/p><\/blockquote>\n<p>  \u0421\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c \u043c\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 \u043d\u043e\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0439 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438 \u043f\u043e\u0434 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c <i>VirtualScroller<\/i>. \u0421 \u044d\u0442\u0438\u043c \u043d\u043e\u0432\u044b\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c \u043c\u044b \u0442\u043e\u0447\u043d\u043e \u0437\u043d\u0430\u043b\u0438, \u043a\u0430\u043a\u043e\u0439 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442 \u043b\u0435\u043d\u0442\u044b \u0442\u0432\u0438\u0442\u043e\u0432 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u0441\u044f \u0432 \u0442\u0430\u0439\u043c\u043b\u0430\u0439\u043d\u0435 \u0432 \u043a\u0430\u0436\u0434\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u0442\u0430\u043a \u0447\u0442\u043e \u0438\u0441\u0447\u0435\u0437\u043b\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u044c \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0451\u043c\u043a\u0438\u0435 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/b1a\/65b\/680\/b1a65b6803919a0d6c971db558e2e519.png\"\/><br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/604\/3e4\/dc0\/6043e4dc0b416dcb9a51099865790442.png\"\/><br \/>  <font color=\"gray\">\u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c, \u043d\u043e \u0440\u0430\u043d\u044c\u0448\u0435 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438 (\u0441\u0432\u0435\u0440\u0445\u0443) \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u043b\u0438 \u043f\u043e\u0434\u0442\u043e\u0440\u043c\u0430\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u043b\u0430\u0441\u044c \u0432\u044b\u0441\u043e\u0442\u0430 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u0422\u0435\u043f\u0435\u0440\u044c (\u0441\u043d\u0438\u0437\u0443) \u043d\u0435 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u043f\u043e\u0434\u0440\u0430\u0433\u0438\u0432\u0430\u043d\u0438\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0438\u043b\u0438 \u043f\u0430\u0443\u0437, \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0430 \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0430 \u0432\u044b\u0441\u043e\u043a\u043e\u0439 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438<\/font> <\/p>\n<p>  \u041f\u043e\u0441\u043b\u0435 \u043e\u0442\u043a\u0430\u0437\u0430 \u043e\u0442 \u0432\u044b\u0437\u043e\u0432\u043e\u0432, \u0438\u0437-\u0437\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u043b\u0438 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u043e\u0434\u0442\u043e\u0440\u043c\u0430\u0436\u0438\u0432\u0430\u043d\u0438\u044f, \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0430 \u043b\u0435\u043d\u0442\u044b \u0442\u0432\u0438\u0442\u043e\u0432 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0438 \u0447\u0443\u0432\u0441\u0442\u0432\u0443\u0435\u0442\u0441\u044f \u043f\u043b\u0430\u0432\u043d\u043e\u0439 \u0438 \u0446\u0435\u043b\u044c\u043d\u043e\u0439, \u0447\u0442\u043e \u0434\u0430\u0451\u0442 \u0431\u043e\u043b\u0435\u0435 \u0431\u043e\u0433\u0430\u0442\u043e\u0435, \u043f\u043e\u0447\u0442\u0438 \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0435 \u0432\u043f\u0435\u0447\u0430\u0442\u043b\u0435\u043d\u0438\u0435 \u043e\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0425\u043e\u0442\u044f \u0432\u0441\u0435\u0433\u0434\u0430 \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u043c\u0435\u0441\u0442\u043e \u0434\u043b\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438, \u044d\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0441\u0442\u0430\u043b\u043e \u0437\u0430\u043c\u0435\u0442\u043d\u044b\u043c \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u0435\u043c \u0432 \u043f\u043b\u0430\u0432\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438 \u043f\u043e \u043b\u0435\u043d\u0442\u0430\u043c. \u0425\u043e\u0440\u043e\u0448\u0435\u0435 \u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0432\u0430\u0436\u043d\u0430 \u043a\u0430\u0436\u0434\u0430\u044f \u043c\u0435\u043b\u043e\u0447\u044c, \u0435\u0441\u043b\u0438 \u0440\u0435\u0447\u044c \u0438\u0434\u0451\u0442 \u043e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438.<\/p>\n<hr\/>\n<p>  <\/p>\n<h3>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u043f\u043e\u043c\u0435\u043d\u044c\u0448\u0435<\/h3>\n<p>  \u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044e \u0442\u0440\u0430\u0444\u0438\u043a\u0430 \u0434\u043b\u044f Twitter Lite \u043c\u044b \u043d\u0430\u0447\u0430\u043b\u0438 \u0441 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0433\u0440\u0443\u043f\u043f \u043d\u0430\u0434 \u043d\u043e\u0432\u044b\u043c\u0438 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430\u043c\u0438 \u043c\u0435\u043d\u044c\u0448\u0435\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0442\u0441\u044f \u0441 \u043d\u0430\u0448\u0438\u0445 <a href=\"https:\/\/en.wikipedia.org\/wiki\/Content_delivery_network\">CDN<\/a>. \u0412\u044b\u044f\u0441\u043d\u0438\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u0441 \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u0435\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c (\u043a\u0430\u043a \u043f\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0443, \u0442\u0430\u043a \u0438 \u043f\u043e \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0443), \u0438 \u043c\u044b \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u043b\u0438 \u0442\u0440\u0430\u0444\u0438\u043a, \u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u043b\u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438 \u043b\u0435\u043d\u0442\u044b \u0442\u0432\u0438\u0442\u043e\u0432 \u0441 \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439.<\/p>\n<p>  \u0427\u0442\u043e\u0431\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c, \u043a\u0430\u043a\u043e\u0439 \u044d\u0444\u0444\u0435\u043a\u0442 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u043d\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c, \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 \u0442\u0430\u0439\u043c\u043b\u0430\u0439\u043d <i>Raster <\/i> \u0432 Chrome Developer Tools. \u0414\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0434\u0435\u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043e\u0434\u043d\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0437\u0430\u043d\u0438\u043c\u0430\u043b\u043e 300\u00a0\u043c\u0441 \u0438\u043b\u0438 \u0431\u043e\u043b\u044c\u0448\u0435, \u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u0432 \u0432\u0435\u0440\u0445\u043d\u0435\u043c \u0438\u0437 \u0434\u0432\u0443\u0445 \u0442\u0430\u0439\u043c\u043b\u0430\u0439\u043d\u043e\u0432 \u0432\u043d\u0438\u0437\u0443. \u042d\u0442\u043e \u043e\u0442\u0440\u0435\u0437\u043e\u043a \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043c\u0435\u0436\u0434\u0443 \u0442\u0435\u043c, \u043a\u043e\u0433\u0434\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0441\u043a\u0430\u0447\u0430\u043b\u043e\u0441\u044c, \u0438 \u0442\u0435\u043c, \u043a\u043e\u0433\u0434\u0430 \u043e\u043d\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u0441\u044f \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435.<\/p>\n<p>  \u0415\u0441\u043b\u0438 \u0432\u044b \u0441\u0442\u0440\u0435\u043c\u0438\u0442\u0435\u0441\u044c \u043a \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0443 60 \u043a\u0430\u0434\u0440\u043e\u0432 \u0432 \u0441\u0435\u043a\u0443\u043d\u0434\u0443 \u043f\u0440\u0438 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0442\u043e \u043d\u0443\u0436\u043d\u043e \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0432\u0442\u0438\u0441\u043d\u0443\u0442\u044c \u0432 16,667\u00a0\u043c\u0441 (1 \u0444\u0440\u0435\u0439\u043c). \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043e\u0434\u043d\u043e\u0439 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 18 \u0444\u0440\u0435\u0439\u043c\u043e\u0432, \u0447\u0442\u043e \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043c\u043d\u043e\u0433\u043e. \u041f\u043e \u043f\u043e\u0432\u043e\u0434\u0443 \u043b\u0435\u043d\u0442\u044b \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c \u0435\u0449\u0451 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435: \u043a\u0430\u043a \u0432\u0438\u0434\u043d\u043e, \u0442\u0430\u0439\u043c\u043b\u0430\u0439\u043d <i>Main<\/i> \u043f\u043e\u0447\u0442\u0438 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0437\u0430\u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u0430 \u043e\u0442 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0435\u043d\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b, \u043f\u043e\u043a\u0430 \u043d\u0435 \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u0442\u0441\u044f \u0434\u0435\u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f (\u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u0431\u0435\u043b\u044b\u0435 \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043a\u0438). \u042d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u0437\u0434\u0435\u0441\u044c \u0431\u0443\u0442\u044b\u043b\u043e\u0447\u043d\u043e\u0435 \u0433\u043e\u0440\u043b\u044b\u0448\u043a\u043e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438!<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/186\/7c3\/efa\/1867c3efa4789a5f4150583bcff0215f.png\"\/><br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/eb1\/f79\/668\/eb1f7966893a159130601fbd3fd2ef63.png\"\/><br \/>  <font color=\"gray\">\u0411\u043e\u043b\u044c\u0448\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f (\u0441\u0432\u0435\u0440\u0445\u0443) \u043c\u043e\u0433\u0443\u0442 \u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043f\u043e\u0442\u043e\u043a \u0432 \u0442\u0435\u0447\u0435\u043d\u0438\u0435 18 \u0444\u0440\u0435\u0439\u043c\u043e\u0432. \u041c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f (\u0441\u043d\u0438\u0437\u0443) \u043e\u0442\u043d\u0438\u043c\u0430\u044e\u0442 \u0432\u0441\u0435\u0433\u043e 1 \u0444\u0440\u0435\u0439\u043c<\/font> <\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u043b\u0438 \u0440\u0430\u0437\u043c\u0435\u0440 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a, \u0434\u0435\u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u0430\u043c\u044b\u0445 \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0432\u0441\u0435\u0433\u043e \u0447\u0443\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u043e\u0434\u043d\u043e\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0430.<\/p>\n<hr\/>\n<p>  <\/p>\n<h1>\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f React<\/h1>\n<p>  <\/p>\n<h3>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043c\u0435\u0442\u043e\u0434 <a href=\"https:\/\/facebook.github.io\/react\/docs\/optimizing-performance.html#shouldcomponentupdate-in-action\">shouldComponentUpdate<\/a><\/h3>\n<p>  \u041f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0439 \u0441\u043e\u0432\u0435\u0442 \u0434\u043b\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043d\u0430 React \u2014 \u044d\u0442\u043e <a href=\"https:\/\/facebook.github.io\/react\/docs\/optimizing-performance.html#shouldcomponentupdate-in-action\">\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434 shouldComponentUpdate<\/a>. \u041c\u044b \u043f\u044b\u0442\u0430\u043b\u0438\u0441\u044c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u0433\u0434\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0430 \u0438\u043d\u043e\u0433\u0434\u0430 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u044f\u043b\u0438 \u0441\u0435\u0440\u044c\u0451\u0437\u043d\u044b\u0435 \u043b\u044f\u043f\u044b.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/208\/e4c\/704\/208e4c704e296afbb1b58c4b25804d91.gif\"\/><br \/>  <font color=\"gray\">\u0415\u0441\u043b\u0438 \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043b\u0430\u0439\u043a \u043f\u0435\u0440\u0432\u043e\u043c\u0443 \u0442\u0432\u0438\u0442\u0443, \u0442\u043e \u0438 \u043e\u043d, \u0438 \u0432\u0441\u0451 \u043e\u0431\u0441\u0443\u0436\u0434\u0435\u043d\u0438\u044f \u0432\u043d\u0438\u0437\u0443 \u0437\u0430\u043d\u043e\u0432\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043b\u0438\u0441\u044c!<\/font><\/p>\n<p>  \u041f\u0440\u0438\u043c\u0435\u0440 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u0441\u0435\u0433\u0434\u0430 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f. \u0415\u0441\u043b\u0438 \u043d\u0430\u0436\u0430\u0442\u044c \u043d\u0430 \u0437\u043d\u0430\u0447\u043e\u043a \u0441\u0435\u0440\u0434\u0435\u0447\u043a\u0430 \u043f\u043e\u0434 \u0442\u0432\u0438\u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043b\u0430\u0439\u043a \u0432 \u0441\u0432\u043e\u0435\u0439 \u043b\u0435\u043d\u0442\u0435, \u0442\u043e \u043b\u044e\u0431\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>Conversation<\/code> \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u0442\u043e\u0436\u0435 \u043e\u0442\u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044f \u0437\u0430\u043d\u043e\u0432\u043e. \u0412 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c \u0437\u0435\u043b\u0451\u043d\u044b\u0435 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442, \u0433\u0434\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0437\u0430\u043d\u043e\u0432\u043e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442 \u0437\u0430\u043b\u0438\u0432\u043a\u0443 \u0446\u0432\u0435\u0442\u043e\u043c, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043c\u044b \u0437\u0430\u0441\u0442\u0430\u0432\u0438\u043b\u0438 \u0437\u0430\u043d\u043e\u0432\u043e \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c\u0441\u044f \u0432\u0435\u0441\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>Conversation<\/code> \u0441\u043d\u0438\u0437\u0443 \u043e\u0442 \u0442\u0432\u0438\u0442\u0430.<\/p>\n<p>  \u041d\u0438\u0436\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u044b \u0434\u0432\u0430 flame-\u0433\u0440\u0430\u0444\u0438\u043a\u0430 \u044d\u0442\u043e\u0433\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f. \u0411\u0435\u0437 <code>shouldComponentUpdate<\/code> (\u0441\u0432\u0435\u0440\u0445\u0443) \u0432\u0441\u0451 \u0434\u0435\u0440\u0435\u0432\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0438 \u0437\u0430\u043d\u043e\u0432\u043e \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u043e \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0446\u0432\u0435\u0442 \u0441\u0435\u0440\u0434\u0435\u0447\u043a\u0430 \u0433\u0434\u0435-\u0442\u043e \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435. \u041f\u043e\u0441\u043b\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f <code>shouldComponentUpdate<\/code> (\u0441\u043d\u0438\u0437\u0443) \u043c\u044b \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0442\u0438\u043b\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0446\u0435\u043b\u043e\u0433\u043e \u0434\u0435\u0440\u0435\u0432\u0430 \u0438 \u0441\u044d\u043a\u043e\u043d\u043e\u043c\u0438\u043b\u0438 \u0446\u0435\u043b\u0443\u044e 0,1\u00a0\u0441\u0435\u043a\u0443\u043d\u0434\u044b \u043d\u0435\u043d\u0443\u0436\u043d\u043e\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/50e\/a77\/856\/50ea77856001a532f5f0ffac6a6b9945.png\"\/><br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/02b\/9a2\/c34\/02b9a2c3471c9e0aac3bfb20311ef58e.png\"\/><br \/>  <font color=\"gray\">\u0420\u0430\u043d\u044c\u0448\u0435 (\u0432\u0432\u0435\u0440\u0445\u0443) \u043f\u0440\u0438 \u043f\u043e\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0435 \u043b\u0430\u0439\u043a\u0430 \u043f\u043e\u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0435\u043c\u0443 \u0442\u0432\u0438\u0442\u0443 \u0432\u0441\u0451 \u043e\u0431\u0441\u0443\u0436\u0434\u0435\u043d\u0438\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u043b\u043e\u0441\u044c \u0438 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u043b\u043e\u0441\u044c \u0437\u0430\u043d\u043e\u0432\u043e. \u041f\u043e\u0441\u043b\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043b\u043e\u0433\u0438\u043a\u0438 shouldComponentUpdate (\u0432\u043d\u0438\u0437\u0443) \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u044b \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u0442\u0440\u0430\u0442\u044f\u0442 \u0446\u0438\u043a\u043b\u044b CPU<\/font> <\/p>\n<hr\/>\n<p>  <\/p>\n<h3>\u041f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u0442\u0435 \u043d\u0435\u043d\u0443\u0436\u043d\u0443\u044e \u0440\u0430\u0431\u043e\u0442\u0443 \u0432 componentDidMount<\/h3>\n<p>  \u042d\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u044b\u043c, \u043d\u043e \u043b\u0435\u0433\u043a\u043e \u0437\u0430\u0431\u044b\u0442\u044c \u043e \u0442\u0430\u043a\u0438\u0445 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0445 \u0432\u0435\u0449\u0430\u0445, \u043a\u043e\u0433\u0434\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0448\u044c \u043a\u0440\u0443\u043f\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432\u0440\u043e\u0434\u0435 Twitter Lite.<\/p>\n<p>  \u041c\u044b \u0437\u0430\u043c\u0435\u0442\u0438\u043b\u0438, \u0447\u0442\u043e \u0432\u043e \u043c\u043d\u043e\u0433\u0438\u0445 \u043c\u0435\u0441\u0442\u0430\u0445 \u043a\u043e\u0434\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u044f\u0442\u0441\u044f \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0451\u043c\u043a\u0438\u0435 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u0440\u0430\u0434\u0438 \u0430\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0438 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043c\u0435\u0442\u043e\u0434\u0430 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430 \u0432 React, \u0442\u043e \u0435\u0441\u0442\u044c <a href=\"https:\/\/facebook.github.io\/react\/docs\/react-component.html#componentwillmount\">componentWillMount<\/a>. \u041a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043d\u0435\u043d\u0430\u0434\u043e\u043b\u0433\u043e \u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u043b\u0430\u0441\u044c \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. 20\u00a0\u043c\u0441 \u0437\u0434\u0435\u0441\u044c, 90\u00a0\u043c\u0441 \u0442\u0430\u043c, \u0432\u0441\u0451 \u0431\u044b\u0441\u0442\u0440\u043e \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u043b\u043e\u0441\u044c. \u041f\u043e\u043d\u0430\u0447\u0430\u043b\u0443 \u043c\u044b \u043f\u044b\u0442\u0430\u043b\u0438\u0441\u044c \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u0435\u0440\u0432\u0438\u0441\u0443 \u0430\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0438 \u0432 <code>componentWillMount<\/code> \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e, \u043a\u0430\u043a\u0438\u0435 \u0442\u0432\u0438\u0442\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c\u0441\u044f, \u0435\u0449\u0451 \u0434\u043e \u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 (\u0432\u0435\u0440\u0445\u043d\u0438\u0439 \u0438\u0437 \u0434\u0432\u0443\u0445 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u043e\u0432).<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/95e\/d3f\/418\/95ed3f41862a6c8e51a5306bb03f0889.png\"\/><br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/898\/605\/ffc\/898605ffc008215b6c7d4bf47d11a1f8.png\"\/><br \/>  <font color=\"gray\">\u041f\u0435\u0440\u0435\u043d\u0435\u0441\u044f \u043d\u0435\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u0447\u0430\u0441\u0442\u0438 \u043a\u043e\u0434\u0430 \u0438\u0437 `componentWillMount` \u0432 `componentDidMount`, \u043c\u044b \u0441\u044d\u043a\u043e\u043d\u043e\u043c\u0438\u043b\u0438 \u043c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0442\u0432\u0438\u0442\u043e\u0432 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435<\/font> <\/p>\n<p>  \u041f\u0435\u0440\u0435\u043d\u0435\u0441\u044f \u044d\u0442\u0438 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u0438 \u0441\u0435\u0442\u0435\u0432\u044b\u0435 \u0432\u044b\u0437\u043e\u0432\u044b \u0432 \u043c\u0435\u0442\u043e\u0434 <code>componentDidMount<\/code> \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 React, \u043c\u044b \u0440\u0430\u0437\u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u043b\u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043f\u043e\u0442\u043e\u043a \u0438 \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u043b\u0438 \u043f\u043e\u0434\u0442\u043e\u0440\u043c\u0430\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 (\u043d\u0438\u0436\u043d\u0438\u0439 \u0442\u0430\u0439\u043c\u043b\u0430\u0439\u043d).<\/p>\n<hr\/>\n<p>  <\/p>\n<h3>\u0418\u0437\u0431\u0435\u0433\u0430\u0439\u0442\u0435 dangerouslySetInnerHTML<\/h3>\n<p>  \u0412 Twitter Lite \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043f\u0438\u043a\u0442\u043e\u0433\u0440\u0430\u043c\u043c\u044b SVG, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u044d\u0442\u043e \u0441\u0430\u043c\u044b\u0439 \u043a\u043e\u043c\u043f\u0430\u043a\u0442\u043d\u044b\u0439 \u0438 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u0435\u043c\u044b\u0439 \u0438\u0437 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0445 \u0444\u043e\u0440\u043c\u0430\u0442\u043e\u0432. \u041a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u0432 \u0441\u0442\u0430\u0440\u044b\u0445 \u0432\u0435\u0440\u0441\u0438\u044f\u0445 React \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 SVG \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u043b\u0438\u0441\u044c \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438\u0437 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u041f\u043e\u044d\u0442\u043e\u043c\u0443, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0447\u0430\u043b\u0438 \u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0442\u043e \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>dangerouslySetInnerHTML<\/code>, \u0447\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0438\u043a\u0442\u043e\u0433\u0440\u0430\u043c\u043c\u044b SVG \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 React.<\/p>\n<p>  \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u0430\u0448\u0430 \u043f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0430\u044f \u043f\u0438\u043a\u0442\u043e\u0433\u0440\u0430\u043c\u043c\u0430 \u0441\u0435\u0440\u0434\u0435\u0447\u043a\u0430 HeartIcon \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a:<\/p>\n<pre><code class=\"javascript\">const HeartIcon = (props) =&gt; React.createElement('svg', {   ...props,   dangerouslySetInnerHTML: { __html: '&lt;g&gt;&lt;path d=&quot;M38.723 12c-7.187 0-11.16 7.306-11.723 8.131C26.437 19.306 22.504 12 15.277 12 8.791 12 3.533 18.163 3.533 24.647 3.533 39.964 21.891 55.907 27 56c5.109-.093 23.467-16.036 23.467-31.353C50.467 18.163 45.209 12 38.723 12z&quot;&gt;&lt;\/path&gt;&lt;\/g&gt;' },   viewBox: '0 0 54 72' });<\/code><\/pre>\n<p>  \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 <code>dangerouslySetInnerHTML<\/code> <a href=\"http:\/\/reactjs.cn\/react\/tips\/dangerously-set-inner-html.html\">\u043d\u0435 \u043f\u043e\u043e\u0449\u0440\u044f\u0435\u0442\u0441\u044f<\/a> \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u0438, \u0438 \u043a \u0442\u043e\u043c\u0443 \u0436\u0435 \u044d\u0442\u043e \u0437\u0430\u043c\u0435\u0434\u043b\u044f\u0435\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u044b \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/47b\/dd5\/2d6\/47bdd52d6c42b255a3c328be088cd95d.png\"\/><br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/503\/61a\/331\/50361a3317473fe008a003876c1121e9.png\"\/><br \/>  <font color=\"gray\">\u0420\u0430\u043d\u044c\u0448\u0435 (\u0432\u0432\u0435\u0440\u0445\u0443) \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b\u043e\u0441\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e 20\u00a0\u043c\u0441 \u0434\u043b\u044f \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0447\u0435\u0442\u044b\u0440\u0451\u0445 \u043f\u0438\u043a\u0442\u043e\u0433\u0440\u0430\u043c\u043c SVG, \u0430 \u0441\u0435\u0439\u0447\u0430\u0441 (\u0432\u043d\u0438\u0437\u0443) \u044d\u0442\u043e \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u043e\u043a\u043e\u043b\u043e 8\u00a0\u043c\u0441<\/font> <\/p>\n<p>  \u0410\u043d\u0430\u043b\u0438\u0437 flame-\u0433\u0440\u0430\u0444\u0438\u043a\u043e\u0432 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442, \u0447\u0442\u043e \u0432 \u043f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b\u043e\u0441\u044c \u043e\u043a\u043e\u043b\u043e 20\u00a0\u043c\u0441 \u043d\u0430 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e\u043c \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0435 \u0434\u043b\u044f \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0447\u0435\u0442\u044b\u0440\u0451\u0445 \u043f\u0438\u043a\u0442\u043e\u0433\u0440\u0430\u043c\u043c SVG \u0432\u043d\u0438\u0437\u0443 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0442\u0432\u0438\u0442\u0430. \u041a\u0430\u0436\u0435\u0442\u0441\u044f \u043d\u0435\u043c\u043d\u043e\u0433\u043e, \u043d\u043e \u0442\u0430\u043a\u0438\u0435 \u043f\u0438\u043a\u0442\u043e\u0433\u0440\u0430\u043c\u043c\u044b \u043c\u043e\u043d\u0442\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0432 \u0431\u043e\u043b\u044c\u0448\u043e\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0435 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438 \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0439 \u043b\u0435\u043d\u0442\u044b \u0442\u0432\u0438\u0442\u043e\u0432 \u2014 \u0438 \u043c\u044b \u043f\u043e\u043d\u044f\u043b\u0438, \u0447\u0442\u043e \u044d\u0442\u043e \u0433\u0438\u0433\u0430\u043d\u0442\u0441\u043a\u0438\u0435 \u043f\u043e\u0442\u0435\u0440\u0438 \u0432\u0440\u0435\u043c\u0435\u043d\u0438.<\/p>\n<p>  \u041a\u043e\u0433\u0434\u0430 \u0432 React v15 \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0430 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 SVG, \u043c\u044b \u0440\u0435\u0448\u0438\u043b\u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u0447\u0442\u043e \u0431\u0443\u0434\u0435\u0442, \u0435\u0441\u043b\u0438 \u043e\u0442\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u043e\u0442 <code>dangerouslySetInnerHTML<\/code>. \u041a\u0430\u043a \u0432\u0438\u0434\u043d\u043e \u043d\u0430 \u0432\u0442\u043e\u0440\u043e\u043c flame-\u0433\u0440\u0430\u0444\u0438\u043a\u0435 (\u043d\u0438\u0436\u043d\u0438\u0439 \u0438\u0437 \u0432\u0435\u0440\u0445\u043d\u0435\u0439 \u043f\u0430\u0440\u044b \u0433\u0440\u0430\u0444\u0438\u043a\u043e\u0432), \u043c\u044b \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u043c \u0432 \u0441\u0440\u0435\u0434\u043d\u0435\u043c <b>60%<\/b> \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u043d\u0430\u0431\u043e\u0440 \u043f\u0438\u043a\u0442\u043e\u0433\u0440\u0430\u043c\u043c!<\/p>\n<p>  \u0421\u0435\u0439\u0447\u0430\u0441 \u043d\u0430\u0448\u0438 \u043f\u0438\u043a\u0442\u043e\u0433\u0440\u0430\u043c\u043c\u044b SVG \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0441\u043e\u0431\u043e\u0439 \u043f\u0440\u043e\u0441\u0442\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0431\u0435\u0437 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f. \u041e\u043d\u0438 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 <i>\u00ab\u043e\u043f\u0430\u0441\u043d\u044b\u0435\u00bb<\/i> \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438 \u043c\u043e\u043d\u0442\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0432 \u0441\u0440\u0435\u0434\u043d\u0435\u043c \u043d\u0430 60% \u0431\u044b\u0441\u0442\u0440\u0435\u0435. \u0412\u044b\u0433\u043b\u044f\u0434\u044f\u0442 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a:<\/p>\n<pre><code class=\"javascript\">const HeartIcon = (props = {}) =&gt; (   &lt;svg {...props} viewBox='0 0 ${width} ${height}'&gt;     &lt;g&gt;&lt;path d='M38.723 12c-7.187 0-11.16 7.306-11.723 8.131C26.437 19.306 22.504 12 15.277 12 8.791 12 3.533 18.163 3.533 24.647 3.533 39.964 21.891 55.907 27 56c5.109-.093 23.467-16.036 23.467-31.353C50.467 18.163 45.209 12 38.723 12z'&gt;&lt;\/path&gt;&lt;\/g&gt;   &lt;\/svg&gt; );<\/code><\/pre>\n<p>  <\/p>\n<hr\/>\n<p>  <\/p>\n<h3>\u041e\u0442\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0439\u0442\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/h3>\n<p>  \u041d\u0430 \u0431\u043e\u043b\u0435\u0435 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445 \u043c\u044b \u0437\u0430\u043c\u0435\u0442\u0438\u043b\u0438, \u0447\u0442\u043e \u043d\u0430\u0448\u0430 \u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u043f\u0430\u043d\u0435\u043b\u044c \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u043d\u0435 \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432 \u043e\u0442\u0432\u0435\u0442 \u043d\u0430 \u043d\u0430\u0436\u0430\u0442\u0438\u0435, \u0447\u0442\u043e \u0447\u0430\u0441\u0442\u043e \u0432\u0435\u0434\u0451\u0442 \u043a \u043c\u043d\u043e\u0433\u043e\u043a\u0440\u0430\u0442\u043d\u044b\u043c \u043d\u0430\u0436\u0430\u0442\u0438\u044f\u043c \u2014 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0434\u0443\u043c\u0430\u0435\u0442, \u0447\u0442\u043e \u043f\u0435\u0440\u0432\u043e\u0435 \u043d\u0430\u0436\u0430\u0442\u0438\u0435 \u043d\u0435 \u0437\u0430\u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043b\u043e\u0441\u044c.<\/p>\n<p>  \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0432\u043d\u0438\u0437\u0443, \u0447\u0442\u043e \u043f\u0438\u043a\u0442\u043e\u0433\u0440\u0430\u043c\u043c\u0435 <i>Home<\/i> \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043e\u043a\u043e\u043b\u043e \u0434\u0432\u0443\u0445 \u0441\u0435\u043a\u0443\u043d\u0434, \u0447\u0442\u043e\u0431\u044b \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c\u0441\u044f \u0438 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u043d\u0430 \u043d\u0435\u0451 \u043d\u0430\u0436\u0430\u043b\u0438:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/1cd\/145\/a64\/1cd145a643dcef4dd62e42e9a0399d4a.gif\"\/><br \/>  <font color=\"gray\">\u0411\u0435\u0437 \u043e\u0442\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043f\u0430\u043d\u0435\u043b\u044c \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u0440\u0435\u0430\u0433\u0438\u0440\u0443\u0435\u0442 \u043d\u0435 \u0441\u0440\u0430\u0437\u0443<\/font> <\/p>\n<p>  \u041d\u0435\u0442, \u0437\u0434\u0435\u0441\u044c \u043d\u0435 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 GIF. \u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043a\u043e \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e\u0435. \u041d\u043e \u0432\u0435\u0434\u044c \u0432\u0441\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u044d\u043a\u0440\u0430\u043d\u0430 <i>Home<\/i> \u0443\u0436\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u043b\u0438\u0441\u044c, \u0442\u0430\u043a \u043f\u043e\u0447\u0435\u043c\u0443 \u043e\u043d\u0438 \u0442\u0430\u043a \u0434\u043e\u043b\u0433\u043e \u043d\u0435 \u0432\u044b\u0432\u043e\u0434\u044f\u0442\u0441\u044f \u043d\u0430 \u044d\u043a\u0440\u0430\u043d?<\/p>\n<p>  \u041e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0434\u0435\u0440\u0435\u0432\u044c\u0435\u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 (\u0432\u0440\u043e\u0434\u0435 \u043b\u0435\u043d\u0442 \u0442\u0432\u0438\u0442\u043e\u0432) \u0432 React \u043e\u0442\u043d\u0438\u043c\u0430\u0435\u0442 \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432.<\/p>\n<p>  \u041c\u044b \u0445\u043e\u0442\u0435\u043b\u0438 \u0445\u043e\u0442\u044f \u0431\u044b \u0443\u0441\u0442\u0440\u0430\u043d\u0438\u0442\u044c \u0432\u043f\u0435\u0447\u0430\u0442\u043b\u0435\u043d\u0438\u0435, \u0447\u0442\u043e \u043f\u0430\u043d\u0435\u043b\u044c \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u043d\u0435 \u0440\u0435\u0430\u0433\u0438\u0440\u0443\u0435\u0442 \u043d\u0430 \u043d\u0430\u0436\u0430\u0442\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0431\u043e\u043b\u0435\u0435 \u0432\u044b\u0441\u043e\u043a\u043e\u0433\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0430:<\/p>\n<pre><code class=\"javascript\">import hoistStatics from 'hoist-non-react-statics'; import React from 'react';  \/**  * Allows two animation frames to complete to allow other components to update  * and re-render before mounting and rendering an expensive `WrappedComponent`.  *\/ export default function deferComponentRender(WrappedComponent) {   class DeferredRenderWrapper extends React.Component {     constructor(props, context) {       super(props, context);       this.state = { shouldRender: false };     }      componentDidMount() {       window.requestAnimationFrame(() =&gt; {         window.requestAnimationFrame(() =&gt; this.setState({ shouldRender: true }));       });     }      render() {       return this.state.shouldRender ? &lt;WrappedComponent {...this.props} \/&gt; : null;     }   }    return hoistStatics(DeferredRenderWrapper, WrappedComponent); }<\/code><\/pre>\n<p><font color=\"gray\">\u041d\u0430\u0448 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 HigherOrderComponent, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439 <a href=\"https:\/\/mobile.twitter.com\/katiesievert\">\u041a\u044d\u0442\u0438 \u0417\u0438\u0432\u0435\u0440\u0442<\/a><\/font> <\/p>\n<p>  \u041f\u043e\u0441\u043b\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0435\u0433\u043e \u043d\u0430 HomeTimeline \u043e\u0442\u043a\u043b\u0438\u043a \u043f\u0430\u043d\u0435\u043b\u0438 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u0441\u0442\u0430\u043b \u043f\u043e\u0447\u0442\u0438 \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u044b\u043c, \u0447\u0442\u043e \u043f\u0440\u0438\u0432\u0435\u043b\u043e \u043a <i>\u043a\u0430\u0436\u0443\u0449\u0435\u043c\u0443\u0441\u044f<\/i> \u043e\u0431\u0449\u0435\u043c\u0443 \u0443\u0441\u043a\u043e\u0440\u0435\u043d\u0438\u044e.<\/p>\n<p>  <code>const DeferredTimeline = deferComponentRender(HomeTimeline);<br \/>  render(&lt;DeferredTimeline \/&gt;);<\/code> <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/0c3\/a89\/464\/0c3a89464f92191719088b9187fbfee5.gif\"\/><br \/>  <font color=\"gray\">\u0421 \u043e\u0442\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u043e\u043c \u043f\u0430\u043d\u0435\u043b\u044c \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u0440\u0435\u0430\u0433\u0438\u0440\u0443\u0435\u0442 \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e<\/font> <\/p>\n<hr\/>\n<p>  <\/p>\n<h1>\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f Redux<\/h1>\n<p>  <\/p>\n<h3>\u0418\u0437\u0431\u0435\u0433\u0430\u0439\u0442\u0435 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0447\u0430\u0441\u0442\u043e\u0433\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f<\/h3>\n<p>  \u0425\u043e\u0442\u044f \u0432\u0440\u043e\u0434\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <a href=\"https:\/\/facebook.github.io\/react\/docs\/forms.html#controlled-components\">\u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u0443\u0435\u043c\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/a>, \u043d\u043e \u0435\u0441\u043b\u0438 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0432\u043e\u0434 \u0434\u0430\u043d\u043d\u044b\u0445, \u0442\u043e \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u0437\u0430\u043d\u043e\u0432\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u0435 \u043d\u0430\u0436\u0430\u0442\u0438\u0435 \u043a\u043b\u0430\u0432\u0438\u0448\u0438.<\/p>\n<p>  \u041d\u0430 \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043d\u043e\u043c \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0435 \u0441 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u043e\u043c 3\u00a0\u0413\u0413\u0446 \u044d\u0442\u043e \u043d\u0435 \u0437\u0430\u043c\u0435\u0442\u043d\u043e, \u043d\u043e \u0443 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0445 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 \u0441 \u043e\u0447\u0435\u043d\u044c \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043d\u044b\u043c\u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u0430\u043c\u0438 CPU \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u0430\u044f \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0430 \u043c\u0435\u0436\u0434\u0443 \u043d\u0430\u0436\u0430\u0442\u0438\u044f\u043c\u0438, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u043f\u0440\u0438 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0438 \u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432 \u0438\u0437 \u043f\u043e\u043b\u044f.<\/p>\n<p>  \u0427\u0442\u043e\u0431\u044b \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u043e \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0442\u0432\u0438\u0442\u043e\u0432, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0441\u0447\u0451\u0442\u0447\u0438\u043a \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432, \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u0443\u0435\u043c\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0430 <i>\u0442\u0430\u043a\u0436\u0435<\/i> \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u043b\u0438 \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u044f \u0432\u0432\u043e\u0434\u0430 \u0432 \u043d\u0430\u0448\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 Redux \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u0435 \u043d\u0430\u0436\u0430\u0442\u0438\u0435 \u043a\u043b\u0430\u0432\u0438\u0448\u0438.<\/p>\n<p>  \u041d\u0430 \u0432\u0435\u0440\u0445\u043d\u0435\u043c \u0438\u0437 \u043f\u0430\u0440\u044b \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u043e\u0432 \u2014 \u0442\u0438\u043f\u0438\u0447\u043d\u043e\u0435 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u043e \u043f\u043e\u0434 Android\u00a05, \u0433\u0434\u0435 \u043a\u0430\u0436\u0434\u043e\u0435 \u043d\u0430\u0436\u0430\u0442\u0438\u0435 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043e\u0442\u043d\u0438\u043c\u0430\u0435\u0442 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e 200\u00a0\u043c\u0441 \u043b\u0438\u0448\u043d\u0435\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438. \u0415\u0441\u043b\u0438 \u0447\u0435\u043b\u043e\u0432\u0435\u043a \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0431\u044b\u0441\u0442\u0440\u043e \u043d\u0430\u0431\u0438\u0440\u0430\u0435\u0442 \u0442\u0435\u043a\u0441\u0442, \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u043e\u0447\u0435\u043d\u044c \u043f\u043b\u043e\u0445\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0431\u0443\u0434\u0435\u0442 \u0436\u0430\u043b\u043e\u0432\u0430\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u043a\u0443\u0440\u0441\u043e\u0440 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u043f\u043e \u0444\u043e\u0440\u043c\u0435, \u043f\u0443\u0442\u0430\u044f \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/0e7\/9b5\/7ad\/0e79b57ad633f5e2cf96acd61ae16795.png\"\/><br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/681\/964\/256\/68196425618356127d8da11efd505601.png\"\/><br \/>  <font color=\"gray\">\u0421\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043d\u0443\u0436\u043d\u043e \u043d\u0430 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u043e\u0441\u043b\u0435 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043a\u043b\u0430\u0432\u0438\u0448\u0438 \u0434\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0432 Redux \u0438 \u043f\u043e\u0441\u043b\u0435 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438<\/font> <\/p>\n<p>  \u041c\u044b \u0443\u0441\u043a\u043e\u0440\u0438\u043b\u0438 \u0432\u0440\u0435\u043c\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043d\u0430 50%, \u043a\u043e\u0433\u0434\u0430 \u0437\u0430\u043f\u0440\u0435\u0442\u0438\u043b\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044e \u0447\u0435\u0440\u043d\u043e\u0432\u0438\u043a\u0430 \u0442\u0432\u0438\u0442\u0430 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 Redux, \u0430 \u0432\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044f \u0435\u0433\u043e \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 React.<\/p>\n<hr\/>\n<p>  <\/p>\n<h3>\u0413\u0440\u0443\u043f\u043f\u0438\u0440\u0443\u0439\u0442\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0432 \u0435\u0434\u0438\u043d\u044b\u0435 \u043f\u0430\u043a\u0435\u0442\u044b \u0440\u0430\u0441\u0441\u044b\u043b\u043a\u0438<\/h3>\n<p>  \u0412 Twitter Lite \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c <a href=\"http:\/\/redux.js.org\/\">redux<\/a> \u0438 <a href=\"http:\/\/redux.js.org\/docs\/basics\/UsageWithReact.html\">react-redux<\/a> \u0434\u043b\u044f \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439 \u0434\u0430\u043d\u043d\u044b\u0445. \u041c\u044b \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043b\u0438 \u043d\u0430\u0448\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e \u0440\u0430\u0437\u043d\u044b\u043c \u043e\u0431\u043b\u0430\u0441\u0442\u044f\u043c \u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <a href=\"https:\/\/github.com\/paularmstrong\/normalizr\">Normalizr<\/a> \u0438 <a href=\"http:\/\/redux.js.org\/docs\/api\/combineReducers.html\">combineReducers<\/a>. \u042d\u0442\u043e \u0432\u0441\u0451 \u043f\u0440\u0435\u043a\u0440\u0430\u0441\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e, \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0430\u044f \u0434\u0443\u043f\u043b\u0438\u043a\u0430\u0446\u0438\u044e \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044f \u043c\u0430\u043b\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449. \u041e\u0434\u043d\u0430\u043a\u043e \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u043f\u0440\u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0438 \u043d\u043e\u0432\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u043d\u0430\u043c \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u043b\u043e\u0441\u044c \u0440\u0430\u0441\u0441\u044b\u043b\u0430\u0442\u044c \u043c\u043d\u043e\u0433\u043e\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f, \u0447\u0442\u043e\u0431\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0438\u0445 \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430.<\/p>\n<p>  \u0423\u0447\u0438\u0442\u044b\u0432\u0430\u044f \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u0440\u0430\u0431\u043e\u0442\u044b react-redux, \u044d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u043b\u043e, \u0447\u0442\u043e \u043a\u0430\u0436\u0434\u043e\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043f\u043e\u0441\u043b\u0435 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u043b\u043e \u043a \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u043c\u0443 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u043c\u0443 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u043c\u0443 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0443 \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0430 (\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430\u043c\u0438).<\/p>\n<p>  \u0425\u043e\u0442\u044f \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043d\u043e\u0435 \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u0447\u043d\u043e\u0435 \u041f\u041e, <a href=\"https:\/\/www.npmjs.com\/package\/redux-batched-actions\">\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442<\/a> <a href=\"https:\/\/www.npmjs.com\/package\/redux-batch-middleware\">\u0434\u0440\u0443\u0433\u0438\u0435<\/a> <a href=\"https:\/\/www.npmjs.com\/package\/redux-batch-enhancer\">\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0435<\/a> <a href=\"https:\/\/www.npmjs.com\/package\/redux-batch-actions\">middleware<\/a> \u0434\u043b\u044f \u043f\u0430\u043a\u0435\u0442\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u0439 \u0438\u043b\u0438 \u043d\u0430\u043f\u0438\u0448\u0438\u0442\u0435 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c.<\/p>\n<p>  \u041d\u0430\u0438\u043b\u0443\u0447\u0448\u0438\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043f\u0440\u043e\u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 \u043f\u0430\u043a\u0435\u0442\u043d\u043e\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u2014 \u044d\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 <a href=\"https:\/\/github.com\/crysislinux\/chrome-react-perf\">Chrome React Perf Extension<\/a>. \u041f\u043e\u0441\u043b\u0435 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043c\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u0443\u043f\u0440\u0435\u0436\u0434\u0430\u044e\u0449\u0435\u0435 \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438 \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c \u043d\u0435\u043f\u0440\u043e\u0447\u0442\u0451\u043d\u043d\u044b\u0435 \u043b\u0438\u0447\u043d\u044b\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0432 \u0444\u043e\u043d\u0435. \u0412 \u044d\u0442\u043e \u0432\u0440\u0435\u043c\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043c\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 (\u0431\u0435\u0441\u0435\u0434\u044b, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438, \u0437\u0430\u043f\u0438\u0441\u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439 \u0438 \u0434\u0440.). <i>\u0411\u0435\u0437 \u043f\u0430\u043a\u0435\u0442\u043d\u043e\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438<\/i> (\u0432\u0435\u0440\u0445\u043d\u0438\u0439 \u0438\u0437 \u043f\u0430\u0440\u044b \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u043e\u0432) \u043a\u0430\u0436\u0434\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u0441\u044f \u0432\u0434\u0432\u043e\u0435 \u0447\u0430\u0449\u0435 (\u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e 16 \u0440\u0430\u0437), \u0447\u0435\u043c <i>\u0441 \u043f\u0430\u043a\u0435\u0442\u043d\u043e\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u043e\u0439<\/i> (\u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e 8 \u0440\u0430\u0437).<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/87a\/5d2\/a14\/87a5d2a14ddf7553df94d34345a02cb2.png\"\/><br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/089\/6d6\/698\/0896d66987a60c0122a914b0a0cc1de0.png\"\/><br \/>  <font color=\"gray\">\u0421\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u0440\u0430\u0431\u043e\u0442\u044b \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f React Perf \u0434\u043b\u044f Chrome \u0431\u0435\u0437 \u043f\u0430\u043a\u0435\u0442\u043d\u043e\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0432 Redux (\u0432\u0432\u0435\u0440\u0445\u0443) \u0438 \u0441 \u043f\u0430\u043a\u0435\u0442\u0430\u043c\u0438 (\u0441\u043d\u0438\u0437\u0443)<\/font> <\/p>\n<hr\/>\n<p>  <\/p>\n<h1>\u0421\u0435\u0440\u0432\u0438\u0441-\u0432\u043e\u0440\u043a\u0435\u0440\u044b<\/h1>\n<p>  \u0425\u043e\u0442\u044f \u0441\u0435\u0440\u0432\u0438\u0441-\u0432\u043e\u0440\u043a\u0435\u0440\u044b \u043f\u043e\u043a\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u043d\u0435 \u0432\u043e \u0432\u0441\u0435\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445, \u043e\u043d\u0438 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0431\u0435\u0441\u0446\u0435\u043d\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u044c\u044e Twitter Lite. \u041f\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0438\u0445 \u0434\u043b\u044f \u043f\u0443\u0448-\u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0439, \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u0438 \u0434\u0440\u0443\u0433\u043e\u0433\u043e. \u041a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u0434\u043b\u044f \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043d\u043e\u0432\u043e\u0439 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u043c\u043d\u043e\u0433\u043e \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u0432 \u0441 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e.<\/p>\n<h3>\u041f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432<\/h3>\n<p>  \u041a\u0430\u043a \u0438 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u043e\u0432, Twitter Lite \u0434\u0430\u043b\u0451\u043a \u043e\u0442 \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u0441\u0442\u0432\u0430. \u041c\u044b \u0432\u0441\u0451 \u0435\u0449\u0451 \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0435\u0433\u043e, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u0431\u0430\u0433\u0438, \u0434\u0435\u043b\u0430\u0435\u043c \u0435\u0433\u043e \u0431\u044b\u0441\u0442\u0440\u0435\u0435. \u042d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u0447\u0430\u0441\u0442\u043e \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0432\u044b\u043b\u043e\u0436\u0438\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u0432\u0435\u0440\u0441\u0438\u0438 \u043d\u0430\u0448\u0438\u0445 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 JavaScript. <\/p>\n<p>  \u041c\u043e\u0436\u0435\u0442 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u0443\u0442\u044c \u043d\u0435\u043f\u0440\u0438\u044f\u0442\u043d\u0430\u044f \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f, \u0435\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u2014 \u0430 \u0435\u043c\u0443 \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u043d\u043e\u0432\u043e \u0441\u043a\u0430\u0447\u0430\u0442\u044c \u043a\u0443\u0447\u0443 \u0444\u0430\u0439\u043b\u043e\u0432 \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043e\u0434\u0438\u043d \u0442\u0432\u0438\u0442.<\/p>\n<p>  \u0412 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u0441 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 \u0441\u0435\u0440\u0432\u0438\u0441-\u0432\u043e\u0440\u043a\u0435\u0440\u043e\u0432 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u0430\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u043e\u0432\u0435\u0441\u0442\u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435, \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u0435 \u0438 \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043b\u044e\u0431\u044b\u0445 \u0438\u0437\u043c\u0435\u043d\u0451\u043d\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 \u0432 \u0444\u043e\u043d\u043e\u0432\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435. \u042d\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0441\u0430\u043c\u043e \u0441\u043e\u0431\u043e\u0439, \u0434\u043e \u0442\u043e\u0433\u043e \u043a\u0430\u043a \u043e\u0442\u043a\u0440\u043e\u0435\u0442\u0441\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n<p>  \u0427\u0442\u043e \u044d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f? \u041f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u0443\u044e \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u043c\u044b \u0432\u044b\u043a\u0430\u0442\u0438\u043b\u0438 \u043d\u043e\u0432\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e!<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/195\/4df\/170\/1954df1700475df9501f90f350a89a68.png\"\/><br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/018\/026\/be5\/018026be5067e53c3402fb0f9689b5e0.png\"\/><br \/>  <font color=\"gray\">\u0412\u0440\u0435\u043c\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0435\u0442\u0435\u0432\u044b\u0445 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u0431\u0435\u0437 \u0441\u0435\u0440\u0432\u0438\u0441-\u0432\u043e\u0440\u043a\u0435\u0440\u043e\u0432 (\u0432\u0432\u0435\u0440\u0445\u0443) \u0438 \u0441 \u0441\u0435\u0440\u0432\u0438\u0441-\u0432\u043e\u0440\u043a\u0435\u0440\u0430\u043c\u0438 (\u0432\u043d\u0438\u0437\u0443)<\/font><\/p>\n<p>  \u041d\u0430 \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0432\u0432\u0435\u0440\u0445\u0443 \u0431\u0435\u0437 \u0441\u0435\u0440\u0432\u0438\u0441-\u0432\u043e\u0440\u043a\u0435\u0440\u043e\u0432 \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0435\u0441\u0443\u0440\u0441 \u0434\u043b\u044f \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u043e\u043a\u043d\u0430 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u043a\u0430\u0447\u0430\u0442\u044c\u0441\u044f \u0438\u0437 \u0441\u0435\u0442\u0438, \u043a\u043e\u0433\u0434\u0430 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u041d\u0430 \u0445\u043e\u0440\u043e\u0448\u0435\u0439 \u0441\u0435\u0442\u0438 3G \u044d\u0442\u043e \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u043e\u043a\u043e\u043b\u043e 6 \u0441\u0435\u043a\u0443\u043d\u0434. \u041d\u043e \u0435\u0441\u043b\u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u0441\u0435\u0440\u0432\u0438\u0441-\u0432\u043e\u0440\u043a\u0435\u0440\u0430\u043c\u0438 (\u043d\u0438\u0436\u043d\u0438\u0439 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442), \u0442\u043e \u043d\u0430 \u0442\u043e\u043c \u0436\u0435 \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0438 3G \u0442\u0430 \u0436\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0437\u0430\u043a\u0430\u043d\u0447\u0438\u0432\u0430\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0437\u0430 1,5\u00a0\u0441\u0435\u043a\u0443\u043d\u0434\u044b. \u0423\u0441\u043a\u043e\u0440\u0435\u043d\u0438\u0435 \u043d\u0430 75%!<\/p>\n<hr\/>\n<p>  <\/p>\n<h3>\u0417\u0430\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0439\u0442\u0435 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044e \u0441\u0435\u0440\u0432\u0438\u0441-\u0432\u043e\u0440\u043a\u0435\u0440\u0430<\/h3>\n<p>  \u0412\u043e \u043c\u043d\u043e\u0433\u0438\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u0435\u0435 \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0435\u0440\u0432\u0438\u0441-\u0432\u043e\u0440\u043a\u0435\u0440 \u043d\u0435\u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b:<\/p>\n<p>  <code>&lt;script&gt;<br \/>  window.navigator.serviceWorker.register('\/sw.js');<br \/>  &lt;\/script&gt;<\/code><\/p>\n<p>  \u0425\u043e\u0442\u044f \u043c\u044b \u043f\u044b\u0442\u0430\u0435\u043c\u0441\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443 \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0433\u043e\u0442\u043e\u0432\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0432 Twitter Lite \u044d\u0442\u043e \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e. \u0411\u044b\u0432\u0430\u0435\u0442, \u0447\u0442\u043e \u043c\u044b \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u043b\u0438 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u0430\u043d\u043d\u044b\u0445 \u0438\u043b\u0438 \u044d\u0442\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u0438\u0451\u043c \u0434\u0430\u043d\u043d\u044b\u0445 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430. \u0418\u0437-\u0437\u0430 \u044d\u0442\u0438\u0445 \u0438 \u0440\u0430\u0437\u043d\u044b\u0445 \u0434\u0440\u0443\u0433\u0438\u0445 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0439 \u043d\u0430\u043c \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b API \u043d\u0435\u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e \u043f\u043e\u0441\u043b\u0435 \u043f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n<p>  \u041e\u0431\u044b\u0447\u043d\u043e \u044d\u0442\u043e \u043d\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430. \u041d\u043e \u0435\u0441\u043b\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0435\u0449\u0451 \u043d\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b \u0442\u0435\u043a\u0443\u0449\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u043d\u0430\u0448\u0435\u0433\u043e \u0441\u0435\u0440\u0432\u0438\u0441-\u0432\u043e\u0440\u043a\u0435\u0440\u0430, \u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u043e\u0431\u0449\u0438\u0442\u044c \u0435\u043c\u0443 \u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u2014 \u0438 \u044d\u0442\u043e \u0432\u0435\u0434\u0451\u0442 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u043a 50 \u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c \u0441 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 JS, CSS \u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439.<\/p>\n<p>  \u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u0441 \u043d\u0435\u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e\u0439 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0435\u0439 \u043d\u0430\u0448\u0435\u0433\u043e \u0441\u0435\u0440\u0432\u0438\u0441-\u0432\u043e\u0440\u043a\u0435\u0440\u0430, \u043c\u044b \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u043b\u0438 \u0441\u0435\u0442\u0435\u0432\u043e\u0439 \u0437\u0430\u0442\u043e\u0440 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u0441 \u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u0435\u043c \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043b\u0438\u043c\u0438\u0442\u0430 \u043d\u0430 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0440\u0430\u0437\u0440\u0435\u0448\u0451\u043d\u043d\u044b\u0445 \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u044b\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 (\u0432\u0435\u0440\u0445\u043d\u0438\u0439 \u0438\u0437 \u043f\u0430\u0440\u044b \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u043e\u0432).<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/374\/fd8\/2b1\/374fd82b1a22865bcf80d4a4ddffc001.png\"\/><br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/fa3\/45c\/41d\/fa345c41d4d785ffab9e757e0c59456c.png\"\/><br \/>  <font color=\"gray\">\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u043f\u0440\u0438 \u043d\u0435\u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e\u0439 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0441\u0435\u0440\u0432\u0438\u0441-\u0432\u043e\u0440\u043a\u0435\u0440\u0430 \u043e\u043d \u043c\u043e\u0436\u0435\u0442 \u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0435\u0442\u0435\u0432\u044b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b (\u0432\u0432\u0435\u0440\u0445\u0443). \u0415\u0441\u043b\u0438 \u043e\u0442\u043b\u043e\u0436\u0438\u0442\u044c \u0435\u0433\u043e (\u0432\u043d\u0438\u0437\u0443), \u0442\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c\u0441\u044f \u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0441\u0435\u0442\u0435\u0432\u044b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b, \u043d\u0435 \u043f\u043e\u0434\u0432\u0435\u0440\u0433\u043d\u0443\u0432\u0448\u0438\u0441\u044c \u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u043a\u0435 \u0438\u0437-\u0437\u0430 \u043b\u0438\u043c\u0438\u0442\u0430 \u043d\u0430 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0439 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435<\/font> <\/p>\n<p>  \u041c\u044b \u0437\u0430\u0434\u0435\u0440\u0436\u0430\u043b\u0438 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044e \u0441\u0435\u0440\u0432\u0438\u0441-\u0432\u043e\u0440\u043a\u0435\u0440\u0430 \u0434\u043e \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 API, \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 CSS \u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u043b\u043e \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u0442\u044c \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438 \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u0432\u0440\u0435\u043c\u044f \u043e\u0442\u043a\u043b\u0438\u043a\u0430, \u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u043d\u0430 \u043d\u0438\u0436\u043d\u0435\u043c \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u0435.<\/p>\n<hr\/>\n<p>  \u0412 \u0446\u0435\u043b\u043e\u043c, \u0437\u0434\u0435\u0441\u044c \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u044b \u0432\u0441\u0435\u0433\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0438\u0437 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0430 \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0441\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u0432 <a href=\"https:\/\/mobile.twitter.com\/\">Twitter Lite<\/a>. \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u043e, \u0431\u0443\u0434\u0443\u0442 \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044f, \u0430 \u043c\u044b \u043d\u0430\u0434\u0435\u0435\u043c\u0441\u044f, \u0447\u0442\u043e \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u043c \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043e \u043d\u0430\u0439\u0434\u0435\u043d\u043d\u044b\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\u0445 \u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u0445 \u0438\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u044f. \u0414\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0438 \u043d\u043e\u0432\u044b\u0445 \u0438\u043d\u0441\u0430\u0439\u0442\u043e\u0432 \u043e React \u0438 PWA \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0439\u0442\u0435\u0441\u044c \u043d\u0430 <a href=\"https:\/\/mobile.twitter.com\/paularmstrong\">\u043c\u0435\u043d\u044f<\/a> \u0438 <a href=\"https:\/\/mobile.twitter.com\/paularmstrong\/lists\/twitter-lite\/members\">\u0433\u0440\u0443\u043f\u043f\u0443 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438<\/a> \u0432 \u0442\u0432\u0438\u0442\u0442\u0435\u0440\u0435.<br \/> \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:\/\/habrahabr.ru\/post\/327494\/\"> https:\/\/habrahabr.ru\/post\/327494\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<h2>Twitter Lite \u0438 \u0432\u044b\u0441\u043e\u043a\u043e\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u044b\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 React<\/h2>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/c64\/b58\/183\/c64b5818384b4fec9fe4ce0056531aeb.png\"\/><\/p>\n<blockquote><p><i>\u0412\u0437\u0433\u043b\u044f\u0434 \u043d\u0430 \u0442\u043e, \u043a\u0430\u043a \u0443\u0434\u0430\u043b\u044f\u043b\u0438 \u043e\u0431\u044b\u0447\u043d\u044b\u0435 \u0438 \u043d\u0435\u043e\u0431\u044b\u0447\u043d\u044b\u0435 \u0443\u0437\u043a\u0438\u0435 \u043c\u0435\u0441\u0442\u0430 \u0432 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043e\u0434\u043d\u043e\u0433\u043e \u0438\u0437 \u043a\u0440\u0443\u043f\u043d\u0435\u0439\u0448\u0438\u0445 \u0432 \u043c\u0438\u0440\u0435 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u044b\u0445 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 (PWA) \u043d\u0430 React.js \u2014 <a href=\"https:\/\/mobile.twitter.com\/\">Twitter Lite<\/a><\/i><\/p><\/blockquote>\n<p>  \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0431\u044b\u0441\u0442\u0440\u043e\u0433\u043e \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043c\u043d\u043e\u0433\u0438\u0445 \u0446\u0438\u043a\u043b\u043e\u0432 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u0439, \u043a\u0443\u0434\u0430 \u0442\u0440\u0430\u0442\u0438\u0442\u0441\u044f \u0432\u0440\u0435\u043c\u044f. \u041d\u0443\u0436\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u044c, \u043f\u043e\u0447\u0435\u043c\u0443 \u044d\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442, \u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f. \u041a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u043d\u0435 \u0431\u044b\u0432\u0430\u0435\u0442 \u043e\u0434\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u044f. \u041f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u2014 \u044d\u0442\u043e \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u0430\u044f \u0438\u0433\u0440\u0430, \u0433\u0434\u0435 \u043c\u044b \u0438\u0449\u0435\u043c \u0438 \u0438\u0437\u043c\u0435\u0440\u044f\u0435\u043c \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0434\u043b\u044f \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044f. \u0412 Twitter Lite \u0441\u0434\u0435\u043b\u0430\u043d\u043e \u043c\u043d\u043e\u0433\u043e \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0445 \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u0439 \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0441\u0444\u0435\u0440\u0430\u0445: \u043e\u0442 \u043f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0434\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 React (\u0438 \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430), \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0438 \u043c\u043d\u043e\u0433\u043e \u0434\u0440\u0443\u0433\u043e\u0433\u043e. \u0411\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0435, \u043d\u043e \u043e\u043d\u0438 \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u044e\u0442\u0441\u044f, \u0438 \u0432 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u043e\u0434\u043d\u043e \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0438 \u0431\u044b\u0441\u0442\u0440\u044b\u0445 <i><a href=\"https:\/\/developers.google.com\/web\/progressive-web-apps\/\">\u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u044b\u0445 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439<\/a><\/i>.  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-285609","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/285609","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=285609"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/285609\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=285609"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=285609"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=285609"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}