Что разработчики должны знать об анализе производительности HTML5

Комментарий: Следующая статья была написана ИТ -техническим специалистом по имени Чжан Liming, и она была опубликована на веб -странице InfoQ. На этот раз он проанализировал производительность HTML5 из ​​9 различных аспектов в полном тексте, который по -прежнему стоит прочитать соответствующими разработчиками.

Во -первых, с точки зрения читаемости пользователя, было много вещей, которые изначально не были поняты начинающими впервые увидеть эти вещи, и метод объявления HTML5, очевидно, более дружелюбен для пользователей.

Во -вторых, объявление кодирования документа очень проста, если оно находится в HTML5. Многие люди спрашивают, что такое HTML5? Мы говорим, что в первую очередь мы можем использовать HTML5, чтобы первым изменить Doctype, потому что многие страницы все еще в традиционном пути. Метод HTML5 совместим с браузером IE и может использоваться от IE6 до IE10, и он может поддерживать передовые браузеры. Таким образом, самый простой способ принять HTML5 - это изменить Doctype.

Следующая вещь может быть не очень распространенной вещью, но это то, что я предпочитаю, используя более простой метод метки. Как вы можете сказать из этого имени, HTML5 унаследован от HTML4. HTML4 имеет строгий режим режима и перехода. HTML5 поддерживает этот режим перехода, что означает, что вы не можете закрыть некоторые теги. Тем не менее, я не рекомендую все теги, например, тег тела не закрыт, что мы не рекомендуем. Но наиболее часто используемой P-label также является список LI. Почему ты это говоришь? Прежде всего, с визуальной точки зрения этот метод немного проще. Тогда ключ заключается в том, что в процессе передачи документа будет меньше контента.

Объявление атрибутов тега HTML5 поддерживает три способа: отдельные кронштейны, двойные кронштейны и неразветвленные кронштейны. Чтобы уменьшить размер документа, я выбрал метод без двойных кавычек или отдельных кавычек. Тем не менее, следует отметить, что при условии, что это объявление атрибутов класса, поскольку атрибуты могут включать несколько классов, а когда несколько классов должны быть заключены в скобки. В связи с этим позвольте мне показать вам практику Google. Сам Google имеет страницу, которая полностью практикует вышеуказанную, уменьшая размер документа на 20%, что сокращает передачу документов HTML на 20%. Если все это практикуется, это может достичь уменьшения на 5% до 20%. Это первый шаг, уменьшая размер документа HTML.

Далее посвящены оптимизации картин, которые всегда являются элементами, которые любят и ненавидят. Потому что, когда будет слишком много картинок, это серьезно перетаскивает скорость загрузки всей страницы. Что касается методов оптимизации изображений, в книге «Высокопроизводительная веб -сайт» есть много знакомств. Подводя итог, существует три основных момента: использование эльфов, оптимизация размера изображений и использование DATA URI. Я не буду вдаваться в подробности здесь.

Другая идея оптимизации изображения: без imemage. Покинуть картинки и принять CSS3. Первоначально мне нужно было установить картинку с закругленным угловым эффектом, но теперь я использовал границу-радий в CSS3; Я использовал картинку с эффектом тени, но теперь я использую Box-Shadow в CSS3; Раньше я устанавливал фоновое изображение градиента, но теперь я использую градиент в CSS3.

3

Далее, давайте поговорим о предварительной выборке, что является еще одним способом оптимизации. Наши текущие идеи оптимизации - не что иное, как немногие. Многие из них с точки зрения меньшего количества вещей, например, размер документа был уменьшен до того, как размер изображения был уменьшен. Многие картинки становятся эльфами, чтобы уменьшить количество запросов на отправку. Для предварительного получения это еще один способ мышления. Загрузка ресурсов рано. Когда пользователь подходит к точке, он фактически загрузился, так что это определенно будет быстрее.

Есть две части для предварительной выборки: одна представляет собой предварительную выборку ресурсов, а другая представляет собой предварительное разрешение DNS.

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

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

Chrome не поддерживает предварительную загрузку ресурсов HTTPS. Например, Alipay-это HTTPS-страница, Chrome не будет предварительно пробиться.

Хотя предварительно выбитая страница не видно после ее существующего, на самом деле она обычно анализирует. Если я предварительно наполняю страницу входа в систему, на странице входа в систему есть много ресурсов, таких как изображения, файлы CSS и файлы JS. Он будет проанализирован сверху вниз обычно. Во время процесса анализа эта страница не появляется, но на самом деле существует. В HTML5 вы можете получить статус текущей страницы через документ. Обычно на странице есть два штата, видимые и невидимые, но теперь есть новое состояние, называемое предварительным состоянием. Вы можете непосредственно определить, находится ли страница в состоянии прерандеров, на том, является ли документ.

4. Резолюция

Далее следует разрешение DNS. Иногда, когда мы входим на страницу, относительно сложно определить, куда пользователь может нажать. Конечно, иногда мы сделаем некоторые точки захоронения, чтобы узнать, что следующее поведение пользователя в основном происходит. Но в некоторых случаях мы не знаем, на какую страницу пользователь перейдет в следующую, но мы знаем, в какой домен он пойдет. В настоящее время я могу предварительно переносить DNS. Потому что на самом деле, во всем процессе запроса страницы существует длинный процесс разрешения DNS. Если мы сделаем это заранее, мы можем дополнительно позволить пользователям увидеть эту страницу.

Ниже приведен случай с обоями Q+. Q+ Обои являются определенной системой. Прежде всего, вся архитектура Q+ основана на клиенте Web+. Теперь мы видим веб -страницу. Хотя это клиентская оболочка снаружи, его сердце - веб -сайт. Когда мы завершили весь процесс в первый раз, потому что есть много картин, все статические ресурсы выделяются более чем дюжине статических серверов. Другими словами, если я хочу потянуть, я должен проанализировать 10 DNS. Это время довольно много времени, и самое медленное время может быть отложено на несколько секунд, что мы можем чувствовать невооруженным глазом. Если вы выполняете предварительное разрешение DNS, потому что я не знаю, какой это ресурс, все картинки случайны, поэтому мы можем только сказать, что мы усердно работаем над предварительным разрешением DNS, чтобы улучшить его скорость. Таким образом, это может занять 2 секунды, и я стану 1 секунду.

Далее давайте поговорим о приложении в Q+. У нас будет много текстовых цепей в QQ и Q+, как в QQ, что означает, что в левом нижнем углу окна есть информация о текстовом приложении. Это бэкэнд время от времени тянутся через Интернет, а бэкэнд вытаскивается, а затем отображается на переднем плане. Но в определенный период общая эксплуатационная информация, наведенная всеми приложениями, фактически фиксирована. Если вы анализируете соответствующий массив каждой текстовой цепочки в соответствии с конкретным приложением, в настоящее время это очень большие данные. Поскольку один здесь имеет около трех или четырехсот байтов, с точки зрения оптимизации, мы будем тянуть эти области на местном уровне. Затем сохраните местный местный сборник. Мы находимся в одном и том же домене, и вся информация между приложениями может быть доступна друг другу. Тогда вы больше не будете тянуть все идентификаторы, которые вы натянули.

Есть также момент, на который нужно обратить внимание на здесь. В настоящее время многие производители Local Storage синхронизированы. Если вы позвоните в LocalStorage в больших количествах, он фактически заблокирует ваш процесс рендеринга. В настоящее время, когда пользователь перетаскивает страницу, вы храните данные в настоящее время, и данные относительно большие. В настоящее время пользователь будет чувствовать, что ваша страница очень застряла. Они обсуждали этот вопрос раньше. Дизайн этого интерфейса разработан асинхронно, и они разработаны как синхронные. Это заставит вас сделать это оправдание, когда вы делаете больше приложений, потому что существует процесс сериализации, последовательность на диск. Таким образом, весь процесс будет выглядеть медленнее. Кроме того, LocalStorage может поделиться этими данными между различными окнами, и он будет блокировать эти данные. Если большой объем данных вызывает этот локальный интерфейс, он будет относительно застрял. Так что в данный момент нет особенно хорошего решения, но это то, что нужно помнить. Даже если самый большой в настоящее время более 5 часов, если вы используете более 5 часов, это сделает пользователя очень грустным. Потому что, если вы называете это оправдание, и пользователь перетаскивает и использует мышь, он будет очень застрять.

Далее, давайте поговорим о преимуществах автономного хранилища для пользователей с точки зрения производительности. Прежде всего, файл определения вводится в автономном хранилище. Все системные модули в Q+ имеют определение в автономном режиме. То есть, если все приложения отключены, они все равно могут быть использованы. Добавьте манифестный файл в документ. Manifest - это файл определения, который заявляет, какие страницы нужно хранить локально? Какие из них не нужно хранить? Какие из них следует заменить, если запрос не удастся? Это разделено на три части:

Во -первых, кеш, который должен храниться локально.

Во -вторых, сеть не будет храниться локально. Он вернется и просит его каждый раз. Но здесь следует указать, что локальное хранилище и хранилище браузера на самом деле две разные вещи. Они хранят две разные части. Даже если сеть должна сообщить приложению, что мне нужно вытащить его один раз каждый раз, потому что, как и Chrome, его кэш хранения очень ненавистных и трудно очистить. Это должно быть очищено вручную, чтобы вступить в силу. Таким образом, даже если вы не установите его для хранения локально, браузер может хранить его сами, потому что он хранит два разных места.

В -третьих, запасная. Если картинка не удается, это 404. Итак, какие картинки следует использовать вместо этого? Я думаю, что это веселее.

Как установить Maeifest? В манифесте есть три вещи:

Проявленное гомологичное ограничение;

Тип MIME должен быть манифестом текста/кэша, который является стандартным и не вступит в силу, если он будет в других форматах;

Chrome, если вы хотите посмотреть, вступит ли в силу эта вещь, вы можете ввести ее в браузер через псевдопротокол хрома, Chrome: // appcache-internals.

О том, как обновить кэш приложения. Зачем вам в автономном хранении? Хранить в автономном режиме на местном уровне. Когда браузер знает, что у вас есть автономное хранилище, он сначала перейдет в каталог в автономном режиме, чтобы выяснить, был ли этот ресурс кэширован. Когда он будет кэширован, он получит ресурс непосредственно отсюда и не будет отправлять другой запрос. Поскольку запрос браузера такой, когда есть автономное хранилище, даже запрос не будет отправлен, поэтому он будет быстрее. Если иногда нам нужно обновить, что мы должны делать, когда мы обновляемся?

Пользователи могут вручную очистить кэш браузера, а локальное хранилище будет автоматически очищено в настоящее время.

Изменение любого контента Manifest - более рекомендуемый способ, и это также способ использования его в Интернете. То есть мы можем изменить конкретные проекты внутри, но лучше всего изменить комментарии здесь, потому что каждый раз, когда я публикую, мы автоматически публикуем механизм, просто комментируем и изменяем его при публикации. Таким образом, каждый раз, когда будет опубликован контент, он будет синхронизироваться с локальной областью клиента в режиме реального времени;

Выполните через программу, а программа - window.applicationCache.update (). Это означает, что я хочу работать в автономном хранилище. На самом деле, я иногда называю это хранилищем приложений, потому что его семантика - это хранилище приложений. Мы переходим вручную обновлять хранилище приложений.

6. Web Worker

Следующий веб -работник. Web Worker-это многопоточный процесс JS. На самом деле, если у нас нет сценариев приложений в Интернете, я не буду говорить о них. Но мы можем поговорить о конкретных сценариях приложения, которые я видел.

Во -первых, позвольте мне представить, что такое веб -работа? Это поток на уровне ОС. Раньше мы подражали многопоточности, но на самом деле мы открыли еще одно окно. Но теперь сам браузер предоставляет его, что принесет большую удобство для операции и является способом сделать весь наш документ более тяжелым и не очень рекомендуемым.

Затем веб -работник обладает ограниченными возможностями доступа и не может получить доступ к многим глобальным объектам. Например, объект Documnet не может быть доступен. Самым подходящим сценарием для веб-работника являются процессовые вычислительные операции. Когда мы играли в игры раньше, мы использовали Box2d. Многие люди слышали об этом. Он включает в себя множество расчетов, то есть все объекты, ниже, на всей странице, необходимы для рассчитания их отношения столкновения, что очень велика. Однако, если он выполняется в текущем процессе JS, расчет велик, и как только расчет будет рассчитан, вся страница будет очень заикающейся. Однако, если вы используете веб-работников для этого, это асинхронный процесс, который отправляется в режиме реального времени и может делать другие вещи во время процесса расчета, который является многопоточным.

Давайте поговорим об API устройства. Я думаю, что самое важное в API устройства - это производительность, а также самый ранний API в настоящее время. Одним из них является подключение, которое представляет собой пропускную способность сети. Какова функция этого? В этом сценарии в Китае необходимо помнить, что скорости интернета многих пользователей все еще очень низкие. Мы надеемся, что когда скорость пользователей в Интернете низкая, они могут автоматически понижать до относительно низкого решения. Мы не можем сделать это, если используем существующую технологию. Но мы можем использовать API устройства. Потому что мы знаем, что эту информацию можно получить с устройства. Какой у него широкополосная связь? Что такое широкополосная связь? Что мы можем сделать, когда это так. Например, когда широкополосная связь хороша, я использую изображения высокой четкости. Когда широкополосная связь относительно низкая, используйте изображения с более низкой ясностью.

8. Батарея

Следующий рассказывает о батареи. Я думаю, что с точки зрения производительности речь идет в основном о власти. Если мощность батареи пользователя относительно низкая, я думаю, что он должен попытаться сделать меньше вещей. Технология батареи самого мобильного телефона еще не сделала прорывы. Я думаю, что приложение выглядит более высоким производительностью, также является основным моментом рекламы.

9. Канвас

Далее холст. Давайте поговорим о нескольких точках оптимизации производительности холста. Если вы используете эти вещи, производительность будет улучшена в 10 раз.

Во -первых, каждый холст - это холст. Когда мы хотим отобразить график, мы можем его слое. Как и внутри PS, это один, два и три слоя. Многие пользователи непосредственно подражают всем в одном слое при создании игр, и все должно быть обновлено после обновления. Но если вы сложитесь, вы поместите фон в фоновый слой и характер в роли. Таким образом, когда я хочу обновить роль, я буду обновлять только роль, и фоновый слой не нужно изменять. Поскольку процессор делает меньше, производительность, естественно, улучшится.

Во -вторых, контекст. Не масштабируйте картину. Мы допустили ошибку в начале. Фотографии, сделанные нашими артистами, всегда противоречат нами, и тогда мы хотим масштабировать картину. Поскольку размер изображения самого устройства такой, мы должны масштабировать изображение по соотношению. После увеличения картинки я обнаружил, что на низкокачественных устройствах, например, iPad или iPhone будут очень застряли. Почему? Просто провести анализ кода. При использовании этого метода это будет стоить дорого.

В -третьих, requestAnimationFrame. Это метод, специально оптимизированный для рендеринга. Его собственный принцип заключается в следующем: когда браузер проходит кадр, этот метод будет вызван. Когда я запускаю его, Canvas получает браузер готов сделать следующий кадр. Если вы используете традиционный метод, вы не будете учитывать больше своих вещей. Он будет только знать, сколько времени я прошел, и я его выполняю. Если пользователь блокируется ранее и выполняет этот метод каждые 10 секунд, в течение 10 секунд, предыдущая работа не была завершена, а затем работа будет отложена. Для анимации оптимизированы, чтобы выглядеть более плавнее, потому что каждый кадр говорит вам, что вы можете что -то сделать. (Текст: infoq)