В чем разница подключения js в head или body?
Браузер загружает и отображает HTML постепенно. Особенно это заметно при медленном интернет-соединении: браузер не ждёт, пока страница загрузится целиком, а показывает ту часть, которую успел загрузить.

Если браузер видит тег, 
<script>
то он по стандарту обязан сначала выполнить его, а потом показать оставшуюся часть страницы.

Если вставить скрипт в head, то пока он не выполнится мы не увидим отрисовку body. Если скрипт большой и ресурсоемкий, то мы будем наблюдать белую страницу на сайте. 
Поэтому лучше выносить скрипты в конец документа перед закрывающим body. 

Если же мы осознанно хотим скрывать содержимое пока не отработают нужные скрипты, то имеет смысл их разместить в head
Советую атрибуты async и defer у script, т.к. они позволят не блокировать загрузку html,  и в случая async - запускаться в тот момент, когда загрузятся, а в случае defer - они будут загружены до события DOMContentLoaded. 
Если мешает белая страница в начале - сделайте preloader )