search

compono / idibu-v3-api

4 stars 3 forks source link

Deprecated synchronous AJAX requests blocking main thread #8

Open KeithHenry opened 5 years ago

KeithHenry commented 5 years ago

When you load the <iframe> one of the many console log messages you get is this:

image

Full log:

31887?mode=crm&crm_name=idibu&session_name=crm_idibu_none:4 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
nrWrapper @ 31887?mode=crm&crm_name=idibu&session_name=crm_idibu_none:4
send @ VM1209 app_6633cdef58ff11f13509b3c753e1cb0f3e2e8a03_ae9f84d2ed07b1334d389644f953708e.js:54
ajax @ VM1209 app_6633cdef58ff11f13509b3c753e1cb0f3e2e8a03_ae9f84d2ed07b1334d389644f953708e.js:54
(anonymous) @ VM1209 app_6633cdef58ff11f13509b3c753e1cb0f3e2e8a03_ae9f84d2ed07b1334d389644f953708e.js:54
each @ VM1209 app_6633cdef58ff11f13509b3c753e1cb0f3e2e8a03_ae9f84d2ed07b1334d389644f953708e.js:52
domManip @ VM1209 app_6633cdef58ff11f13509b3c753e1cb0f3e2e8a03_ae9f84d2ed07b1334d389644f953708e.js:54
domManip @ VM1209 app_6633cdef58ff11f13509b3c753e1cb0f3e2e8a03_ae9f84d2ed07b1334d389644f953708e.js:23272
append @ VM1209 app_6633cdef58ff11f13509b3c753e1cb0f3e2e8a03_ae9f84d2ed07b1334d389644f953708e.js:53
(anonymous) @ VM1209 app_6633cdef58ff11f13509b3c753e1cb0f3e2e8a03_ae9f84d2ed07b1334d389644f953708e.js:54
access @ VM1209 app_6633cdef58ff11f13509b3c753e1cb0f3e2e8a03_ae9f84d2ed07b1334d389644f953708e.js:52
html @ VM1209 app_6633cdef58ff11f13509b3c753e1cb0f3e2e8a03_ae9f84d2ed07b1334d389644f953708e.js:54
(anonymous) @ VM1281 CustomSearch.js:1081
o @ VM1209 app_6633cdef58ff11f13509b3c753e1cb0f3e2e8a03_ae9f84d2ed07b1334d389644f953708e.js:52
fireWith @ VM1209 app_6633cdef58ff11f13509b3c753e1cb0f3e2e8a03_ae9f84d2ed07b1334d389644f953708e.js:52
w @ VM1209 app_6633cdef58ff11f13509b3c753e1cb0f3e2e8a03_ae9f84d2ed07b1334d389644f953708e.js:54
d @ VM1209 app_6633cdef58ff11f13509b3c753e1cb0f3e2e8a03_ae9f84d2ed07b1334d389644f953708e.js:54
nrWrapper @ 31887?mode=crm&crm_name=idibu&session_name=crm_idibu_none:4
XMLHttpRequest.send (async)
nrWrapper @ 31887?mode=crm&crm_name=idibu&session_name=crm_idibu_none:4
send @ VM1209 app_6633cdef58ff11f13509b3c753e1cb0f3e2e8a03_ae9f84d2ed07b1334d389644f953708e.js:54
ajax @ VM1209 app_6633cdef58ff11f13509b3c753e1cb0f3e2e8a03_ae9f84d2ed07b1334d389644f953708e.js:54
f.<computed> @ VM1209 app_6633cdef58ff11f13509b3c753e1cb0f3e2e8a03_ae9f84d2ed07b1334d389644f953708e.js:54
reloadBoxes @ VM1281 CustomSearch.js:1076
init @ VM1281 CustomSearch.js:1305
(anonymous) @ VM1279:19
one @ VM1209 app_6633cdef58ff11f13509b3c753e1cb0f3e2e8a03_ae9f84d2ed07b1334d389644f953708e.js:24672
(anonymous) @ VM1209 app_6633cdef58ff11f13509b3c753e1cb0f3e2e8a03_ae9f84d2ed07b1334d389644f953708e.js:24885
(anonymous) @ VM1209 app_6633cdef58ff11f13509b3c753e1cb0f3e2e8a03_ae9f84d2ed07b1334d389644f953708e.js:24921
process @ VM1209 app_6633cdef58ff11f13509b3c753e1cb0f3e2e8a03_ae9f84d2ed07b1334d389644f953708e.js:25006
load (async)
loadAsset @ VM1209 app_6633cdef58ff11f13509b3c753e1cb0f3e2e8a03_ae9f84d2ed07b1334d389644f953708e.js:25039
load @ VM1209 app_6633cdef58ff11f13509b3c753e1cb0f3e2e8a03_ae9f84d2ed07b1334d389644f953708e.js:24918
(anonymous) @ VM1209 app_6633cdef58ff11f13509b3c753e1cb0f3e2e8a03_ae9f84d2ed07b1334d389644f953708e.js:24883
each @ VM1209 app_6633cdef58ff11f13509b3c753e1cb0f3e2e8a03_ae9f84d2ed07b1334d389644f953708e.js:24634
apiLoadAsync @ VM1209 app_6633cdef58ff11f13509b3c753e1cb0f3e2e8a03_ae9f84d2ed07b1334d389644f953708e.js:24879
(anonymous) @ VM1279:10
(anonymous) @ VM1209 app_6633cdef58ff11f13509b3c753e1cb0f3e2e8a03_ae9f84d2ed07b1334d389644f953708e.js:52
globalEval @ VM1209 app_6633cdef58ff11f13509b3c753e1cb0f3e2e8a03_ae9f84d2ed07b1334d389644f953708e.js:52
(anonymous) @ VM1209 app_6633cdef58ff11f13509b3c753e1cb0f3e2e8a03_ae9f84d2ed07b1334d389644f953708e.js:54
each @ VM1209 app_6633cdef58ff11f13509b3c753e1cb0f3e2e8a03_ae9f84d2ed07b1334d389644f953708e.js:52
domManip @ VM1209 app_6633cdef58ff11f13509b3c753e1cb0f3e2e8a03_ae9f84d2ed07b1334d389644f953708e.js:54
domManip @ VM1209 app_6633cdef58ff11f13509b3c753e1cb0f3e2e8a03_ae9f84d2ed07b1334d389644f953708e.js:23272
append @ VM1209 app_6633cdef58ff11f13509b3c753e1cb0f3e2e8a03_ae9f84d2ed07b1334d389644f953708e.js:53
(anonymous) @ VM1209 app_6633cdef58ff11f13509b3c753e1cb0f3e2e8a03_ae9f84d2ed07b1334d389644f953708e.js:54
access @ VM1209 app_6633cdef58ff11f13509b3c753e1cb0f3e2e8a03_ae9f84d2ed07b1334d389644f953708e.js:52
html @ VM1209 app_6633cdef58ff11f13509b3c753e1cb0f3e2e8a03_ae9f84d2ed07b1334d389644f953708e.js:54
options.success @ VM1209 app_6633cdef58ff11f13509b3c753e1cb0f3e2e8a03_ae9f84d2ed07b1334d389644f953708e.js:24002
o @ VM1209 app_6633cdef58ff11f13509b3c753e1cb0f3e2e8a03_ae9f84d2ed07b1334d389644f953708e.js:52
fireWith @ VM1209 app_6633cdef58ff11f13509b3c753e1cb0f3e2e8a03_ae9f84d2ed07b1334d389644f953708e.js:52
w @ VM1209 app_6633cdef58ff11f13509b3c753e1cb0f3e2e8a03_ae9f84d2ed07b1334d389644f953708e.js:54
d @ VM1209 app_6633cdef58ff11f13509b3c753e1cb0f3e2e8a03_ae9f84d2ed07b1334d389644f953708e.js:54
nrWrapper @ 31887?mode=crm&crm_name=idibu&session_name=crm_idibu_none:4
XMLHttpRequest.send (async)
nrWrapper @ 31887?mode=crm&crm_name=idibu&session_name=crm_idibu_none:4
send @ VM1209 app_6633cdef58ff11f13509b3c753e1cb0f3e2e8a03_ae9f84d2ed07b1334d389644f953708e.js:54
ajax @ VM1209 app_6633cdef58ff11f13509b3c753e1cb0f3e2e8a03_ae9f84d2ed07b1334d389644f953708e.js:54
pjax @ VM1209 app_6633cdef58ff11f13509b3c753e1cb0f3e2e8a03_ae9f84d2ed07b1334d389644f953708e.js:24066
handleClick @ VM1209 app_6633cdef58ff11f13509b3c753e1cb0f3e2e8a03_ae9f84d2ed07b1334d389644f953708e.js:23813
(anonymous) @ VM1209 app_6633cdef58ff11f13509b3c753e1cb0f3e2e8a03_ae9f84d2ed07b1334d389644f953708e.js:23749
dispatch @ VM1209 app_6633cdef58ff11f13509b3c753e1cb0f3e2e8a03_ae9f84d2ed07b1334d389644f953708e.js:53
i @ VM1209 app_6633cdef58ff11f13509b3c753e1cb0f3e2e8a03_ae9f84d2ed07b1334d389644f953708e.js:53
nrWrapper @ 31887?mode=crm&crm_name=idibu&session_name=crm_idibu_none:4

This appears to be due to a jQuery $.ajax call in https://cdn.v3.idibu.com/assets/app_6633cdef58ff11f13509b3c753e1cb0f3e2e8a03_ae9f84d2ed07b1334d389644f953708e.js

image

This causes the main JS thread to hang in the <iframe> and in turn the calling app. It appears to be unnecessary too as it's in an each loop where the result is not being used, but it's hard to tell with the minified code.

We can avoid this in some browsers with a feature policy on the <iframe allow="sync-xhr 'none'"> but that risks breaking whatever Idibu expects to stall the main thread for.

KeithHenry commented 5 years ago

I've found what using allow="sync-xhr 'none'" breaks: when selecting job boards to search you get an Error: No search boards specified message even when boards are selected.

We can work around this, but it's worth being aware: when selecting a board the pop up that appears loads with a synchronous request that can hang the calling page until it completes. As this follows user interaction we can hide it, but animations (for instance loading spinners) will stall - we can just make sure the calling page isn't animating anything before the <iframe> starts to load.

TimParkr commented 5 years ago

Thanks @KeithHenry for letting us know that. @vadimkuragkovskiy - let's take a closer look at that.