Введение статьи Wulin.com (www.vevb.com): Многие люди спрашивают, что такое HTML5? Мы говорим, что метод, который мы можем сначала использовать HTML5, - это первым изменить Doctype, потому что в настоящее время многие страницы все еще находятся в традиционном пути. Метод HTML5 совместим с браузером IE и может использоваться от IE6 до IE10, и он может поддерживать передовые браузеры.
[Примечание редактора] Следующая статья была написана ИТ -техническим специалистом по имени Zhang Liming, опубликованной на веб -странице InfoQ. На этот раз он проанализировал производительность HTML5 из 9 различных аспектов в полном тексте, который по -прежнему стоит прочитать соответствующими разработчиками.
С точки зрения производительности, HTML5 сначала снижает HTML -документы, что делает это проще. Во -первых, с точки зрения читаемости пользователя, было много вещей, которые изначально не были поняты начинающими впервые увидеть эти вещи, и метод объявления HTML5, очевидно, более дружелюбен для пользователей. Во -вторых, объявление кодирования документа очень проста, если оно находится в HTML5. Многие люди спрашивают, что такое HTML5? Мы говорим, что метод, который мы можем сначала использовать HTML5, - это первым изменить Doctype, потому что в настоящее время многие страницы все еще находятся в традиционном пути. Метод HTML5 совместим с браузером IE и может использоваться от IE6 до IE10, и он может поддерживать передовые браузеры. Таким образом, самый простой способ принять HTML5 - это изменить Doctype.
1. Проще говоря
Следующая вещь может быть не очень распространенной вещью, но это то, что я предпочитаю, используя более простой метод метки. Как вы можете сказать из этого имени, HTML5 унаследован от HTML4. HTML4 имеет строгий режим режима и перехода. HTML5 поддерживает этот режим перехода, что означает, что вы не можете закрыть некоторые теги. Тем не менее, я не рекомендую все теги, например, тег тела не закрыт, что мы не рекомендуем. Но наиболее часто используемой P-label также является список LI. Почему ты так говоришь? Прежде всего, с визуальной точки зрения этот метод немного проще. Тогда ключ заключается в том, что в процессе передачи документа будет меньше контента.
Объявление атрибутов тега HTML5 поддерживает три способа: отдельные кронштейны, двойные кронштейны и неразветвленные кронштейны. Чтобы уменьшить размер документа, я выбрал метод без двойных кавычек или отдельных кавычек. Тем не менее, следует отметить, что при условии, что это объявление атрибутов класса, поскольку атрибуты могут включать несколько классов, а когда несколько классов должны быть заключены в скобки. В связи с этим позвольте мне показать вам практику Google. Сам Google имеет страницу, которая полностью практикует вышеуказанную, уменьшая размер документа на 20%, что сокращает передачу документов HTML на 20%. Если все это практикуется, это может достичь уменьшения на 5% до 20%. Это первый шаг, уменьшая размер документа HTML.
2. Оптимизация изображения
Далее посвящены оптимизации картин, которые всегда являются элементами, которые любят и ненавидят. Потому что, когда будет слишком много картинок, это серьезно перетаскивает скорость загрузки всей страницы. Что касается методов оптимизации изображений, в книге «Высокопроизводительная веб -сайт» есть много знакомств. Подводя итог, существует три основных момента: использование эльфов, оптимизация размера изображений и использование DATA URI. Я не буду вдаваться в подробности здесь.
Другая идея оптимизации изображения: без imemage. Покинуть картинки и принять CSS3. Первоначально мне нужно было установить картинку с закругленным угловым эффектом, но теперь я использовал границу-радий в CSS3; Раньше я устанавливал эффект тени, но теперь я использую Box-Shadow в CSS3; Раньше я устанавливал фоновое изображение градиента, но теперь я использую градиент в CSS3.
3
Далее, давайте поговорим о предварительной выборке, что является еще одним способом оптимизации. Наши текущие идеи оптимизации - не что иное, как немногие. Многие из них с точки зрения меньшего количества вещей, например, размер документа был уменьшен до того, как размер изображения был уменьшен. Многие картинки становятся эльфами, чтобы уменьшить количество запросов на отправку. Для предварительного получения это еще один способ мышления. Загрузка ресурсов рано. Когда пользователь подходит к точке, он фактически загрузился, так что это определенно будет быстрее.
Есть две части для предварительной выборки: одна представляет собой предварительную выборку ресурсов, а другая представляет собой предварительное разрешение DNS.
Есть несколько моментов, чтобы отметить, когда предварительная загрузка ресурсов:
Предварительная загрузка будет тянуть только тогда, когда браузер будет холодом, но он не гарантированно ее притянет. Это очень важный момент. Потому что в самом браузере есть глобальный слушатель, который является внутренним интерфейсом. Когда просмотр воздуха простаивает, он выполнит браузер, когда он будет холодный, но этот холостовый обратный вызов не может быть запускается, поэтому он не гарантирует, что предварительная загрузка будет выполнена.
Chrome не поддерживает предварительную загрузку ресурсов HTTPS. Например, Alipay-это HTTPS-страница, Chrome не будет предварительно пробиться.
Хотя предварительно выбитая страница не видно после ее существующего, на самом деле она обычно анализирует. Если я предварительно наполняю страницу входа в систему, на странице входа в систему есть много ресурсов, таких как изображения, файлы CSS и файлы JS. Он будет проанализирован сверху вниз обычно. Во время процесса анализа эта страница не появляется, но на самом деле существует. В HTML5 вы можете получить статус текущей страницы через документ. Обычно на странице есть два штата, видимые и невидимые, но теперь есть новое состояние, называемое предварительным состоянием. Вы можете непосредственно определить, находится ли страница в состоянии прерандеров, на том, является ли документ.