Вопросы Теги

Как встраивать критические части ресурсов, вызывая блокировку непосредственно в HTML? [Дубликат]

Type.GetNestedTypes () вернет общедоступные вложенные типы указанного типа.

Если вам также нужны частные и внутренние вложенные типы, вы должны вызвать Type.GetNestedTypes (BindingFlags bindingFlags) метод, подобный этому: 

Type[] nestedTypes = typeof(MyType).GetNestedTypes(BindingFlags.Static |
                                                   BindingFlags.Instance |
                                                   BindingFlags.Public |
                                                   BindingFlags.NonPublic);

39
задан Paulina 24 September 2015 в 10:40
поделиться

6 ответов

Если у вас есть строгая политика безопасности содержимого, которая не позволяет @ vladimir-salguero ответить , вы можете использовать это (обратите внимание на сценарий nonce): 

<script nonce="(your nonce)" async>
$(document).ready(function() {
    $('link[media="none"]').each(function(a, t) {
        var n = $(this).attr("data-async"),
            i = $(this);
        void 0 !== n && !1 !== n && ("true" == n || n) && i.attr("media", "all")
    })
});
</script>

Просто добавьте следующее в ссылку на таблицу стилей: media="none" data-async="true". Вот пример: 

<link rel="stylesheet" href="../path/script.js" media="none" data-async="true" />

Пример для jQuery: 

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" type="text/css" media="none" data-async="true" crossorigin="anonymous" /><noscript><link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" type="text/css" /></noscript>
0
ответ дан Brad 17 August 2018 в 09:26
поделиться

Предварительная загрузка

Теперь вы можете использовать preload ключевое слово для элементов link.

Версия синхронизации: 

<link href="style.css" rel="stylesheet">

Версия Async: 

<link href="style.css" rel="preload" as="style">

Примечание

Эта функция совсем недавно стала широко поддерживаемой среди современных браузеров. Если вам нужны резервные копии для старых браузеров, используйте loadCSS .

Обновление (07/18)

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

Мы решили пойти с другим подходом для rel = preload. Я не знаю, когда это будет реализовано.

28
ответ дан jabacchetta 17 August 2018 в 09:26
поделиться

вы можете попытаться получить его разными способами:

1.Использование media="bogus" и <link> у подножия 

<head>
    <!-- unimportant nonsense -->
    <link rel="stylesheet" href="style.css" media="bogus">
</head>
<body>
    <!-- other unimportant nonsense, such as content -->
    <link rel="stylesheet" href="style.css">
</body>

2. Включение DOM по-старому 

<script type="text/javascript">
(function(){
  var bsa = document.createElement('script');
     bsa.type = 'text/javascript';
     bsa.async = true;
     bsa.src = 'https://s3.buysellads.com/ac/bsa.js';
  (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);
})();
</script>

3.если вы можете попробовать плагины, вы можете попробовать loadCSS 

<script>
  // include loadCSS here...
  function loadCSS( href, before, media ){ ... }
  // load a file
  loadCSS( "path/to/mystylesheet.css" );
</script>
7
ответ дан kamus 17 August 2018 в 09:26
поделиться
  • 1
    Пример 2 загружает Javascript, но вопрос заключается в загрузке CSS. Знаете ли вы, что пример 2 работает также для CSS, если вы измените значение с <script> на <style rel=stylesheet>? (Просто любопытно. Вместо этого я буду использовать loadCSS (т. Е. Ваш пример 3), если мне нужно загрузить CSS позже.) – KajMagnus 4 September 2017 в 14:36

Пожалуйста, позаботьтесь о том, чтобы обновить ответ, поскольку все вышеперечисленное не позволяет произвести впечатление на страницы google pagespeed.

Согласно Google , вы должны реализовать асинхронную загрузку Css 

 < noscript id="deferred-styles" >
        < link rel="stylesheet" type="text/css" href="small.css"/ >
    < /noscript >

<script>
  var loadDeferredStyles = function() {
    var addStylesNode = document.getElementById("deferred-styles");
    var replacement = document.createElement("div");
    replacement.innerHTML = addStylesNode.textContent;
    document.body.appendChild(replacement)
    addStylesNode.parentElement.removeChild(addStylesNode);
  };
  var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
      window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
  else window.addEventListener('load', loadDeferredStyles);
</script>
0
ответ дан kaushik gandhi 17 August 2018 в 09:26
поделиться

Уловкой запуска асинхронной загрузки стилей является использование элемента <link> и установка недопустимого значения для медиа-атрибута (я использую media = "none", но любое значение будет делать). Когда медиа-запрос оценивается как false, браузер все равно будет загружать таблицу стилей, но он не будет ждать, пока контент будет доступен до отображения страницы. 

<link rel="stylesheet" href="css.css" media="none">

После того, как таблица стилей закончила загрузку media должен быть установлен в допустимое значение, поэтому правила стиля будут применены к документу. Событие onload используется для переключения свойства media на все: 

<link rel="stylesheet" href="css.css" media="none" onload="if(media!='all')media='all'">

Этот метод загрузки CSS будет доставлять полезный контент посетителям намного быстрее, чем стандартный подход. Критический CSS все еще может быть использован с обычным блокирующим подходом (или вы можете встроить его для достижения максимальной производительности), а некритические стили могут быть постепенно загружены и применены позже в процессе синтаксического анализа / рендеринга.

Этот метод использует JavaScript, но вы можете обслуживать не-JavaScript-браузеры, обертывая эквивалентные блокирующие элементы <link> в элементе <noscript>: 

<link rel="stylesheet" href="css.css" media="none" onload="if(media!='all')media='all'"><noscript><link rel="stylesheet" href="css.css"></noscript>

Вы можете увидеть операцию в www.itcha. edu.sv

Источник в http://keithclark.co.uk/

67
ответ дан Mr Lister 17 August 2018 в 09:26
поделиться
  • 1
    Похоже, этот трюк больше не работает. – Carl 23 April 2017 в 05:30
  • 2
    Хорошо. Я не знал, что вы можете ссылаться на атрибуты элементов в обработчиках, просто упоминая их имя. Я всегда думал, что «событие» - единственное исключение. – Teemoh 23 May 2017 в 04:21
  • 3
    Итак, как вы держите свою страницу от мигания, поскольку она все реинкарнирует? Кроме того, вы используете встроенные основные стили оболочки приложения, поэтому ваша страница имеет какой-то первоначальный макет вместо того, чтобы показывать то, чем гордится Rynx? – Chris Love 10 January 2018 в 19:38
  • 4
    Кажется, все еще работает для меня. После этого я знаю, что дольше получаю предупреждение в файле PageSpeed ​​Insights для этого файла. – AndyWarren 16 March 2018 в 20:13
  • 5
    это работает для меня (08-июль -2018). И это дает хороший результат в прочтении страниц – abilash er 8 July 2018 в 07:28

Функция ниже создаст и добавит в документ все таблицы стилей, которые вы хотите загрузить асинхронно. (Но, благодаря Event Listener, он будет делать это только после того, как будут загружены другие ресурсы окна.)

См. Следующее: 

function loadAsyncStyleSheets() {

    var asyncStyleSheets = [
    '/stylesheets/async-stylesheet-1.css',
    '/stylesheets/async-stylesheet-2.css'
    ];

    for (var i = 0; i < asyncStyleSheets.length; i++) {

        var link = document.createElement('link');
        var rel = document.createAttribute('rel');
        var href = document.createAttribute('href');

        link.setAttributeNode('rel', 'stylesheet');
        link.setAttributeNode('href', asyncStyleSheets[i]); 
        document.head.appendChild(link);
    }
}

window.addEventListener('load', loadAsyncStyleSheets, false);
4
ответ дан Rounin 17 August 2018 в 09:26
поделиться
  • 1
    Существуют ли какие-либо недостатки этого метода, если мы сравним его с подходом loadCSS? Кажется, классический код var newStyle = document.createElement("link"); newStyle.rel = "stylesheet"; newStyle.href = "stylesheet.css"; document.getElementsByTagName("head")[0].appendChild(newStyle); внутри тега <script> в теле страницы отлично работает - даже в старых браузерах, таких как MSIE8. – TecMan 23 April 2018 в 13:22
Другие вопросы по тегам:

Похожие вопросы: