Ошибка в консоли js - скрипт работает

178

20 июня 2018, 13:20

<script async>      
        function addCss(url) {      
            if (window.XMLHttpRequest) {
                xhr = new XMLHttpRequest();
                } else {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }       
            xhr.open("GET", url, false );
            xhr.send();
            var lazyStyle = document.createElement('style');
            lazyStyle.innerHTML = xhr.responseText;
            document.head.appendChild(lazyStyle);
        }
        addCss('data/css/bootstrap.min.css?v=<?php echo date("Y-m-d H:i:s"); ?>');
        addCss('data/css/animate.min.css?v=<?php echo date("Y-m-d H:i:s"); ?>');
        addCss('data/css/responsive.css?v=<?php echo date("Y-m-d H:i:s"); ?>'); 
        addCss('data/css/style.css?v=<?php echo date("Y-m-d H:i:s"); ?>');
    </script>

(index):22 [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/. addCss @ (index):22

Как убрать данную ошибку из консоли?

Answer 1

xhr.open("GET", url, false ); // третий параметр async=false

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/open

Note: Synchronous requests on the main thread can be easily disruptive to the user experience and should be avoided; in fact, many browsers have deprecated synchronous XHR support on the main thread entirely. Synchronous requests are permitted in Workers.

То есть

Синхронные запросы в основном потоке могут вызывать задержки в работе браузера, и их следует избегать. Многие браузеры считают такой вид запроса устаревшим. Синхронные запросы допустимы в фоновых Worker-ах.

function addCss(url) {      
  var xhr; // !!! используйте локальную переменную xhr
  if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
  } else {
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xhr.open("GET", url, true ); // или xhr.open("GET", url);
  xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    var lazyStyle = document.createElement('style');
    lazyStyle.innerHTML = xhr.responseText;
    document.head.appendChild(lazyStyle);
  }
  xhr.send();
};