Новый мобильный сайт Twitter5 для мобильных телефонов на iPhone iPhone быстро взлетает в мобильном браузере. Какие методы они используют для создания почти собственного опыта для своего сайта?Как пользовательский интерфейс Twitter так быстро реагирует на его мобильный сайт на iPhone HTML5?
Это невероятно быстро, и есть много методов, используемых для этого. Давайте рассмотрим некоторые из них:
Минимизация HTTP запросов
Так, начиная с простого и просмотра источника, вы будете огромный беспорядок ... все. Они делают некоторую привязанность к серверу, чтобы включить все CSS и Javascript на HTML-страницу. Преимущество этого в одном запросе дает вам весь исходный код макета. Вот почему страница черная, когда она впервые загружена. Минимизация HTTP запросов является одним из лучших способов улучшить производительность сайта, и существует множество методов, связанных с ним (сжатие CSS, сжатие Javascript, создание spritemap ..)
Что приводит нас к:
Создайте spritemap.
Взгляните на sprite.png, включенный в сетевой трафик. У него есть все значки. Список друг от друга делает очень хорошую работу, объясняя, как это работает:
http://www.alistapart.com/articles/sprites
Простое объяснение у вас есть большой графики, а также использовать CSS, чтобы создать окно, глядя на только один определенный фрагмент этого. Повторное использование одного графического изображения служит для минимизации запросов HTTP.
Использование CSS3
Особый интерес, и вы можете исследовать этот вопрос с twitter bootstrap, являются кнопки. Кнопки не являются графикой; они являются градиентами CSS3 (с графическим значком, расположенным сверху). Любое устройство, обслуживаемое этой страницей, должно поддерживать градиенты CSS3, поэтому это безопасный и легкий способ создания приятного интерфейса.
Ленивый Load
Фоновое изображение занимает второе появляться, потому что он просил через Javascript после факта. Это окончательное причудливость - все, что угодно, как большие изображения, запрашиваются только после того, как страница готова к использованию.
Надеюсь, что это поможет, задайте вопросы, если у вас есть!
Спасибо, Майк! Ваш комментарий к spoofing агента пользователя был очень полезен, я пробовал это в Chrome, и он отображал именно то, что я искал, поэтому я мог начать исследовать их секретный соус на рабочем столе :) – acconrad
Нет проблем, было весело врываться. Я мог бы украсть некоторые из их трюков на самом деле ... –
Хорошая попытка, разработчик Twitter! –
@ Майк Робинсон Ха, я желаю. Если вы просматриваете мой профиль, вы можете видеть, что я не работаю для них, но я бы хотел подражать родному, чувствуя, что он достиг в мобильном браузере. – acconrad
Я бы написал на нем целую запись, но простой способ - исследовать себя. Вы можете сделать это, включив инструменты разработчика в Safari, переключив свой пользовательский агент на iPhone, затем используя консоль для проверки сетевого трафика, ресурсов и т. Д. Ищите такие вещи, как ленивая загрузка, листы спрайтов, использование расширенного CSS и хорошее сжатие. –