предисловие

ты видел4 утраиз Лос-Анджелеса?

Ну, ты видел2:00дамба?

1. Вторая встреча

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

Когда машина проехала по маршруту моста Вайбайду, я отчетливо увидел девушку, стоящую на мосту. Хоть это всего 4 или 5 метров, я точно не буду си, но моя сестра плачет!

История начинается.Из-за той девочки, которую я знаю, маленькой девочки, которую я завербовал недавно, ей 24 года. Может, из-за того, что выпил, я остановил такси. Ну, я чувствую, что я действительно алкоголик.

Она закричала, как испуганный кролик, и чуть не разбудила меня.

"Ну. Да, реакции нормальные. В чем дело, не подходит для сверхурочной работы?"

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

"Жить не получится?"

"нет."

"высокое давление?"

"Немного."

«Не так ли? Это просто низкий спрос, это стресс?»

"Нет, это не так..."

"Любовь потеряна?"

"Гм."

Атмосфера резко оборвалась.Я вдруг понял, что как будто вмешиваюсь в жизнь других людей. В этом возрасте я уже понимаюНе входите легко в мир других людейправда. Ветер на мосту был холодным, и мой алкоголизм почти рассеялся.

«Страница активности, которую вы написали, немного застряла?»

Я серьезно посмотрел сестре в глаза и ничего не ответил, но в моих глазах было какое-то напряжение и немного...

отвращение.Да, всякий, кто сталкивается с недостатками, будет испытывать отвращение. Сестра Бумага тоже должна знать, я видел код, который она написала,code reviewНе просто говорить.

"Сегодня ты пытаешься вычислить местонахождение красного конверта.marginзаменитьtransformпытаться. "

"Ой.marginзаменитьtransformкакая польза? они не всеcssимущество? "

Я снова посмотрел на сестру. Молодой хорош! Было так грустно несколько минут назад, но теперь я могу нормально общаться. Она, вероятно, не могла сразу увидеть странную вспышку в моих глазах.

"Планирование основного потока браузера и синтетического потокаТы понял?Вообще говоря, основной поток в основном отвечает за выполнениеJavaScript,рассчитатьCSSСтилизация, расположение элементов, а затем переход к композитингу. Композитный поток в первую очередь отвечает за отрисовку, а при использованииwidth,height,margin,paddingподождите, покаtransitionКогда значение высокое, оно оказывает большое давление на основной поток. В этот момент мы можем использоватьtransformвместо того, чтобы установить его напрямуюmarginждать. "

На самом деле, я не мог этого вынести. За задачу по составлению страницы активности отвечает новенькая.Я как ветеран, который любит запугивать новобранцев.

«Но белый экран страницы активности также довольно длинный, и всегда кажется, что для появления белого экрана требуется 1 секунда».

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

«Вы когда-нибудь пытались добавить в свою анимацию эффект затухания?»

"Я думал об этом. Но как бы ни была хороша анимация, нет возможностиИзменить время белого экранакакие! "

Атмосфера снова резко оборвалась.Простите, а какую детскую обувь я набрала? Затем, Джиуджин, я открыл рот и, наконец, ничего не сказал. Я думал в душе, неужели я ослеп от сала и полюбил других? Я внимательно посмотрел на лицо девушки. это не верно! Это явно не интересно!

«Эй! Эй! Не смотри на меня таким отвратительным взглядом.Ведь у меня зарплата маленькая, так что плохого в том, что еды мало? !"

Простой. ну правдауверенная в себе!

2. Третья встреча

Той ночью я до сих пор не мог не придать многим внешним знаниям к ней. Делатьcode reviewКод заметно лучше. На самом деле, если рассказать эту историю людям, люди точно не поверят.

Кто расскажет кому-то о технологиях, когда младшая сестра плачет? На самом деле, у меня не очень высокие требования к родственной бумаге.code reviewЭто только для того, чтобы ее код мог быть легко понят другими, по крайней мере, оптимизация производительности на уровне кода должна быть сделана хорошо.

Ночью 618 года я был безумно занят. Страница активности Sister Paper также выдержала испытание в тот день. Закончив комплименты сестре, я пошел в заведение выпить.

"О, это неплохо. Сейчас 1:00 ночи, так что возвращайся и отдыхай. Давай,Есть надежда на повышение и повышение зарплаты! "

Выпив, я достал свой мобильный телефон и, как обычно, взял такси и, как обычно, проехал мост Вайбайду. что за секс, который я ненавижу…

Почему сестра снова на мосту? Я попросил мастера остановиться и выйти из машины, опустить окно и присмотреться. Что ж, в этот раз я не плакала. Я уверен, что это люди, которые хотят перевести дыхание, верно?

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

Выйдите из машины и поднимитесь на мост. Сестра Чжи держала банку пива в одной руке и вытирала слезы другой.

«Вы здесь. Старый Би попросил меня сопоставить одинwebpack, Но также多入口. Я не доволен тем, как я ему соответствую, я думаюя такой бесполезный. Вау вау..."

Ну 🥚, совок для рта? Напиться банкой пива? когда ты пьянwebpack? Ты лжец!

"тебе известноwebpackизloaderа такжеpluginразница? "

"Я хочу услышать от вас."

— Слушай, я еще раз скажу.

• loaderОриентирован на преобразование файлов, например, на загрузку файлов спецификаций non-commonJs,babel-loaderа такжеbabel-coreМодули используются для преобразования кода ES6 в ES5,url-loaderа такжеfile-loaderЭто упаковка картинок и т.д. "
• pluginсделаноloaderфункция, которая не может быть завершена.pluginтакже для расширенияwebpackфункция, ноpluginдействует наwebpackна себя. а такжеpluginОн не только ограничивается упаковкой и загрузкой ресурсов, но и имеет больше функций. От оптимизации упаковки и сжатия до переопределения переменных среды — он достаточно мощный, чтобы справляться с широким спектром задач.
• webpack предоставляет множество плагинов из коробки:CommonChunkPluginВ основном используется для извлечения сторонних библиотек и общедоступных модулей, чтобы избежать загрузки выше сгиба.bundleфайл или загружается по запросуbundleРазмер файла слишком велик, а время загрузки слишком велико.Это инструмент оптимизации. В многостраничном приложении можно создать общий код для приложения между каждой страницей.bundle.

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

"Все кончено?"

— Эй, что еще ты хочешь знать?

"Каким мониторингом производительности вы занимаетесь? Так удивительно! Как вы познакомились с белым временем страницы?"

«Эй, у меня большой аппетит. Боюсь, тебе придется стоять здесь неделю».

«Да! С этим проблем нет. Значит, сегодня ты пытался оторваться от земли, хорошо? У меня есть сильная способность к пониманию!»

— Ладно, я проиграл.

• Установить показатели эффективности
  • время белого экрана
    • Это относится ко времени от ввода контента (включая обновление, переход и т. д.) до момента появления первого символа на странице. Этот процесс включает DNS-запрос, установление TCP-соединения, отправку первого HTTP-запроса (если используется HTTPS и вмешательство во время проверки TLS), возврат HTML-документа и анализ заголовка HTML-документа. Его стандартное время составляет 300 мс.
  • выше сгиба
    • время белого экрана
    • Время отклика интерфейса данных
      • Его можно получить напрямую из бэкенд-сервиса, и нет необходимости повторять расчет на фронтенде, после получения его можно сообщить на платформу производительности.
    • Ресурсы загрузки изображений и т. д.
      • Рассчитать картинку
  • Индекс визуальной стабильности (CLS, Cumulative Layout Shift)
  • вторая открытая ставка
  • Заикания, время полной загрузки, время загрузки ресурсов и т.д... Важные приоритеты не высокие.

首屏时间秒开率标准

Типы	выше сгиба	вторая открытая ставка	Скорость открытия 1,5 секунды	2-секундная скорость открытия
SSR	1000ms	80%	95%	98%
внутри конца	1200ms	65%	85%	90%
за пределами	1500ms	40%	60%	80%

"Вау! Второй коэффициент открытия всего 80%?"

«Я… в отрасли есть лишь горстка людей, которые могут достичь этого стандарта».

"О. Наверное, я понял, что ты сказал.Могу视觉稳定性指标что это такое?"

«Ключевые показатели интерактивности и визуальной стабильности все еще изучаются в отрасли. Единого стандарта измерения нет, и их необходимо собирать вручную».

«Это установило эти показатели производительности, а что дальше?»

«Тогда сообщите об этом на платформу мониторинга производительности. Глупый!»

"Тогда как вы сообщите об этом?"

«Эй, что сказать. Давайте сначала разработаем SDK для отчетов о производительности».

шаг	action1	action2
Дизайн SDK производительности	Дизайн доступа к SDK	1. Инкапсулируйте сценарии, собранные до первого экрана, белого экрана и стоп-кадра, и позвольте сценариям инициализироваться и выполняться автоматически.
		2. Предоставьте справочные документы для повышения удобства использования SDK. Ведь любая библиотека теперь имеет полезную документацию
		3. Вы также можете настроить помощника по анализу производительности, чтобы быстро обнаруживать некоторые основные проблемы.
	дизайн запуска SDK	1. Политика совместимости. использоватьjavascriptНаписать метод сбора показателей эффективности, чтобы он мог пересекать стек технологий.
		2. Собственный механизм отказоустойчивости,try catchПерехватите исключение и сообщите о нем.
		Фактическая пропорция моделей распространения браузера и пользователей для определенияtop10%Модель пользователя и тип браузера. Затем после завершения каждой разработки и кодаcode reviewПосле этого используйте эти модели и типы браузеров, чтобы проверить себя
Разработка стратегии отчетности	Фильтрация данных журнала	1. После сбора показателей производительности лучше всего сначала отфильтровать аномальные данные.
		2. Ошибки аномальных данных, включая допустимые аномальные данные, максимальное пороговое значение и минимальное пороговое значение.
	Стратегия выборки данных	1. ПроизводительностьSDKПолные или выборочные данные зависят от ежедневной активности приложения или веб-сайта. Ведь повседневная жизнь10Wа также1000WСуществует большая разница.
		2. Соответствующим образом уменьшите выборку, когда повседневная жизнь велика. Например, на Tmall Double 11 количество японских товаров огромно, поэтому необходимо уменьшить выборку.
	Выбор механизма отчетности	1. Выберите подходящий механизм отчетности в зависимости от возможностей сети. В сильном сетевом окружении (如 4G/WIFI) сообщать напрямую. в слабой сети(2G/3G), сохраните журнал локально и задержите отправку отчетов в сильную сеть.
		2. Выберите время отчета в соответствии с временем занятости приложения. Например, если приложение находится в состоянии простоя, об этом будет сообщено напрямую, а если оно занято, оно будет ждать, пока оно не станет бездействующим (比如凌晨 2-3 点，用户活跃度相对不高), а затем сообщите об этом.

— Это так сложно?

"Ха-ха.Существует также производительная платформа для создания. В конце концов, у нас есть отчетные данные, поэтому мы должны проанализировать данные, верно?"

«Босс, хватит болтать. Я должен это переварить».

«Тогда быстро сойдите с моста и возьмите такси на перекрестке впереди».

Фу. Это мой уникальный способ утешать людей?Не полагайтесь на уговоры, не полагайтесь на пистолеты для рта, полагайтесь на технологии😂. Сестра Чжи посмотрела на свой телефон, и время было зафиксировано на 3:43 утра.

«Помоги мне достать телефон, у меня шнурки развязываются».

Я взял бумажный телефон моей сестры, не знаю, забыл ли я заблокировать экран, ее айфон отправил сообщение в WeChat.

Папа: В какой больнице в Шанхае лечат серьезные проблемы с желудком? Это будет стоить еще десятки тысяч...

Я сделал вид, что не видел этого, на самом деле я просто мяукал 0,2 секунды. Сестра Чжи завязала шнурки, встала и взяла телефон, сказав, что готова бросить. Но я ясно видел, как ее брови снова дернулись.Вероятно, самый удобный способ для взрослого ладить, это когда я тебя понимаю, но не утруждай себя тем, чтобы не задевать твою самооценку. Но это, наверное, самый жестокий способ поладить со взрослыми.

Безэмоциональный.

Независимо от техники.

Эту статью все же характеризуют как техническую статью, но все же хочу сказать:Деньги – это самый прочный фундамент человека.