[IMP] base,web: Improve webclient startup

Today, some resources that varies very infrequentely are requested on
every page load: the menus, the translations and the qweb templates

After this commit, there will be 2 improvements that will make the
loading of the webclient faster:
1. cache almost static resources forever
when loading the /web/ page, the user session will
contain the cache key to be used to fetch these resources. As the content
of the resource itself it used to compute the hash, the request can be
put in cache by the browser forever (for a year).

The up side is that in general less requests are needed to load the web client
The down side is that the load time and number of queries of /web page
has increased to include what is needed to compute the hash of translations,
menus and qweb templates

2. trigger the loading of the menus before the download (and startup) of
the JS and CSS assets:
The menus contains the definition of the action, wich is the first thing
needed to load a page in odoo. Starting the loading of the menu much
earlier means that when they are not yet in the browser cache (see point 1),
the browser does not need to wait for the entire assets to be downloaded
and parsed before starting the 'load_menu' request, but instead start it
immediately and hold onto a promise to be used instead of the rpc 'load_menu'.

Because the request is done before anything else is loaded, including
JQuery, it is made in vanilla JS.

Co-authored-by: Julien Mougenot <jum@odoo.com>

5 files changed, 32 insertions, 20 deletions

diff --git a/addons/web/static/src/js/chrome/abstract_web_client.js b/addons/web/static/src/js/chrome/abstract_web_client.js
index 360d44743b5..f1af6fc7234 100644
--- a/addons/web/static/src/js/chrome/abstract_web_client.js
+++ b/addons/web/static/src/js/chrome/abstract_web_client.js
@@ -101,7 +101,7 @@ var AbstractWebClient = Widget.extend(ServiceProviderMixin, KeyboardNavigationMi
         KeyboardNavigationMixin.init.call(this);
         this.origin = undefined;
         this._current_state = null;
-        this.menu_dm = new concurrency.DropMisordered();
+        this.menu_dp = new concurrency.DropPrevious();
         this.action_mutex = new concurrency.Mutex();
         this.set('title_part', {"zopenerp": "Odoo"});
     },
diff --git a/addons/web/static/src/js/chrome/web_client.js b/addons/web/static/src/js/chrome/web_client.js
index 19ce0a92d41..e79f7d84289 100644
--- a/addons/web/static/src/js/chrome/web_client.js
+++ b/addons/web/static/src/js/chrome/web_client.js
@@ -55,12 +55,7 @@ return AbstractWebClient.extend({
         });
     },
     load_menus: function () {
-        return this._rpc({
-                model: 'ir.ui.menu',
-                method: 'load_menus',
-                args: [config.debug],
-                context: session.user_context,
-            })
+        return (odoo.loadMenusPromise || odoo.reloadMenus())
             .then(function (menuData) {
                 // Compute action_id if not defined on a top menu item
                 for (var i = 0; i < menuData.children.length; i++) {
@@ -75,6 +70,7 @@ return AbstractWebClient.extend({
                         }
                     }
                 }
+                odoo.loadMenusPromise = null;
                 return menuData;
             });
     },
@@ -82,18 +78,18 @@ return AbstractWebClient.extend({
         var self = this;
         this.set_title();
 
-        return this.instanciate_menu_widgets().then(function () {
+        return this.menu_dp.add(this.instanciate_menu_widgets()).then(function () {
             $(window).bind('hashchange', self.on_hashchange);
 
             // If the url's state is empty, we execute the user's home action if there is one (we
             // show the first app if not)
             var state = $.bbq.getState(true);
             if (_.keys(state).length === 1 && _.keys(state)[0] === "cids") {
-                return self._rpc({
+                return self.menu_dp.add(self._rpc({
                         model: 'res.users',
                         method: 'read',
                         args: [session.uid, ["action_id"]],
-                    })
+                    }))
                     .then(function (result) {
                         var data = result[0];
                         if (data.action_id) {
@@ -143,7 +139,7 @@ return AbstractWebClient.extend({
             if (!_.isEqual(self._current_state, stringstate)) {
                 var state = $.bbq.getState(true);
                 if (state.action || (state.model && (state.view_type || state.id))) {
-                    return self.action_manager.loadState(state, !!self._current_state).then(function () {
+                    return self.menu_dp.add(self.action_manager.loadState(state, !!self._current_state)).then(function () {
                         if (state.menu_id) {
                             if (state.menu_id !== self.menu.current_primary_menu) {
                                 core.bus.trigger('change_menu_section', state.menu_id);
@@ -158,7 +154,7 @@ return AbstractWebClient.extend({
                     });
                 } else if (state.menu_id) {
                     var action_id = self.menu.menu_id_to_action_id(state.menu_id);
-                    return self.do_action(action_id, {clear_breadcrumbs: true}).then(function () {
+                    return self.menu_dp.add(self.do_action(action_id, {clear_breadcrumbs: true})).then(function () {
                         core.bus.trigger('change_menu_section', state.menu_id);
                     });
                 } else {
@@ -179,7 +175,7 @@ return AbstractWebClient.extend({
     // --------------------------------------------------------------
     on_app_clicked: function (ev) {
         var self = this;
-        return this.menu_dm.add(data_manager.load_action(ev.data.action_id))
+        return this.menu_dp.add(data_manager.load_action(ev.data.action_id))
             .then(function (result) {
                 return self.action_mutex.exec(function () {
                     var completed = new Promise(function (resolve, reject) {
@@ -210,7 +206,7 @@ return AbstractWebClient.extend({
     },
     on_menu_clicked: function (ev) {
         var self = this;
-        return this.menu_dm.add(data_manager.load_action(ev.data.action_id))
+        return this.menu_dp.add(data_manager.load_action(ev.data.action_id))
             .then(function (result) {
                 self.$el.removeClass('o_mobile_menu_opened');
 
diff --git a/addons/web/static/src/js/core/session.js b/addons/web/static/src/js/core/session.js
index 21103a9529a..e083bb71e7f 100644
--- a/addons/web/static/src/js/core/session.js
+++ b/addons/web/static/src/js/core/session.js
@@ -241,8 +241,11 @@ var Session = core.Class.extend(mixins.EventDispatcherMixin, {
         });
     },
     load_qweb: function (mods) {
+        var self = this;
         var lock = this.qweb_mutex.exec(function () {
-            return $.get('/web/webclient/qweb?mods=' + mods).then(function (doc) {
+            var cacheId = self.cache_hashes && self.cache_hashes.qweb;
+            var route  = '/web/webclient/qweb/' + (cacheId ? cacheId : Date.now()) + '?mods=' + mods;
+            return $.get(route).then(function (doc) {
                 if (!doc) { return; }
                 qweb.add_template(doc);
             });
@@ -344,10 +347,18 @@ var Session = core.Class.extend(mixins.EventDispatcherMixin, {
     getTZOffset: function (date) {
         return -new Date(date).getTimezoneOffset();
     },
-
     //--------------------------------------------------------------------------
     // Public
     //--------------------------------------------------------------------------
+    /**
+     * Replaces the value of a key in cache_hashes (the hash of some resource computed on the back-end by a unique value
+     * @param {string} key the key in the cache_hashes to invalidate
+     */
+    invalidateCacheKey: function(key) {
+        if (this.cache_hashes && this.cache_hashes[key]) {
+            this.cache_hashes[key] = Date.now();
+        }
+    },
 
     /**
      * Reload the currencies (initially given in session_info). This is meant to
diff --git a/addons/web/static/src/js/core/translation.js b/addons/web/static/src/js/core/translation.js
index 83c556c3c37..416ea9130d2 100644
--- a/addons/web/static/src/js/core/translation.js
+++ b/addons/web/static/src/js/core/translation.js
@@ -62,9 +62,12 @@ var TranslationDataBase = Class.extend(/** @lends instance.TranslationDataBase#
     */
     load_translations: function(session, modules, lang, url) {
         var self = this;
-        return session.rpc(url || '/web/webclient/translations', {
-            "mods": modules || null,
-            "lang": lang || null
+        var cacheId = session.cache_hashes && session.cache_hashes.translations;
+        url = url || '/web/webclient/translations';
+        url += '/' + (cacheId ? cacheId : Date.now());
+        return $.get(url, {
+            mods: modules ? modules.join(',') : null,
+            lang: lang || null,
         }).then(function (trans) {
             self.set_bundle(trans);
         });
diff --git a/addons/web/static/src/js/services/data_manager.js b/addons/web/static/src/js/services/data_manager.js
index fb9a29a01de..4d66a59eac2 100644
--- a/addons/web/static/src/js/services/data_manager.js
+++ b/addons/web/static/src/js/services/data_manager.js
@@ -4,6 +4,7 @@ odoo.define('web.DataManager', function (require) {
 var config = require('web.config');
 var core = require('web.core');
 var rpc = require('web.rpc');
+var session = require('web.session');
 var utils = require('web.utils');
 
 return core.Class.extend({
@@ -26,6 +27,7 @@ return core.Class.extend({
      * Suggestion: could be refined to invalidate some part of the cache
      */
     invalidate: function () {
+        session.invalidateCacheKey('load_menus');
         this._init_cache();
     },
 
@@ -45,7 +47,7 @@ return core.Class.extend({
                 route: "/web/action/load",
                 params: {
                     action_id: action_id,
-                    additional_context : additional_context,
+                    additional_context: additional_context,
                 },
             }).then(function (action) {
                 self._cache.actions[key] = action.no_cache ? null : self._cache.actions[key];