Для получения полного доступа
зарегистрируйтесь

Как переместить jquery.js в конец страницы (оптимизация фронтэнда)


"Золотые" правила оптимизации фронтэнда часто рекомендуют подключать все JS скрипты в конце страницы. Однако обычно нам строго необходимо подлючать <script src="//jquery.js"> в <head> страницы, и мы не можем его оттуда удалить, поскольку контент страницы может содержать onReady-обработчики, например $(function(){ ... }). Такие обработчики обычно вставляются автоматически сторонними виджетами, CMS, фреймворками.

Этот короткий скрипт позволяет переместить подключение jquery.js из <head> в конец <body> без изменения имеющихся onReady-обработчиков на странице.

Код:

<head>
	<script>
		// Fallback code for the jQuery inline scripts on pages:
      if (window.jQuery === undefined) {
          window.jQueryReadyHandlers = [];

          window.$ = window.jQuery = function (callback) {
              window.jQueryReadyHandlers.push(callback);
              return window.$;
          };

          window.$.ready = window.$;
      }
  	</script>
    <!-- ...some head items -->
</head>
<body>

	<!-- ...some page content -->
    
    <script> 
    	// some onReady-handlers
      $(function(){
          console.log('First callback');
      });

      jQuery(document).ready(function(){
          console.log('Second callback');
      });
    </script>
    
    <!-- ...some page content -->


	<script src="//js/jquery.min.js"></script>
    <script>
    	jQuery(window).load(function(){
        	if(window.jQueryReadyHandlers) { 
            	$.each(window.jQueryReadyHandlers, function(index,func){  
                	$(func);
                });
            }
        });
    </script>
</body>

Чтобы увидеть комментарии, нужно быть участником сообщества

Регистрация