Skip to content

Commit 3be8a30

Browse files
flovilmartflovilmart
committed
Improve JS and loading performance
1 parent 71b93fa commit 3be8a30

File tree

7 files changed

+92
-38
lines changed

7 files changed

+92
-38
lines changed

‎_app/main.js

+26-18
Original file line numberDiff line numberDiff line change
@@ -335,10 +335,10 @@ App.Views = {};
335335

336336
// build a mapping of the table of content based on the
337337
// h1s and h2s in the content
338-
var toc = this.buildTOC();
338+
var toc = this.buildTOC();
339339

340340
// add toc data
341-
this.node = UI.tag('ul', { className: 'ui_live_toc' }, toc);
341+
this.node = UI.tag('ul', { className: 'ui_live_toc' }, [toc]);
342342

343343
// calculate the cached heights of each header in the text
344344
$(document).ready(function(e) {
@@ -349,8 +349,8 @@ App.Views = {};
349349
// find all the h1s and h2s in the content and build the TOC elements
350350
buildTOC: function() {
351351
var headers = this.content.querySelectorAll('h1, h2, h3');
352-
var toc = [];
353352
var latestMajor, latestMinor;
353+
var toc = document.createDocumentFragment();
354354

355355
for (var i = 0; i < headers.length; i++) {
356356
var el = headers[i];
@@ -359,8 +359,8 @@ App.Views = {};
359359

360360
// Build main table of contents list from h1 tags
361361
if (el.tagName === 'H1') {
362-
latestMajor = UI.tag('ul', { className: 'ui_live_toc_major_list' });
363-
toc.push(UI.tag('li', { 'data-name': name, className: 'ui_live_toc_main' }, [
362+
latestMajor = UI.tag('ul', { className: 'ui_live_toc_major_list' });
363+
toc.appendChild(UI.tag('li', { 'data-name': name, className: 'ui_live_toc_main' }, [
364364
UI.tag('a', { href: '#' + name }, text),
365365
latestMajor
366366
]));
@@ -627,8 +627,10 @@ App.Views = {};
627627
content: document.getElementsByClassName('guide_content')[0]
628628
});
629629

630-
// deal with common-lang-blocks
631-
this.toggleCommonLangBlocks();
630+
process.nextTick(() => {
631+
// deal with common-lang-blocks
632+
this.toggleCommonLangBlocks();
633+
});
632634

633635
// setup the server/mount path editor
634636
this.setupServerFieldCustomization();
@@ -668,11 +670,14 @@ App.Views = {};
668670
},
669671

670672
renderMobileTOC: function() {
671-
var h1s = this.scrollContent.getElementsByTagName('h1');
673+
var h1s = this.scrollContent.getElementsByTagName('h1');
674+
var fragment = document.createDocumentFragment();
672675
for (var i = 0; i < h1s.length; i++) {
673-
// var anchor = h1s[i].getElementsByTagName('a')[0];
674-
this.mobileToc.appendChild(UI.tag('option', { 'data-anchor': "#"+h1s[i].id }, [ h1s[i].textContent ]));
675-
}
676+
// var anchor = h1s[i].getElementsByTagName('a')[0];
677+
var optionElement = UI.tag('option', { 'data-anchor': "#"+h1s[i].id }, [ h1s[i].textContent ]);
678+
fragment.appendChild(optionElement);
679+
}
680+
this.mobileToc.appendChild(fragment);
676681
this.mobileToc.addEventListener('change', this.handleSelectChange.bind(this));
677682
this.mobileToc.getElementsByTagName('option')[0].setAttribute('selected', true);
678683
},
@@ -879,10 +884,13 @@ App.Views = {};
879884

880885
})(UI, _);
881886

882-
var platform = window.location.pathname.split('/')[1];
883-
if (platform) {
884-
new App.Views.Docs.Main({
885-
language: 'en',
886-
platform: platform
887-
});
888-
}
887+
$(function() {
888+
var platform = window.location.pathname.split('/')[1];
889+
if (platform) {
890+
new App.Views.Docs.Main({
891+
language: 'en',
892+
platform: platform
893+
});
894+
}
895+
});
896+

‎_includes/head.html

+3-11
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,4 @@
11
<head>
2-
<!-- Global site tag (gtag.js) - Google Analytics -->
3-
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-102564547-3"></script>
4-
<script>
5-
window.dataLayer = window.dataLayer || [];
6-
function gtag(){dataLayer.push(arguments);}
7-
gtag('js', new Date());
8-
9-
gtag('config', 'UA-102564547-3');
10-
</script>
112
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
123

134
<title>{{ page.title }}</title>
@@ -52,10 +43,11 @@
5243
<!-- CSS -->
5344
<!-- build:css -->
5445
<link rel="preconnect" href="{{ site.baseUrl }}">
55-
<link href="{{ site.baseUrl }}/css/docs.css" rel="stylesheet" type="text/css"/>
46+
5647
{% if page.layout == "guide" %}
5748
<link href="{{ site.baseUrl }}/css/guide.css" rel="stylesheet" type="text/css"/>
58-
<link href="{{ site.baseUrl }}/css/lib/vendor/highlight.css" rel="stylesheet" type="text/css"/>
49+
{% else %}
50+
<link href="{{ site.baseUrl }}/css/docs.css" rel="stylesheet" type="text/css"/>
5951
{% endif %}
6052
<link href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" rel="stylesheet" />
6153
<!-- endbuild -->

‎_includes/js/files.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,8 @@ var file = new Parse.File("myfile.zzz", fileData, "image/png");
2727
### Client Side
2828
In a browser, you'll want to use an html form with a file upload control. To do this, create a file input tag which allows the user to pick a file from their local drive to upload:
2929

30-
<pre><code>
31-
&lt;input type="file" id="profilePhotoFileUpload"&gt;
30+
```html
31+
<input type="file" id="profilePhotoFileUpload">
3232
```
3333

3434
Then, in a click handler or other function, get a reference to that file:

‎_layouts/default.html

+9
Original file line numberDiff line numberDiff line change
@@ -11,4 +11,13 @@
1111
};
1212
anchors.add();
1313
</script>
14+
<!-- Global site tag (gtag.js) - Google Analytics -->
15+
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-102564547-3"></script>
16+
<script>
17+
window.dataLayer = window.dataLayer || [];
18+
function gtag(){dataLayer.push(arguments);}
19+
gtag('js', new Date());
20+
21+
gtag('config', 'UA-102564547-3');
22+
</script>
1423
</html>

‎assets/js/bundle.js

+12-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/guide.scss

+40-6
Original file line numberDiff line numberDiff line change
@@ -25,15 +25,48 @@
2525

2626
$svg-plus: "{{ '/assets/svgs/plus.svg' | prepend: site.baseurl }}";
2727

28+
// ============================================================================
29+
// Cross-Browser Normalize
30+
// ============================================================================
31+
32+
@import "lib/multisite/normalize";
33+
34+
// ============================================================================
35+
// Default Styles & Keyframes
36+
// ============================================================================
37+
38+
@import "lib/marketing/globals/defaults";
39+
40+
// ============================================================================
41+
// Type & Icons
42+
// ============================================================================
43+
44+
@import "lib/multisite/fonts";
45+
@import "lib/marketing/globals/typography";
46+
@import "lib/marketing/globals/icons";
47+
@import "lib/marketing/globals/helpers";
48+
49+
// ============================================================================
50+
// Grid System
51+
// ============================================================================
52+
53+
@import "lib/multisite/grid";
54+
2855
// ============================================================================
2956
// Base-Layout
3057
// ============================================================================
3158

32-
// Maybe later
33-
// @import "lib/multisite/footer";
34-
// @import "lib/multisite/menu";
35-
// unused
36-
// @import "lib/multisite/codebook";
59+
@import "lib/multisite/base-layout";
60+
@import "lib/multisite/header";
61+
62+
// ============================================================================
63+
// UI Components
64+
// ============================================================================
65+
66+
@import "lib/marketing/components/buttons";
67+
@import "lib/marketing/components/heros";
68+
69+
@import "lib/docs/components/docs-platform";
3770

3871
// ============================================================================
3972
// UI Components
@@ -56,5 +89,6 @@ $svg-plus: "{{ '/assets/svgs/plus.svg' | prepend: site.baseurl }}";
5689
// Utilities & Noverriders
5790
// ============================================================================
5891

59-
@import "lib/marketing/globals/helpers";
6092
@import "lib/multisite/wysiwyg";
93+
94+
@import "lib/vendor/highlight";

‎css/lib/vendor/highlight.css renamed to ‎css/lib/vendor/_highlight.scss

File renamed without changes.

0 commit comments

Comments
 (0)