{"id":26361,"date":"2016-04-20T23:01:40","date_gmt":"2016-04-20T15:01:40","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=26361"},"modified":"2024-08-19T19:14:43","modified_gmt":"2024-08-19T11:14:43","slug":"code-optimization-jquery-best-practices","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/code-optimization-jquery-best-practices\/","title":{"rendered":"Six Essential jQuery Practices to Boost Performance"},"content":{"rendered":"

Editor\u2019s note:<\/strong> This article is part of our Code Optimization series<\/a>, where we explore techniques to optimize code for better efficiency and improve our coding skills.<\/p>\n

jQuery remains one of the most popular JavaScript libraries today, thanks to its user-friendly API and relatively shallow learning curve. Many developers opt to use jQuery instead of vanilla JavaScript to introduce dynamic functionalities to their projects.<\/p>\n

However, jQuery is not without its drawbacks. If not used correctly, it can lead to performance issues, much like the JavaScript language it is built upon. This post outlines best practices for using jQuery effectively to help you avoid potential performance pitfalls.<\/p>\n

1. Lazy load scripts only when necessary<\/h2>\n

Browsers execute JavaScript before fully creating the DOM tree and rendering the page because scripts can add new elements or alter the layout or style of existing elements. By minimizing the number of scripts the browser has to execute during page load, you can reduce the time it takes for the DOM tree to be created and painted, allowing users to see the page sooner.<\/p>\n

In jQuery, you can achieve this by using $.getScript<\/code><\/a> to load script files as they are needed, rather than during the initial page load.<\/p>\n

\r\n$.getScript(\"scripts\/gallery.js\", callback);\r\n<\/pre>\n
This is an AJAX function that retrieves a single script file when needed. However, note that the fetched file isn\u2019t cached by default. To enable caching for getScript<\/code>, you\u2019ll need to enable it for all AJAX requests using the following code:<\/p>\n
\r\n$.ajaxSetup({\r\n  cache: true\r\n});\r\n<\/pre>\n
2. Avoid $(window).load()<\/code> unless sub-resources are required<\/h2>\n
The $(document).ready()<\/code> function is equivalent to DOMContentLoaded<\/code> (where available), and $(window).load()<\/code> is equivalent to the Load<\/code> event. The former is triggered when the DOM is fully loaded, excluding external assets like images and stylesheets. The latter is triggered only after all page resources, including external assets, are fully loaded.<\/p>\n
Use $(window).load()<\/code> if your script depends on sub-resources of the page, such as changing the background color of a div<\/code> that is styled by an external stylesheet. Otherwise, it is better to stick with $(document).ready()<\/code> as jQuery automatically calls its ready<\/code> event handler, regardless of whether you use $(document).ready()<\/code> or not.<\/p>\n
3. Use detach()<\/code> to temporarily remove elements from the DOM<\/h2>\n
\u201cReflow\u201d refers to the process where the browser recalculates the layout of the page due to changes in elements, such as adding new elements, adjusting existing ones, or removing elements. Reflows are resource-intensive operations for the browser.<\/p>\n
To minimize the number of reflows caused by structural changes, perform changes to an element after removing it from the page flow and then reinserting it once modifications are complete. For example, if you are adding multiple rows to a table, it is better to take the table out of the DOM, make your changes, and then reinsert it.<\/p>\n
jQuery\u2019s detach()<\/code> method allows you to remove an element from the page while preserving its data for later use. The detached element can then be reinserted into the DOM once modifications are done.<\/p>\n
4. Prefer css()<\/code> over height()<\/code> and width()<\/code> for setting dimensions<\/h2>\n
When setting the height or width of an element in jQuery, it is recommended to use the css()<\/code> function. Using height()<\/code> and width()<\/code> can trigger additional reflows due to the internal function computeStyleTests<\/code><\/a> that jQuery uses (tested in the latest version).<\/p>\n
For instance, setting the height using p.height(\"300px\");<\/code> results in more reflows.<\/p>\n
\"Reflow<\/figure>\n
In contrast, using p.css({\"height\": \"300px\"});<\/code> reduces the reflows.<\/p>\n
\"Reflow<\/figure>\n
The computeStyleTests<\/code> function performs support tests. It is called when getting<\/em> the height and width using both css()<\/code> and height()\/width()<\/code>, but for setting<\/em>, it is only called for height()\/width()<\/code>, which may be unnecessary. Hence, it is better to use css()<\/code> instead.<\/p>\n
5. Avoid unnecessary access to layout properties<\/h2>\n
Accessing layout properties like height, width, or margin can trigger a reflow in the page. This is because, whenever you ask the browser for any layout properties, it ensures you get the most up-to-date values by recalculating them and applying any necessary layout changes.<\/p>\n
Whether you are using jQuery or vanilla JavaScript, avoid unnecessary access to layout properties, especially in loops or after making style changes, as this can cause performance issues.<\/p>\n
6. Utilize caching wherever possible<\/h2>\n
jQuery provides several functions that include built-in caching mechanisms, which can be advantageous. While AJAX requests typically cache resources, this does not apply to script<\/code> and jsonp<\/code>. To enable caching across all AJAX requests, you may want to set it globally as shown earlier.<\/p>\n
Also, keep in mind that if you fetch resources using post<\/code>, they will not be cached, even if you have caching enabled.<\/p>\n
As mentioned earlier, detach()<\/code> caches data associated with the element being removed, unlike remove()<\/code>. The hide()<\/code> function caches an element\u2019s initial display<\/code> value before hiding it so it can be restored later without losing data.<\/p>\n
Conclusion<\/h2>\n
To ensure you are using the most efficient jQuery code for your needs, test your code in real scenarios and check for any performance issues. If you notice any, use performance and debugging tools<\/a> to identify the root cause of the issue.<\/p>\n
Since jQuery serves as a wrapper for JavaScript, offering additional functionalities for browser compatibility and other features, it can be challenging to diagnose problems without these tools.<\/p>","protected":false},"excerpt":{"rendered":"
Editor\u2019s note: This article is part of our Code Optimization series, where we explore techniques to optimize code for better efficiency and improve our coding skills. jQuery remains one of the most popular JavaScript libraries today, thanks to its user-friendly API and relatively shallow learning curve. Many developers opt to use jQuery instead of vanilla…<\/p>\n","protected":false},"author":145,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[3427,911,3761],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nSix Essential jQuery Practices to Boost Performance - Hongkiat<\/title>\n<meta name=\"description\" content=\"Editor's note: This article is part of our Code Optimization series, where we explore techniques to optimize code for better efficiency and improve our\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/code-optimization-jquery-best-practices\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Six Essential jQuery Practices to Boost Performance\" \/>\n<meta property=\"og:description\" content=\"Editor's note: This article is part of our Code Optimization series, where we explore techniques to optimize code for better efficiency and improve our\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/code-optimization-jquery-best-practices\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2016-04-20T15:01:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-08-19T11:14:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/code-optimization-jquery-best-practices\/reflow-by-height-func-jquery.jpg\" \/>\n<meta name=\"author\" content=\"Preethi Ranjit\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Preethi Ranjit\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/code-optimization-jquery-best-practices\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/code-optimization-jquery-best-practices\\\/\"},\"author\":{\"name\":\"Preethi Ranjit\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\"},\"headline\":\"Six Essential jQuery Practices to Boost Performance\",\"datePublished\":\"2016-04-20T15:01:40+00:00\",\"dateModified\":\"2024-08-19T11:14:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/code-optimization-jquery-best-practices\\\/\"},\"wordCount\":824,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/code-optimization-jquery-best-practices\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/code-optimization-jquery-best-practices\\\/reflow-by-height-func-jquery.jpg\",\"keywords\":[\"Code Optimization\",\"jQuery\",\"Series: Code Optimization\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/code-optimization-jquery-best-practices\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/code-optimization-jquery-best-practices\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/code-optimization-jquery-best-practices\\\/\",\"name\":\"Six Essential jQuery Practices to Boost Performance - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/code-optimization-jquery-best-practices\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/code-optimization-jquery-best-practices\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/code-optimization-jquery-best-practices\\\/reflow-by-height-func-jquery.jpg\",\"datePublished\":\"2016-04-20T15:01:40+00:00\",\"dateModified\":\"2024-08-19T11:14:43+00:00\",\"description\":\"Editor's note: This article is part of our Code Optimization series, where we explore techniques to optimize code for better efficiency and improve our\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/code-optimization-jquery-best-practices\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/code-optimization-jquery-best-practices\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/code-optimization-jquery-best-practices\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/code-optimization-jquery-best-practices\\\/reflow-by-height-func-jquery.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/code-optimization-jquery-best-practices\\\/reflow-by-height-func-jquery.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/code-optimization-jquery-best-practices\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Six Essential jQuery Practices to Boost Performance\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\",\"name\":\"Preethi Ranjit\",\"description\":\"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/preethi\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Six Essential jQuery Practices to Boost Performance - Hongkiat","description":"Editor's note: This article is part of our Code Optimization series, where we explore techniques to optimize code for better efficiency and improve our","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/code-optimization-jquery-best-practices\/","og_locale":"en_US","og_type":"article","og_title":"Six Essential jQuery Practices to Boost Performance","og_description":"Editor's note: This article is part of our Code Optimization series, where we explore techniques to optimize code for better efficiency and improve our","og_url":"https:\/\/www.hongkiat.com\/blog\/code-optimization-jquery-best-practices\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2016-04-20T15:01:40+00:00","article_modified_time":"2024-08-19T11:14:43+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/code-optimization-jquery-best-practices\/reflow-by-height-func-jquery.jpg","type":"","width":"","height":""}],"author":"Preethi Ranjit","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Preethi Ranjit","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/code-optimization-jquery-best-practices\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/code-optimization-jquery-best-practices\/"},"author":{"name":"Preethi Ranjit","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3"},"headline":"Six Essential jQuery Practices to Boost Performance","datePublished":"2016-04-20T15:01:40+00:00","dateModified":"2024-08-19T11:14:43+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/code-optimization-jquery-best-practices\/"},"wordCount":824,"commentCount":3,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/code-optimization-jquery-best-practices\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/code-optimization-jquery-best-practices\/reflow-by-height-func-jquery.jpg","keywords":["Code Optimization","jQuery","Series: Code Optimization"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/code-optimization-jquery-best-practices\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/code-optimization-jquery-best-practices\/","url":"https:\/\/www.hongkiat.com\/blog\/code-optimization-jquery-best-practices\/","name":"Six Essential jQuery Practices to Boost Performance - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/code-optimization-jquery-best-practices\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/code-optimization-jquery-best-practices\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/code-optimization-jquery-best-practices\/reflow-by-height-func-jquery.jpg","datePublished":"2016-04-20T15:01:40+00:00","dateModified":"2024-08-19T11:14:43+00:00","description":"Editor's note: This article is part of our Code Optimization series, where we explore techniques to optimize code for better efficiency and improve our","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/code-optimization-jquery-best-practices\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/code-optimization-jquery-best-practices\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/code-optimization-jquery-best-practices\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/code-optimization-jquery-best-practices\/reflow-by-height-func-jquery.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/code-optimization-jquery-best-practices\/reflow-by-height-func-jquery.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/code-optimization-jquery-best-practices\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Six Essential jQuery Practices to Boost Performance"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3","name":"Preethi Ranjit","description":"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.","url":"https:\/\/www.hongkiat.com\/blog\/author\/preethi\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-6Rb","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26361","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/145"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=26361"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26361\/revisions"}],"predecessor-version":[{"id":72662,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26361\/revisions\/72662"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=26361"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=26361"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=26361"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=26361"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}