{"id":133385,"date":"2025-01-26T12:56:32","date_gmt":"2025-01-26T06:56:32","guid":{"rendered":"http:\/\/rcl-radio.ru\/?p=133385"},"modified":"2025-01-26T12:56:32","modified_gmt":"2025-01-26T06:56:32","slug":"%d0%be%d0%bf%d1%82%d0%b8%d0%bc%d0%b8%d0%b7%d0%b0%d1%86%d0%b8%d1%8f-%d0%bf%d1%80%d0%be%d0%b8%d0%b7%d0%b2%d0%be%d0%b4%d0%b8%d1%82%d0%b5%d0%bb%d1%8c%d0%bd%d0%be%d1%81%d1%82%d0%b8-%d0%b2%d0%b5%d0%b1","status":"publish","type":"post","link":"http:\/\/rcl-radio.ru\/?p=133385","title":{"rendered":"\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043d\u0430 JavaScript: \u043b\u0443\u0447\u0448\u0438\u0435 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438 \u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b"},"content":{"rendered":"<p class=\"sc-jmpzUR cfetIB\"><span class=\"sc-EJAja gTUZZW\">\u041f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0438\u0433\u0440\u0430\u0435\u0442 \u043a\u043b\u044e\u0447\u0435\u0432\u0443\u044e \u0440\u043e\u043b\u044c \u0432 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u0438 \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043e\u043f\u044b\u0442\u0430. \u041c\u0435\u0434\u043b\u0435\u043d\u043d\u044b\u0435 \u0441\u0430\u0439\u0442\u044b \u0440\u0430\u0437\u0434\u0440\u0430\u0436\u0430\u044e\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u0438 \u043d\u0435\u0433\u0430\u0442\u0438\u0432\u043d\u043e \u0432\u043b\u0438\u044f\u044e\u0442 \u043d\u0430 \u043a\u043e\u043d\u0432\u0435\u0440\u0441\u0438\u044e \u0438 \u0443\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435 \u0430\u0443\u0434\u0438\u0442\u043e\u0440\u0438\u0438. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043b\u0443\u0447\u0448\u0438\u0435 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438 \u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \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 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043d\u0430 JavaScript, \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0432 \u0438\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c\u0438 \u0438 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u044f\u043c\u0438.<\/span><\/p>\n<p class=\"sc-eDZJfc dNqjyD\"><strong><span class=\"sc-EJAja gTUZZW\">1. \u041c\u0438\u043d\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0438 \u0441\u0436\u0430\u0442\u0438\u0435 \u043a\u043e\u0434\u0430<\/span><\/strong><\/p>\n<p class=\"sc-jmpzUR cfetIB\"><span class=\"sc-EJAja gTUZZW\">\u0423\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0444\u0430\u0439\u043b\u043e\u0432 JavaScript \u2014 \u043f\u0435\u0440\u0432\u044b\u0439 \u0448\u0430\u0433 \u043a \u043f\u043e\u0432\u044b\u0448\u0435\u043d\u0438\u044e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438. \u042d\u0442\u043e \u0434\u043e\u0441\u0442\u0438\u0433\u0430\u0435\u0442\u0441\u044f \u043f\u0443\u0442\u0435\u043c \u043c\u0438\u043d\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u0441\u0436\u0430\u0442\u0438\u044f \u043a\u043e\u0434\u0430.<\/span><\/p>\n<p class=\"sc-eDZJfc dNqjyD\"><strong><span class=\"sc-EJAja gTUZZW\">\u041c\u0438\u043d\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f<\/span><\/strong><\/p>\n<p class=\"sc-jmpzUR cfetIB\"><span class=\"sc-EJAja gTUZZW\">\u041c\u0438\u043d\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0443\u0434\u0430\u043b\u044f\u0435\u0442 \u043d\u0435\u043d\u0443\u0436\u043d\u044b\u0435 \u043f\u0440\u043e\u0431\u0435\u043b\u044b, \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438 \u0438 \u0441\u043e\u043a\u0440\u0430\u0449\u0430\u0435\u0442 \u0438\u043c\u0435\u043d\u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445, \u0434\u0435\u043b\u0430\u044f \u0444\u0430\u0439\u043b \u043c\u0435\u043d\u044c\u0448\u0435. \u041f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u043c\u0438\u043d\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0432\u043a\u043b\u044e\u0447\u0430\u044e\u0442:<\/span><\/p>\n<ul class=\"sc-fWHiwC kTRKBp\">\n<li class=\"sc-gzrROc kAlRMd\"><span class=\"sc-EJAja gTUZZW\"><strong class=\"sc-fmZqYP yjslu\">Terser:<\/strong>\u00a0\u041e\u0434\u0438\u043d \u0438\u0437 \u043b\u0443\u0447\u0448\u0438\u0445 \u043c\u0438\u043d\u0438\u043c\u0430\u0439\u0437\u0435\u0440\u043e\u0432 \u0434\u043b\u044f ES6+ \u043a\u043e\u0434\u0430.<\/span><\/li>\n<li class=\"sc-gzrROc kAlRMd\"><span class=\"sc-EJAja gTUZZW\"><strong class=\"sc-fmZqYP yjslu\">UglifyJS:<\/strong>\u00a0\u0422\u0440\u0430\u0434\u0438\u0446\u0438\u043e\u043d\u043d\u044b\u0439 \u043c\u0438\u043d\u0438\u043c\u0438\u0437\u0430\u0442\u043e\u0440, \u0445\u043e\u0440\u043e\u0448\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0438\u0439 \u0441 ES5 \u043a\u043e\u0434\u043e\u043c.<\/span><\/li>\n<\/ul>\n<p class=\"sc-eDZJfc dNqjyD\"><strong><span class=\"sc-EJAja gTUZZW\">\u041f\u0440\u0438\u043c\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f Terser:<\/span><\/strong><\/p>\n<p class=\"sc-iTFTee dOrRfG\">\n<pre class=\"sc-iAEawV jJcDgg line-numbers language-bash\" tabindex=\"0\"><code class=\"sc-cabOPr cVdCvb language-bash\">terser input.js --output output.min.js<\/code><\/pre>\n<p class=\"sc-eDZJfc dNqjyD\"><strong><span class=\"sc-EJAja gTUZZW\">\u041f\u0440\u0438\u043c\u0435\u0440 \u043c\u0438\u043d\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430:<\/span><\/strong><\/p>\n<p class=\"sc-jmpzUR cfetIB\"><span class=\"sc-EJAja gTUZZW\">\u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434:<\/span><\/p>\n<div class=\"sc-iTFTee dOrRfG\">\n<pre class=\"sc-iAEawV jJcDgg line-numbers language-js\" tabindex=\"0\"><code class=\"sc-cabOPr cVdCvb language-js\"><span class=\"token keyword\">function<\/span> <span class=\"token function\">add<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">a<span class=\"token punctuation\">,<\/span>\u00a0b<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n    <span class=\"token keyword\">return<\/span> a <span class=\"token operator\">+<\/span> b<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0434\u0432\u0443\u0445 \u0447\u0438\u0441\u0435\u043b<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\nconsole<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token function\">add<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">3<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/\/ \u0412\u044b\u0432\u0435\u0434\u0435\u0442 5<\/span><\/code><\/pre>\n<\/div>\n<p class=\"sc-jmpzUR cfetIB\"><span class=\"sc-EJAja gTUZZW\">\u041f\u043e\u0441\u043b\u0435 \u043c\u0438\u043d\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438:<\/span><\/p>\n<div class=\"sc-iTFTee dOrRfG\">\n<pre class=\"sc-iAEawV jJcDgg line-numbers language-js\" tabindex=\"0\"><code class=\"sc-cabOPr cVdCvb language-js\"><span class=\"token keyword\">function<\/span> <span class=\"token function\">add<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">n<span class=\"token punctuation\">,<\/span>t<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">return<\/span> n<span class=\"token operator\">+<\/span>t<span class=\"token punctuation\">}<\/span>console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token function\">add<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">,<\/span><span class=\"token number\">3<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<\/div>\n<p class=\"sc-eDZJfc dNqjyD\"><strong><span class=\"sc-EJAja gTUZZW\">\u0421\u0436\u0430\u0442\u0438\u0435<\/span><\/strong><\/p>\n<p class=\"sc-jmpzUR cfetIB\"><span class=\"sc-EJAja gTUZZW\">\u0421\u0436\u0430\u0442\u0438\u0435 \u0444\u0430\u0439\u043b\u043e\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u043e\u0432 gzip \u0438\u043b\u0438 brotli \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u0442 \u0438\u0445 \u0440\u0430\u0437\u043c\u0435\u0440 \u0435\u0449\u0435 \u0441\u0438\u043b\u044c\u043d\u0435\u0435. \u0411\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0432\u0435\u0431-\u0441\u0435\u0440\u0432\u0435\u0440\u043e\u0432 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0441\u0436\u0430\u0442\u0438\u0435 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432.<\/span><\/p>\n<p class=\"sc-eDZJfc dNqjyD\"><strong><span class=\"sc-EJAja gTUZZW\">\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0441\u0436\u0430\u0442\u0438\u044f \u043d\u0430 Nginx:<\/span><\/strong><\/p>\n<p class=\"sc-jmpzUR cfetIB\"><span class=\"sc-EJAja gTUZZW\">\u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443 \u0432 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e \u0441\u0435\u0440\u0432\u0435\u0440\u0430:<\/span><\/p>\n<div class=\"sc-iTFTee dOrRfG\">\n<pre class=\"sc-iAEawV jJcDgg line-numbers language-nginx\" tabindex=\"0\"><code class=\"sc-cabOPr cVdCvb language-nginx\">gzip on;\r\ngzip_types text\/plain application\/javascript application\/x-javascript text\/css application\/json;<\/code><\/pre>\n<\/div>\n<p class=\"sc-eDZJfc dNqjyD\"><strong><span class=\"sc-EJAja gTUZZW\">2. \u041b\u0435\u043d\u0438\u0432\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 (Lazy Loading)<\/span><\/strong><\/p>\n<p class=\"sc-jmpzUR cfetIB\"><span class=\"sc-EJAja gTUZZW\">\u041b\u0435\u043d\u0438\u0432\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u043e\u0433\u0434\u0430, \u043a\u043e\u0433\u0434\u0430 \u043e\u043d\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b. \u042d\u0442\u043e \u0441\u043d\u0438\u0436\u0430\u0435\u0442 \u043f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438 \u0443\u043b\u0443\u0447\u0448\u0430\u0435\u0442 \u043e\u0431\u0449\u0443\u044e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c.<\/span><\/p>\n<p class=\"sc-eDZJfc dNqjyD\"><strong><span class=\"sc-EJAja gTUZZW\">\u041b\u0435\u043d\u0438\u0432\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439<\/span><\/strong><\/p>\n<p class=\"sc-jmpzUR cfetIB\"><span class=\"sc-EJAja gTUZZW\">\u0414\u043b\u044f \u043b\u0435\u043d\u0438\u0432\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u00a0<\/span><span class=\"sc-EJAja gTUZZW\"><code class=\"sc-iveFHk dlEjPr\">loading=\"lazy\"<\/code><\/span><span class=\"sc-EJAja gTUZZW\">:<\/span><\/p>\n<div class=\"sc-iTFTee dOrRfG\">\n<pre class=\"sc-iAEawV jJcDgg line-numbers language-html\" tabindex=\"0\"><code class=\"sc-cabOPr cVdCvb language-html\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>img\u00a0<span class=\"token attr-name\">src<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>image.jpg<span class=\"token punctuation\">\"<\/span><\/span>\u00a0<span class=\"token attr-name\">loading<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>lazy<span class=\"token punctuation\">\"<\/span><\/span>\u00a0<span class=\"token attr-name\">alt<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>Example image<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<\/div>\n<p class=\"sc-eDZJfc dNqjyD\"><strong><span class=\"sc-EJAja gTUZZW\">\u041f\u0440\u0438\u043c\u0435\u0440 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c Intersection Observer API:<\/span><\/strong><\/p>\n<div class=\"sc-iTFTee dOrRfG\">\n<pre class=\"sc-iAEawV jJcDgg line-numbers language-js\" tabindex=\"0\"><code class=\"sc-cabOPr cVdCvb language-js\"><span class=\"token keyword\">const<\/span> images <span class=\"token operator\">=<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">querySelectorAll<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'img[data-src]'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n\r\n<span class=\"token keyword\">const<\/span> observer <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">IntersectionObserver<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">entries<span class=\"token punctuation\">,<\/span>\u00a0observer<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span>\r\n    entries<span class=\"token punctuation\">.<\/span><span class=\"token function\">forEach<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">entry<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span>\r\n        <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>entry<span class=\"token punctuation\">.<\/span>isIntersecting<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n            <span class=\"token keyword\">const<\/span> img <span class=\"token operator\">=<\/span> entry<span class=\"token punctuation\">.<\/span>target<span class=\"token punctuation\">;<\/span>\r\n            img<span class=\"token punctuation\">.<\/span>src <span class=\"token operator\">=<\/span> img<span class=\"token punctuation\">.<\/span><span class=\"token function\">getAttribute<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'data-src'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n            observer<span class=\"token punctuation\">.<\/span><span class=\"token function\">unobserve<\/span><span class=\"token punctuation\">(<\/span>img<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n        <span class=\"token punctuation\">}<\/span>\r\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n\r\nimages<span class=\"token punctuation\">.<\/span><span class=\"token function\">forEach<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">image<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span>\r\n    observer<span class=\"token punctuation\">.<\/span><span class=\"token function\">observe<\/span><span class=\"token punctuation\">(<\/span>image<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<\/div>\n<p class=\"sc-jmpzUR cfetIB\"><span class=\"sc-EJAja gTUZZW\">HTML:<\/span><\/p>\n<div class=\"sc-iTFTee dOrRfG\">\n<pre class=\"sc-iAEawV jJcDgg line-numbers language-html\" tabindex=\"0\"><code class=\"sc-cabOPr cVdCvb language-html\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>img\u00a0<span class=\"token attr-name\">data-src<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>image.jpg<span class=\"token punctuation\">\"<\/span><\/span>\u00a0<span class=\"token attr-name\">alt<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>Example image<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<\/div>\n<p class=\"sc-eDZJfc dNqjyD\"><strong><span class=\"sc-EJAja gTUZZW\">\u041b\u0435\u043d\u0438\u0432\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u043c\u043e\u0434\u0443\u043b\u0435\u0439<\/span><\/strong><\/p>\n<p class=\"sc-jmpzUR cfetIB\"><span class=\"sc-EJAja gTUZZW\">\u0412 JavaScript \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0438\u043c\u043f\u043e\u0440\u0442 \u0434\u043b\u044f \u043b\u0435\u043d\u0438\u0432\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043c\u043e\u0434\u0443\u043b\u0435\u0439:<\/span><\/p>\n<p class=\"sc-eDZJfc dNqjyD\"><strong><span class=\"sc-EJAja gTUZZW\">\u041f\u0440\u0438\u043c\u0435\u0440 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0430:<\/span><\/strong><\/p>\n<div class=\"sc-iTFTee dOrRfG\">\n<pre class=\"sc-iAEawV jJcDgg line-numbers language-js\" tabindex=\"0\"><code class=\"sc-cabOPr cVdCvb language-js\"><span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>someCondition<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n    <span class=\"token keyword\">import<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'.\/module.js'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">then<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">module<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span>\r\n        module<span class=\"token punctuation\">.<\/span><span class=\"token function\">default<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<\/div>\n<p class=\"sc-eDZJfc dNqjyD\"><strong><span class=\"sc-EJAja gTUZZW\">\u041f\u0440\u0438\u043c\u0435\u0440 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c webpack:<\/span><\/strong><\/p>\n<div class=\"sc-iTFTee dOrRfG\">\n<pre class=\"sc-iAEawV jJcDgg line-numbers language-js\" tabindex=\"0\"><code class=\"sc-cabOPr cVdCvb language-js\"><span class=\"token keyword\">import<\/span><span class=\"token punctuation\">(<\/span><span class=\"token comment\">\/* webpackChunkName: \"myModule\" *\/<\/span> <span class=\"token string\">'.\/myModule.js'<\/span><span class=\"token punctuation\">)<\/span>\r\n<span class=\"token punctuation\">.<\/span><span class=\"token function\">then<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>\u00a0<span class=\"token keyword\">default<\/span><span class=\"token operator\">:<\/span>\u00a0myModule\u00a0<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span>\r\n    myModule<span class=\"token punctuation\">.<\/span><span class=\"token function\">init<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span>\r\n<span class=\"token punctuation\">.<\/span><span class=\"token function\">catch<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">error<\/span> <span class=\"token operator\">=&gt;<\/span> console<span class=\"token punctuation\">.<\/span><span class=\"token function\">error<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'Failed to load module:'<\/span><span class=\"token punctuation\">,<\/span> error<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<\/div>\n<p class=\"sc-eDZJfc dNqjyD\"><strong><span class=\"sc-EJAja gTUZZW\">3. \u041a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/span><\/strong><\/p>\n<p class=\"sc-jmpzUR cfetIB\"><span class=\"sc-EJAja gTUZZW\">\u041a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443 \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0447\u0430\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e, \u0438\u0437\u0431\u0435\u0433\u0430\u044f \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043a \u0441\u0435\u0440\u0432\u0435\u0440\u0443. \u042d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0443\u0441\u043a\u043e\u0440\u044f\u0435\u0442 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043f\u043e\u0441\u0435\u0449\u0435\u043d\u0438\u044f \u0441\u0430\u0439\u0442\u0430.<\/span><\/p>\n<p class=\"sc-eDZJfc dNqjyD\"><strong><span class=\"sc-EJAja gTUZZW\">HTTP-\u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/span><\/strong><\/p>\n<p class=\"sc-jmpzUR cfetIB\"><span class=\"sc-EJAja gTUZZW\">\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u0442\u0435 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438\u00a0<\/span><span class=\"sc-EJAja gTUZZW\"><code class=\"sc-iveFHk dlEjPr\">Cache-Control<\/code><\/span><span class=\"sc-EJAja gTUZZW\">\u00a0\u0438\u00a0<\/span><span class=\"sc-EJAja gTUZZW\"><code class=\"sc-iveFHk dlEjPr\">Expires<\/code><\/span><span class=\"sc-EJAja gTUZZW\">\u00a0\u043d\u0430 \u0432\u0430\u0448\u0435\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432:<\/span><\/p>\n<p class=\"sc-eDZJfc dNqjyD\"><strong><span class=\"sc-EJAja gTUZZW\">\u041f\u0440\u0438\u043c\u0435\u0440 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043d\u0430 Apache:<\/span><\/strong><\/p>\n<div class=\"sc-iTFTee dOrRfG\">\n<pre class=\"sc-iAEawV jJcDgg line-numbers language-apache\" tabindex=\"0\"><code class=\"sc-cabOPr cVdCvb language-apache\">&lt;IfModule mod_expires.c&gt;\r\n    ExpiresActive On\r\n    ExpiresByType text\/html \"access plus 600 seconds\"\r\n    ExpiresByType image\/gif \"access plus 2592000 seconds\"\r\n    ExpiresByType image\/jpeg \"access plus 2592000 seconds\"\r\n    ExpiresByType image\/png \"access plus 2592000 seconds\"\r\n&lt;\/IfModule&gt;<\/code><\/pre>\n<\/div>\n<p class=\"sc-eDZJfc dNqjyD\"><strong><span class=\"sc-EJAja gTUZZW\">Service Workers<\/span><\/strong><\/p>\n<p class=\"sc-jmpzUR cfetIB\"><span class=\"sc-EJAja gTUZZW\">Service workers \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043e\u0444\u0444\u043b\u0430\u0439\u043d-\u0432\u0435\u0440\u0441\u0438\u0438 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430:<\/span><\/p>\n<p class=\"sc-eDZJfc dNqjyD\"><strong><span class=\"sc-EJAja gTUZZW\">\u041f\u0440\u0438\u043c\u0435\u0440 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438 service worker:<\/span><\/strong><\/p>\n<div class=\"sc-iTFTee dOrRfG\">\n<pre class=\"sc-iAEawV jJcDgg line-numbers language-js\" tabindex=\"0\"><code class=\"sc-cabOPr cVdCvb language-js\"><span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token string\">'serviceWorker'<\/span> <span class=\"token keyword\">in<\/span> navigator<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n    window<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'load'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span>\r\n        navigator<span class=\"token punctuation\">.<\/span>serviceWorker<span class=\"token punctuation\">.<\/span><span class=\"token function\">register<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'\/service-worker.js'<\/span><span class=\"token punctuation\">)<\/span>\r\n            <span class=\"token punctuation\">.<\/span><span class=\"token function\">then<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">registration<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span>\r\n                console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'Service Worker registered successfully:'<\/span><span class=\"token punctuation\">,<\/span> registration<span class=\"token punctuation\">.<\/span>scope<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n            <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span>\r\n            <span class=\"token punctuation\">.<\/span><span class=\"token function\">catch<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">error<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span>\r\n                console<span class=\"token punctuation\">.<\/span><span class=\"token function\">error<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'Error registering Service Worker:'<\/span><span class=\"token punctuation\">,<\/span> error<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n            <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<\/div>\n<p class=\"sc-eDZJfc dNqjyD\"><strong><span class=\"sc-EJAja gTUZZW\">\u041f\u0440\u0438\u043c\u0435\u0440 service worker \u0434\u043b\u044f \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f:<\/span><\/strong><\/p>\n<div class=\"sc-iTFTee dOrRfG\">\n<pre class=\"sc-iAEawV jJcDgg line-numbers language-js\" tabindex=\"0\"><code class=\"sc-cabOPr cVdCvb language-js\">self<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'install'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token parameter\">event<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span>\r\n    event<span class=\"token punctuation\">.<\/span><span class=\"token function\">waitUntil<\/span><span class=\"token punctuation\">(<\/span>\r\n        caches<span class=\"token punctuation\">.<\/span><span class=\"token function\">open<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'static-v1'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">then<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">cache<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span>\r\n            <span class=\"token keyword\">return<\/span> cache<span class=\"token punctuation\">.<\/span><span class=\"token function\">addAll<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">[<\/span>\r\n                <span class=\"token string\">'\/'<\/span><span class=\"token punctuation\">,<\/span>\r\n                <span class=\"token string\">'\/styles.css'<\/span><span class=\"token punctuation\">,<\/span>\r\n                <span class=\"token string\">'\/app.js'<\/span>\r\n            <span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n        <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span>\r\n    <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n\r\nself<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'fetch'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token parameter\">event<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span>\r\n    event<span class=\"token punctuation\">.<\/span><span class=\"token function\">respondWith<\/span><span class=\"token punctuation\">(<\/span>\r\n        caches<span class=\"token punctuation\">.<\/span><span class=\"token function\">match<\/span><span class=\"token punctuation\">(<\/span>event<span class=\"token punctuation\">.<\/span>request<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">then<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">response<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span>\r\n            <span class=\"token keyword\">return<\/span> response <span class=\"token operator\">||<\/span> <span class=\"token function\">fetch<\/span><span class=\"token punctuation\">(<\/span>event<span class=\"token punctuation\">.<\/span>request<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n        <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span>\r\n    <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<\/div>\n<p class=\"sc-eDZJfc dNqjyD\"><strong><span class=\"sc-EJAja gTUZZW\">4. \u0410\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432<\/span><\/strong><\/p>\n<p class=\"sc-jmpzUR cfetIB\"><span class=\"sc-EJAja gTUZZW\">\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u0435\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0434\u043e \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0441\u043a\u0440\u0438\u043f\u0442\u0430. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b\u00a0<\/span><span class=\"sc-EJAja gTUZZW\"><code class=\"sc-iveFHk dlEjPr\">async<\/code><\/span><span class=\"sc-EJAja gTUZZW\">\u00a0\u0438\u00a0<\/span><span class=\"sc-EJAja gTUZZW\"><code class=\"sc-iveFHk dlEjPr\">defer<\/code><\/span><span class=\"sc-EJAja gTUZZW\">, \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u043a\u0438:<\/span><\/p>\n<p class=\"sc-eDZJfc dNqjyD\"><strong><span class=\"sc-EJAja gTUZZW\">Async<\/span><\/strong><\/p>\n<div class=\"sc-iTFTee dOrRfG\">\n<pre class=\"sc-iAEawV jJcDgg line-numbers language-html\" tabindex=\"0\"><code class=\"sc-cabOPr cVdCvb language-html\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>script\u00a0<span class=\"token attr-name\">src<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>script.js<span class=\"token punctuation\">\"<\/span><\/span>\u00a0<span class=\"token attr-name\">async<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>script<span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<\/div>\n<p class=\"sc-eDZJfc dNqjyD\"><strong><span class=\"sc-EJAja gTUZZW\">Defer<\/span><\/strong><\/p>\n<div class=\"sc-iTFTee dOrRfG\">\n<pre class=\"sc-iAEawV jJcDgg line-numbers language-html\" tabindex=\"0\"><code class=\"sc-cabOPr cVdCvb language-html\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>script\u00a0<span class=\"token attr-name\">src<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>script.js<span class=\"token punctuation\">\"<\/span><\/span>\u00a0<span class=\"token attr-name\">defer<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>script<span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<\/div>\n<p class=\"sc-eDZJfc dNqjyD\"><strong><span class=\"sc-EJAja gTUZZW\">\u041f\u0440\u0438\u043c\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f defer:<\/span><\/strong><\/p>\n<div class=\"sc-iTFTee dOrRfG\">\n<pre class=\"sc-iAEawV jJcDgg line-numbers language-html\" tabindex=\"0\"><code class=\"sc-cabOPr cVdCvb language-html\"><span class=\"token doctype\"><span class=\"token punctuation\">&lt;!<\/span><span class=\"token doctype-tag\">DOCTYPE<\/span>\u00a0<span class=\"token name\">html<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>html\u00a0<span class=\"token attr-name\">lang<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>en<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>head<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n    <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>meta\u00a0<span class=\"token attr-name\">charset<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>UTF-8<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n    <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>title<span class=\"token punctuation\">&gt;<\/span><\/span>Async and Defer Example<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>title<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>head<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>body<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n    <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>h1<span class=\"token punctuation\">&gt;<\/span><\/span>Hello, World!<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>h1<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n    <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<span class=\"token punctuation\">&gt;<\/span><\/span>This is an example of using the defer attribute.<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>p<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n    \r\n    <span class=\"token comment\">&lt;!-- Script will be executed after the page has been parsed --&gt;<\/span>\r\n    <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>script\u00a0<span class=\"token attr-name\">src<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>example-deferred.js<span class=\"token punctuation\">\"<\/span><\/span>\u00a0<span class=\"token attr-name\">defer<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>script<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>body<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>html<span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<\/div>\n<p class=\"sc-eDZJfc dNqjyD\"><strong><span class=\"sc-EJAja gTUZZW\">5. \u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430<\/span><\/strong><\/p>\n<p class=\"sc-jmpzUR cfetIB\"><span class=\"sc-EJAja gTUZZW\">\u0420\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u043d\u044f\u0442\u044c \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445. \u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438 \u043f\u043e\u043c\u043e\u0433\u0443\u0442 \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430:<\/span><\/p>\n<p class=\"sc-eDZJfc dNqjyD\"><strong><span class=\"sc-EJAja gTUZZW\">Virtual DOM<\/span><\/strong><\/p>\n<p class=\"sc-jmpzUR cfetIB\"><span class=\"sc-EJAja gTUZZW\">\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a React \u0438\u043b\u0438 Vue.js, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0439 DOM \u0434\u043b\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e DOM.<\/span><\/p>\n<p class=\"sc-eDZJfc dNqjyD\"><strong><span class=\"sc-EJAja gTUZZW\">\u041f\u0440\u0438\u043c\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f React:<\/span><\/strong><\/p>\n<div class=\"sc-iTFTee dOrRfG\">\n<pre class=\"sc-iAEawV jJcDgg line-numbers language-js\" tabindex=\"0\"><code class=\"sc-cabOPr cVdCvb language-js\"><span class=\"token keyword\">class<\/span> <span class=\"token class-name\">App<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">React<span class=\"token punctuation\">.<\/span>Component<\/span> <span class=\"token punctuation\">{<\/span>\r\n    <span class=\"token function\">constructor<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">props<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n        <span class=\"token keyword\">super<\/span><span class=\"token punctuation\">(<\/span>props<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>state <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<\/span> <span class=\"token literal-property property\">count<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">0<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\r\n    <span class=\"token punctuation\">}<\/span>\r\n\r\n    <span class=\"token function-variable function\">incrementCount<\/span> <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span>\r\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">setState<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span> <span class=\"token literal-property property\">count<\/span><span class=\"token operator\">:<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>state<span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">+<\/span> <span class=\"token number\">1<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\r\n\r\n    <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n        <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\r\n            <span class=\"token operator\">&lt;<\/span>div<span class=\"token operator\">&gt;<\/span>\r\n                <span class=\"token operator\">&lt;<\/span>h1<span class=\"token operator\">&gt;<\/span>Counter<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>state<span class=\"token punctuation\">.<\/span>count<span class=\"token punctuation\">}<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>h1<span class=\"token operator\">&gt;<\/span>\r\n                <span class=\"token operator\">&lt;<\/span>button onClick<span class=\"token operator\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>incrementCount<span class=\"token punctuation\">}<\/span><span class=\"token operator\">&gt;<\/span>Increment<span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>button<span class=\"token operator\">&gt;<\/span>\r\n            <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">&gt;<\/span>\r\n        <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n    <span class=\"token punctuation\">}<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n\r\nReactDOM<span class=\"token punctuation\">.<\/span><span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token operator\">&lt;<\/span>App <span class=\"token operator\">\/<\/span><span class=\"token operator\">&gt;<\/span><span class=\"token punctuation\">,<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">getElementById<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'root'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<\/div>\n<p class=\"sc-eDZJfc dNqjyD\"><strong><span class=\"sc-EJAja gTUZZW\">\u041e\u0442\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f<\/span><\/strong><\/p>\n<p class=\"sc-jmpzUR cfetIB\"><span class=\"sc-EJAja gTUZZW\">\u0418\u0437\u0431\u0435\u0433\u0430\u0439\u0442\u0435 \u0447\u0430\u0441\u0442\u044b\u0445 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043e\u043a \u044d\u043a\u0440\u0430\u043d\u0430, \u043e\u0442\u043b\u043e\u0436\u0438\u0432 \u0442\u044f\u0436\u0435\u043b\u044b\u0435 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u0434\u043e \u043c\u043e\u043c\u0435\u043d\u0442\u0430, \u043a\u043e\u0433\u0434\u0430 \u043e\u043d\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435\u00a0<\/span><span class=\"sc-EJAja gTUZZW\"><code class=\"sc-iveFHk dlEjPr\">requestAnimationFrame<\/code><\/span><span class=\"sc-EJAja gTUZZW\"> \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438:<\/span><\/p>\n<div class=\"sc-iTFTee dOrRfG\">\n<pre class=\"sc-iAEawV jJcDgg line-numbers language-js\" tabindex=\"0\"><code class=\"sc-cabOPr cVdCvb language-js\"><span class=\"token keyword\">function<\/span> <span class=\"token function\">animate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n    <span class=\"token comment\">\/\/ Heavy calculations here<\/span>\r\n    <span class=\"token function\">requestAnimationFrame<\/span><span class=\"token punctuation\">(<\/span>animate<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n<span class=\"token function\">requestAnimationFrame<\/span><span class=\"token punctuation\">(<\/span>animate<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<\/div>\n<p class=\"sc-eDZJfc dNqjyD\"><strong><span class=\"sc-EJAja gTUZZW\">\u041f\u0440\u0438\u043c\u0435\u0440 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c requestIdleCallback:<\/span><\/strong><\/p>\n<div class=\"sc-iTFTee dOrRfG\">\n<pre class=\"sc-iAEawV jJcDgg line-numbers language-js\" tabindex=\"0\"><code class=\"sc-cabOPr cVdCvb language-js\"><span class=\"token keyword\">let<\/span> task<span class=\"token punctuation\">;<\/span>\r\n\r\n<span class=\"token keyword\">function<\/span> <span class=\"token function\">heavyComputation<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n    <span class=\"token comment\">\/\/ Perform some heavy computation<\/span>\r\n    <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">let<\/span> i <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> i <span class=\"token operator\">&lt;<\/span> <span class=\"token number\">10000000<\/span><span class=\"token punctuation\">;<\/span> i<span class=\"token operator\">++<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">}<\/span>\r\n    console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"Heavy computation done\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n\r\nwindow<span class=\"token punctuation\">.<\/span><span class=\"token function-variable function\">onload<\/span> <span class=\"token operator\">=<\/span> <span class=\"token keyword\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n    task <span class=\"token operator\">=<\/span> <span class=\"token function\">requestIdleCallback<\/span><span class=\"token punctuation\">(<\/span>heavyComputation<span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span> <span class=\"token literal-property property\">timeout<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">3000<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<\/div>\n<p class=\"sc-eDZJfc dNqjyD\"><strong><span class=\"sc-EJAja gTUZZW\">6. \u0418\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u0430\u043d\u0430\u043b\u0438\u0437\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438<\/span><\/strong><\/p>\n<p class=\"sc-jmpzUR cfetIB\"><span class=\"sc-EJAja gTUZZW\">\u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0440\u044f\u0434 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u0430\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u0443\u043b\u0443\u0447\u0448\u0430\u0442\u044c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439:<\/span><\/p>\n<p class=\"sc-eDZJfc dNqjyD\"><strong><span class=\"sc-EJAja gTUZZW\">Lighthouse<\/span><\/strong><\/p>\n<p class=\"sc-jmpzUR cfetIB\"><span class=\"sc-EJAja gTUZZW\">Lighthouse \u2014 \u044d\u0442\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u043e\u0442 Google, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0432 Chrome DevTools \u0438 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u044b\u0435 \u043e\u0442\u0447\u0435\u0442\u044b \u043f\u043e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438, SEO \u0438 \u0434\u0440\u0443\u0433\u0438\u043c \u0430\u0441\u043f\u0435\u043a\u0442\u0430\u043c.<\/span><\/p>\n<p class=\"sc-eDZJfc dNqjyD\"><strong><span class=\"sc-EJAja gTUZZW\">\u0417\u0430\u043f\u0443\u0441\u043a Lighthouse \u0438\u0437 \u043a\u043e\u043c\u0430\u043d\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438:<\/span><\/strong><\/p>\n<div class=\"sc-iTFTee dOrRfG\">\n<pre class=\"sc-iAEawV jJcDgg line-numbers language-bash\" tabindex=\"0\"><code class=\"sc-cabOPr cVdCvb language-bash\">lighthouse https:\/\/www.example.com --view<\/code><\/pre>\n<\/div>\n<p class=\"sc-eDZJfc dNqjyD\"><strong><span class=\"sc-EJAja gTUZZW\">WebPageTest<\/span><\/strong><\/p>\n<p class=\"sc-jmpzUR cfetIB\"><span class=\"sc-EJAja gTUZZW\">WebPageTest \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0430\u0439\u0442 \u043d\u0430 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445 \u0438 \u0441\u0435\u0442\u044f\u0445, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044f \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0438 \u0432\u043e\u0434\u044f\u043d\u044b\u0435 \u0437\u043d\u0430\u043a\u0438.<\/span><\/p>\n<p class=\"sc-eDZJfc dNqjyD\"><strong><span class=\"sc-EJAja gTUZZW\">\u041f\u0440\u0438\u043c\u0435\u0440 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0442\u0435\u0441\u0442\u0430 \u0447\u0435\u0440\u0435\u0437 WebPageTest API:<\/span><\/strong><\/p>\n<div class=\"sc-iTFTee dOrRfG\">\n<pre class=\"sc-iAEawV jJcDgg line-numbers language-bash\" tabindex=\"0\"><code class=\"sc-cabOPr cVdCvb language-bash\">curl 'https:\/\/www.webpagetest.org\/runtest.php?url=https:\/\/www.example.com&amp;k=your_api_key&amp;f=json'<\/code><\/pre>\n<\/div>\n<p class=\"sc-eDZJfc dNqjyD\"><strong><span class=\"sc-EJAja gTUZZW\">Chrome DevTools<\/span><\/strong><\/p>\n<p class=\"sc-jmpzUR cfetIB\"><span class=\"sc-EJAja gTUZZW\">Chrome DevTools \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u0430\u043d\u0430\u043b\u0438\u0437\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u043f\u0440\u043e\u0444\u0438\u043b\u0438\u0440\u043e\u0432\u0449\u0438\u043a, \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u043d\u0433 \u0441\u0435\u0442\u0438 \u0438 \u043f\u0430\u043c\u044f\u0442\u0438.<\/span><\/p>\n<p class=\"sc-eDZJfc dNqjyD\"><strong><span class=\"sc-EJAja gTUZZW\">\u041f\u0440\u0438\u043c\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f Performance \u043f\u0430\u043d\u0435\u043b\u0438:<\/span><\/strong><\/p>\n<p class=\"sc-jmpzUR cfetIB\"><span class=\"sc-EJAja gTUZZW\">\u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 Chrome DevTools (<\/span><span class=\"sc-EJAja gTUZZW\"><code class=\"sc-iveFHk dlEjPr\">Ctrl+Shift+I<\/code><\/span><span class=\"sc-EJAja gTUZZW\">), \u043f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u043d\u0430 \u0432\u043a\u043b\u0430\u0434\u043a\u0443\u00a0<\/span><strong class=\"sc-fmZqYP yjslu\"><span class=\"sc-EJAja gTUZZW\">Performance<\/span><\/strong><span class=\"sc-EJAja gTUZZW\">, \u043d\u0430\u0436\u043c\u0438\u0442\u0435 \u043a\u043d\u043e\u043f\u043a\u0443 \u0437\u0430\u043f\u0438\u0441\u0438 \u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u0439\u0442\u0435 \u0441 \u0441\u0430\u0439\u0442\u043e\u043c. \u041f\u043e \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u0438 \u0437\u0430\u043f\u0438\u0441\u0438 \u0432\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0435 \u043e\u0442\u0447\u0435\u0442 \u0441 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0435\u0439 \u043e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438.<\/span><\/p>\n<p class=\"sc-jmpzUR cfetIB\"><span class=\"sc-EJAja gTUZZW\">\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043d\u0430 JavaScript \u2014 \u044d\u0442\u043e \u043d\u0435\u043f\u0440\u0435\u0440\u044b\u0432\u043d\u044b\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441, \u0442\u0440\u0435\u0431\u0443\u044e\u0449\u0438\u0439 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u043a \u0434\u0435\u0442\u0430\u043b\u044f\u043c \u0438 \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u043e\u0433\u043e \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u043d\u0433\u0430. \u041f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0445 \u043f\u0440\u0430\u043a\u0442\u0438\u043a \u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0431\u044b\u0441\u0442\u0440\u044b\u0435 \u0438 \u043e\u0442\u0437\u044b\u0432\u0447\u0438\u0432\u044b\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0440\u0430\u0434\u0443\u044e\u0442 \u0432\u0430\u0448\u0438\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u041f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0438\u0433\u0440\u0430\u0435\u0442 \u043a\u043b\u044e\u0447\u0435\u0432\u0443\u044e \u0440\u043e\u043b\u044c \u0432 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u0438 \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043e\u043f\u044b\u0442\u0430. \u041c\u0435\u0434\u043b\u0435\u043d\u043d\u044b\u0435 \u0441\u0430\u0439\u0442\u044b \u0440\u0430\u0437\u0434\u0440\u0430\u0436\u0430\u044e\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u0438 \u043d\u0435\u0433\u0430\u0442\u0438\u0432\u043d\u043e \u0432\u043b\u0438\u044f\u044e\u0442 \u043d\u0430 \u043a\u043e\u043d\u0432\u0435\u0440\u0441\u0438\u044e \u0438 \u0443\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435 \u0430\u0443\u0434\u0438\u0442\u043e\u0440\u0438\u0438. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043b\u0443\u0447\u0448\u0438\u0435 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438 \u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \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 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043d\u0430 JavaScript, \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0432 \u0438\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c\u0438 \u0438 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u044f\u043c\u0438. 1. \u041c\u0438\u043d\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0438 \u0441\u0436\u0430\u0442\u0438\u0435 \u043a\u043e\u0434\u0430 \u0423\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0444\u0430\u0439\u043b\u043e\u0432 JavaScript \u2014 \u043f\u0435\u0440\u0432\u044b\u0439 \u0448\u0430\u0433 \u043a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":133386,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[463],"tags":[],"class_list":["post-133385","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript"],"views":539,"_links":{"self":[{"href":"http:\/\/rcl-radio.ru\/index.php?rest_route=\/wp\/v2\/posts\/133385","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/rcl-radio.ru\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/rcl-radio.ru\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/rcl-radio.ru\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/rcl-radio.ru\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=133385"}],"version-history":[{"count":1,"href":"http:\/\/rcl-radio.ru\/index.php?rest_route=\/wp\/v2\/posts\/133385\/revisions"}],"predecessor-version":[{"id":133387,"href":"http:\/\/rcl-radio.ru\/index.php?rest_route=\/wp\/v2\/posts\/133385\/revisions\/133387"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/rcl-radio.ru\/index.php?rest_route=\/wp\/v2\/media\/133386"}],"wp:attachment":[{"href":"http:\/\/rcl-radio.ru\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=133385"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/rcl-radio.ru\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=133385"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/rcl-radio.ru\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=133385"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}