{"id":188254,"date":"2013-07-30T11:33:02","date_gmt":"2013-07-30T07:33:02","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=188254"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=188254","title":{"rendered":"<span class=\"post_title\">\u0421\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 JS-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a<\/span>"},"content":{"rendered":"<div class=\"content html_format\">   \t<img decoding=\"async\" align=\"right\" src=\"http:\/\/habrastorage.org\/storage2\/cb9\/7c9\/2c5\/cb97c92c56460fcea3204afa191a648b.png\"\/><br \/>  \u041d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u043d\u0430\u0437\u0430\u0434 \u0432\u043e\u0437\u043d\u0438\u043a\u043b\u0430 \u0437\u0430\u0434\u0430\u0447\u0430 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0440\u0430\u0432\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0430\u043d\u0430\u043b\u0438\u0437 jQuery \u0438 Google Closure Library. \u041e\u0441\u043d\u043e\u0432\u043d\u044b\u043c \u0431\u044b\u043b\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u0438\u0441\u0442\u0438\u043a, \u043d\u043e \u043f\u043e\u043c\u0438\u043c\u043e \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u044f\u0432\u0438\u043b\u043e\u0441\u044c \u0436\u0435\u043b\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0438 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0440\u0430\u0431\u043e\u0442\u044b \u044d\u0442\u0438\u0445 \u0434\u0432\u0443\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a. \u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u043d\u0430\u043d\u0438\u044f \u043e \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u043c \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u043b\u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043d\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0442\u0435\u0441\u0442\u043e\u0432 \u043e\u043a\u0430\u0437\u0430\u043b\u0438\u0441\u044c \u0434\u043b\u044f \u043c\u0435\u043d\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043d\u0435\u043e\u0436\u0438\u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0438 \u044f \u0440\u0435\u0448\u0438\u043b, \u0447\u0442\u043e \u0441\u0442\u043e\u0438\u0442 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0438\u043c\u0438 \u0441 \u0445\u0430\u0431\u0440\u0430-\u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u043e\u043c.<br \/>  <a name=\"habracut\"><\/a>  <\/p>\n<h2>\u041e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u044f \u0442\u0435\u0441\u0442\u0430<\/h2>\n<p>  \u041f\u0435\u0440\u0435\u0434 \u0442\u0435\u043c \u043a\u0430\u043a \u043d\u0430\u0447\u0430\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u00ab\u0442\u0435\u0441\u0442\u043e\u0432\u044b\u0439 \u0434\u0432\u0438\u0436\u043e\u043a\u00bb \u2014 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u043e\u043a \u043a\u043e\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u043b\u0438 \u0434\u0430\u043b\u0435\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437\u043d\u044b\u0445 \u0442\u0435\u0441\u0442\u043e\u0432. \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043a \u0441\u0440\u0430\u0432\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u043c\u0443 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u0431\u044b\u043b\u043e \u043b\u0435\u0433\u043a\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0442\u0435\u0445 \u0436\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439 \u043d\u0430 \u00ab\u0433\u043e\u043b\u043e\u043c\u00bb javascript (\u043d\u0430\u0437\u043e\u0432\u0435\u043c \u0435\u0433\u043e native-\u0432\u044b\u0437\u043e\u0432\u0430\u043c\u0438) \u0438 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 ExtJS. \u041c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0438 \u0435\u0449\u0435 \u0447\u0442\u043e-\u043d\u0438\u0431\u0443\u0434\u044c, \u043d\u043e \u0442\u0443\u0442 \u0437\u0430\u043f\u0430\u0441 \u043c\u043e\u0438\u0445 \u0437\u043d\u0430\u043d\u0438\u0439 \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u043b\u0441\u044f, \u0430 \u0438\u0437\u0443\u0447\u0430\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0442\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0434\u0438 \u0442\u0435\u0441\u0442\u0430 \u2014 \u043d\u0435 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c.<br \/>  \u041d\u0438\u043a\u0430\u043a\u0438\u0445 \u0445\u0438\u0442\u0440\u043e\u0441\u0442\u0435\u0439 \u043d\u0435\u0442 \u0438 \u043f\u043e\u0434\u0445\u043e\u0434 \u043a \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u0441\u0430\u043c\u044b\u0439 \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043d\u044b\u0439. \u0421\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0437\u0430\u043c\u0435\u0440 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u043b\u0441\u044f \u043a\u0440\u043e\u0445\u043e\u0442\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u043b\u0430 \u0442\u0440\u0435\u0431\u0443\u0435\u043c\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0435 \u0447\u0438\u0441\u043b\u043e \u0440\u0430\u0437 \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u043b\u0430 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u2014 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439 \u0432 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434\u0443:  <\/p>\n<pre><code class=\"javascript\">runTest = function(test, count){   var start = new Date().getTime();   for(var i=1;i&lt;count;i++) test();   var end = new Date().getTime();   var time = end - start;   return count\/time; } <\/code><\/pre>\n<p>  \u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u043d\u043e\u0442\u0438\u043f\u043d\u044b\u0445 \u0442\u0435\u0441\u0442\u043e\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0440\u0430\u0437\u043d\u044b\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0431\u044b\u043b\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0449\u0430\u044f \u043d\u0430 \u0432\u0445\u043e\u0434 \u0446\u0435\u043b\u0443\u044e \u0433\u0440\u0443\u043f\u043f\u0443 \u0442\u0435\u0441\u0442\u043e\u0432:  <\/p>\n<pre><code class=\"javascript\">runGroup = function(label, tests, count){   var res = {};   for(var key in tests) res[key] = runTest(tests[key], count);   saveResult(label, res); } <\/code><\/pre>\n<p>  \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u043b\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432\u044b\u0437\u043e\u0432 \u0442\u0435\u0441\u0442\u0430 \u0432 \u0442\u0430\u043a\u043e\u043c \u00ab\u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e\u043c\u00bb \u0432\u0438\u0434\u0435:  <\/p>\n<pre><code class=\"javascript\">runGroup('\u0418\u043c\u044f \u0442\u0435\u0441\u0442\u0430',{ &quot;native&quot;: function1, &quot;jQuery&quot;: function2, &quot;closure&quot;: function3, &quot;extJS&quot;: function4 }) <\/code><\/pre>\n<p>  \u041d\u0443 \u0438 \u043a\u043e \u0432\u0441\u0435\u043c\u0443 \u044d\u0442\u043e\u043c\u0443 \u0431\u044b\u043b\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u0443\u0441\u0440\u0435\u0434\u043d\u044f\u044e\u0449\u0430\u044f \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0442\u0435\u0441\u0442\u043e\u0432 \u0438 \u0440\u0438\u0441\u0443\u044e\u0449\u0430\u044f \u043a\u0440\u0430\u0441\u0438\u0432\u0443\u044e \u0442\u0430\u0431\u043b\u0438\u0447\u043a\u0443 \u0434\u043b\u044f \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e\u0433\u043e \u0432\u043e\u0441\u043f\u0440\u0438\u044f\u0442\u0438\u044f. \u041f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u0434 \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0431\u0443\u0434\u0435\u0442 \u043d\u0438\u0436\u0435.<\/p>\n<h2>\u0422\u0435\u0441\u0442\u0438\u0440\u0443\u0435\u043c\u044b\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438<\/h2>\n<p>  \u0412\u044b\u0431\u043e\u0440 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439 \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u0430 \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u0435\u043d \u0441\u0443\u0431\u044a\u0435\u043a\u0442\u0438\u0432\u043d\u043e \u2014 \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0447\u0430\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435, \u043d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434, \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u043f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u044b\u0445 web-\u0441\u0442\u0440\u0430\u043d\u0438\u0446. \u0421\u043f\u043e\u0441\u043e\u0431 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u0438\u0437 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0442\u0430\u043a\u0436\u0435, \u043f\u043e \u043c\u043e\u0435\u043c\u0443 \u043c\u043d\u0435\u043d\u0438\u044e, \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0435\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u2014 \u044f \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u044e \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u044b \u0438 \u0432 \u0441\u0432\u043e\u0435\u043c \u0438 \u0432 \u0447\u0443\u0436\u043e\u043c \u043a\u043e\u0434\u0435.<\/p>\n<h4>\u041f\u043e\u0438\u0441\u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043f\u043e \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u0443<\/h4>\n<p>  \u0411\u0435\u0437 \u043f\u043e\u0438\u0441\u043a\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0435 \u043e\u0431\u0445\u043e\u0434\u0438\u0442\u0441\u044f, \u043d\u0430\u0432\u0435\u0440\u043d\u043e\u0435, \u043d\u0438 \u043e\u0434\u043d\u0430 web-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430. \u0412\u0441\u0435 \u0437\u043d\u0430\u044e\u0442, \u0447\u0442\u043e \u043f\u043e\u0438\u0441\u043a \u043f\u043e id \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u043e\u043f\u0442\u0438\u043c\u0430\u043b\u0435\u043d, \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0435\u0433\u043e. \u0414\u043b\u044f \u0442\u0435\u0441\u0442\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u043a\u043e\u0434:  <\/p>\n<pre><code class=\"javascript\">document.getElementById('id');  \/\/ native goog.dom.getElement('id');      \/\/ closure $('#id');                       \/\/ jQuery Ext.get('id');                  \/\/ ExtJS <\/code><\/pre>\n<h4>\u041f\u043e\u0438\u0441\u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u043e \u043a\u043b\u0430\u0441\u0441\u0443<\/h4>\n<p>  \u0415\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u043f\u043e\u0438\u0441\u043a\u043e\u043c \u043f\u043e \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u0443 \u0434\u0435\u043b\u043e \u043d\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f. \u0417\u0430\u0447\u0430\u0441\u0442\u0443\u044e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0438\u0441\u043a\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0431\u043e\u043b\u0435\u0435 \u00ab\u0438\u0437\u043e\u0449\u0440\u0435\u043d\u043d\u044b\u043c\u00bb \u043e\u0431\u0440\u0430\u0437\u043e\u043c. \u0414\u043b\u044f \u0442\u0435\u0441\u0442\u0430 \u044f \u0432\u044b\u0431\u0440\u0430\u043b \u043f\u043e\u0438\u0441\u043a \u043f\u043e \u043a\u043b\u0430\u0441\u0441\u0443:  <\/p>\n<pre><code class=\"javascript\">document.getElementsByClassName('class'); \/\/ native goog.dom.getElementByClass('class');      \/\/ closure $('.class');                              \/\/ jQuery Ext.select('.class');                     \/\/ ExtJS <\/code><\/pre>\n<h4>\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430<\/h4>\n<p>  \u0415\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u043d\u0430\u0434\u043e \u0443\u043c\u0435\u0442\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443. \u0414\u043b\u044f \u0442\u0435\u0441\u0442\u043e\u0432\u044b\u0445 \u0446\u0435\u043b\u0435\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u043e\u0441\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e\u0434\u043d\u043e\u0442\u0438\u043f\u043d\u044b\u0445 span \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043a body. \u0422\u0443\u0442 \u043a\u043e\u0434 \u0431\u0435\u0437 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0443\u0436\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0434\u043b\u0438\u043d\u043d\u0435\u0435, \u0447\u0435\u043c \u0441 \u043d\u0438\u043c\u0438:  <\/p>\n<pre><code class=\"javascript\">goog.dom.appendChild(document.body, goog.dom.createDom('span',{class:'testspan'})); \/\/ closure $(document.body).append($('&lt;span class=&quot;testspan&quot;&gt;'));                              \/\/ jQuery Ext.DomHelper.append(document.body, {tag : 'span', cls : 'testspan'});              \/\/ ExtJS \/\/ native var spn = document.createElement('span'); spn.setAttribute('class','testspan'); document.body.appendChild(spn); <\/code><\/pre>\n<h4>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043a\u043b\u0430\u0441\u0441\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430<\/h4>\n<p>  \u0415\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0437\u0430\u0447\u0430\u0441\u0442\u0443\u044e \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u0438 \u043f\u043e\u0442\u0440\u0435\u0431\u043d\u043e\u0441\u0442\u044c \u0432 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u042f \u0432\u044b\u0431\u0440\u0430\u043b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0441\u043f\u0438\u0441\u043a\u0430 \u043a\u043b\u0430\u0441\u0441\u043e\u0432, \u043f\u0440\u0438\u0441\u0432\u043e\u0435\u043d\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 (\u043f\u043e\u0438\u0441\u043a \u0441\u0430\u043c\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u043b\u0441\u044f \u0432\u043d\u0435 \u0446\u0438\u043a\u043b\u0430 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f):  <\/p>\n<pre><code class=\"javascript\">nElement.getAttribute('class').split(' ');  \/\/ native goog.dom.classes.get(gElement);             \/\/ closure jElement.attr('class').split(' ');          \/\/ jQuery eElement.getAttribute('class').split(' ');  \/\/ ExtJS <\/code><\/pre>\n<h4>\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043a\u043b\u0430\u0441\u0441\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430<\/h4>\n<p>  \u041e\u0431\u044b\u0447\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u043a\u043b\u0430\u0441\u0441 \u0434\u0430\u0436\u0435 \u0438 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u2014 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0435\u0433\u043e, \u0438\u043b\u0438 \u0443\u0434\u0430\u043b\u0438\u0442\u044c. \u0412\u0441\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e\u0442 \u0435\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 toggle \u0434\u043b\u044f \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0441\u043b\u0443\u0447\u0430\u044f, \u043d\u043e \u0432\u043e\u0442 \u043d\u0430 \u0433\u043e\u043b\u043e\u043c javascript \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0446\u0435\u043b\u0443\u044e \u043f\u043e\u0440\u0442\u044f\u043d\u043a\u0443:  <\/p>\n<pre><code class=\"javascript\">goog.dom.classes.toggle(gElement, 'testToggle');  \/\/ closure jElement.toggleClass('testToggle');               \/\/ jQuery var classes = eElement.toggleCls('testToggle');   \/\/ ExtJS \/\/ native var classes = nElement.className.split(' '); var ind = classes.indexOf('testToggle'); if(ind==-1) classes.push('testToggle'); else classes.splice(ind,1); nElement.className = classes.join(&quot; &quot;); <\/code><\/pre>\n<h4>\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0441\u0442\u0438\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430<\/h4>\n<p>  \u041d\u0443 \u0438 \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0447\u0430\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0430\u044f \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f \u0441 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c \u2014 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0435\u043c\u0443 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 css-\u0441\u0432\u043e\u0439\u0441\u0442\u0432:  <\/p>\n<pre><code class=\"javascript\">nElement.style.backgroundColor = '#aaa';                      \/\/ native goog.style.setStyle(gElement, {'background-color': '#aaa'});  \/\/ closure jElement.css({'background-color': '#aaa'});                   \/\/ jQuery eElement.setStyle('backgroundColor','#aaa');                  \/\/ ExtJS <\/code><\/pre>\n<p>  \u0421\u043e\u0431\u0440\u0430\u0432 \u0432\u043e\u0435\u0434\u0438\u043d\u043e \u0432\u0441\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0435 \u0432\u044b\u0448\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u044f \u043f\u043e\u043b\u0443\u0447\u0438\u043b \u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043a\u0443 \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u043f\u043e\u043b\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043f\u043e\u0434 \u0441\u043f\u043e\u0439\u043b\u0435\u0440\u043e\u043c. \u041b\u044e\u0431\u043e\u0439 \u0436\u0435\u043b\u0430\u044e\u0449\u0438\u0439 \u043c\u043e\u0436\u0435\u0442 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u044d\u0442\u043e \u0432 html-\u0444\u0430\u0439\u043b \u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u0438\u0442\u044c \u0442\u0435\u0441\u0442 \u0438\u043b\u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0442\u0443\u0434\u0430 \u0447\u0442\u043e-\u0442\u043e \u0441\u0432\u043e\u0435.  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0414\u043b\u0438\u043d\u043d\u044b\u0439 HTML<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"html\">&lt;!DOCTYPE html&gt; &lt;html&gt;  &lt;head&gt;   &lt;script src=&quot;http:\/\/code.jquery.com\/jquery-1.10.2.min.js&quot;&gt;&lt;\/script&gt;   &lt;script src='http:\/\/closure-library.googlecode.com\/svn\/trunk\/closure\/goog\/base.js'&gt;&lt;\/script&gt;   &lt;script src=&quot;http:\/\/cdn.sencha.com\/ext\/gpl\/4.2.0\/ext-all.js&quot;&gt;&lt;\/script&gt;   &lt;script&gt;     goog.require('goog.dom');     goog.require('goog.dom.classes');     goog.require('goog.style');   &lt;\/script&gt;   &lt;style&gt;     table{border-collapse:collapse;}     th {font-size:120%; }     td {border: solid black 1px; width: 180px; height: 60px; text-align: center; }     .rowlabel {width: 120px; text-align: left; background-color: beige;}     .avg {font-weight: bold; font-size:120%; color: darkblue;}   &lt;\/style&gt;   &lt;title&gt;Benchmark&lt;\/title&gt;  &lt;\/head&gt;  &lt;body&gt;   &lt;div id=&quot;testid&quot; class=&quot;testclass&quot;&gt;&lt;\/div&gt;   &lt;button onclick=&quot;getBenchmark()&quot;&gt;Run&lt;\/button&gt;   &lt;table id=&quot;result&quot;&gt;&lt;\/table&gt;  &lt;\/body&gt; &lt;\/html&gt; &lt;script&gt; var runCount = 4;       \/\/ \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0432\u0435\u0441\u044c \u043d\u0430\u0431\u043e\u0440 \u0442\u0435\u0441\u0442\u043e\u0432 var testSize = 1000;     \/\/ \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0439 \u0432 \u043e\u0434\u043d\u043e\u043c \u0437\u0430\u043f\u0443\u0441\u043a\u0435  \/\/ \u043f\u043e\u0435\u0445\u0430\u043b\u0438... getBenchmark = function(){   for(var i = 0;i&lt;runCount;i++) allTests();   showResults(); }  allTests = function(){   \/\/ \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u044f\u0446\u0438\u0439   var nElement = document.getElementById('testid');   var gElement = goog.dom.getElement('testid');   var jElement = jQuery('#testid');   var eElement = Ext.get('testid');    \/\/ \u043f\u043e\u0438\u0441\u043a \u043f\u043e \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u0443   runGroup('Id lookup',{     &quot;native&quot;:  function(){var element = document.getElementById('testid');},     &quot;closure&quot;: function(){var element = goog.dom.getElement('testid');},     &quot;jQuery&quot;:  function(){var element = jQuery('#testid');},     &quot;ExtJS&quot;:   function(){var element = Ext.get('testid');}   }, 500*testSize);   \/\/ \u043f\u043e\u0438\u0441\u043a \u043f\u043e \u043a\u043b\u0430\u0441\u0441\u0443   runGroup('Class lookup',{     &quot;native&quot;:  function(){var elements = document.getElementsByClassName('testclass');},     &quot;closure&quot;: function(){var elements = goog.dom.getElementByClass('testclass');},     &quot;jQuery&quot;:  function(){var elements = jQuery('.testclass');},     &quot;ExtJS&quot;:   function(){var elements = Ext.select('.testclass');}   }, 200*testSize);   \/\/ \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430   runGroup('Append span',{     &quot;jQuery&quot;:  function(){jQuery(document.body).append(jQuery('&lt;span class=&quot;testspan&quot;&gt;'));},     &quot;closure&quot;: function(){goog.dom.appendChild(document.body, goog.dom.createDom('span',{class:'testspan'}));},     &quot;ExtJS&quot;:   function(){Ext.DomHelper.append(document.body, {tag : 'span', cls : 'testspan'});},     &quot;native&quot;:  function(){                   var spn = document.createElement('span');                   spn.setAttribute('class','testspan');                   document.body.appendChild(spn);                 }   }, testSize);   \/\/ \u0443\u0434\u0430\u043b\u0438\u043c \u0432\u0441\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b   jQuery('.testspan').remove();   \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043a\u043b\u0430\u0441\u0441\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430   runGroup('Read classes',{     &quot;native&quot;:  function(){var classes = nElement.getAttribute('class').split(' ');},     &quot;closure&quot;: function(){var classes = goog.dom.classes.get(gElement);},     &quot;jQuery&quot;:  function(){var classes = jElement.attr('class').split(' ');},     &quot;ExtJS&quot;:   function(){var classes = eElement.getAttribute('class').split(' ');}   }, 100*testSize);   \/\/ \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043a\u043b\u0430\u0441\u0441\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430   runGroup('Toggle class',{     &quot;closure&quot;: function(){goog.dom.classes.toggle(gElement, 'testToggle');},     &quot;jQuery&quot;:  function(){jElement.toggleClass('testToggle');},     &quot;ExtJS&quot;:   function(){var classes = eElement.toggleCls('testToggle');},     &quot;native&quot;:  function(){                   var classes = nElement.className.split(' ');                   var ind = classes.indexOf('testToggle');                   if(ind==-1) classes.push('testToggle');                   else classes.splice(ind,1);                   nElement.className = classes.join(&quot; &quot;);                 }   }, 50*testSize);   \/\/ \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 css-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430   runGroup('Styling',{     &quot;native&quot;:  function(){nElement.style.backgroundColor = '#aaa';},     &quot;closure&quot;: function(){goog.style.setStyle(gElement, {'background-color': '#aaa'});},     &quot;jQuery&quot;:  function(){jElement.css({'background-color': '#aaa'});},     &quot;ExtJS&quot;:   function(){eElement.setStyle('backgroundColor','#aaa');}   }, 50*testSize); }   var savedResults = {}; var tests = [];  \/\/ \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432 showResults = function(){   jQuery('#result').empty();   \/\/ \u0438\u043c\u0435\u043d\u0430 \u0442\u0435\u0441\u0442\u043e\u0432 - \u0432 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438 \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432   var str = '&lt;tr&gt;&lt;th&gt;&lt;\/th&gt;'   for(var i=0;i&lt;tests.length;i++){     str += '&lt;th&gt;' + tests[i] + '&lt;\/th&gt;';   }   str += '&lt;\/tr&gt;';   for(var label in savedResults){     \/\/ \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0430\u044f \u0441\u0442\u0440\u043e\u043a\u0430 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u0433\u0440\u0443\u043f\u043f\u044b     str += '&lt;tr&gt;&lt;td class=&quot;rowlabel&quot;&gt;'+label+'&lt;\/td&gt;'     for(var i=0;i&lt;tests.length;i++){       str += '&lt;td&gt;';       var key = tests[i];       var res = savedResults[label][key];       if(res){         var detail = '';         var total = 0;         for(var k=0;k&lt;res.length;k++){           if(k==0) detail += Math.round(res[k]);           else detail += ', ' + Math.round(res[k]);           total += res[k];         }         if(res.length &gt; 0) total = total \/ res.length;         str += '&lt;span class=&quot;avg&quot;&gt;'+Math.round(total)+'&lt;\/span&gt;&lt;br&gt;'+detail;       }       str+='&lt;\/td&gt;';     }   }   jQuery('#result').append(str); }  \/\/ \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432 saveResult = function(label, result){   if(!savedResults[label]) savedResults[label] ={};   for(var key in result){     if(tests.indexOf(key)==-1) tests.push(key);     if(!savedResults[label][key]) savedResults[label][key] = [];     savedResults[label][key].push(result[key]);   } }  \/\/ \u0437\u0430\u043f\u0443\u0441\u043a \u0433\u0440\u0443\u043f\u043f\u044b \u043e\u0434\u043d\u043e\u0442\u0438\u043f\u043d\u044b\u0445 \u0442\u0435\u0441\u0442\u043e\u0432 runGroup = function(label, tests, count){   var res = {};   for(var key in tests) res[key] = runTest(tests[key], count);   saveResult(label, res); }  \/\/ \u0432\u044b\u043f\u043e\u043b\u043e\u043d\u044f\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0442\u0440\u0435\u0431\u0443\u0435\u043c\u043e\u0435 \u0447\u0438\u0441\u043b\u043e \u0440\u0430\u0437 runTest = function(test, count){   var start = new Date().getTime();   for(var i=1;i&lt;count;i++) test();   var end = new Date().getTime();   var time = end - start;   return count\/time; } &lt;\/script&gt; <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<h2>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0442\u0435\u0441\u0442\u0430<\/h2>\n<p>  \u0423\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0439 \u0442\u0435\u0441\u0442 \u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043b \u0432\u043e \u0432\u0441\u0435\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0445 \u043d\u0430 \u043c\u043e\u0435\u0439 \u043c\u0430\u0448\u0438\u043d\u0435. \u042d\u0442\u043e \u0431\u044b\u043b\u043e \u0441\u0434\u0435\u043b\u0430\u043d\u043e \u043d\u0435 \u0441 \u0446\u0435\u043b\u044c\u044e \u0441\u0440\u0430\u0432\u043d\u0438\u0442\u044c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b, \u0430 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043f\u043e\u0434 \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438 \u0432\u0435\u0434\u0443\u0442 \u0441\u0435\u0431\u044f \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e. \u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0437\u0430\u0431\u043e\u0442\u0438\u0442\u044c\u0441\u044f \u043e\u0431 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0438 \u0432\u0435\u0440\u0441\u0438\u0439 \u044f \u0442\u043e\u0436\u0435 \u043d\u0435 \u0441\u0442\u0430\u043b. \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0432 \u0442\u0430\u0431\u043b\u0438\u0447\u043a\u0430\u0445 \u043d\u0438\u0436\u0435. (\u0416\u0438\u0440\u043d\u044b\u043c \u0448\u0440\u0438\u0444\u0442\u043e\u043c \u0432 \u043a\u0430\u0436\u0434\u043e\u0439 \u044f\u0447\u0435\u0439\u043a\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u0443\u0441\u0440\u0435\u0434\u043d\u0435\u043d\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0447\u0435\u0442\u044b\u0440\u0435\u0445 \u0442\u0435\u0441\u0442\u043e\u0432, \u043e\u0431\u044b\u0447\u043d\u044b\u043c -\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u0438\u0437 \u0442\u0435\u0441\u0442\u043e\u0432).<\/p>\n<h4>Chrome<\/h4>\n<p>  \u0412\u0435\u0440\u0441\u0438\u044f 28.0.1500.72<br \/>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/b56\/d29\/685\/b56d2968519acbd1019e4353caeac139.png\"\/><\/p>\n<h4>Opera<\/h4>\n<p>  \u0412\u0435\u0440\u0441\u0438\u044f 12.10.1652<br \/>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/4cd\/539\/67e\/4cd53967e059ce8925d395ef36e85a3f.png\"\/><\/p>\n<h4>Firefox<\/h4>\n<p>  \u0412\u0435\u0440\u0441\u0438\u044f 22.0<br \/>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/935\/f8d\/e0e\/935f8de0ebfc9598557b2320cfb216c9.png\"\/><\/p>\n<h4>Internet Explorer<\/h4>\n<p>  \u0412\u0435\u0440\u0441\u0438\u044f 9.0.8112.16421<br \/>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/482\/049\/5b5\/4820495b54ab3b96dd3d9d357b682238.png\"\/><\/p>\n<h2>\u0418\u0442\u043e\u0433\u0438<\/h2>\n<p>  \u041d\u0430\u0433\u043b\u044f\u0434\u043d\u043e \u0441\u0440\u0430\u0432\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043d\u0430 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0435, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0430 \u043f\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430\u043c\u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0432 Chrome (\u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0431\u044b\u043b\u0438 \u043d\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u044b, \u0442\u0430\u043a \u0447\u0442\u043e\u0431\u044b \u0440\u0430\u0437\u043d\u044b\u0435 \u0433\u0440\u0443\u043f\u043f\u044b \u0442\u0435\u0441\u0442\u043e\u0432 \u0443\u043c\u0435\u0441\u0442\u0438\u043b\u0438\u0441\u044c \u043d\u0430 \u043e\u0434\u043d\u043e\u0439 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0435):<br \/>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/6c4\/9f4\/b15\/6c49f4b15db7f16680bed5ded9a0f31e.png\"\/><\/p>\n<p>  \u041a\u0430\u043a \u0438 \u043e\u0436\u0438\u0434\u0430\u043b\u043e\u0441\u044c \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u044f\u0446\u0438\u0438 \u0441 DOM \u043d\u0430 jQuery \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u044b\u0435, \u043d\u043e \u0440\u0430\u0437\u0440\u044b\u0432 \u043d\u0430 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0441\u0442\u0430\u043b \u0434\u043b\u044f \u043c\u0435\u043d\u044f \u043d\u0435\u043e\u0436\u0438\u0434\u0430\u043d\u043d\u043e\u0441\u0442\u044c\u044e. \u0410 \u0432\u043e\u0442 \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u044f\u0446\u0438\u0438 \u0441 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u043d\u0430 jQuery \u0438 \u043d\u0430 \u0421losure \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b (\u0438 \u0437\u0430\u043c\u0435\u0442\u043d\u043e \u0443\u0441\u0442\u0443\u043f\u0430\u044e\u0442 extJS, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u043f\u0440\u043e\u0442\u0438\u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0438\u0433\u0440\u044b\u0432\u0430\u0435\u0442 \u0432 \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u044f\u0446\u0438\u044f\u0445 \u0441 DOM). \u0412 \u0446\u0435\u043b\u043e\u043c \u043c\u043e\u0435 \u0434\u043e\u0432\u0435\u0440\u0438\u0435 \u043a jQuery \u043f\u043e\u0441\u043b\u0435 \u044d\u0442\u0438\u0445 \u0442\u0435\u0441\u0442\u043e\u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0448\u0430\u0442\u043d\u0443\u043b\u043e\u0441\u044c, \u043d\u043e, \u043d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u044d\u0442\u043e, \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432 \u0441\u0430\u043c\u043e\u043c \u0442\u0435\u0441\u0442\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u044b \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0438\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438.<\/p>\n<p>  \u041d\u0435 \u0434\u0443\u043c\u0430\u044e, \u0447\u0442\u043e \u0438\u0437 \u044d\u0442\u0438\u0445 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432 \u0441\u0442\u043e\u0438\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u0434\u0430\u043b\u0435\u043a\u043e \u0438\u0434\u0443\u0449\u0438\u0435 \u0432\u044b\u0432\u043e\u0434\u044b \u2014 \u0434\u043b\u044f \u043f\u043e\u0434\u0430\u0432\u043b\u044f\u044e\u0449\u0435\u0433\u043e \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0430 web-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043c\u0430\u0441\u0441\u043e\u0432\u043e\u0433\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043d\u0438 \u043e\u0434\u043d\u043e\u0439 \u0438\u0437 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0445 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439, \u043d\u043e \u0438\u043d\u043e\u0433\u0434\u0430 \u0432\u0441\u0435-\u0442\u0430\u043a\u0438 \u0441\u0442\u043e\u0438\u0442 \u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0438 \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u0442\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0438\u043b\u0443\u0447\u0448\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0442 \u0434\u043b\u044f \u0437\u0430\u0434\u0430\u0447\u0438. \u041d\u0438 \u043e\u0434\u043d\u0430 \u0438\u0437 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u043d\u0435 \u0437\u0430\u043f\u0440\u0435\u0449\u0430\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 native-\u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 DOM \u0438 \u043f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0432\u0441\u0435\u0433\u0434\u0430 \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c\u0441\u044f \u043a \u043d\u0438\u043c \u043c\u0438\u043d\u0443\u044f \u0432\u0441\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u0447\u043d\u044b\u0435 \u043e\u0431\u0435\u0440\u0442\u043a\u0438.    \t<\/p>\n<div class=\"clear\"><\/div>\n<\/p><\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"http:\/\/habrahabr.ru\/company\/mailru\/blog\/188254\/\"> http:\/\/habrahabr.ru\/company\/mailru\/blog\/188254\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div class=\"content html_format\">   \t<img decoding=\"async\" align=\"right\" src=\"http:\/\/habrastorage.org\/storage2\/cb9\/7c9\/2c5\/cb97c92c56460fcea3204afa191a648b.png\"\/><br \/>  \u041d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u043d\u0430\u0437\u0430\u0434 \u0432\u043e\u0437\u043d\u0438\u043a\u043b\u0430 \u0437\u0430\u0434\u0430\u0447\u0430 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0440\u0430\u0432\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0430\u043d\u0430\u043b\u0438\u0437 jQuery \u0438 Google Closure Library. \u041e\u0441\u043d\u043e\u0432\u043d\u044b\u043c \u0431\u044b\u043b\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u0438\u0441\u0442\u0438\u043a, \u043d\u043e \u043f\u043e\u043c\u0438\u043c\u043e \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u044f\u0432\u0438\u043b\u043e\u0441\u044c \u0436\u0435\u043b\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0438 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0440\u0430\u0431\u043e\u0442\u044b \u044d\u0442\u0438\u0445 \u0434\u0432\u0443\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a. \u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u043d\u0430\u043d\u0438\u044f \u043e \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u043c \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u043b\u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043d\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0442\u0435\u0441\u0442\u043e\u0432 \u043e\u043a\u0430\u0437\u0430\u043b\u0438\u0441\u044c \u0434\u043b\u044f \u043c\u0435\u043d\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043d\u0435\u043e\u0436\u0438\u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0438 \u044f \u0440\u0435\u0448\u0438\u043b, \u0447\u0442\u043e \u0441\u0442\u043e\u0438\u0442 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0438\u043c\u0438 \u0441 \u0445\u0430\u0431\u0440\u0430-\u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u043e\u043c.  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-188254","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/188254","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=188254"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/188254\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=188254"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=188254"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=188254"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}