Django-Autocomplete-Light Widget causing long loading times in Django-Rest-Framework

Question

I'm currently working on an API using Django-Rest-Framework. The API itself is working fine and I'm now trying to implement Filtering for the Resources. This is working like a charm as well, the problem is though, that as I try to use the ModelSelect2-Widget from Django-Autocomplete-Light in order to handle the filtering for relationships in the Browsable API, (as there can be a lot of possible options to choose from, I'm using the autocomplete-widget to dynamically load more options if needed) the browser suddenly takes way too long to load the page due to scripts. (Firefox actually asks whether it should shut down jQuery)

I managed to narrow the problem down to some sort of problem between the scripts that DRF uses and those which DAL needs.

These are the scripts that are loaded with the page by Django Rest Framework ( Source ):

  <script>
    window.drf = {
      csrfCookieName: "{{ csrf_cookie_name|default:'csrftoken' }}"
    };
  </script>
  <script src="{% static "rest_framework/js/jquery-1.12.4.min.js" %}"></script>
  <script src="{% static "rest_framework/js/ajax-form.js" %}"></script>
  <script src="{% static "rest_framework/js/csrf.js" %}"></script>
  <script src="{% static "rest_framework/js/bootstrap.min.js" %}"></script>
  <script src="{% static "rest_framework/js/prettify-min.js" %}"></script>
  <script src="{% static "rest_framework/js/default.js" %}"></script>
  <script>
    $(document).ready(function() {
      $('form').ajaxForm();
    });
  </script>

And by Django-Autocomplete-Light ( Source for autocomplet.init.js and jquery.init.js and Source for select2.js and select2.full.js ):

<script src="{% static 'autocomplete_light/jquery.init.js' %}"></script>
<script src="{% static 'autocomplete_light/autocomplete.init.js' %}"></script>
<script src="{% static 'autocomplete_light/vendor/select2/dist/js/select2.full.js' %}"></script>
<script src="{% static 'autocomplete_light/select2.js' %}"></script>

The problem seems to be connected to prettify-min.js and the Scripts from DAL, as I can comment out one of them and the page works again just fine.

Screenshot from Firefox's Runtime Analysis: It gets worse the more data needs to be "prettified" by the script.

Does anyone see how to solve this?

Answer 1

So I somehow solved the problem myself... I simply put the contents of autocomplete.init.js and select2.js in $(document).ready(function(){...}) . Why? I don't know, but it seems to work just fine. ¯\\_(ツ)_/¯

If someone knows the explanation for that, please feel free to share it.