From 8c356afb62f9253b1ec5267e101357ea23688972 Mon Sep 17 00:00:00 2001 From: ppoffice Date: Sun, 11 Nov 2018 17:41:07 -0500 Subject: [PATCH] chore(layout): optimize page loading with script defer and async attributes --- includes/helpers/override.js | 18 ++++++++++++++ layout/common/footer.ejs | 2 +- layout/common/head.ejs | 11 ++++---- layout/common/navbar.ejs | 2 +- layout/common/scripts.ejs | 6 ++--- layout/plugin/animejs.ejs | 39 ++--------------------------- layout/plugin/back-to-top.ejs | 23 +++-------------- layout/plugin/gallery.ejs | 21 ++++------------ layout/plugin/mathjax.ejs | 4 ++- layout/plugin/outdated-browser.ejs | 40 +++++++++++++++--------------- layout/plugin/progressbar.ejs | 27 ++------------------ layout/search/baidu.ejs | 2 +- layout/search/google-cse.ejs | 2 +- layout/search/insight.ejs | 6 ++--- layout/share/sharejs.ejs | 4 +-- layout/widget/profile.ejs | 2 +- source/css/back-to-top.css | 15 +++++++++++ source/css/progressbar.css | 22 ++++++++++++++++ source/js/animation.js | 37 +++++++++++++++++++++++++++ source/js/gallery.js | 8 ++++++ 20 files changed, 155 insertions(+), 136 deletions(-) create mode 100644 source/css/back-to-top.css create mode 100644 source/css/progressbar.css create mode 100644 source/js/animation.js create mode 100644 source/js/gallery.js diff --git a/includes/helpers/override.js b/includes/helpers/override.js index 84fbcbc..f245929 100644 --- a/includes/helpers/override.js +++ b/includes/helpers/override.js @@ -6,6 +6,8 @@ * <%- _list_categories() %> * <%- _list_tags() %> * <%- _toc() %> +* <%- _js() %> +* <%- _css() %> */ const cheerio = require('cheerio'); @@ -121,4 +123,20 @@ module.exports = function (hexo) { }); return toc; }); + + hexo.extend.helper.register('_js', function (url, defer = false, async = false) { + const urlFor = hexo.extend.helper.get('url_for').bind(this); + if (!url.endsWith('.js') && !url.includes('?')) { + url += '.js'; + } + return ``; + }); + + hexo.extend.helper.register('_css', function (url) { + const urlFor = hexo.extend.helper.get('url_for').bind(this); + if (!url.endsWith('.css') && !url.includes('?')) { + url += '.css'; + } + return ``; + }); } \ No newline at end of file diff --git a/layout/common/footer.ejs b/layout/common/footer.ejs index 05926f7..5ea49b4 100644 --- a/layout/common/footer.ejs +++ b/layout/common/footer.ejs @@ -6,7 +6,7 @@ <% if (has_config('logo.text') && get_config('logo.text')) { %> <%= get_config('logo.text') %> <% } else { %> - + <%= get_config('title') %> <% } %>

diff --git a/layout/common/head.ejs b/layout/common/head.ejs index 3466537..cab8859 100644 --- a/layout/common/head.ejs +++ b/layout/common/head.ejs @@ -21,14 +21,15 @@ <% } %> -<%- css(cdn('bulma', '0.7.2', 'css/bulma.css')) %> -<%- css(iconcdn()) %> -<%- css(fontcdn('Ubuntu:400,600|Source+Code+Pro')) %> -<%- css(cdn('highlight.js', '9.12.0', 'styles/' + get_config('article.highlight') + '.css')) %> -<%- css('css/style') %> +<%- _css(cdn('bulma', '0.7.2', 'css/bulma.css')) %> +<%- _css(iconcdn()) %> +<%- _css(fontcdn('Ubuntu:400,600|Source+Code+Pro')) %> +<%- _css(cdn('highlight.js', '9.12.0', 'styles/' + get_config('article.highlight') + '.css')) %> <% if (has_config('plugins')) { %> <% for (let plugin in get_config('plugins')) { %> <%- partial('plugin/' + plugin, { head: true, plugin: get_config('plugins')[plugin] }) %> <% } %> <% } %> + +<%- _css('css/style') %> \ No newline at end of file diff --git a/layout/common/navbar.ejs b/layout/common/navbar.ejs index 9abcefb..8e1d44e 100644 --- a/layout/common/navbar.ejs +++ b/layout/common/navbar.ejs @@ -5,7 +5,7 @@ <% if (has_config('logo.text') && get_config('logo.text')) { %> <%= get_config('logo.text') %> <% } else { %> - + <%= get_config('title') %> <% } %> diff --git a/layout/common/scripts.ejs b/layout/common/scripts.ejs index 1584921..dd8b167 100644 --- a/layout/common/scripts.ejs +++ b/layout/common/scripts.ejs @@ -1,5 +1,5 @@ -<%- js(cdn('jquery', '3.3.1', 'dist/jquery.min.js')) %> -<%- js(cdn('moment', '2.22.2', 'min/moment-with-locales.min.js')) %> +<%- _js(cdn('jquery', '3.3.1', 'dist/jquery.min.js')) %> +<%- _js(cdn('moment', '2.22.2', 'min/moment-with-locales.min.js')) %> <% if (has_config('plugins')) { %> @@ -8,4 +8,4 @@ <% } %> <% } %> -<%- js('js/main') %> \ No newline at end of file +<%- _js('js/main', true) %> \ No newline at end of file diff --git a/layout/plugin/animejs.ejs b/layout/plugin/animejs.ejs index 48ec416..ce9f939 100644 --- a/layout/plugin/animejs.ejs +++ b/layout/plugin/animejs.ejs @@ -2,42 +2,7 @@ <% if (head) { %> <% } else { %> - <%- js(cdn('animejs', '2.2.0', 'anime.js')) %> - + <%- _js(cdn('animejs', '2.2.0', 'anime.js'), true) %> + <%- _js('js/animation', true) %> <% } %> <% } %> \ No newline at end of file diff --git a/layout/plugin/back-to-top.ejs b/layout/plugin/back-to-top.ejs index 78badb4..80eb636 100644 --- a/layout/plugin/back-to-top.ejs +++ b/layout/plugin/back-to-top.ejs @@ -1,25 +1,10 @@ <% if (plugin !== false) { %> -<% if (!head) { %> +<% if (head) { %> +<%- _css('css/back-to-top') %> +<% } else { %> - -<%- js('js/back-to-top') %> +<%- _js('js/back-to-top', true) %> <% } %> <% } %> \ No newline at end of file diff --git a/layout/plugin/gallery.ejs b/layout/plugin/gallery.ejs index 12ef1ef..f6b7e11 100644 --- a/layout/plugin/gallery.ejs +++ b/layout/plugin/gallery.ejs @@ -1,21 +1,10 @@ <% if (plugin !== false) { %> <% if (head) { %> - <%- css(cdn('lightgallery', '1.6.8', 'dist/css/lightgallery.min.css')) %> - <%- css(cdn('justifiedGallery', '3.7.0', 'dist/css/justifiedGallery.min.css')) %> + <%- _css(cdn('lightgallery', '1.6.8', 'dist/css/lightgallery.min.css')) %> + <%- _css(cdn('justifiedGallery', '3.7.0', 'dist/css/justifiedGallery.min.css')) %> <% } else { %> - <%- js(cdn('lightgallery', '1.6.8', 'dist/js/lightgallery.min.js')) %> - <%- js(cdn('justifiedGallery', '3.7.0', 'dist/js/jquery.justifiedGallery.min.js')) %> - + <%- _js(cdn('lightgallery', '1.6.8', 'dist/js/lightgallery.min.js'), true) %> + <%- _js(cdn('justifiedGallery', '3.7.0', 'dist/js/jquery.justifiedGallery.min.js'), true) %> + <%- _js('js/gallery', true) %> <% } %> <% } %> \ No newline at end of file diff --git a/layout/plugin/mathjax.ejs b/layout/plugin/mathjax.ejs index b6d0de8..87d0d62 100644 --- a/layout/plugin/mathjax.ejs +++ b/layout/plugin/mathjax.ejs @@ -1,10 +1,12 @@ <% if (!head && plugin !== false) { %> -<%- js(cdn('mathjax', '2.7.5', 'unpacked/MathJax.js?config=TeX-MML-AM_CHTML')) %> +<%- _js(cdn('mathjax', '2.7.5', 'unpacked/MathJax.js?config=TeX-MML-AM_CHTML'), true) %> <% } %> \ No newline at end of file diff --git a/layout/plugin/outdated-browser.ejs b/layout/plugin/outdated-browser.ejs index 58da38a..ec5ebd3 100644 --- a/layout/plugin/outdated-browser.ejs +++ b/layout/plugin/outdated-browser.ejs @@ -1,22 +1,22 @@ <% if (plugin !== false) { %> - <% if (head) { %> - <%- css(cdn('outdatedbrowser', '1.1.5', 'outdatedbrowser/outdatedbrowser.min.css')) %> - <% } else { %> -

-
Your browser is out-of-date!
-

Update your browser to view this website correctly. Update my browser now

-

×

-
- <%- js(cdn('outdatedbrowser', '1.1.5', 'outdatedbrowser/outdatedbrowser.min.js')) %> - - <% } %> +<% if (head) { %> +<%- _css(cdn('outdatedbrowser', '1.1.5', 'outdatedbrowser/outdatedbrowser.min.css')) %> +<% } else { %> +
+
Your browser is out-of-date!
+

Update your browser to view this website correctly. Update + my browser now

+

×

+
+<%- _js(cdn('outdatedbrowser', '1.1.5', 'outdatedbrowser/outdatedbrowser.min.js'), false, true) %> + +<% } %> <% } %> \ No newline at end of file diff --git a/layout/plugin/progressbar.ejs b/layout/plugin/progressbar.ejs index 680eacd..1750db1 100644 --- a/layout/plugin/progressbar.ejs +++ b/layout/plugin/progressbar.ejs @@ -1,27 +1,4 @@ <% if (head && plugin !== false) { %> -<%- js(cdn('pace-js', '1.0.2', 'pace.min.js')) %> - +<%- _css('css/progressbar') %> +<%- _js(cdn('pace-js', '1.0.2', 'pace.min.js')) %> <% } %> \ No newline at end of file diff --git a/layout/search/baidu.ejs b/layout/search/baidu.ejs index 27192f2..3cc40aa 100644 --- a/layout/search/baidu.ejs +++ b/layout/search/baidu.ejs @@ -1,4 +1,4 @@ -<%- css('css/search') %> +<%- _css('css/search') %>
diff --git a/layout/search/google-cse.ejs b/layout/search/google-cse.ejs index 7b70768..9126f9a 100644 --- a/layout/search/google-cse.ejs +++ b/layout/search/google-cse.ejs @@ -1,4 +1,4 @@ -<%- css('css/search') %> +<%- _css('css/search') %>
diff --git a/layout/search/insight.ejs b/layout/search/insight.ejs index 61bd317..b522b62 100644 --- a/layout/search/insight.ejs +++ b/layout/search/insight.ejs @@ -24,6 +24,6 @@ window.INSIGHT_CONFIG = INSIGHT_CONFIG; })(window); -<%- js('js/insight') %> -<%- css('css/search') %> -<%- css('css/insight') %> \ No newline at end of file +<%- _js('js/insight', true) %> +<%- _css('css/search') %> +<%- _css('css/insight') %> \ No newline at end of file diff --git a/layout/share/sharejs.ejs b/layout/share/sharejs.ejs index 257bcd2..35d141c 100644 --- a/layout/share/sharejs.ejs +++ b/layout/share/sharejs.ejs @@ -1,3 +1,3 @@ -<%- css(cdn('social-share.js', '1.0.16', 'dist/css/share.min.css')) %> -<%- js(cdn('social-share.js', '1.0.16', 'dist/js/social-share.min.js')) %> \ No newline at end of file +<%- _css(cdn('social-share.js', '1.0.16', 'dist/css/share.min.css')) %> +<%- _js(cdn('social-share.js', '1.0.16', 'dist/js/social-share.min.js')) %> \ No newline at end of file diff --git a/layout/widget/profile.ejs b/layout/widget/profile.ejs index a213a63..254af87 100644 --- a/layout/widget/profile.ejs +++ b/layout/widget/profile.ejs @@ -14,7 +14,7 @@