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

Я front-end разработчик.Сейчас отвечаю за сервисы информационных потоков в компании, предоставляю услуги пяти крупным производителям мобильных телефонов и крупным приложениям.Ежедневные запросы исчисляются миллиардами.Кроме того, мы сделали SSP и DSP, который похож на Baidu, Advertising Alliance, Tencent Guangdiantong и т. д. Те, кто был в контакте, должны знать, поэтому оптимизация интерфейса всегда была для меня головной болью.Мы должны не только сосредоточиться на пользовательском опыте, но и обратить внимание на преимущества.Иногда мы должны пожертвовать некоторым пользовательским опытом, но как вдумчивый front-end, я все же стараюсь его избегать. Надеюсь, что смогу учиться и общаться со своими одноклассниками, которые занимаются тем же делом. Без лишних слов, я поделюсь своим путем оптимизации производительности. Если есть какие-то неправильные знания, пожалуйста отметить критику.

• Сначала прикрепите основные военные уставы Yahoo — 35 золотых законов, обобщенных командой Yahoo по разработке интерфейсов.
  

.css{/* 普通显示屏(设备像素比例小于等于1.3)使用1倍的图 */ 
    background-image: url(img_1x.png);
}
@media only screen and (-webkit-min-device-pixel-ratio:1.5){
.css{/* 高清显示屏(设备像素比例大于等于1.5)使用2倍图  */
    background-image: url(img_2x.png);
  }
}

Вы также можете использовать less или sass

bg-image($url)
  background-image: url($url + "@2x.png")
  @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
    background-image: url($url + "@3x.png")

Если экономия времени и универсальность высоки, это похоже на то, что мы используем nginx для обработки изображения на стороне сервера, и мы хотим сами вырезать изображение того размера.Мы предоставляем метод резки пропорционального масштабирования и нестандартного размера, и сращивание символов после адреса.Просто строка.

http://image.uczzd.cn/12046251381056834816.jpg?id=0&from=export&width=800&height=600

• Используйте меньше, быстрее и сильнее новое поколение формата изображения WebP
  

WebP – это новый формат изображений, запущенный Google в 2010 году. Он также использовался в продуктах Google раньше. Официальная версия Android Studio 2.3, выпущенная Google, включает обновления для поддержки WebP – 20 %. Это оказывает большое влияние на оптимизацию взаимодействия с пользователем и снижение потребления полосы пропускания CDN, но не все браузеры поддерживают webp, поэтому для использования webp необходимо выполнить небольшую работу по совместимости. 

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

Первое, чего я хочу добиться, это судить, то есть определить, поддерживает ли исходный браузер одного посещения формат webp, а затем выполнить его.Если браузер его поддерживает, заменить исходное изображение форматом webp и верни это. Если он не поддерживается, будет отображаться изображение исходного формата. http://caniuse.mojijs.com/Home/Html/item/key/webp/index.html

Раз уж я упомянул картинку, то не могу не написать немного не по теме отслеживание Pixel (пиксельное отслеживание) Почти все сайты будут собирать данные и сообщать статистику. В частности, когда мы делаем рекламу SSP и DSP, нам нужно получить, например,

• Браузер, операционная система, разрешение и т. д., используемые пользователем.
  
• Записи о поведении пользователя при просмотре, например о кликах и покупках на веб-сайте пользователя.
  
• Время пребывания пользователя в APP, WEB, активно или нет и т. д.
  

Данные всегда говорят правду, а данные доказывают, что все возможно. Например, зарубежные друзья, занимающиеся электронной коммерцией, которые размещают рекламу в Facebook, будут использовать Facebook Pixel (отслеживание пикселей) для получения точных данных о каждой ссылке. Отслеживая данные таким образом, мы можем увеличить продажи после рекламы, какая из них имеет лучший эффект, а какая — плохой, а затем внести разумные корректировки и оптимизации в рекламу путем многократного сравнения данных.

Внутренние Sogou, Baidu, 360 и Sina используют этотtracking PixelНа самом деле метод заключается в использовании изображения размером 1px, объединении необходимых информационных параметров в суффиксе адреса изображения, и браузер будет отправлять текущие системные данные, такие как информация о браузере, информация об операционной системе, в качестве заголовка HTTP-запроса при запросе любого ресурса. ., они умеют считать.

    Почему бы не использовать статистику запросов js?

Не все страницы поддерживают JS! Механизм реализации NoJSStats — это один из способов получения данных о потоке кликов при анализе веб-сайта — веб-маяки, то есть в страницу встраивается прозрачное изображение размером 1 пиксель, при просмотре страницы изображение будет запрашиваться для загрузки. , поэтому после того, как журнал запроса изображения будет записан в журнале сервера терминала, так что запись журнала может быть получена.

Например Байду:

这是百度1px图片地址： http://wn.pos.baidu.com/adx.php?

var url = ["//eclick.baidu.com/se.jpg?", "type=fatalError", "data=1220", "mes=" + encodeURIComponent(e)].join("&"),    img = new Image;    img.src = url
百度在地址栏后拼接了很多参数，后端按照图片后缀名生成对应的数据报表。

Эта статья относится к методу webP, предоставленному @Meituanyun, спасибо.