🍞 A retro dark theme for Hugo https://after-dark.habd.as
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

61 lines
2.3 KiB

  1. +++
  2. title = "Fetch Injection"
  3. description = "Load external scripts and styles with incredible speed."
  4. categories = ["experience"]
  5. tags = ["performance", "styles"]
  6. features = ["snippets", "related content", "code highlighter"]
  7. +++
  8. After Dark uses the {{< external rel="external help" href="https://git.habd.as/jhabdas/fetch-inject" text="Fetch Inject" />}} library to load and execute external scripts and styles faster than browsers are capable of otherwise.
  9. {{< external href="https://hackcabin.com/post/managing-async-dependencies-javascript/" text="Fetch Injection" />}} was conceptualized and developed for After Dark to make it possible to deep-link to full-sized [Image Gallery](/module/hall-of-mirrors) images without blocking page load and has other performance applications:
  10. <table>
  11. <thead>
  12. <tr>
  13. <th rowspan="2" scope="col">Use Case</th>
  14. <th colspan="2" scope="col">Chrome Performance Comparison (4G simulated connection speed)</th>
  15. </tr>
  16. <tr>
  17. <th scope="col">Without Fetch Inject</th>
  18. <th scope="col">With Fetch Inject</th>
  19. </tr>
  20. </thead>
  21. <tbody>
  22. <td>{{< external href="https://habd.as/talks/screaming-fast-wordpress-redis-vultr/" text="WordPress Twenty Seventeen" />}}</td>
  23. <td>~3.600s</td>
  24. <td>~0.918s</td>
  25. </tbody>
  26. </table>
  27. Use Fetch Inject in your [Custom Layouts](../custom-layouts) to load scripts and styles cross-origin or from your site `static` directory.
  28. Given the following `static` folder contents:
  29. ```
  30. ├── layouts
  31. ├── static
  32. │ ├── js
  33. │ │ ├── jquery.slim.min.js
  34. │ │ ├── tether.min.js
  35. │ │ └── bootstrap.min.js
  36. │ └── css
  37. │ └── font-awesome.min.css
  38. └── themes
  39. ```
  40. You can dynamically load the entire Bootstrap 4 library including with Web Fonts on-the-fly:
  41. {{< highlight html "linenos=inline" >}}
  42. <script>
  43. fetchInject(['/js/bootstrap.min.js'],
  44. fetchInject([
  45. 'jquery.slim.min.js',
  46. 'tether.min.js',
  47. 'font-awesome.min.css'
  48. ])
  49. ])
  50. </script>
  51. {{< /highlight >}}
  52. Fetch Inject is non-blocking, has 0 dependencies and is included on all pages within After Dark by default. See {{< external rel="external help" href="https://git.habd.as/jhabdas/fetch-inject" text="Fetch Inject" />}} for additional use cases.