разместить внешний JavaScript после CSS-файла внутри элемента head с помощью JSF 2.3 - PullRequest
Новая
       9

разместить внешний JavaScript после CSS-файла внутри элемента head с помощью JSF 2.3

0 голосов
/ 31 декабря 2018

Я использую JSF 2.3 для разработки веб-приложения.Как веб-разработчик, я беспокоюсь о скорости загрузки сайта.

Когда я изучал, как я могу сделать свой сайт быстрее, я столкнулся с этим постом в переполнении стека.А цитата из принятого и получившего наибольшее количество голосов ответа гласила, что

таблицы стилей должны всегда указываться в заголовке документа для повышения производительности, важно, где это возможно, чтобы любые внешние файлы JS, которые должныбыть включенным в заголовок (например, те, которые пишут в документ), следуя таблицам стилей, чтобы предотвратить задержки во времени загрузки.

Я знаю, что JavaScript работает лучше, когда он находится в нижней части<body>, но я хочу включить reCAPTCHA, и Google дает указание поместить необходимый внешний JavaScript-код перед закрывающим тегом </head>.

Итак, я решил включить требуемый внешний JavaScript-код перед закрывающим </head>и после CSS-файлов для повышения производительности.

Однако мои CSS-файлы объявлены в формате JSF, например <h:outputStylesheet name="css/default.css"/>, и я понял, что CSS-файлы, объявленные таким образом, всегда помещаются после файлов, которые были объявленыне-JSF, что составляет <script src="https://www.google.com/recaptcha/api.js"></script>.Я также рассмотрел вопрос о том, чтобы заставить внешний JavaScript вести себя в JSF-режиме, изменив <script> на <h:outputScript>, но <h:outputScript> может отображать только локальные сценарии, как описано в этом посте .

Таким образом, результат всегда будет следующим: 

<head>
    <script src="https://www.google.com/recaptcha/api.js"></script>
    <link type="text/css" rel="stylesheet" href="/project/javax.faces.resource/css/default.css.xhtml" />
</head>

вместо 

<head>
    <link type="text/css" rel="stylesheet" href="/project/javax.faces.resource/css/default.css.xhtml" />
    <script src="https://www.google.com/recaptcha/api.js"></script>
</head>

Может быть, я слишком много думаю, и порядок размещения link и scriptне сильно влияет на производительность, но если скорость загрузки даже немного возрастает, я хочу пойти по лучшему пути.

...