{"id":405914,"date":"2024-06-29T18:36:10","date_gmt":"2024-06-29T18:36:10","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=405914"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=405914","title":{"rendered":"<span>JavaScript: 2 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f Intersection Observer API<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-1\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/h9\/1y\/u3\/h91yu3brxvtfdyiac92z9q7qw4u.png\" data-src=\"https:\/\/habrastorage.org\/webt\/h9\/1y\/u3\/h91yu3brxvtfdyiac92z9q7qw4u.png\"\/>  <\/p>\n<p>  \u041f\u0440\u0438\u0432\u0435\u0442, \u0434\u0440\u0443\u0437\u044c\u044f!<\/p>\n<p>  <\/p>\n<p>\u041d\u0430 \u0434\u043d\u044f\u0445 \u043c\u043d\u0435 \u043f\u043e\u0441\u0447\u0430\u0441\u0442\u043b\u0438\u0432\u0438\u043b\u043e\u0441\u044c \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c\u0441\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c 2 \u043d\u0435\u0441\u043b\u043e\u0436\u043d\u044b\u0445, \u043d\u043e \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0445 \u0437\u0430\u0434\u0430\u0447 \u043d\u0430 \u0447\u0438\u0441\u0442\u043e\u043c <code>JavaScript<\/code> (\u0438\u0437-\u0437\u0430 <code>React<\/code> \u0447\u0443\u0442\u044c \u043d\u0435 \u0437\u0430\u0431\u044b\u043b, \u043a\u0430\u043a \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f). \u0412 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u044d\u0442\u0438\u0445 \u0437\u0430\u0434\u0430\u0447 \u043d\u0438\u043a\u0442\u043e \u043d\u0435 \u043f\u043e\u0441\u0442\u0440\u0430\u0434\u0430\u043b, \u043d\u0430\u043f\u0440\u043e\u0442\u0438\u0432, \u0432\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u0438\u0441\u044c \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u044b. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u0440\u0435\u0448\u0438\u043b \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430\u043c\u0438 \u0441 \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u043e\u043c.<\/p>\n<p>  <\/p>\n<p><em>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435<\/em>: \u0434\u0430\u043d\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u043d\u0430, \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u043d\u0430 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0438 \u0432\u0440\u044f\u0434 \u043b\u0438 \u043f\u043e\u043a\u0430\u0436\u0435\u0442\u0441\u044f \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0439 \u043e\u043f\u044b\u0442\u043d\u044b\u043c, \u0445\u043e\u0442\u044f, \u0441\u043c\u0435\u044e \u043d\u0430\u0434\u0435\u044f\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 \u043d\u0435 \u043f\u043e\u0436\u0430\u043b\u0435\u044e\u0442 \u043f\u043e\u0442\u0440\u0430\u0447\u0435\u043d\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u0435\u0441\u043b\u0438 \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u044e\u0442 \u0435\u0435 \u0434\u043e \u043a\u043e\u043d\u0446\u0430.<\/p>\n<p>  <\/p>\n<h2 id=\"vvedenie\">\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/h2>\n<p>  <\/p>\n<p>\u0418\u0442\u0430\u043a, \u0437\u0430\u0434\u0430\u0447\u0438 \u0431\u044b\u043b\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c\u0438:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0420\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044e \u043f\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0430\u043c \u0441\u0430\u0439\u0442\u0430 \u0441 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u043c \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u0430 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u043c\u0435\u0441\u0442\u043e\u043d\u0430\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u044c \u043a \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u043c\u0443 \u0440\u0430\u0437\u0434\u0435\u043b\u0443 \u043f\u043e \u043a\u043b\u0438\u043a\u0443. \u0421\u0430\u043c\u0430 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f \u0441\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u043c\u0430\u043a\u0435\u0442\u0443 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u043b\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a:<\/li>\n<\/ul>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/y3\/if\/5m\/y3if5mtvau91r3hooek10sjpcl8.png\" data-src=\"https:\/\/habrastorage.org\/webt\/y3\/if\/5m\/y3if5mtvau91r3hooek10sjpcl8.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<ul>\n<li>\u0420\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c &#171;\u043b\u0435\u043d\u0438\u0432\u0443\u044e&#187; (\u043e\u0442\u043b\u043e\u0436\u0435\u043d\u043d\u0443\u044e, lazy) \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u043c\u0435\u0434\u0438\u0430\u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 (\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u0430\u0443\u0434\u0438\u043e \u0438 \u0432\u0438\u0434\u0435\u043e), \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0442\u0435 \u0436\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0434\u0430\u0436\u0435 \u043f\u043e\u0441\u043b\u0435 \u0441\u0436\u0430\u0442\u0438\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <a href=\"https:\/\/www.npmjs.com\/package\/gulp-imagemin\"><code>gulp-imagemin<\/code><\/a> \u0432\u0435\u0441\u0438\u043b\u0438 (\u0438 \u0432\u0435\u0441\u044f\u0442, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043e\u043d\u0438 \u043d\u0438\u043a\u0443\u0434\u0430 \u043d\u0435 \u0434\u0435\u043b\u0438\u0441\u044c) \u043d\u0435\u043f\u0440\u0438\u043b\u0438\u0447\u043d\u044b\u0435 50 \u041c\u0431 \u0438 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u043b\u0438\u0441\u044c \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f (\u0431\u043e\u043b\u044c\u0448\u0435 \u043e\u043d\u0438 \u0441\u0435\u0431\u044f \u0442\u0430\u043a \u043d\u0435 \u0432\u0435\u0434\u0443\u0442).<a name=\"habracut\"><\/a><\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u041a\u0430\u043a \u044f \u0443\u0436\u0435 \u0441\u043a\u0430\u0437\u0430\u043b, \u043e\u0431\u0435 \u0437\u0430\u0434\u0430\u0447\u0438 \u043d\u0430\u0434\u043e \u0431\u044b\u043b\u043e \u0440\u0435\u0448\u0438\u0442\u044c \u043d\u0430 \u0432\u0430\u043d\u0438\u043b\u044c\u043d\u043e\u043c <code>JS<\/code>. \u041f\u043e\u0447\u0435\u043c\u0443? \u041f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043f\u0440\u043e\u0435\u043a\u0442 \u0431\u044b\u043b, \u0447\u0442\u043e \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f, legacy \u2014 <code>Python<\/code> \u0432 \u043b\u0438\u0446\u0435 <a href=\"https:\/\/wagtail.io\/\"><code>Wagtail<\/code><\/a> \u0438 <code>JS<\/code> \u0432 \u043b\u0438\u0446\u0435 <a href=\"https:\/\/jquery.com\/\"><code>JQuery<\/code><\/a>.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u0437\u0433\u043b\u044f\u0434, \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u043d\u044b\u0435 \u0437\u0430\u0434\u0430\u0447\u0438 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u0438 \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0438\u0447\u0435\u0433\u043e \u043e\u0431\u0449\u0435\u0433\u043e. \u201c\u0427\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0438\u0445 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0442\u044c?\u201d \u2014 \u0441\u043f\u0440\u043e\u0441\u0438\u0442\u0435 \u0432\u044b.<\/p>\n<p>  <\/p>\n<p>\u041e\u0442\u0432\u0435\u0442: \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0438\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u044f. \u0412\u044b \u043d\u0435 \u043e\u0441\u043b\u044b\u0448\u0430\u043b\u0438\u0441\u044c, \u043e\u0431\u0435 \u0437\u0430\u0434\u0430\u0447\u0438 \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0448\u0438\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043e\u0434\u043d\u043e\u0433\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430 \u0438 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0435\u0433\u043e \u0434\u0430\u0436\u0435 \u043d\u0435 \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c. \u0414\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0437\u0430\u0434\u0430\u0447 \u043d\u0430\u043c \u043d\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u044e\u0442\u0441\u044f \u043d\u0438 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u043d\u0438 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0443\u0442\u0438\u043b\u0438\u0442\u044b \u2014 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441, \u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0438\u0434\u0435\u0442 \u0440\u0435\u0447\u044c, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0430\u043c\u0438\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u043c.<\/p>\n<p>  <\/p>\n<p>\u041a\u0430\u043a \u0432\u044b \u0443\u0436\u0435 \u043c\u043e\u0433\u043b\u0438 \u0434\u043e\u0433\u0430\u0434\u0430\u0442\u044c\u0441\u044f \u043f\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044e \u0441\u0442\u0430\u0442\u044c\u0438, \u044f \u0433\u043e\u0432\u043e\u0440\u044e \u043e\u0431 <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/API\/Intersection_Observer_API\"><code>Intersection Observer API<\/code><\/a> (\u0434\u0430\u043b\u0435\u0435 \u2014 <code>IOA<\/code>). \u0414\u0430\u043d\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 <a href=\"https:\/\/caniuse.com\/intersectionobserver\">\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432\u0441\u0435\u043c\u0438 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438<\/a>.<\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u043a\u0440\u0430\u0442\u043a\u043e, \u0442\u043e <code>IOA<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043c\u043e\u043c\u0435\u043d\u0442 \u043f\u0435\u0440\u0435\u0441\u0435\u0447\u0435\u043d\u0438\u044f \u0446\u0435\u043b\u0435\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441 \u0435\u0433\u043e \u043f\u0440\u0435\u0434\u043a\u043e\u043c, \u0435\u0441\u043b\u0438 \u0442\u0430\u043a\u043e\u0432\u043e\u0439 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d \u0432 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u0445, \u0438\u043b\u0438 \u0441 \u043e\u0431\u043b\u0430\u0441\u0442\u044c\u044e \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 (<code>viewport<\/code>).<\/p>\n<p>  <\/p>\n<p>\u042d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 <code>IOA<\/code> \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u0442\u0430\u043a:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const observer = new IntersectionObserver(callback, options)<\/code><\/pre>\n<p>  <\/p>\n<p>\u041a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 <code>IntersectionObserver<\/code> \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 2 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430: \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0433\u043e \u0432\u044b\u0437\u043e\u0432\u0430, \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c\u0443\u044e \u0432 \u043c\u043e\u043c\u0435\u043d\u0442 \u043f\u0435\u0440\u0435\u0441\u0435\u0447\u0435\u043d\u0438\u044f \u2014 <code>callback<\/code>, \u0438 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438 \u2014 <code>options<\/code>.<\/p>\n<p>  <\/p>\n<p>\u041e\u0431\u044a\u0435\u043a\u0442 \u0441 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438 \u043c\u043e\u0436\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/API\/IntersectionObserver#properties\">3 \u043f\u043e\u043b\u044f<\/a>:<\/p>\n<p>  <\/p>\n<ul>\n<li><code>root<\/code> \u2014 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u0437\u0430 \u043f\u0435\u0440\u0435\u0441\u0435\u0447\u0435\u043d\u0438\u0435\u043c \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c (\u0446\u0435\u043b\u0435\u0432\u044b\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c) \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u0442 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u0435\u043b\u044c (\u0438\u0437\u0432\u0438\u043d\u0438\u0442\u0435 \u0437\u0430 \u0442\u0430\u0432\u0442\u043e\u043b\u043e\u0433\u0438\u044e). \u0415\u0441\u043b\u0438 <code>root<\/code> \u043d\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d \u0438\u043b\u0438 \u0438\u043c\u0435\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>null<\/code>, \u043f\u0440\u0435\u0434\u043a\u043e\u043c \u0446\u0435\u043b\u0435\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f <code>viewport<\/code><\/li>\n<li><code>rootMargin<\/code> \u2014 \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0432\u043e\u043a\u0440\u0443\u0433 <code>root<\/code>. \u041a\u0430\u043a \u0438 \u0434\u043b\u044f CSS-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>margin<\/code>, \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0434\u043b\u044f <code>rooMargin<\/code> \u043c\u043e\u0433\u0443\u0442 \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445, \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u0430\u0445, em, rem \u0438 \u0442.\u0434., \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>20px 10px<\/code>. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0434\u0430\u043d\u043d\u0430\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0438\u043c\u0435\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>0<\/code><\/li>\n<li><code>threshold<\/code> \u2014 \u043f\u0440\u043e\u0446\u0435\u043d\u0442 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0446\u0435\u043b\u0435\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043e\u0442 <code>0<\/code> \u0434\u043e <code>1<\/code>. \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u043e\u0439 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0432\u0438\u0434\u0435 \u0447\u0438\u0441\u043b\u0430 \u0438\u043b\u0438 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0447\u0438\u0441\u0435\u043b. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0442\u0430\u043a\u0436\u0435 \u0438\u043c\u0435\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>0<\/code><\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u041d\u0430\u0431\u043b\u044e\u0434\u0435\u043d\u0438\u0435 \u0437\u0430 \u0446\u0435\u043b\u0435\u0432\u044b\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043e\u043c \u0432\u044b\u0437\u043e\u0432\u0430 \u043c\u0435\u0442\u043e\u0434\u0430 <code>observe<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">observer.observe(target)<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0442\u0430\u043a\u0436\u0435 <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/API\/IntersectionObserver#methods\">\u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0434\u0440\u0443\u0433\u0438\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432<\/a>, \u043d\u043e \u043c\u044b \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e <code>observe<\/code>.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438 \u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u0438 \u0446\u0435\u043b\u0435\u0432\u044b\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c \u043f\u043e\u0440\u043e\u0433\u043e\u0432\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f (<code>threshold<\/code>) \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f <code>callback<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0441\u043f\u0438\u0441\u043e\u043a \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 <code>entries<\/code> \u0438 \u0441\u0430\u043c\u043e\u0433\u043e \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u0435\u043b\u044f. \u041a\u0430\u0436\u0434\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 <code>entry<\/code> \u0438\u043c\u0435\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432 (<code>target<\/code>, <code>time<\/code>, <code>intersectionRatio<\/code> \u0438 \u0434\u0440.). \u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043d\u0430\u0441 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u0435\u0442, \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f <code>isIntersection<\/code> \u2014 \u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u0432\u044b\u0441\u0442\u0443\u043f\u0430\u044e\u0449\u0435\u0435 \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u043e\u043c \u043d\u0430\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u044f \u0446\u0435\u043b\u0435\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u0437\u043e\u043d\u0435 \u043f\u0435\u0440\u0435\u0441\u0435\u0447\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p>\u041a\u0441\u0442\u0430\u0442\u0438, \u043f\u0440\u043e\u0446\u0435\u043d\u0442 \u043f\u0435\u0440\u0435\u0441\u0435\u0447\u0435\u043d\u0438\u044f \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>intersectionRatio<\/code>.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0436\u0430\u043b\u0443\u0439, \u044d\u0442\u043e \u0432\u0441\u0435, \u0447\u0442\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0437\u043d\u0430\u0442\u044c \u043e\u0431 <code>IOA<\/code> \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u0440\u0435\u0448\u0438\u0442\u044c \u043d\u0430\u0448\u0438 \u0437\u0430\u0434\u0430\u0447\u0438. \u041f\u0440\u0438\u0441\u0442\u0443\u043f\u0430\u0435\u043c.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438.<\/p>\n<p>  <\/p>\n<h2 id=\"realizaciya-navigacii-po-razdelam-sayta\">\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u043f\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0430\u043c \u0441\u0430\u0439\u0442\u0430<\/h2>\n<p>  <\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u0443\u0436\u0434\u0430\u0442\u044c.<\/p>\n<p>  <\/p>\n<p>\u042d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043c\u0435\u043d\u044e (\u0441\u0441\u044b\u043b\u043a\u0438) \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0442 \u0440\u0430\u0437\u0434\u0435\u043b\u0430\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b (\u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u043e\u0432, \u0435\u0441\u043b\u0438 \u0431\u044b\u0442\u044c \u0442\u043e\u0447\u043d\u0435\u0435). \u041a\u0430\u0436\u0434\u043e\u043c\u0443 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0443 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u0430\u044f \u0441\u0441\u044b\u043b\u043a\u0430. \u041c\u044b \u044d\u0442\u043e \u0437\u043d\u0430\u0435\u043c, \u043d\u043e \u044d\u0442\u043e\u0433\u043e \u043d\u0435 \u0437\u043d\u0430\u0435\u0442 <code>JS<\/code>. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043a\u0430\u043a-\u0442\u043e \u0441\u043e\u043e\u0431\u0449\u0438\u0442\u044c \u0435\u043c\u0443 \u043e\u0431 \u044d\u0442\u0438\u0445 \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u044f\u0445 <code>\u043e\u0434\u0438\u043d \u043a \u043e\u0434\u043d\u043e\u043c\u0443<\/code>. \u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u043d\u043e \u0441\u0430\u043c\u044b\u043c \u043f\u0440\u043e\u0441\u0442\u044b\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Learn\/HTML\/Howto\/Use_data_attributes\"><code>data-*<\/code><\/a>. \u041d\u0430\u0437\u043e\u0432\u0435\u043c \u0435\u0433\u043e <code>data-section<\/code>. \u041f\u0443\u0441\u043a\u0430\u0439 \u0434\u043b\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u044b \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438 \u044d\u0442\u0438\u0445 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 \u0431\u0443\u0434\u0443\u0442 \u043d\u043e\u043c\u0435\u0440\u0430 \u0440\u0430\u0437\u0434\u0435\u043b\u043e\u0432 (1, 2, 3 \u0438 \u0442.\u0434.).<\/p>\n<p>  <\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u043d\u0430\u043c \u043d\u0443\u0436\u0435\u043d \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u0441\u043f\u043e\u0441\u043e\u0431 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0430, \u0442.\u0435. \u0440\u0430\u0437\u0434\u0435\u043b\u0430, \u043f\u0440\u043e\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0435\u043c\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c. \u0421\u0430\u043c\u044b\u043c \u043f\u0440\u043e\u0441\u0442\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043a \u0442\u0430\u043a\u043e\u043c\u0443 \u0440\u0430\u0437\u0434\u0435\u043b\u0443 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0433\u043e CSS-\u043a\u043b\u0430\u0441\u0441\u0430. \u041d\u0430\u0437\u043e\u0432\u0435\u043c \u044d\u0442\u043e\u0442 \u043a\u043b\u0430\u0441\u0441 <code>active<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0412\u043e\u0442 \u043a\u0430\u043a \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043e\u0434\u0438\u043d \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u0435\u043c\u0443 \u0440\u0430\u0437\u0434\u0435\u043b:<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;!-- \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 --> &lt;div class=\"step active\" data-section=\"1\">  &lt;span class=\"text\">Section 1&lt;\/span>  &lt;div class=\"dot\">&lt;\/div> &lt;\/div>  &lt;!-- \u0440\u0430\u0437\u0434\u0435\u043b \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u044d\u0442\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 --> &lt;section data-section=\"1\">  &lt;h2>Section 1&lt;\/h2>  &lt;p>\u041c\u043d\u043e\u0433\u043e lorem&lt;\/p> &lt;\/section><\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0430\u043a\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u0440\u0430\u0437\u0434\u0435\u043b\u043e\u0432 \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 5 \u0448\u0442\u0443\u043a.<\/p>\n<p>  <\/p>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">\u0412\u0441\u044f \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430:<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"html\">&lt;div id=\"page\">  &lt;nav aria-label=\"section navigation\">    &lt;div class=\"step active\" data-section=\"1\">      &lt;span class=\"text\">Section 1&lt;\/span>      &lt;div class=\"dot\">&lt;\/div>    &lt;\/div>    &lt;div class=\"line\">&lt;\/div>    &lt;div class=\"step\" data-section=\"2\">      &lt;span class=\"text\">Section 2&lt;\/span>      &lt;div class=\"dot\">&lt;\/div>    &lt;\/div>    &lt;div class=\"line\">&lt;\/div>    &lt;div class=\"step\" data-section=\"3\">      &lt;span class=\"text\">Section 3&lt;\/span>      &lt;div class=\"dot\">&lt;\/div>    &lt;\/div>    &lt;div class=\"line\">&lt;\/div>    &lt;div class=\"step\" data-section=\"4\">      &lt;span class=\"text\">Section 4&lt;\/span>      &lt;div class=\"dot\">&lt;\/div>    &lt;\/div>    &lt;div class=\"line\">&lt;\/div>    &lt;div class=\"step\" data-section=\"5\">      &lt;span class=\"text\">Section 5&lt;\/span>      &lt;div class=\"dot\">&lt;\/div>    &lt;\/div>  &lt;\/nav>   &lt;main>    &lt;section data-section=\"1\">      &lt;h2>Section 1&lt;\/h2>      &lt;p>        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sit        deserunt ea reiciendis sint ex recusandae repudiandae, ratione non        vero! Aliquam sed quis inventore aperiam quidem, velit illo        voluptates amet architecto aspernatur, et neque ipsam veritatis        itaque eius est vero illum officiis totam, a hic. Ex est quae vitae        itaque suscipit dolorem corporis assumenda exercitationem quos iure,        deserunt repellendus provident possimus, architecto iste mollitia        nemo dicta dolores ipsa labore deleniti doloremque? Sit omnis minima        quis voluptate sapiente rerum fugit totam ut illo reprehenderit        earum ratione temporibus sequi odio consectetur perspiciatis, soluta        quidem dicta aliquid. Totam, animi placeat quisquam ducimus        adipisci, velit ipsam alias inventore earum sit eveniet rem hic        labore repellendus, aut quam reprehenderit esse temporibus quas quo        laudantium fuga! Quidem tempore illum atque sit optio nisi, eius        reiciendis perferendis similique, voluptatum maxime qui ipsam        deleniti vitae quia vero ad consequatur aspernatur voluptatibus quo        facere? Consequuntur, non ipsa? Assumenda repellat impedit dolores        eius dolorem debitis eaque aspernatur deleniti optio atque, est iure        excepturi ullam odio, natus quos sit! Nostrum aspernatur quos esse        quisquam! Aut exercitationem aspernatur expedita quam ullam quas quo        dignissimos. Animi ex incidunt architecto, quaerat vel qui illum        ipsa dolores nesciunt sapiente suscipit odio facere corrupti.        Itaque, provident quis?      &lt;\/p>    &lt;\/section>    &lt;section data-section=\"2\">      &lt;h2>Section 2&lt;\/h2>      &lt;p>        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sit        deserunt ea reiciendis sint ex recusandae repudiandae, ratione non        vero! Aliquam sed quis inventore aperiam quidem, velit illo        voluptates amet architecto aspernatur, et neque ipsam veritatis        itaque eius est vero illum officiis totam, a hic. Ex est quae vitae        itaque suscipit dolorem corporis assumenda exercitationem quos iure,        deserunt repellendus provident possimus, architecto iste mollitia        nemo dicta dolores ipsa labore deleniti doloremque? Sit omnis minima        quis voluptate sapiente rerum fugit totam ut illo reprehenderit        earum ratione temporibus sequi odio consectetur perspiciatis, soluta        quidem dicta aliquid. Totam, animi placeat quisquam ducimus        adipisci, velit ipsam alias inventore earum sit eveniet rem hic        labore repellendus, aut quam reprehenderit esse temporibus quas quo        laudantium fuga! Quidem tempore illum atque sit optio nisi, eius        reiciendis perferendis similique, voluptatum maxime qui ipsam        deleniti vitae quia vero ad consequatur aspernatur voluptatibus quo        facere? Consequuntur, non ipsa? Assumenda repellat impedit dolores        eius dolorem debitis eaque aspernatur deleniti optio atque, est iure        excepturi ullam odio, natus quos sit! Nostrum aspernatur quos esse        quisquam! Aut exercitationem aspernatur expedita quam ullam quas quo        dignissimos. Animi ex incidunt architecto, quaerat vel qui illum        ipsa dolores nesciunt sapiente suscipit odio facere corrupti.        Itaque, provident quis?      &lt;\/p>    &lt;\/section>    &lt;section data-section=\"3\">      &lt;h2>Section 3&lt;\/h2>      &lt;p>        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sit        deserunt ea reiciendis sint ex recusandae repudiandae, ratione non        vero! Aliquam sed quis inventore aperiam quidem, velit illo        voluptates amet architecto aspernatur, et neque ipsam veritatis        itaque eius est vero illum officiis totam, a hic. Ex est quae vitae        itaque suscipit dolorem corporis assumenda exercitationem quos iure,        deserunt repellendus provident possimus, architecto iste mollitia        nemo dicta dolores ipsa labore deleniti doloremque? Sit omnis minima        quis voluptate sapiente rerum fugit totam ut illo reprehenderit        earum ratione temporibus sequi odio consectetur perspiciatis, soluta        quidem dicta aliquid. Totam, animi placeat quisquam ducimus        adipisci, velit ipsam alias inventore earum sit eveniet rem hic        labore repellendus, aut quam reprehenderit esse temporibus quas quo        laudantium fuga! Quidem tempore illum atque sit optio nisi, eius        reiciendis perferendis similique, voluptatum maxime qui ipsam        deleniti vitae quia vero ad consequatur aspernatur voluptatibus quo        facere? Consequuntur, non ipsa? Assumenda repellat impedit dolores        eius dolorem debitis eaque aspernatur deleniti optio atque, est iure        excepturi ullam odio, natus quos sit! Nostrum aspernatur quos esse        quisquam! Aut exercitationem aspernatur expedita quam ullam quas quo        dignissimos. Animi ex incidunt architecto, quaerat vel qui illum        ipsa dolores nesciunt sapiente suscipit odio facere corrupti.        Itaque, provident quis?      &lt;\/p>    &lt;\/section>    &lt;section data-section=\"4\">      &lt;h2>Section 4&lt;\/h2>      &lt;p>        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sit        deserunt ea reiciendis sint ex recusandae repudiandae, ratione non        vero! Aliquam sed quis inventore aperiam quidem, velit illo        voluptates amet architecto aspernatur, et neque ipsam veritatis        itaque eius est vero illum officiis totam, a hic. Ex est quae vitae        itaque suscipit dolorem corporis assumenda exercitationem quos iure,        deserunt repellendus provident possimus, architecto iste mollitia        nemo dicta dolores ipsa labore deleniti doloremque? Sit omnis minima        quis voluptate sapiente rerum fugit totam ut illo reprehenderit        earum ratione temporibus sequi odio consectetur perspiciatis, soluta        quidem dicta aliquid. Totam, animi placeat quisquam ducimus        adipisci, velit ipsam alias inventore earum sit eveniet rem hic        labore repellendus, aut quam reprehenderit esse temporibus quas quo        laudantium fuga! Quidem tempore illum atque sit optio nisi, eius        reiciendis perferendis similique, voluptatum maxime qui ipsam        deleniti vitae quia vero ad consequatur aspernatur voluptatibus quo        facere? Consequuntur, non ipsa? Assumenda repellat impedit dolores        eius dolorem debitis eaque aspernatur deleniti optio atque, est iure        excepturi ullam odio, natus quos sit! Nostrum aspernatur quos esse        quisquam! Aut exercitationem aspernatur expedita quam ullam quas quo        dignissimos. Animi ex incidunt architecto, quaerat vel qui illum        ipsa dolores nesciunt sapiente suscipit odio facere corrupti.        Itaque, provident quis?      &lt;\/p>    &lt;\/section>    &lt;section data-section=\"5\">      &lt;h2>Section 5&lt;\/h2>      &lt;p>        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sit        deserunt ea reiciendis sint ex recusandae repudiandae, ratione non        vero! Aliquam sed quis inventore aperiam quidem, velit illo        voluptates amet architecto aspernatur, et neque ipsam veritatis        itaque eius est vero illum officiis totam, a hic. Ex est quae vitae        itaque suscipit dolorem corporis assumenda exercitationem quos iure,        deserunt repellendus provident possimus, architecto iste mollitia        nemo dicta dolores ipsa labore deleniti doloremque? Sit omnis minima        quis voluptate sapiente rerum fugit totam ut illo reprehenderit        earum ratione temporibus sequi odio consectetur perspiciatis, soluta        quidem dicta aliquid. Totam, animi placeat quisquam ducimus        adipisci, velit ipsam alias inventore earum sit eveniet rem hic        labore repellendus, aut quam reprehenderit esse temporibus quas quo        laudantium fuga! Quidem tempore illum atque sit optio nisi, eius        reiciendis perferendis similique, voluptatum maxime qui ipsam        deleniti vitae quia vero ad consequatur aspernatur voluptatibus quo        facere? Consequuntur, non ipsa? Assumenda repellat impedit dolores        eius dolorem debitis eaque aspernatur deleniti optio atque, est iure        excepturi ullam odio, natus quos sit! Nostrum aspernatur quos esse        quisquam! Aut exercitationem aspernatur expedita quam ullam quas quo        dignissimos. Animi ex incidunt architecto, quaerat vel qui illum        ipsa dolores nesciunt sapiente suscipit odio facere corrupti.        Itaque, provident quis?      &lt;\/p>    &lt;\/section>  &lt;\/main> &lt;\/div><\/code><\/pre>\n<\/div><\/div>\n<p>  <\/p>\n<p>\u0421\u0442\u0438\u043b\u0438 \u0432\u043f\u043e\u043b\u043d\u0435 \u0441\u0435\u0431\u0435 \u043e\u0431\u044b\u0447\u043d\u044b\u0435, \u0442\u0430\u043a \u0447\u0442\u043e \u043d\u0430 \u043d\u0438\u0445 \u044f \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0435 \u0431\u0443\u0434\u0443.<\/p>\n<p>  <\/p>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">\u0412\u0441\u0435 \u0441\u0442\u0438\u043b\u0438:<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"css\">* {  margin: 0;  padding: 0;  box-sizing: border-box;  font-family: 'Montserrat', sans-serif;  font-size: 1rem; }  :root {  --main-light: #f0f0f0;  --main-dark: #3c3c3c;  --main-blue: #c5dfee;  --active-blue: #53acff; }  body {  background: var(--main-light);  color: var(--main-dark); }  #page {  max-width: 95%; }  nav {  display: flex;  flex-direction: column;  position: fixed;  top: 2rem;  right: 2rem;  width: 20%; }  main {  width: 80%;  padding: 1rem;  text-indent: 1.25rem; }  h2 {  font-size: 2rem;  margin: 1rem 0; }  p {  font-size: 1.1rem; }  .dot {  position: absolute;  width: 10px;  height: 10px;  right: 0;  top: 50%;  transform: translateY(-50%);  border-radius: 50%;  transition: 0.4s ease; }  .dot:after {  content: '';  position: absolute;  top: 50%;  right: 50%;  transform: translate(50%, -50%);  width: 10px;  height: 10px;  background-color: var(--main-blue);  border-radius: 50%;  transition: 0.4s ease; }  .active .dot {  width: 26px;  height: 26px;  border: 1px solid var(--active-blue);  right: -8px; }  .active .dot:after {  width: 16px;  height: 16px;  background-color: var(--active-blue); }  .step {  position: relative;  padding-right: 22px;  font-size: 16px;  display: flex;  align-items: center;  margin-left: auto;  transition: all 0.4s ease;  cursor: pointer;  user-select: none; }  .active .text {  color: var(--active-blue);  font-size: 20px;  margin: 10px 0 10px auto; }  .line {  height: 44px;  width: 1px;  background-color: var(--main-blue);  margin: -10px 4px -10px auto;  transition: all 0.4s ease; }<\/code><\/pre>\n<\/div><\/div>\n<p>  <\/p>\n<p>\u041a\u0430\u043a \u0432\u044b \u0434\u0443\u043c\u0430\u0435\u0442\u0435, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u043e\u043a JS-\u043a\u043e\u0434\u0430 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438? \u041d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0439\u0442\u0435 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u043a\u0440\u043e\u043c\u0435 \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0433\u043e \u0442\u0435\u043a\u0443\u0449\u0435\u043c\u0443 \u0440\u0430\u0437\u0434\u0435\u043b\u0443, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0442\u0438\u043b\u0435\u0439, \u043d\u0430\u043c \u0442\u0430\u043a\u0436\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 \u0440\u0430\u0437\u0434\u0435\u043b\u0430\u043c\u0438 \u043f\u043e \u043a\u043b\u0438\u043a\u0443 (\u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0434\u043e\u043b\u0436\u043d\u0430 \u043e\u0442\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e). \u0422\u0430\u043a \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0436\u0435? 100? 50?<\/p>\n<p>  <\/p>\n<p>\u041e\u0442\u0432\u0435\u0442: 30 \u0441\u0442\u0440\u043e\u043a! \u0418 \u044d\u0442\u043e \u0431\u0435\u0437 \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0438 \u043d\u0430 \u043f\u0440\u043e\u0431\u0435\u043b\u0430\u0445 \u0438 \u043e\u0442\u0441\u0442\u0443\u043f\u0430\u0445.<\/p>\n<p>  <\/p>\n<p>\u0417\u0430\u0432\u0435\u0440\u043d\u0435\u043c \u0432\u0435\u0441\u044c \u043d\u0430\u0448 \u043a\u043e\u0434 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e. \u041d\u0430\u0437\u043e\u0432\u0435\u043c \u0435\u0435 <code>createSectionNav<\/code>. \u041f\u0443\u0441\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u2014 <code>root<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e const createSectionNav = (root) => {  \/\/ ... } \/\/ \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u0435\u0435 \u0441 \u043a\u043e\u0440\u043d\u0435\u0432\u044b\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c createSectionNav(document.querySelector('#page'))<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 <code>nav<\/code>, <code>main<\/code> \u0438 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 (\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439) \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 (\u0434\u0430\u043b\u0435\u0435 \u2014 \u0448\u0430\u0433):<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const nav = root.querySelector('nav') const main = root.querySelector('main') let currentActiveStep = nav.querySelector('.active')<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 \u0440\u0430\u0437\u0434\u0435\u043b\u0430\u043c\u0438 \u043f\u043e \u043a\u043b\u0438\u043a\u0443. \u0414\u043b\u044f \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438 \u043a \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u043c\u044b \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u043c \u043c\u0435\u0442\u043e\u0434\u043e\u043c <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/API\/Element\/scrollIntoView\"><code>scrollIntoView<\/code><\/a>. \u0410 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c \u043d\u0443\u0436\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 <code>data-section<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">nav.addEventListener('click', ({ target }) => {  \/\/ \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 `data-section`  const { section } = target.closest('.step').dataset   if (!section) return   \/\/ \u043d\u0430\u0445\u043e\u0434\u0438\u043c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u043a \u043d\u0435\u043c\u0443 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0443  main.querySelector(`[data-section='${section}']`).scrollIntoView({    \/\/ \u043f\u043b\u0430\u0432\u043d\u043e    behavior: 'smooth'  }) })<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0435, \u0435\u0441\u043b\u0438 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043c\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u043e\u0432, \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u043d\u0435 \u0438\u0441\u043a\u0430\u0442\u044c \u043d\u0443\u0436\u043d\u044b\u0439 \u0440\u0430\u0437\u0434\u0435\u043b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>querySelector<\/code>, \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043a\u0430\u0440\u0442\u0443 \u0440\u0430\u0437\u0434\u0435\u043b\u043e\u0432:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const sectionMap = [...main.querySelectorAll('[data-section]')].reduce(  (obj, el) => {    obj[el.dataset.section] = el    return obj  },  {} )<\/code><\/pre>\n<p>  <\/p>\n<p>\u0418 \u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u043a \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u043c\u0443 \u0440\u0430\u0437\u0434\u0435\u043b\u0443 \u043f\u043e \u043a\u043b\u044e\u0447\u0443:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">sectionMap[section].scrollIntoView({  behavior: 'smooth' })<\/code><\/pre>\n<p>  <\/p>\n<p>\u042d\u0442\u043e \u0432\u0441\u0435, \u0447\u0442\u043e \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u0440\u0430\u0437\u0434\u0435\u043b\u0430\u043c\u0438. \u201c\u0410 \u043a\u0430\u043a \u0436\u0435 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u0430\u044f \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0430\u044f?\u201d \u2014 \u0441\u043f\u0440\u043e\u0441\u0438\u0442\u0435 \u0432\u044b. \u041e, \u044d\u0442\u043e \u0441\u0430\u043c\u043e\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0435. \u0412\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u0430\u044f \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0430 \u0432 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u0435\u043b\u0435.<\/p>\n<p>  <\/p>\n<p>\u041f\u0435\u0440\u0435\u0431\u0438\u0440\u0430\u0435\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u044b:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">main.querySelectorAll(\"section\").forEach((s) => {  \/\/ ... }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0418\u0437 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u043d\u0430\u043c \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0446\u0435\u043d\u0442 \u043f\u0435\u0440\u0435\u0441\u0435\u0447\u0435\u043d\u0438\u044f. \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0435\u0433\u043e \u0432 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>0.3<\/code> (30%):<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const options = { threshold: 0.3 }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0433\u043e \u0432\u044b\u0437\u043e\u0432\u0430 \u0434\u0435\u043b\u0430\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0441\u043f\u0438\u0441\u043e\u043a \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 <code>entries<\/code><\/li>\n<li>\u0438\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u0442 \u043f\u0435\u0440\u0432\u044b\u0439 <code>entry<\/code><\/li>\n<li>\u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442, \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043b\u0438 \u043e\u043d \u0437\u043e\u043d\u0435 \u043f\u0435\u0440\u0435\u0441\u0435\u0447\u0435\u043d\u0438\u044f<\/li>\n<li>\u0435\u0441\u043b\u0438 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f<br \/> \n<ul>\n<li>\u0438\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u0442 \u043d\u043e\u043c\u0435\u0440 \u0440\u0430\u0437\u0434\u0435\u043b\u0430 \u0438\u0437 \u0435\u0433\u043e <code>data-section<\/code><\/li>\n<li>\u0443\u0434\u0430\u043b\u044f\u0435\u0442 \u043a\u043b\u0430\u0441\u0441 <code>active<\/code> \u0443 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430<\/li>\n<li>\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043d\u043e\u0432\u044b\u0439 \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442<\/li>\n<li>\u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043a \u043d\u0435\u043c\u0443 \u043a\u043b\u0430\u0441\u0441 <code>active<\/code><\/li>\n<li>\u0438 \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0435\u0442 \u043d\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 <code>currentActiveStep<\/code><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>  <\/p>\n<pre><code class=\"javascript\">const callback = (entries) => {  if (entries[0].isIntersecting) {    const { section } = s.dataset    if (!section) return    currentActiveStep.classList.remove(\"active\")    const newActiveStep = nav.querySelector(      `[data-section='${section}']`    )    newActiveStep.classList.add(\"active\")    currentActiveStep = newActiveStep  } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u0435\u043b\u044f:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const observer = new IntersectionObserver(callback, options)<\/code><\/pre>\n<p>  <\/p>\n<p>\u0418 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u043c \u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0437\u0430 \u0440\u0430\u0437\u0434\u0435\u043b\u043e\u043c:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">observer.observe(s)<\/code><\/pre>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u0441\u0435 \u044d\u0442\u043e \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0438\u0442\u044c, \u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">main.querySelectorAll(\"section\").forEach((s) => {  new IntersectionObserver(    (entries) => {      if (entries[0].isIntersecting) {        const { section } = s.dataset        if (!section) return        currentActiveStep.classList.remove(\"active\")        const newActiveStep = nav.querySelector(          `[data-section='${section}']`        )        newActiveStep.classList.add(\"active\")        currentActiveStep = newActiveStep      }    },    {      threshold: 0.3    }  ).observe(s) })<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u0430\u044f \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0430\u044f \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0430 \u0432 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u0435\u043b\u0435: \u043a\u043e\u043b\u0431\u044d\u043a \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u043f\u0440\u0438 &#171;\u0440\u0443\u0447\u043d\u043e\u0439&#187; \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0442\u0430\u043a \u0438 \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043f\u043e \u0448\u0430\u0433\u0443 \u2014 \u0432 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0430, \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0438\u0432\u043e\u0434\u044f\u0449\u0430\u044f \u043a \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u043f\u0435\u0440\u0435\u0441\u0435\u0447\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0438\u0433\u0440\u0430\u0442\u044c \u0441 \u044d\u0442\u0438\u043c \u043a\u043e\u0434\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u0437\u0434\u0435\u0441\u044c:<\/p>\n<p>  <\/p>\n<div class=\"oembed\">\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/6128bef0920526a288c7e48b\" data-style=\"\" id=\"6128bef0920526a288c7e48b\" width=\"\"><\/div>\n<\/div>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e \u043b\u0435\u043d\u0438\u0432\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435.<\/p>\n<p>  <\/p>\n<h2 id=\"realizaciya-lenivoy-zagruzki-mediaresursov\">\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043b\u0435\u043d\u0438\u0432\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043c\u0435\u0434\u0438\u0430\u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432<\/h2>\n<p>  <\/p>\n<p>\u201c\u0412 \u0447\u0435\u043c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u043e\u0431\u044b\u0447\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043c\u0435\u0434\u0438\u0430\u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432?\u201d \u2014 \u0441\u043f\u0440\u043e\u0441\u0438\u0442\u0435 \u0432\u044b. \u041a\u043e\u0433\u0434\u0430 \u0442\u0430\u043a\u0438\u0445 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u043d\u0435\u043c\u043d\u043e\u0433\u043e, \u043d\u0438\u043a\u0430\u043a\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u043d\u0435\u0442. \u041d\u043e \u043a\u043e\u0433\u0434\u0430 \u0438\u0445 \u043c\u043d\u043e\u0433\u043e \u0438 \u043a\u043e\u0433\u0434\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0442\u0441\u044f \u0440\u0430\u0437\u043e\u043c (\u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043d\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d <code>code splitting<\/code> \u2014 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043a\u043e\u0434\u0430 \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432), \u0432\u0441\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u044d\u0442\u0438\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438, \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0442\u0441\u044f \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u043d\u0438\u043c\u0438. \u0411\u043e\u043b\u044c\u0448\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 &#171;\u043c\u043d\u043e\u0433\u043e \u0431\u0430\u0439\u0442&#187; \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0439 \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \u0430 \u043c\u043d\u043e\u0433\u043e \u0431\u0430\u0439\u0442 \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0439 \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u0441\u043d\u0438\u0436\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438. \u0421\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u0447\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u0432\u0435\u0441\u044f\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c\u044b\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b, \u0442\u0435\u043c \u0445\u0443\u0436\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p>\u041a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043f\u0440\u0438 \u0440\u0430\u0437\u0431\u043e\u0440\u0435 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u0435\u0442 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>src<\/code> (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>&lt;img src=\"https:\/\/example.com\/some_img.png\" alt=\"\" role=\"presentation\" \/><\/code>), \u043e\u043d \u0442\u0443\u0442 \u0436\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u0440\u0435\u0441\u0443\u0440\u0441 \u0438\u0437 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0433\u043e \u0432 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0435 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0430. \u0412\u0441\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b, \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c\u044b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u043c \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 <code>Network<\/code> (<code>\u0421\u0435\u0442\u044c<\/code>) \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 (\u0440\u0435\u0441\u0443\u0440\u0441\u044b \u043c\u043e\u0436\u043d\u043e \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0432\u043a\u043b\u0430\u0434\u043e\u043a <code>JS<\/code>, <code>CSS<\/code>, <code>Img<\/code> \u0438 \u0434\u0440.). \u0412\u043e\u0442, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>Chrome<\/code> \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u043b \u0430\u0432\u0430\u0442\u0430\u0440 \u0434\u043b\u044f \u043c\u043e\u0435\u0433\u043e Google-\u0430\u043a\u043a\u0430\u0443\u043d\u0442\u0430:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/jm\/6x\/gt\/jm6xgtvhf436s5r8dyhodgmdvvw.png\" data-src=\"https:\/\/habrastorage.org\/webt\/jm\/6x\/gt\/jm6xgtvhf436s5r8dyhodgmdvvw.png\"\/>  <\/p>\n<p>  \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u043f\u0440\u043e\u0441\u0438\u0442\u044c: &#171;\u041d\u0435\u0443\u0436\u0435\u043b\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u043d\u0435 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u043a\u0430\u043a\u043e\u0439-\u043b\u0438\u0431\u043e \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0439 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043b\u0435\u043d\u0438\u0432\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043c\u0435\u0434\u0438\u0430?&#187; \u0412 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u043a\u043e\u0435-\u0447\u0442\u043e \u043e\u043d\u0438 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442, \u043d\u043e\u2026 \u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u0435\u0441\u0442\u044c \u043d\u043e, \u0438\u043d\u0430\u0447\u0435 \u043d\u0435 \u0431\u044b\u043b\u043e \u0431\u044b \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438.<\/p>\n<p>  <\/p>\n<p>\u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/Performance\/Lazy_loading#%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F\"><code>loading<\/code><\/a>. \u0415\u0441\u043b\u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0435\u0433\u043e \u043a \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044e \u0438\u043b\u0438 \u0444\u0440\u0435\u0439\u043c\u0443 (<code>iframe<\/code>) \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c <code>lazy<\/code>, \u0442\u043e \u043e\u043d\u0438 \u0431\u0443\u0434\u0443\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c\u0441\u044f \u043b\u0435\u043d\u0438\u0432\u043e. \u0418 \u0432\u0441\u0435 \u0431\u044b \u043d\u0438\u0447\u0435\u0433\u043e, \u0432\u043e\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u0430\u043d\u043d\u044b\u0439 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <a href=\"https:\/\/caniuse.com\/loading-lazy-attr\"><code>\u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f Safari<\/code><\/a>, \u0430 \u0442\u0430\u043c, \u0433\u0434\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f, \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u043b\u044f \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u043d\u0430 \u043e\u043d \u043d\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442.<\/p>\n<p>  <\/p>\n<p>\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u043e\u0439 \u0430\u0443\u0434\u0438\u043e \u0438 \u0432\u0438\u0434\u0435\u043e \u043c\u043e\u0436\u043d\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 <a href=\"https:\/\/webref.ru\/html\/audio\/preload\"><code>preload<\/code><\/a>. \u0415\u0441\u043b\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0435\u0433\u043e \u0432 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>none<\/code>, \u0442\u043e \u043c\u0435\u0434\u0438\u0430 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0441\u043b\u0435 \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0438 <code>Play<\/code>. \u0414\u0430\u043d\u043d\u044b\u0439 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <a href=\"https:\/\/caniuse.com\/mdn-html_elements_audio_preload\">\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432\u0441\u0435\u043c\u0438 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438<\/a>. \u041d\u043e \u0435\u0433\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043d\u044b\u043c\u0438.<\/p>\n<p>  <\/p>\n<p>\u0412\u0441\u0435-\u0442\u0430\u043a\u0438 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0431\u044b \u0438\u043c\u0435\u0442\u044c \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043e\u0431\u0449\u0438\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043a \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043b\u0435\u043d\u0438\u0432\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043c\u0435\u0434\u0438\u0430. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0432\u0435\u0441 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u0437\u0431\u0430\u0432\u0438\u0442\u044c\u0441\u044f \u043e\u0442 \u0432\u0441\u0435\u0445 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 <code>src<\/code>, \u043d\u043e \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0438\u043c\u0435\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0440\u0435\u0441\u0443\u0440\u0441\u044b\u2026 \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0441\u0435\u0447\u0435\u043d\u0438\u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441 <code>viewport<\/code>! \u0417\u0434\u0435\u0441\u044c \u043d\u0430\u043c \u0441\u043d\u043e\u0432\u0430 \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u0441\u044f \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>data-*<\/code>. \u0417\u0430\u043c\u0435\u043d\u0438\u043c <code>src<\/code> \u043d\u0430 <code>data-src<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;img data-src=\"https:\/\/images.unsplash.com\/photo-1629290211578-213dc1f621e1\" alt=\"\" role=\"presentation\" \/><\/code><\/pre>\n<p>  <\/p>\n<p>\u0420\u0430\u0437\u043c\u0435\u0442\u043a\u0430 \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0445\u043e\u0436\u0430 \u043d\u0430 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0433\u043e, \u0437\u0430 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u043d\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u0430 \u043f\u0430\u043d\u0435\u043b\u044c \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438<\/li>\n<li>\u043d\u0430\u043c \u0445\u0432\u0430\u0442\u0438\u0442 3 \u0440\u0430\u0437\u0434\u0435\u043b\u043e\u0432<\/li>\n<li>\u043c\u0435\u0436\u0434\u0443 \u0440\u0430\u0437\u0434\u0435\u043b\u0430\u043c\u0438 \u0431\u0443\u0434\u0443\u0442 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u043c\u0435\u0434\u0438\u0430\u0440\u0435\u0441\u0443\u0440\u0441\u044b: \u043e\u0434\u043d\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435, \u043e\u0434\u043d\u043e \u0430\u0443\u0434\u0438\u043e \u0438 \u043e\u0434\u043d\u043e \u0432\u0438\u0434\u0435\u043e.<\/li>\n<\/ul>\n<p>  <\/p>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">\u0412\u0441\u044f \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430:<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"html\">&lt;main>  &lt;section>    &lt;h2>Section 1&lt;\/h2>    &lt;p>      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Adipisci ut      corrupti deleniti reiciendis, consectetur tenetur libero voluptates,      repudiandae saepe, sit fugit? Eos expedita commodi maiores ipsum quo      cum, vel esse enim doloribus repudiandae beatae sint corporis amet      eaque aliquid, nostrum est. Labore rem incidunt perspiciatis qui      aliquid adipisci quasi, sapiente veritatis accusamus earum id animi      voluptas tempore, totam hic provident aut perferendis! Voluptate natus      enim quae necessitatibus provident at dolores? Soluta cum iusto facere      officia sunt dolores placeat, qui autem, esse nostrum quaerat, enim      quisquam. Error totam ducimus quos. Rem dolor dolorem nam in assumenda      ipsa nisi fuga voluptatibus officiis saepe, asperiores atque quasi      error dolore corrupti, quidem exercitationem? Consectetur a quis iusto      distinctio. Quis architecto quos doloremque mollitia ut nulla et      libero expedita? Suscipit, sint minus doloremque neque mollitia      aliquam ex accusantium deleniti ipsum laborum voluptas. Modi, incidunt      porro dolorum nobis sapiente, nulla rem vel dolores quisquam voluptas      pariatur nostrum ipsum obcaecati explicabo, assumenda minima      voluptatibus mollitia cum fugit eius temporibus officia voluptates?      Animi, explicabo officiis impedit vero quis facilis quia optio      sapiente exercitationem! Eum ad fugit velit pariatur sed cum      temporibus dolore magni illum quas repellendus quae hic vitae      deserunt, repellat nostrum quaerat ipsam, officia minima      necessitatibus reprehenderit. Alias repellat voluptatibus soluta vel      cupiditate fuga pariatur amet. Aperiam, at cum officia, eaque adipisci      id laudantium in repellendus doloribus iste exercitationem accusantium      facere ipsa omnis optio, ea neque nihil incidunt? Necessitatibus eum      laudantium deleniti sint vero vel possimus architecto, eaque quam      voluptate? Odio aliquam officiis sunt, harum fuga vitae neque,      obcaecati repellendus beatae et amet rerum facilis at ipsum unde      sapiente. Maxime rem quaerat iusto non dignissimos, eius tempora      ducimus, necessitatibus impedit eum, corporis voluptatibus alias sit      cupiditate. Error numquam, voluptatem quas et modi, eos, excepturi      animi explicabo aut cupiditate minus! Quos tempora, molestiae atque ea      adipisci porro optio.    &lt;\/p>  &lt;\/section>  &lt;!-- https:\/\/caniuse.com\/loading-lazy-attr -->  &lt;div>    &lt;!-- &lt;img      data-src=\"https:\/\/images.unsplash.com\/photo-1629290211578-213dc1f621e1\"      alt=\"\"      role=\"presentation\"      loading=\"lazy\"    \/> -->    &lt;img data-src=\"https:\/\/images.unsplash.com\/photo-1629290211578-213dc1f621e1\" alt=\"\" role=\"presentation\" \/>  &lt;\/div>  &lt;section>    &lt;h2>Section 2&lt;\/h2>    &lt;p>      Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, odit      nisi saepe, fuga cupiditate reprehenderit sequi ea dolore accusamus      incidunt quidem impedit? Adipisci magnam eveniet dolorum numquam ex      nam culpa exercitationem earum, sint tenetur doloribus dolore      recusandae unde at soluta, non libero accusamus hic esse doloremque      quibusdam? Architecto quo, aliquam ex id ullam eveniet laboriosam      tempora sapiente quas delectus recusandae alias, quidem accusantium      numquam blanditiis sit aspernatur, explicabo perspiciatis consectetur?      Provident, magnam possimus tenetur mollitia impedit atque nesciunt      voluptas aspernatur porro expedita culpa accusamus esse, non tempora      suscipit! Quos facilis, accusantium voluptate corporis dolorum      suscipit inventore minima cumque modi a deserunt reprehenderit nisi      officia molestias voluptatibus rerum saepe laudantium aperiam, non      eligendi ratione voluptas ducimus nemo! Mollitia qui quibusdam maiores      commodi libero perferendis iure, tenetur eaque? Ea, similique officia      illum dolor iusto enim! Ratione, voluptate! Possimus rerum ratione est      repellendus, asperiores quos quaerat ex at placeat ipsam assumenda      tempora, corrupti sint laborum consectetur non dolorum totam sed,      architecto quam. Nesciunt consequuntur rem necessitatibus ut beatae,      recusandae culpa sint maiores numquam nam cumque delectus eos facere      ab iste at, asperiores provident. Quo sunt nulla delectus officiis      enim sapiente illum, porro, eaque ut ipsum nostrum qui? Omnis est      consequatur pariatur labore odit maxime ea libero sit, veritatis      assumenda ducimus exercitationem laborum suscipit excepturi quis saepe      eaque illo aspernatur officiis inventore, commodi similique cupiditate      quos veniam. Natus distinctio voluptatibus accusamus officia corporis      cum esse magni a, repudiandae sed debitis sequi delectus, ex      accusantium. Illum voluptas eos aut aliquid facere unde. Ad      exercitationem quibusdam, temporibus dolorem nihil commodi soluta sunt      facilis aspernatur aperiam. Eaque expedita mollitia odio, in facilis      fuga aperiam neque incidunt quaerat id, exercitationem eum voluptas      nostrum quo soluta a dolores veritatis impedit dolor nihil placeat      itaque officiis! Quos consequuntur perspiciatis unde tenetur nemo quo      cumque, voluptas qui ex alias, nesciunt blanditiis.    &lt;\/p>  &lt;\/section>  &lt;!-- https:\/\/caniuse.com\/mdn-html_elements_audio_preload -->  &lt;div>    &lt;!-- &lt;audio      src=\"https:\/\/www.bensound.com\/bensound-music\/bensound-happyrock.mp3\"      controls      preload=\"none\"    >&lt;\/audio> -->    &lt;audio data-src=\"https:\/\/www.bensound.com\/bensound-music\/bensound-happyrock.mp3\" controls>&lt;\/audio>  &lt;\/div>  &lt;section>    &lt;h2>Section 3&lt;\/h2>    &lt;p>      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Libero quasi      architecto fuga voluptatum deleniti exercitationem, mollitia      similique, facere rem ad dolorum tenetur eaque a voluptas nobis      repellendus? Maxime est nemo placeat deleniti cumque modi ipsam hic      porro rem unde quae, dignissimos minima quam nesciunt temporibus      asperiores repudiandae voluptatibus in iure facere. Vitae itaque      numquam tempora! Eius accusantium excepturi ea omnis earum, minus fuga      sint totam iusto voluptatum, natus sit quidem! Deleniti nulla quia at      qui omnis accusamus nobis delectus ex, assumenda odio illum nemo ipsa      placeat quam vero, necessitatibus alias? Facilis ut explicabo iusto      atque corrupti similique nam temporibus totam neque molestiae. Saepe      esse veniam, iure deleniti modi vel voluptas rerum, assumenda fugit,      architecto ratione neque aliquid adipisci beatae vero tempora mollitia      ducimus perspiciatis maxime. Velit amet cupiditate harum nostrum modi      repellat unde error minus maxime inventore. Corrupti distinctio modi      ratione inventore maxime fugit voluptate dolore, itaque, cum fuga quia      pariatur deleniti sit possimus! Voluptas repudiandae alias earum quis      ipsa eveniet optio aliquid maxime placeat quae laboriosam eaque vitae      dicta impedit, adipisci ullam quas dolore architecto minima quibusdam      expedita accusantium eos explicabo? Iusto inventore dolorum ipsa      eligendi ea, totam nam sed et impedit similique quidem, esse non.      Dolore amet molestias commodi reiciendis nesciunt, nihil enim tempora      magni tenetur illo ex, consectetur labore, repellendus iusto at      laborum quae harum corporis corrupti? Rerum dolorum, velit laboriosam      eius vero dolorem voluptas laudantium, accusantium aspernatur esse      necessitatibus deleniti tempora et possimus, ut obcaecati nulla.      Ducimus sed amet magnam odio officiis fugit cum voluptatum expedita      placeat asperiores voluptas maxime, consequuntur ratione id provident?      Perspiciatis explicabo animi, ut incidunt reiciendis ad praesentium      asperiores atque distinctio quae. Illum numquam facilis veniam, quis      adipisci commodi iste voluptatum in quos libero, obcaecati mollitia.      Deleniti earum odit vitae saepe quos culpa nisi dicta accusantium      animi in dignissimos, neque alias a?    &lt;\/p>  &lt;\/section>  &lt;!-- &lt;video    src=\"https:\/\/assets.mixkit.co\/videos\/preview\/mixkit-stars-in-space-1610-large.mp4\"    controls    preload=\"none\"  >&lt;\/video> -->  &lt;video data-src=\"https:\/\/assets.mixkit.co\/videos\/preview\/mixkit-stars-in-space-1610-large.mp4\" controls>&lt;\/video> &lt;\/main><\/code><\/pre>\n<p>  <\/div>\n<\/p><\/div>\n<p>  <\/p>\n<p>\u0418&#8230;<\/p>\n<p>  <\/p>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">\u0412\u0441\u0435 \u0441\u0442\u0438\u043b\u0438:<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"css\">* {  margin: 0;  padding: 0;  box-sizing: border-box;  font-family: \"Montserrat\", sans-serif;  font-size: 1rem; }  :root {  --main-light: #f0f0f0;  --main-dark: #3c3c3c;  --main-blue: #c5dfee;  --active-blue: #53acff; }  body {  background: var(--main-light);  color: var(--main-dark); }  main {  margin: 0 auto;  padding: 1rem;  width: 90%;  text-indent: 1.25rem; }  h2 {  font-size: 2rem;  margin: 1rem 0; }  p {  font-size: 1.1rem; }  img {  width: 90%;  margin: 1rem auto; }  audio {  display: block;  margin: 1rem auto;  border-radius: 4px; }  audio:focus-visible {  outline: none; }  video {  width: 90%;  display: block;  margin: 1rem auto; }<\/code><\/pre>\n<\/div><\/div>\n<p>  <\/p>\n<p>\u0414\u0443\u043c\u0430\u044e, \u0432\u044b \u0443\u0436\u0435 \u0443\u0441\u043f\u0435\u043b\u0438 \u0441\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0441\u0435\u0431\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043a\u043e\u0434 \u043d\u0430\u0448\u0435\u0433\u043e \u0441\u043a\u0440\u0438\u043f\u0442\u0430. \u0414\u043b\u044f \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 <code>IOA<\/code> \u0432 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0438 \u0441 <code>preload<\/code>, \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0430\u0443\u0434\u0438\u043e \u0438 \u0432\u0438\u0434\u0435\u043e \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0441\u0435\u0447\u0435\u043d\u0438\u0438 \u0438\u043c\u0438 \u043f\u043e\u0440\u043e\u0433\u043e\u0432\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f (\u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043c\u044b \u0442\u0430\u043a\u0436\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0432 30%):<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e const initLazyLoading = (root) => {  \/\/ \u043d\u0430\u0445\u043e\u0434\u0438\u043c \u0432\u0441\u0435 \"\u043b\u0435\u043d\u0438\u0432\u044b\u0435\" \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b  const lazyEls = [...root.querySelectorAll(\"[data-src]\")]   \/\/ \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0438\u0437 \u043d\u0438\u0445  lazyEls.forEach((el) => {    \/\/ \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u0435\u043b\u044f    new IntersectionObserver(      (entries) => {        \/\/ \u0430\u0443\u0434\u0438\u043e \u0438\u043b\u0438 \u0432\u0438\u0434\u0435\u043e?        const audioOrVideo =          el.localName === \"audio\" || el.localName === \"video\"        \/\/ \u0435\u0441\u043b\u0438 \u0446\u0435\u043b\u0435\u0432\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u0437\u043e\u043d\u0435 \u043f\u0435\u0440\u0435\u0441\u0435\u0447\u0435\u043d\u0438\u044f        if (entries[0].isIntersecting) {          \/\/ \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u043c `src` \u0438\u0437 `data-src`          const { src } = el.dataset          if (!src) return          \/\/ \u0435\u0441\u043b\u0438 \u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043d\u0435\u0442 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 `src`          if (!el.hasAttribute(\"src\")) {            \/\/ \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0435\u043c\u0443 \u0434\u0430\u043d\u043d\u044b\u0439 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c `data-src`            el.setAttribute(\"src\", src)            \/\/ \u0443\u0434\u0430\u043b\u044f\u0435\u043c `data-src`            el.removeAttribute(\"data-src\")          }          if (audioOrVideo) {            \/\/ \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u0435            el.play()          }        } else {          if (audioOrVideo) {            \/\/ \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u0435            el.pause()          }        }      },      {        \/\/ \u043f\u043e\u0440\u043e\u0433\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435        threshold: 0.3      }      \/\/ \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u043c \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u044c \u0437\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c    ).observe(el)  }) } \/\/ \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e initLazyLoading(document.querySelector(\"main\"))<\/code><\/pre>\n<p>  <\/p>\n<p>\u041c\u044b \u043d\u0435 \u0441\u043d\u0438\u043c\u0430\u0435\u043c \u043d\u0430\u0431\u043b\u044e\u0434\u0435\u043d\u0438\u0435 \u0441 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043e\u043c \u0432\u044b\u0437\u043e\u0432\u0430 \u043c\u0435\u0442\u043e\u0434\u0430 <code>unobserve<\/code> \u0432 \u043a\u043e\u043b\u0431\u044d\u043a\u0435, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0445\u043e\u0442\u0438\u043c \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0438 \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0430\u0443\u0434\u0438\u043e \u0438 \u0432\u0438\u0434\u0435\u043e \u043f\u0440\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0438 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0432 \u043e\u0431\u043e\u0438\u0445 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f\u0445. \u041e\u0434\u043d\u0430\u043a\u043e \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0435 <code>if (!el.hasAttribute(\"src\"))<\/code> \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>data-src<\/code> \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043d\u0430 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>src<\/code> \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u0440\u0430\u0437.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0438\u0433\u0440\u0430\u0442\u044c \u0441 \u044d\u0442\u0438\u043c \u043a\u043e\u0434\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u0437\u0434\u0435\u0441\u044c:<\/p>\n<p>  <\/p>\n<div class=\"oembed\">\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/6128bef18ff4968fafa2abca\" data-style=\"\" id=\"6128bef18ff4968fafa2abca\" width=\"\"><\/div>\n<\/div>\n<p>  <\/p>\n<p>\u0414\u043e \u0442\u0435\u0445 \u043f\u043e\u0440, \u043f\u043e\u043a\u0430 \u043c\u0435\u0434\u0438\u0430 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 (\u043f\u0440\u043e\u0438\u0433\u043d\u043e\u0440\u0438\u0440\u0443\u0435\u043c \u043f\u043e\u0440\u043e\u0433\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e\u0434\u043e\u0431\u043d\u043e \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0435 \u0432 \u0431\u043e\u043b\u044c\u0448\u043e\u043c &#171;O&#187;), \u043e\u043d\u0438 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c\u0441\u044f \u043d\u0435 \u0431\u0443\u0434\u0443\u0442. \u0412 \u044d\u0442\u043e\u043c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f, \u0438\u0437\u0443\u0447\u0438\u0432 \u0432\u043a\u043b\u0430\u0434\u043a\u0443 <code>Network<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 <code>viewport<\/code>:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/al\/t0\/da\/alt0da00o_itrmlpxq8f8h29jig.png\" data-src=\"https:\/\/habrastorage.org\/webt\/al\/t0\/da\/alt0da00o_itrmlpxq8f8h29jig.png\"\/>  <\/p>\n<p>  \u0410 \u0432\u043e\u0442 \u043c\u044b \u0434\u043e \u043d\u0435\u0433\u043e &#171;\u0434\u043e\u043a\u0440\u0443\u0442\u0438\u043b\u0438&#187;:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/1h\/s8\/_-\/1hs8_-cfuaazcgdjfuk9ebby8us.png\" data-src=\"https:\/\/habrastorage.org\/webt\/1h\/s8\/_-\/1hs8_-cfuaazcgdjfuk9ebby8us.png\"\/>  <\/p>\n<p>  \u041f\u0440\u0438 \u043f\u043e\u043f\u0430\u0434\u0430\u043d\u0438\u0438 \u0430\u0443\u0434\u0438\u043e \u0438 \u0432\u0438\u0434\u0435\u043e \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430, \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0438\u0445 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u0432\u044b\u0445\u043e\u0434\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438\u0437 <code>viewport<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u0432\u0437\u0433\u043b\u044f\u043d\u0443\u0442\u044c \u043d\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 <a href=\"https:\/\/github.com\/verlok\/vanilla-lazyload\"><code>vanilla-lazyload<\/code><\/a>. \u0412 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043a \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u043e\u043c\u0443 \u043d\u0430\u043c\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0443, \u043e\u043d\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043b\u0435\u043d\u0438\u0432\u043e \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0444\u043e\u043d\u043e\u0432\u044b\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0440\u0430\u0437\u043d\u044b\u0435 \u043c\u0435\u0434\u0438\u0430\u0440\u0435\u0441\u0443\u0440\u0441\u044b \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0448\u0438\u0440\u0438\u043d\u044b \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 (<code>source<\/code> \u0438 <code>srcset<\/code>) \u0438 \u0442.\u0434.<\/p>\n<p>  <\/p>\n<h2 id=\"vyvod\">\u0412\u044b\u0432\u043e\u0434<\/h2>\n<p>  <\/p>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u0441 \u0432\u0430\u043c\u0438 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438 \u0432\u0441\u0435\u0433\u043e \u043b\u0438\u0448\u044c 2 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f <code>IOA<\/code>. \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u043c, \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u0448\u0438\u0440\u0435. \u041f\u0430\u0440\u043e\u0447\u043a\u0443 \u0438\u0434\u0435\u0439 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u0432 <a href=\"https:\/\/habr.com\/ru\/post\/494670\/\">\u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435<\/a>. \u0410 <a href=\"https:\/\/habr.com\/ru\/post\/525536\/\">\u0437\u0434\u0435\u0441\u044c<\/a> \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u043e \u0434\u0440\u0443\u0433\u0438\u0445 &#171;\u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u0435\u043b\u044f\u0445&#187;.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u0432\u044b \u043d\u0435 \u0437\u0440\u044f \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u043b\u0438 \u0432\u0440\u0435\u043c\u044f \u0438 \u043d\u0430\u0448\u043b\u0438 \u0434\u043b\u044f \u0441\u0435\u0431\u044f \u0447\u0442\u043e-\u0442\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0435.<\/p>\n<p>  <\/p>\n<p>\u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044e \u0437\u0430 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0438 \u0445\u043e\u0440\u043e\u0448\u0435\u0433\u043e \u0434\u043d\u044f!<\/p>\n<p>  <\/p>\n<hr\/>\n<p>  <\/p>\n<p><a href=\"https:\/\/timeweb.com\/ru\/?utm_source=habr&amp;utm_medium=banner&amp;utm_campaign=10S&amp;utm_content=low\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/wo\/qf\/6c\/woqf6cweprtwtuq2m7jch92h5wk.png\" data-src=\"https:\/\/habrastorage.org\/webt\/wo\/qf\/6c\/woqf6cweprtwtuq2m7jch92h5wk.png\"\/><\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><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:\/\/habr.com\/ru\/articles\/574972\/\"> https:\/\/habr.com\/ru\/articles\/574972\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-1\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/h9\/1y\/u3\/h91yu3brxvtfdyiac92z9q7qw4u.png\" data-src=\"https:\/\/habrastorage.org\/webt\/h9\/1y\/u3\/h91yu3brxvtfdyiac92z9q7qw4u.png\"\/>  <\/p>\n<p>  \u041f\u0440\u0438\u0432\u0435\u0442, \u0434\u0440\u0443\u0437\u044c\u044f!<\/p>\n<p>  <\/p>\n<p>\u041d\u0430 \u0434\u043d\u044f\u0445 \u043c\u043d\u0435 \u043f\u043e\u0441\u0447\u0430\u0441\u0442\u043b\u0438\u0432\u0438\u043b\u043e\u0441\u044c \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c\u0441\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c 2 \u043d\u0435\u0441\u043b\u043e\u0436\u043d\u044b\u0445, \u043d\u043e \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0445 \u0437\u0430\u0434\u0430\u0447 \u043d\u0430 \u0447\u0438\u0441\u0442\u043e\u043c <code>JavaScript<\/code> (\u0438\u0437-\u0437\u0430 <code>React<\/code> \u0447\u0443\u0442\u044c \u043d\u0435 \u0437\u0430\u0431\u044b\u043b, \u043a\u0430\u043a \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f). \u0412 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u044d\u0442\u0438\u0445 \u0437\u0430\u0434\u0430\u0447 \u043d\u0438\u043a\u0442\u043e \u043d\u0435 \u043f\u043e\u0441\u0442\u0440\u0430\u0434\u0430\u043b, \u043d\u0430\u043f\u0440\u043e\u0442\u0438\u0432, \u0432\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u0438\u0441\u044c \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u044b. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u0440\u0435\u0448\u0438\u043b \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430\u043c\u0438 \u0441 \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u043e\u043c.<\/p>\n<p>  <\/p>\n<p><em>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435<\/em>: \u0434\u0430\u043d\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u043d\u0430, \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u043d\u0430 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0438 \u0432\u0440\u044f\u0434 \u043b\u0438 \u043f\u043e\u043a\u0430\u0436\u0435\u0442\u0441\u044f \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0439 \u043e\u043f\u044b\u0442\u043d\u044b\u043c, \u0445\u043e\u0442\u044f, \u0441\u043c\u0435\u044e \u043d\u0430\u0434\u0435\u044f\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 \u043d\u0435 \u043f\u043e\u0436\u0430\u043b\u0435\u044e\u0442 \u043f\u043e\u0442\u0440\u0430\u0447\u0435\u043d\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u0435\u0441\u043b\u0438 \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u044e\u0442 \u0435\u0435 \u0434\u043e \u043a\u043e\u043d\u0446\u0430.<\/p>\n<p>  <\/p>\n<h2 id=\"vvedenie\">\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/h2>\n<p>  <\/p>\n<p>\u0418\u0442\u0430\u043a, \u0437\u0430\u0434\u0430\u0447\u0438 \u0431\u044b\u043b\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c\u0438:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0420\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044e \u043f\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0430\u043c \u0441\u0430\u0439\u0442\u0430 \u0441 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u043c \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u0430 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u043c\u0435\u0441\u0442\u043e\u043d\u0430\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u044c \u043a \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u043c\u0443 \u0440\u0430\u0437\u0434\u0435\u043b\u0443 \u043f\u043e \u043a\u043b\u0438\u043a\u0443. \u0421\u0430\u043c\u0430 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f \u0441\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u043c\u0430\u043a\u0435\u0442\u0443 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u043b\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a:<\/li>\n<\/ul>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/y3\/if\/5m\/y3if5mtvau91r3hooek10sjpcl8.png\" data-src=\"https:\/\/habrastorage.org\/webt\/y3\/if\/5m\/y3if5mtvau91r3hooek10sjpcl8.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<ul>\n<li>\u0420\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c &#171;\u043b\u0435\u043d\u0438\u0432\u0443\u044e&#187; (\u043e\u0442\u043b\u043e\u0436\u0435\u043d\u043d\u0443\u044e, lazy) \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u043c\u0435\u0434\u0438\u0430\u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 (\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u0430\u0443\u0434\u0438\u043e \u0438 \u0432\u0438\u0434\u0435\u043e), \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0442\u0435 \u0436\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0434\u0430\u0436\u0435 \u043f\u043e\u0441\u043b\u0435 \u0441\u0436\u0430\u0442\u0438\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <a href=\"https:\/\/www.npmjs.com\/package\/gulp-imagemin\"><code>gulp-imagemin<\/code><\/a> \u0432\u0435\u0441\u0438\u043b\u0438 (\u0438 \u0432\u0435\u0441\u044f\u0442, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043e\u043d\u0438 \u043d\u0438\u043a\u0443\u0434\u0430 \u043d\u0435 \u0434\u0435\u043b\u0438\u0441\u044c) \u043d\u0435\u043f\u0440\u0438\u043b\u0438\u0447\u043d\u044b\u0435 50 \u041c\u0431 \u0438 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u043b\u0438\u0441\u044c \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f (\u0431\u043e\u043b\u044c\u0448\u0435 \u043e\u043d\u0438 \u0441\u0435\u0431\u044f \u0442\u0430\u043a \u043d\u0435 \u0432\u0435\u0434\u0443\u0442).<br \/>\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-405914","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/405914","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=405914"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/405914\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=405914"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=405914"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=405914"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}