Введение статьи Wulin.com (www.vevb.com): Насколько глубока вода на передней странице?
Любой, кто работает в Интернете, в основном пишет несколько строк HTML. Люди, которые использовали слово, также могут делать регулярные страницы с DreamWeaver, поэтому большинство людей, естественно, будут думать, что разработка страниц не имеет большого технического контента и очень проста. Мало того, что это общее понимание, но и есть много сомнений для практиков: нет проблем в реализации линейной страницы; совместимость, небольшие случаи; Интеграция изображений, и она использовалась все время ... Какие еще проблемы можно найти? Узкие места, потолки, преобразования и пути широко обсуждаются среди практикующих. Действительно нет проблем? Технологический центр по электронной почте Netease Front-End был создан в течение нескольких лет, и, похоже, есть бесконечные темы, которые для обсуждения, и часто появляются новые идеи, чтобы подбодрить всех. Итак, каковы требования к разработке страниц и что еще делать, и насколько глубоко вода здесь, давайте вычислим ее.Восприятие передней части страницы, по -видимому, изменяется в разное время. В первые дни Интернета небольшие автомобили были все еще дороже, чем дома, а кунжутные пирожные и вермицелли использовались только для еды, а хризантемы использовались только для приготовления чая. В то время стиль дизайна страницы был относительно одиноким, а соответствующие требования страницы были относительно простыми. Браузер в то время был в основном миром IE6. JavaScript был просто синонимом спецэффектов веб -страницы. Сама страница HTML не привлекла особого внимания. Казалось, что до тех пор, пока вы можете использовать Div или даже таблицу, чтобы добавить CSS в вспомогательное позиционирование изображения, было бы нормально зарезервировать содержание страницы, и эта концепция существовала долгое время. Благодаря обогащению содержания страницы, разработке стиля дизайна, увеличении сложности взаимодействия, применения AJAX и обновления браузеров заставили всех снова обратить внимание на саму саму страницу. Тогда то, что горячо обсуждается, - это совместимость браузера. При столкновении с проблемами, самая страстная вещь - искать взломы в Интернете, а затем ругать IE6 и 7 ... после того, как я сделал все это, кажется, что я снова столкнулся с узким местом и начал найти выход. Давайте начнем с этой стадии.
Реализация визуализации является самой основной работой
Визуальный черновик выражается через код страницы, который включает в себя два основных требования: 1. Он может действительно отражать визуальный черновик; 2. Это может быть совместимо через браузер. Для достижения этих двух требований мы должны иметь подробное отношение и определенную степень навыков страниц. Если мы сможем завершить эти два содержимого, мы можем ввести ряды практикующих в передней части страницы, но это означает, что мы можем быть компетентными для разработки страниц? Нет, это только начинается!
Общение с дизайнерами и участие в проекте
Общение важна. Позвольте мне сначала задать несколько вопросов: обсуждали ли мы с дизайнерами, что некоторые эффекты оказывают большее влияние на эффективность рендеринга браузеров низкого уровня? Вы когда -нибудь обсуждали некоторые эффекты, которые могут быть реализованы в CSS3, чтобы сделать структуру более краткой и ясной? Вы когда -нибудь преследовали баланс в коде и видении? Разработка передней части страницы предназначена для основных пользователей, а написанный код также напрямую применяется к браузере. Мы обязаны нести ответственность за стабильность и эффективность рендеринга страницы. Мы также часто сталкиваемся с дизайном проекта под общим давлением прогресса, и дизайн осуществляется одновременно с фронтальной разработкой страницы. В настоящее время более необходимо получить как можно больше информации о проекте и понять, что нам нужно сделать. Это может помочь нам полностью рассмотреть возможность повторного использования и расширения структуры.
Хорошая структура страницы
Написание структуры страницы похоже на строительство строительного фонда. Качество кода CSS, разработка JS, фоновая разработка и расширение страницы будущего, итерация и корректировка страницы. После того, как вы получите визуальный черновик, не будьте заняты, запускайте, наблюдайте и подумайте больше. Сначала проанализируйте макет, разделите структуру, затем спланируйте структуру и напишите код. Особенно в крупномасштабных проектах, рациональное использование модульной разработки имеет значительные преимущества, независимо от того, выполняется ли она в общем или расширенном техническом обслуживании.
О взломе
Многие студенты ищут наибольшее онлайн для взломов при разработке страниц. Будь мы полностью полагаться на хаки для достижения совместимости страницы, ответ - нет. Люди часто описывают IE6 как говорят, что мы рассказали нам ложь, но мы должны сказать еще одну сто лжи, чтобы выполнить эту ложь. Не отрицая, что IE6 часто делает нас рвотой кровью во рту, но это не означает, что мы можем чувствовать себя непринужденно, используя больше лжи, чтобы восполнить это. В большинстве случаев вы можете скорректировать структуру HTML, изменив свои идеи или использовать некоторые CSS, которые необъяснимым, но относительно безопасны для убийства хаков. Никто не может предсказать, когда использование взлома заставит нас нанести большой удар. Например, запуск макета или позиции: относительный может помочь решить многие проблемы IE6.
Красивый код
В настоящее время многие веб -проекты имеют сложные функции, и их шкала кода станет огромной. Как лучше совместное развитие и обслуживание - это проблема, с которой мы сталкиваемся. Нам нужно рассмотреть возможность улучшения единого планирования, и мы должны разработать хорошие привычки разработки кода, чтобы быть непринужденными при столкновении с различными ситуациями. Просматривая код страницы, просмотр разумного использования метки, хороших аннотаций, четкой структуры кода и точных CSS не только похожи на оценку произведения искусства, но и снижение затрат на коммуникацию для развития и совместной разработки. По какой причине мы не должны этого делать? Чтобы привести отрицательный пример: злоупотребление DIV сейчас является типичной проблемой. Считайте, чтобы увидеть, сколько тегов вы используете? Различная семантика должна использовать соответствующий код тега, особенно HTML5 предоставляет более богатые семантические теги. Все они ждут обвинения на поле битвы. Давайте освободим их!
Доступная разработка страницы
Доступность и простота использования являются очень субъективными и удобными для пользователя. Страницы, которые выглядят обычные люди, идеально представлены, могут не обязательно выглядеть настолько внимательными среди особых групп. Мы должны чувствовать себя виноватыми, когда слепые люди используют программное обеспечение для чтения экрана, чтобы попасть в цикл в определенной области страницы. Можно только сказать, что домашние сайты в настоящее время уделяют этому гораздо меньше внимания, что требует от нас совместной работы, чтобы больше людей почувствовали наш энтузиазм. >
Обеспечить эффективность
Как относительно пограничная часть разработки проекта, разработка страницы может быть завершена как можно раньше, чтобы получить время для проекта, что требует от нас максимально возможной повышения эффективности. Если вы хотите сделать это хорошо, вы должны сначала заточить свои инструменты. В дополнение к формированию практического опыта и кодовых привычек, которые могут помочь нам повысить эффективность, если вы хотите улучшить свою способность контролировать прогресс своего собственного развития, существует множество вспомогательных инструментов, которые могут помочь нам разработать страницы. Например, использование меньшего или SASS может помочь нам расширить и организовать CSS, значительно повышая эффективность написания CSS и повышение обслуживания. Например, вы можете использовать автоматическое завершение Zen Coding и пользовательские кодовые блоки, чтобы позволить вам указывать свой меч, как будто вы летите. Я даже видел ключевые слова Code Block, которые улучшают скорость разработки с помощью пользовательских методов ввода. Если вы изучите больше, вы обязательно найдете наиболее подходящий инструмент для себя.
Оптимизация для серверов
Разработка страницы также требует понимания оптимизации сервера и минимизации бремени на сервере. Например, CSS Sprite является типичным примером уменьшения количества запросов сервера. В линейной разработке страницы электронной почты Netease мы постоянно выполняем различные оптимизации, такие как постоянно искать баланс между размером файла и номером запроса сервера; Чтобы как можно больше улучшить использование кэша, были приняты обновления патчей; Имена классов были запутаны и сжаты, чтобы избежать чрезмерного долгого именования; Base64 использовался для уменьшения количества запросов и других мер. Это результаты комплексных компромиссов, и общая оптимизация необходимо учитывать во всех аспектах. Потому что, когда количество посещений страницы достигает определенного порядка, даже наименьшая оптимизация достигнет значительных результатов, и даже самая маленькая проблема может стать огромной катастрофой.
Охватите HTML5
Это эпоха, полная возможностей. Появление эпохи HTML5 создало более широкие возможности с ростом мобильного интернета, и есть так много вещей, которые стоит изучать и открыть. HTML5 предоставляет богатый интерфейс JS API, который нам нужно изучать; Открытие CSS3 привлекло достаточно внимания, которое нам нужно изучать; Как разработать более адаптируемые страницы на мобильных устройствах требует, чтобы мы изучали ...
Оставайтесь голодными, оставайтесь безрассудными
Чем больше я подхватил воду, я обнаружил, что дно все еще было глубоким, а дно не было дном. Чем больше я изучал вышеупомянутый контент, тем больше я обнаружил, что больше гор и рек нужно подняться. Оставайтесь голодными, используйте свои глаза, чтобы открыть и открыть для себя, и постоянно обогащайте свои навыки, чтобы найти позицию и прорваться через узкие места. Как говорится, только построив дом высокого уровня, вы можете достичь естественных результатов. Эта статья была сформирована, потому что я уже обсуждал проблему узкого места с моими коллегами. Я хотел найти позиционирование для себя и студентов в передней части страницы, чтобы разобраться в моих идеях. Возьмите предложение из выступления генерального директора Apple в Стэнфорде, оставайтесь голодными, оставайтесь глупыми и поделитесь им со всеми.