Skip to content

Commit b1c5490

Browse files
ThisIs-DeveloperThisIs-Developer
authored
Merge pull request #116 from ThisIs-Developer/perf-accessibility-optimizations
perf/a11y: optimize render pipeline, lazy-load scripts, and remediate…
2 parents 04736e5 + a914d4b commit b1c5490

3 files changed

Lines changed: 471 additions & 77 deletions

File tree

‎index.html‎

Lines changed: 14 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,12 @@
1313
<meta name="distribution" content="global">
1414
<meta name="rating" content="general">
1515

16+
<!-- DNS Prefetch & Preconnect for external CDNs -->
17+
<link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>
18+
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
19+
<link rel="dns-prefetch" href="https://cdnjs.cloudflare.com">
20+
<link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
21+
1622
<!-- Open Graph / Facebook -->
1723
<meta property="og:type" content="website">
1824
<meta property="og:url" content="https://markdownviewer.pages.dev/">
@@ -29,19 +35,13 @@
2935

3036
<title>Markdown Viewer</title>
3137
<link href="assets/icon.jpg" rel="icon" type="image/jpg">
32-
<!-- Updated libraries to latest versions with Subresource Integrity (SRI) -->
38+
<!-- Style dependencies loaded synchronously for styling stability -->
3339
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
3440
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.3.0/github-markdown.min.css" integrity="sha384-hZuxRjC/Dsr4zEx1JlUhDQqkvqBPp2VLHsgXfnxPq1ULDy1eIdWCiux7nvO1RIZP" crossorigin="anonymous">
3541
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" integrity="sha384-XGjxtQfXaH2tnPFa9x+ruJTuLE3Aa6LhHSWRr1XeTyhezb4abCG4ccI5AkVDxqC+" crossorigin="anonymous">
36-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/emoji-toolkit@9.0.1/extras/css/joypixels.min.css" integrity="sha384-4ok+tBQQdy5hcPT56tzcE11yQ2BkN0Py1uDE8ZOiXYstHOpUB61pJafm+NidByp4" crossorigin="anonymous">
3742
<link rel="stylesheet" href="styles.css">
3843

39-
<!-- Loading order optimized - ensure libraries are loaded before they're used -->
40-
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/9.1.6/marked.min.js" integrity="sha384-odPBjvtXVM/5hOYIr3A1dB+flh0c3wAT3bSesIOqEGmyUA4JoKf/YTWy0XKOYAY7" crossorigin="anonymous"></script>
41-
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js" integrity="sha384-F/bZzf7p3Joyp5psL90p/p89AZJsndkSoGwRpXcZhleCWhd8SnRuoYo4d0yirjJp" crossorigin="anonymous"></script>
42-
<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.0.9/purify.min.js" integrity="sha384-3HPB1XT51W3gGRxAmZ+qbZwRpRlFQL632y8x+adAqCr4Wp3TaWwCLSTAJJKbyWEK" crossorigin="anonymous"></script>
43-
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js" integrity="sha384-PlRSzpewlarQuj5alIadXwjNUX+2eNMKwr0f07ShWYLy8B6TjEbm7ZlcN/ScSbwy" crossorigin="anonymous"></script>
44-
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js" integrity="sha384-Yv5O+t3uE3hunW8uyrbpPW3iw6/5/Y7HitWJBLgqfMoA36NogMmy+8wWZMpn3HWc" crossorigin="anonymous"></script>
44+
<!-- Inline configuration objects initialized prior to dynamic script imports -->
4545
<script>
4646
window.MathJax = {
4747
loader: { load: ['[tex]/ams', '[tex]/boldsymbol'] },
@@ -53,16 +53,6 @@
5353
}
5454
};
5555
</script>
56-
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.2/es5/tex-mml-chtml.min.js" integrity="sha384-M5jmNxKC9EVnuqeMwRHvFuYUE8Hhp0TgBruj/GZRkYtiMrCRgH7yvv5KY+Owi7TW" crossorigin="anonymous"></script>
57-
<script src="https://cdn.jsdelivr.net/npm/mermaid@11.6.0/dist/mermaid.min.js" integrity="sha384-zkWMJO4sgpPUzyuOgDx8HB/K55glbAwajEpk1Go2NWRuPkPA/wIhoEJTuSkmOYrV" crossorigin="anonymous"></script>
58-
<script src="https://cdn.jsdelivr.net/npm/emoji-toolkit@9.0.1/lib/js/joypixels.min.js" integrity="sha384-1+n1eMmP5I08CibRJ6JmycJ0hP3G6C0fuUtTb4bEuQgl9uFdS9pnPePfpmrXl9ll" crossorigin="anonymous"></script>
59-
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js" integrity="sha384-JcnsjUPPylna1s1fvi1u12X5qjY5OL56iySh75FdtrwhO/SWXgMjoVqcKyIIWOLk" crossorigin="anonymous"></script>
60-
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js" integrity="sha384-ZZ1pncU3bQe8y31yfZdMFdSpttDoPmOZg2wguVK9almUodir1PghgT0eY7Mrty8H" crossorigin="anonymous"></script>
61-
62-
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js" integrity="sha384-VFQrHzqBh5qiJIU0uGU5CIW3+OWpdGGJM9LBnGbuIH2mkICcFZ7lPd/AAtI7SNf7" crossorigin="anonymous"></script>
63-
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js" integrity="sha384-/RlQG9uf0M2vcTw3CX7fbqgbj/h8wKxw7C3zu9/GxcBPRKOEcESxaxufwRXqzq6n" crossorigin="anonymous"></script>
64-
<script src="https://cdnjs.cloudflare.com/ajax/libs/pako/2.1.0/pako.min.js" integrity="sha384-rNlaE5fs9dGIjmxWDALQh/RBAaGRYT5ChrzHo6tRfgrZ36iRFAiquP5g41Jsv+0j" crossorigin="anonymous"></script>
65-
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.min.js" integrity="sha384-+pxiN6T7yvpryuJmE1gM9PX7yQit15auDb+ZwwvJOd/4be2Cie5/IuVXgQb/S9du" crossorigin="anonymous"></script>
6656
</head>
6757
<body>
6858
<div class="app-container">
@@ -706,19 +696,22 @@ <h3 class="modal-section-title">Open-source credits</h3>
706696

707697
<div class="content-container">
708698
<div class="editor-pane">
699+
<div class="visually-hidden" id="editor-accessibility-status" aria-live="polite">
700+
Keyboard navigation active: Press Escape inside the editor, then press Tab to leave the editor pane.
701+
</div>
709702
<div id="line-numbers" class="line-numbers" aria-hidden="true"></div>
710703
<div id="editor-highlight-layer" class="editor-highlight-layer" aria-hidden="true"></div>
711-
<textarea id="markdown-editor" placeholder="Type or paste your Markdown here..."></textarea>
704+
<textarea id="markdown-editor" placeholder="Type or paste your Markdown here..." aria-describedby="editor-accessibility-status"></textarea>
712705
<div class="drop-hint" aria-hidden="true">
713706
<i class="bi bi-cloud-arrow-up me-1"></i>Drop a .md file anywhere to open it
714707
</div>
715708
</div>
716709
<!-- Resize Divider - Story 1.3 -->
717-
<div class="resize-divider" role="separator" aria-orientation="vertical" aria-label="Resize panes" tabindex="0">
710+
<div class="resize-divider" role="separator" aria-orientation="vertical" aria-label="Resize panes" tabindex="0" aria-valuemin="20" aria-valuemax="80" aria-valuenow="50">
718711
<div class="resize-divider-handle"></div>
719712
</div>
720713
<div class="preview-pane">
721-
<div id="markdown-preview" class="markdown-body"></div>
714+
<div id="markdown-preview" class="markdown-body" aria-live="polite" aria-busy="false"></div>
722715
</div>
723716
</div>
724717
</div>

0 commit comments

Comments
 (0)