{"id":8735,"date":"2026-05-29T13:13:08","date_gmt":"2026-05-29T11:13:08","guid":{"rendered":"https:\/\/mybox.com\/help\/?post_type=manual_kb&#038;p=8735"},"modified":"2026-06-09T21:07:42","modified_gmt":"2026-06-09T19:07:42","slug":"de-ce-ar-trebui-sa-folositi-atributul-defer-pentru-a-optimiza-incarcarea-javascript-ului-si-a-obtine-o-performanta-mai-buna","status":"publish","type":"manual_kb","link":"https:\/\/mybox.com\/help\/ro\/knowledgebase\/why-you-should-use-the-defer-attribute-optimizing-javascript-loading-for-better-performance\/","title":{"rendered":"De ce s\u0103 folose\u0219ti atributul \u201edefer\u201c?"},"content":{"rendered":"<div class=\"translation-block translation-block-merged\">\n<p class=\"wp-block-paragraph\">Modern websites often rely on JavaScript to provide interactive features, analytics, forms, and dynamic content.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">However, JavaScript files can affect page loading performance if they prevent the browser from rendering page content while scripts are being downloaded and executed.<\/p>\n\n\n\n<\/div>\n\n<div id=\"mybox-2975234898\" class=\"mybox-content mybox-entity-placement\"><div class=\"early-access-banner-inpost\">\r\n  <div class=\"banner-left-inpost\">\r\n    <div class=\"icon-box-inpost\">\r\n      <img decoding=\"async\" src=\"https:\/\/mybox.com\/help\/wp-content\/uploads\/2026\/02\/square-info-icon.svg\" alt=\"Info\">\r\n    <\/div>\r\n    <div class=\"text-box-inpost\">\r\n      <span class=\"label-inpost\"><span class=\"translation-block translation-block-banner-text\">Acces timpuriu<\/span><\/span>\r\n      <h4><span class=\"translation-block translation-block-banner-text\">Mai ave\u021bi nevoie de ajutor?<\/span><\/h4>\r\n      <p><span class=\"translation-block translation-block-banner-text\">Contacta\u021bi echipa noastr\u0103 de servicii pentru clien\u021bi.<\/span><\/p>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"banner-right-inpost\">\r\n    <a href=\"https:\/\/panel.mybox.com\/helpdesk2\/v\/list\/\" class=\"banner-button-inpost\"><span class=\"translation-block translation-block-banner-text\">Trimite mesaj<\/span><\/a>\r\n  <\/div>\r\n<\/div><\/div>\n\n<div class=\"translation-block translation-block-merged\"><p class=\"wp-block-paragraph\">The <code>defer<\/code> attribute helps reduce this problem by allowing browsers to continue processing the page while JavaScript files are loading in the background.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 ez-toc-wrap-left counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/mybox.com\/help\/ro\/knowledgebase\/why-you-should-use-the-defer-attribute-optimizing-javascript-loading-for-better-performance\/#What_Is_the_defer_Attribute\" >What Is the defer Attribute?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/mybox.com\/help\/ro\/knowledgebase\/why-you-should-use-the-defer-attribute-optimizing-javascript-loading-for-better-performance\/#Why_Is_defer_Useful\" >Why Is defer Useful?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/mybox.com\/help\/ro\/knowledgebase\/why-you-should-use-the-defer-attribute-optimizing-javascript-loading-for-better-performance\/#How_defer_Works\" >How defer Works<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/mybox.com\/help\/ro\/knowledgebase\/why-you-should-use-the-defer-attribute-optimizing-javascript-loading-for-better-performance\/#defer_vs_async\" >defer vs. async<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/mybox.com\/help\/ro\/knowledgebase\/why-you-should-use-the-defer-attribute-optimizing-javascript-loading-for-better-performance\/#Common_Use_Cases\" >Common Use Cases<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/mybox.com\/help\/ro\/knowledgebase\/why-you-should-use-the-defer-attribute-optimizing-javascript-loading-for-better-performance\/#Practical_Implications\" >Practical Implications<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/mybox.com\/help\/ro\/knowledgebase\/why-you-should-use-the-defer-attribute-optimizing-javascript-loading-for-better-performance\/#Summary\" >Summary<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_Is_the_defer_Attribute\"><\/span>What Is the defer Attribute?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The <code>defer<\/code> attribute is used with external JavaScript files.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script src=\"app.js\" defer&gt;&lt;\/script&gt;\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">When a browser encounters a deferred script, it downloads the file while continuing to process the HTML document.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The script is executed only after the HTML document has been fully parsed.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Why_Is_defer_Useful\"><\/span>Why Is defer Useful?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Without the <code>defer<\/code> attribute, browsers may pause HTML processing while JavaScript files are downloaded and executed.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This can delay page rendering and increase loading times.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Using <code>defer<\/code> helps improve the user experience because page content can appear sooner while scripts continue loading in the background.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_defer_Works\"><\/span>How defer Works<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">When a deferred script is encountered:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>The browser begins downloading the script.<\/li>\n\n\n\n<li>HTML parsing continues without interruption.<\/li>\n\n\n\n<li>The browser finishes processing the HTML document.<\/li>\n\n\n\n<li>Deferred scripts are executed in the order they appear.<\/li>\n\n\n\n<li>The page finishes loading normally.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">This approach allows content to become visible more quickly without breaking script execution order.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"defer_vs_async\"><\/span>defer vs. async<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>defer \u2260 async<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Both attributes improve JavaScript loading behavior, but they work differently.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>defer<\/th><th>async<\/th><\/tr><\/thead><tbody><tr><td>Downloads in parallel with HTML parsing<\/td><td>Downloads in parallel with HTML parsing<\/td><\/tr><tr><td>Executes after HTML parsing is complete<\/td><td>Executes immediately after download<\/td><\/tr><tr><td>Preserves script order<\/td><td>Does not guarantee script order<\/td><\/tr><tr><td>Suitable for scripts that depend on page structure<\/td><td>Suitable for independent scripts<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Choosing the correct option depends on how the script interacts with the page.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Common_Use_Cases\"><\/span>Common Use Cases<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The <code>defer<\/code> attribute is commonly used for:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Website functionality scripts<\/li>\n\n\n\n<li>User interface components<\/li>\n\n\n\n<li>Form validation<\/li>\n\n\n\n<li>Analytics tools<\/li>\n\n\n\n<li>Third-party integrations<\/li>\n\n\n\n<li>Content management systems such as WordPress<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">It is particularly useful when scripts need access to page elements that may not yet exist during initial loading.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Practical_Implications\"><\/span>Practical Implications<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Using <code>defer<\/code> can improve page loading performance by reducing render-blocking behavior.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">However, not every script should be deferred. Some scripts may need to execute immediately, while others may depend on different loading strategies.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">When optimizing website performance, it is important to test changes and verify that all functionality continues to work as expected.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Summary\"><\/span>Summary<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The <code>defer<\/code> attribute allows browsers to download JavaScript files without interrupting HTML processing. By delaying script execution until after the document has been parsed, it can improve page loading performance and help create a smoother user experience.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n<\/div>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"template":"","format":"standard","manualknowledgebasecat":[42],"manual_kb_tag":[6828,6829,6830,6831,6832,6833,6824,6825,6826,6827],"class_list":["post-8735","manual_kb","type-manual_kb","status-publish","format-standard","hentry","manualknowledgebasecat-miscellaneous","manual_kb_tag-page-loading-performance","manual_kb_tag-javascript-loading","manual_kb_tag-external-javascript","manual_kb_tag-script-execution-order","manual_kb_tag-document-parsing","manual_kb_tag-deferred-execution","manual_kb_tag-defer-attribute","manual_kb_tag-deferred-scripts","manual_kb_tag-async-attribute","manual_kb_tag-render-blocking"],"_links":{"self":[{"href":"https:\/\/mybox.com\/help\/ro\/wp-json\/wp\/v2\/manual_kb\/8735","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mybox.com\/help\/ro\/wp-json\/wp\/v2\/manual_kb"}],"about":[{"href":"https:\/\/mybox.com\/help\/ro\/wp-json\/wp\/v2\/types\/manual_kb"}],"author":[{"embeddable":true,"href":"https:\/\/mybox.com\/help\/ro\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":2,"href":"https:\/\/mybox.com\/help\/ro\/wp-json\/wp\/v2\/manual_kb\/8735\/revisions"}],"predecessor-version":[{"id":8736,"href":"https:\/\/mybox.com\/help\/ro\/wp-json\/wp\/v2\/manual_kb\/8735\/revisions\/8736"}],"wp:attachment":[{"href":"https:\/\/mybox.com\/help\/ro\/wp-json\/wp\/v2\/media?parent=8735"}],"wp:term":[{"taxonomy":"manualknowledgebasecat","embeddable":true,"href":"https:\/\/mybox.com\/help\/ro\/wp-json\/wp\/v2\/manualknowledgebasecat?post=8735"},{"taxonomy":"manual_kb_tag","embeddable":true,"href":"https:\/\/mybox.com\/help\/ro\/wp-json\/wp\/v2\/manual_kb_tag?post=8735"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}