Руководство по оптимизации производительности внешнего интерфейса

HTML CSS
Руководство по оптимизации производительности внешнего интерфейса

автор:JowayYoung
склад:Github,CodePen
Блог:Официальный сайт,Наггетс,думаю нет,Знай почти
Нет публики:Интерфейс IQ
Специальное заявление: Нелегко быть оригинальным, и перепечатка или плагиат не допускаются без разрешения.Если вам нужно перепечатать, вы можете связаться с автором для получения разрешения.

предисловие

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

Когда дело доходит до оптимизации производительности страницы, каждый может подумать об этом.雅虎军规,2-5-8原则,3秒钟首屏指标Эти правила не являются обязательными в процессе разработки, но иногда для достижения идеальной производительности и удобства работы исходный код необходимо модифицировать и оптимизировать.

Ниже, исходя из своего более чем трехлетнего опыта разработки и большого количества проектных практик, я разберу некоторые часто используемые точки оптимизации производительности, а заодно перечислю их.雅虎军规,2-5-8原则,3秒钟首屏指标Основные пункты этих трех общих правил.

Для облегчения памяти и чтения в статье используются некоторые сокращенные существительные, поясняемые следующим образом.

  • Терминал D: страница рабочего столаDesktop End Page
  • терминал М: Мобильная страницаMobile End Page

Обзорное руководство

  1. Метод оптимизации на стороне D также применим к стороне M.
  2. На стороне M рендеринг завершается за 3 секунды.首屏指标
  3. На основании второго пункта первый экран загружается в течение 3 секунд или используетсяLoadingзаполнитель
  4. На основе среднего показателя сети 3G Unicom338kb/s(2.71mb/s), ресурсы верхней части экрана не должны превышать1014kb
  5. Из-за причин конфигурации на стороне M, в дополнение к загрузке, скорость рендеринга также находится в центре внимания оптимизации.
  6. Основываясь на пятом пункте, необходимо разумно обрабатывать код, чтобы уменьшить потери при рендеринге.
  7. Основываясь на втором и пятом пунктах, весь код, влияющий на загрузку и рендеринг выше сгиба, должен быть размещен после логики обработки.
  8. После завершения нагрузки пользователь должен обратить внимание на производительность при использовании.

Оптимизация нагрузки

  • уменьшить HTTP-запросы: минимизировать количество запросов к странице (Количество одновременных запросов на первую загрузку не может превышать 4), браузер мобильного устройства отвечает на запрос на 4 запроса одновременно (AndroidПоддержка 4,iOS5+поддержка 6)
    • Слияние CSS и JS
    • Использование спрайтов CSS
  • ресурсы кэша: Использование кеша может уменьшить количество запросов к серверу и сэкономить время загрузки.Все статические ресурсы нужно кешировать на стороне сервера, и стараться использовать длинный кеш(Обновить кеш с отметкой времени)
    • Кэшировать все кешируемые ресурсы
    • использовать длинный кеш
    • Использование стилей контура и скриптов
  • сжатый код: уменьшить размер ресурса, чтобы ускорить отображение страницы, сжать код и установить его на стороне сервера.GZip
    • Сжатый код (дополнительные отступы, пробелы и новые строки)
    • Gzip включен
  • неблокирующий: встроенные в заголовок стили и скрипты блокируют отрисовку страницы. Стили размещаются в заголовке и используютсяlinkвводится метод, скрипт помещается в конец и загружается асинхронно
  • Загрузка выше сгиба: быстрое отображение первого экрана может значительно улучшить восприятие пользователем скорости страницы и должно быть максимально оптимизировано для быстрого отображения первого экрана.
  • нагрузка по требованию: Ресурсы, не влияющие на первый экран, и ресурсы, не используемые текущим экраном, загружаются только тогда, когда они нужны пользователю, что может значительно повысить скорость отображения и снизить общий трафик (Погрузка по требованию приведет к тому, что многие перерезывают, влияющие на производительность рендеринга)
    • ленивая загрузка
    • загрузка прокрутки
    • Загрузка медиазапроса
  • Предварительная загрузка: Доступно для больших страниц ресурсов.Loading, страница отображается после загрузки ресурса, но время загрузки слишком велико, что приведет к потере пользователя
    • Воспринимаемая загрузка: при входе на страницуLoading
    • Незаметная загрузка: загружать следующую страницу раньше
  • сжатое изображение: выберите наиболее подходящий формат и размер при использовании изображений, затем используйте инструменты для сжатия и используйтеsrcsetотображать по запросу (Чрезмерное сжатие размера изображения влияет на отображение изображения)
    • использоватьTinyJpgа такжеTinyPngсжатое изображение
    • Используйте CSS3, SVG, IconFont вместо изображений
    • Загружайте изображения по запросу, используя img srcset
    • Выберите подходящее изображение:webpлучше чемjpg,png8лучше чемgif
    • Выберите правильный размер: не больше, чем первая загрузка1014kb, не шире640px
    • Когда PS обрезает изображение, качество сохранения изображения стороны D равно 80, а качество сохранения изображения стороны M равно 60.
  • Уменьшить количество файлов cookie:CookieПовлияет на скорость загрузки, не используется статическое доменное имя ресурсаCookie
  • Избегайте перенаправлений: перенаправление повлияет на скорость загрузки, правильно установите его на сервере, чтобы избежать перенаправления
  • Асинхронно загружать сторонние ресурсы: неконтролируемые сторонние ресурсы будут влиять на загрузку и отображение страницы, а сторонние ресурсы должны загружаться асинхронно.
加载过程是最为耗时的过程，可能会占到总耗时的`80%时间(**优化重点**)

выполнить оптимизацию

  • CSS пишется в голове, JS пишется в хвосте и асинхронно
  • Избегайте пустого src для img, iframe и т. д.:нулевойsrcПерезагрузит текущую страницу, что повлияет на скорость и эффективность
  • Старайтесь избегать изменения размера изображений: многократный сброс размера изображения приведет к многократной перерисовке изображения, что повлияет на производительность.
  • Изображения стараются избегать использования DataURL:DataURLИзображение не использует алгоритм сжатия изображения, файл станет больше, и его нужно декодировать, а затем визуализировать, что медленно загружается и занимает много времени.
执行处理不当会阻塞页面加载和渲染

Оптимизация рендеринга

  • установить область просмотра: HTMLviewportУскоряет рендеринг страницы

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1">

  • уменьшить DOM-узлы: Слишком много узлов DOM влияет на отрисовку страницы, попробуйте уменьшить количество узлов DOM.

  • Оптимизировать анимацию

    • По возможности используйте анимацию CSS3.
    • Разумное использование анимации requestAnimationFrame вместо setTimeout
    • Правильное использование анимации Canvas: используйте в пределах 5 элементовCSS动画, используйте более 5 элементовCanvas动画,iOS8+быть пригодным для использованияWebGL动画

  • Оптимизация для высокочастотных событий:scroll,touchmoveи т. д. события могут вызвать несколько рендеров

    • регулирование функции
    • Функция защиты от тряски
    • Используйте requestAnimationFrame для прослушивания изменений кадров: выполняйте рендеринг в нужное время.
    • Увеличьте временной интервал в ответ на изменения: уменьшите количество перерисовок

  • Ускорение графического процессора: Активируется определенными тегами HTML5 и свойствами CSS3.GPU渲染, пожалуйста, используйте (Чрезмерное использование может привести к повышенному энергопотреблению мобильных телефонов)

    • HTML-теги:video,canvas,webgl
    • Свойства CSS:opacity,transform,transition

оптимизация стиля

  • Избегайте написания стилей в HTML
  • Избегайте выражений CSS: выполнение выражений CSS должно выходить за рамки рендеринга дерева CSS.
  • Удалить пустые правила CSS: Пустые правила CSS увеличивают размер файла CSS и влияют на выполнение дерева CSS.
  • Используйте ДИСПЛЕЙ правильно:displayповлияет на рендеринг страницы
    • display:inlineне следует использовать повторно послеfloat,margin,padding,widthа такжеheight
    • display:inline-blockне следует использовать повторно послеfloat
    • display:blockне следует использовать повторно послеvertical-align
    • display:table-*не следует использовать повторно послеfloatа такжеmargin
  • не злоупотребляйте поплавком:floatОбъем вычислений во время рендеринга относительно велик, поэтому постарайтесь сократить использование
  • Не злоупотребляйте веб-шрифтами: веб-шрифты необходимо загружать, анализировать и перерисовывать на текущей странице, сводя к минимуму использование
  • Не объявляйте слишком много размеров шрифта:Слишкомfont-sizeВлияет на эффективность дерева CSS
  • Значение 0 не требует никаких единиц: для совместимости и производительности браузера значение равно0Не брать юнитов
  • Стандартизируйте различные префиксы браузера
    • Свойства без префикса должны быть последними
    • Свойства анимации CSS используют только -webkit- и без префикса
    • Другие префиксы -webkit-, -moz-, -ms- и без префикса:Operaиспользовать вместо этогоblinkядро,-o-устранен
  • Не делайте селекторы похожими на регулярные выражения: расширенные селекторы требуют много времени для выполнения и их нелегко читать, избегайте использования

Оптимизация скрипта

  • Уменьшите количество перерисовок и перекомпоновок
    • Избегайте ненужных манипуляций с DOM
    • Избегайте использования document.write
    • Уменьшить отрисовку изображения
    • Попробуйте изменить класс вместо стиля, используйте классный список вместо класса
  • Кэширование выборок и вычислений DOM: вычисляется и кэшируется для каждого выбора DOM.
  • кэшировать значение .length:каждый раз.lengthРасчет сохраняет значение в переменной
  • Используйте делегаты событий, когда это возможно: избегайте событий пакетной привязки
  • попробуйте использовать селекторы id:idСелекторы быстрее всего выбирают элементы
  • сенсорная оптимизация событий:использоватьtap(touchstartа такжеtouchend)заменятьclick(УведомлениеtouchСлишком быстрый отклик, легко вызвать неправильную работу)

Общие правила

Yahoo военный

Команда Yahoo на основе многолетней практики пришла к следующему выводу.7类35条Правила оптимизации внешнего интерфейса, для получения подробной информации о правилах, пожалуйста, обратитесь к этому брату"35 Правила перевода в интернет-оптимизации Yahoo Front-End".

  • содержание
    • Make Fewer HTTP Requests:уменьшатьHTTPколичество запросов
    • Reduce DNS Lookups:уменьшатьDNSЗапрос
    • Avoid Redirects: избегать перенаправления
    • Make Ajax Cacheable: кешAJAX请求
    • Postload Components: ленивая загрузка ресурсов
    • Preload Components: Предварительно загрузить ресурсы
    • Reduce The Number Of DOM Elements:уменьшатьDOMколичество элементов
    • Split Components Across Domains: Разделите ресурсы между доменами.
    • Minimize The Number Of Iframes:уменьшатьiframeколичество
    • No 404s:ликвидировать404ошибка
  • стиль
    • Put Stylesheets At The Top: высший стиль
    • Avoid CSS Expressions:избегатьCSSвыражение
    • Choose <link> Over @import:выберите<link>заменять@import
    • Avoid Filters: избегать фильтра
  • сценарий
    • Put Scripts At The Bottom: Нижний сценарий
    • Make JavaScript And CSS External: использовать внешнийJSа такжеCSS
    • Minify JavaScript And CSS: сжатиеJSа такжеCSS
    • Remove Duplicate Scripts: удалить дубликаты скриптов
    • Minimize DOM Access:уменьшатьDOMдействовать
    • Develop Smart Event Handlers: Разработка эффективной обработки событий
  • изображение
    • Optimize Images: Оптимизация изображений
    • Optimize CSS Sprites:оптимизацияCSS精灵图
    • Don't Scale Images In HTML: Не являетсяHTMLизображение со средним увеличением
    • Make Favicon.ico Small And Cacheable: использовать кеширование небольшого размераfavicon
  • тайник
    • Reduce Cookie Size:уменьшатьCookieразмер
    • Use Cookie-Free Domains For Components: использовать НетCookieРесурсы домена
  • Движущийся конец
    • Keep Components Under 25kb: сохранить ресурс меньше, чем25kb
    • Pack Components Into A Multipart Document: упаковать ресурсы в составные документы
  • сервер
    • Use A Content Delivery Network:использоватьCDN
    • Add An Expires Or A Cache-Control Header: Заголовок ответа добавленExpiresилиCache-Control
    • Gzip Components:Gzipресурс
    • Configure ETags: настроитьETags
    • Flush The Buffer Early: буферизация вывода как можно раньше
    • Use Get For AJAX Requests:AJAX请求использовать, когдаget
    • Avoid Empty Image Src: Избегайте пустых ссылок на изображения.

Принцип 2-5-8

Во фронтенд-разработке это правило используется как руководство по оптимизации производительности страниц браузера.

  • пользователь в2秒内Получите ответ, вы почувствуете, что скорость отклика страницы очень высокая.
  • пользователь в2~5秒间Когда вы получите ответ, вы почувствуете, что скорость отклика страницы в порядке. Средняя.
  • пользователь в5~8秒间Если вы получите ответ, вы почувствуете, что скорость отклика страницы очень медленная, но вы все еще можете принять медленные
  • пользователь в8秒后Все равно не могу получить ответ, будет ощущение, что скорость отклика страницы фигня(Есть четыре возможности:)
    • Это потому, что скорость сети плохая, сделайте второй запрос =>刷新页面
    • Что за мусорная страница, почему ты ее не открыл =>离开页面，有可能转投竞争对手的网站
    • Фигня программист, какую страницу ты делаешь =>咒骂开发此页面的程序猿
    • отключен =>网线断了？Wi-Fi断了？信号不好？话费用完了？ 
知道这个规则的数字顺序怎样来的吗，看下键盘右方的数字键盘由下往上排序：2-5-8

3 секунды над индикатором сгиба

Это правило распространяется на M-сторону, как следует из названия, она завершает рендеринг и отображает контент в течение 3 секунд после открытия страницы.

Эпилог

❤️Подписаться + Нравится + Избранное + Комментарий + Переслать ❤️, оригинальность это не просто, поощряйте автора к созданию более качественных статей

Обратите внимание на публичный аккаунтIQ前端, внешний общедоступный аккаунт, ориентированный на навыки разработки CSS / JS, вас ждут другие галантереи переднего плана

  • Ответить после подписки资料Получите бесплатные учебные материалы
  • Ответить после подписки进群Втяните вас в группу технического обмена
  • Добро пожаловать, чтобы следоватьIQ前端,БолееНавыки разработки на CSS/JSНажимайте только на публичный аккаунт

Категории