特に、colorboxやmodalで親画面から子画面を呼び出す場合に良く出るんですが、
Synchronous XMLHttpRequest on the main thread is deprecated
because of its detrimental effects to the end user's experience.というエラーに遭遇することがあります。
これが出てしまう場合、原因はajaxで同期的にリモートのコンテンツを読み込んで書き換えようとしているからです。
なので、対処としては、ajax呼び出しを非同期呼び出しにすればいいので、下記サンプルのように、
function call_ajax() {
console.log('call ajax');
$.ajax({
url:'/some.html',
async:true,
type:'GET',
})
// Ajaxリクエストが成功した時発動
.done( (data) => {
console.log('success');
})
// Ajaxリクエストが失敗した時発動
.fail( (data) => {
alert("Error: " + xhr.status + ": " + xhr.statusText);
})
// Ajaxリクエストが成功・失敗どちらでも発動
.always( (data) => {
});
}「async:true」がajaxに渡るようにするとワーニングが出ないようになります。
上記の対処でも、どうしてもエラー出てしまう場合
まれに、上記の対応を行なっても、ワーニングが出続けてしまうことがあります。
そんなときは、そのajaxの関数の呼び出しの度に、ワーニングが出るか、注意深く見てみましょう。
初回の呼び出しのときにしかワーニングが表示されない場合は、以下の可能性も疑ってみると良いと思います。
ajax呼び出しで、別ページののコンテンツを呼び出している場合、そのページ上部でjavascriptのファイル（jsファイル）を読み込んでいないかを確認しましょう。
その場合、ページ読み込み時に、そのjsファイルを同期的にロードするため、当該エラーが表示されてしまうことがあります。
私は、結構これでハマリました。。。
お役に立てば幸いです。