Artikel Pengenalan Wulin.com (www.vevb.com): Seberapa dalam air di halaman front-end?
Siapa pun yang bekerja di internet pada dasarnya menulis beberapa baris HTML. Orang -orang yang menggunakan Word juga dapat membuat halaman reguler dengan Dreamweaver, sehingga kebanyakan orang secara alami akan berpikir bahwa pengembangan halaman tidak memiliki banyak konten teknis dan sangat sederhana. Tidak hanya pemahaman umum ini, tetapi ada juga banyak keraguan bagi para praktisi: tidak ada masalah dalam mengimplementasikan halaman front-end; kompatibilitas, kasus kecil; integrasi gambar, dan telah digunakan sepanjang waktu ... masalah apa lagi yang dapat ditemukan? Kemacetan, langit -langit, transformasi, dan cara keluar secara luas dibahas di kalangan praktisi. Apakah benar -benar tidak ada masalah? Pusat Teknologi Front-End NetEase telah didirikan selama beberapa tahun, dan tampaknya ada topik yang tak ada habisnya untuk dibahas, dan sering ada ide-ide baru untuk menghibur semua orang. Jadi apa saja persyaratan untuk pengembangan halaman dan apa lagi yang harus dilakukan, dan seberapa dalam air di sini, mari kita ambilnya.Persepsi ujung depan halaman tampaknya bervariasi pada waktu yang berbeda. Pada hari -hari awal internet, mobil kecil masih lebih mahal daripada rumah, dan kue wijen dan vermicelli hanya digunakan untuk makan, dan krisan hanya digunakan untuk membuat teh. Pada saat itu, gaya desain halaman relatif lajang, dan persyaratan halaman yang sesuai relatif sederhana. Browser pada waktu itu pada dasarnya adalah dunia IE6. Javascript hanya identik dengan efek khusus halaman web. Halaman HTML itu sendiri tidak menarik banyak perhatian. Tampaknya selama Anda dapat menggunakan div atau bahkan tabel untuk menambahkan CSS ke posisi tambahan gambar, tidak apa -apa untuk memesan konten halaman, dan konsep ini ada untuk waktu yang lama. Dengan pengayaan konten halaman, pengembangan gaya desain, peningkatan kompleksitas interaksi, penerapan AJAX dan pembaruan browser telah membuat semua orang memperhatikan halaman yang paling dasar itu sendiri. Lalu yang dibahas dengan panas adalah kompatibilitas browser. Ketika mengalami masalah, hal yang paling bersemangat adalah mencari peretasan di internet, dan kemudian memarahi IE6 dan 7 ... Setelah melakukan semua ini, tampaknya saya telah menemukan hambatan lagi dan mulai menemukan jalan keluar. Mari kita mulai dengan tahap ini.
Menerapkan rendering adalah pekerjaan paling mendasar
Draf visual diekspresikan melalui kode halaman, yang mencakup dua tuntutan dasar: 1. Ini benar -benar dapat mencerminkan rancangan visual; 2. Ini bisa kompatibel melalui browser. Untuk mencapai dua tuntutan ini, kita perlu memiliki sikap detail yang mengejar dan tingkat keterampilan halaman tertentu. Jika kita dapat menyelesaikan dua konten ini, kita dapat memasuki jajaran praktisi di ujung depan halaman, tetapi ini berarti bahwa kita dapat menjadi kompeten untuk pengembangan halaman? Tidak, ini baru saja dimulai!
Komunikasi dengan desainer dan partisipasi proyek
Komunikasi itu penting. Izinkan saya mengajukan beberapa pertanyaan terlebih dahulu: Sudahkah kita berdiskusi dengan desainer bahwa beberapa efek memiliki dampak yang lebih besar pada efisiensi rendering browser low-end? Pernahkah Anda membahas beberapa efek yang dapat diimplementasikan di CSS3 untuk membuat struktur lebih ringkas dan jelas? Pernahkah Anda mengejar keseimbangan dalam kode dan visi? Pengembangan front-end halaman adalah untuk pengguna dasar, dan kode yang ditulis juga diterapkan langsung ke browser. Kami berkewajiban untuk bertanggung jawab atas stabilitas dan efisiensi halaman. Kami juga sering menemukan desain proyek di bawah tekanan kemajuan keseluruhan dan desain dilakukan secara bersamaan dengan pengembangan halaman depan halaman. Pada saat ini, lebih penting untuk mendapatkan informasi proyek sebanyak mungkin dan memahami apa yang perlu kita lakukan. Ini dapat membantu kami sepenuhnya mempertimbangkan ekspansi penggunaan kembali dan kerangka kerja.
Struktur halaman yang bagus
Penulisan struktur halaman seperti membangun fondasi bangunan. Kualitas kode CSS, pengembangan JS, pengembangan latar belakang, dan ekspansi halaman masa depan, iterasi dan penyesuaian halaman. Setelah Anda mendapatkan draf visual, jangan sibuk memulai, mengamati dan berpikir lebih banyak. Pertama -tama menganalisis tata letak, membagi kerangka kerja, kemudian merencanakan struktur, dan menulis kode. Terutama dalam proyek skala besar, penggunaan rasional pengembangan modular memiliki manfaat yang cukup besar apakah itu dilakukan dalam pemeliharaan keseluruhan atau diperluas.
Tentang hack
Banyak siswa mencari yang paling online untuk peretasan saat mengembangkan halaman. Apakah kita sepenuhnya mengandalkan peretasan untuk mencapai kompatibilitas halaman, jawabannya adalah tidak. Orang -orang sering menggambarkan IE6 sebagai mengatakan bahwa kami telah memberi tahu kami suatu kebohongan, tetapi kami harus memberi tahu seratus lagi kebohongan lagi untuk memenuhi kebohongan ini. Tidak menyangkal bahwa IE6 sering membuat kita muntah darah di mulut kita, tetapi itu tidak berarti bahwa kita dapat merasa nyaman dengan menggunakan lebih banyak kebohongan untuk menebusnya. Dalam kebanyakan kasus, Anda dapat menyesuaikan struktur HTML dengan mengubah ide -ide Anda, atau menggunakan beberapa CS yang tidak dapat dijelaskan tetapi relatif aman untuk membunuh peretasan. Tidak ada yang bisa memprediksi saat menggunakan Hack akan menyebabkan kita jatuh ke pukulan besar. Misalnya, memicu tata letak atau posisi: kerabat dapat membantu menyelesaikan banyak masalah IE6.
Kode yang indah
Saat ini, banyak proyek web memiliki fungsi yang kompleks dan skala kode mereka akan menjadi besar. Bagaimana cara pengembangan dan pemeliharaan kolaboratif yang lebih baik adalah masalah yang kita hadapi. Kita perlu mempertimbangkan untuk meningkatkan perencanaan terpadu, dan kita harus mengembangkan kebiasaan pengembangan kode yang baik agar nyaman ketika menghadapi berbagai situasi. Melihat melalui kode halaman, melihat penggunaan label yang masuk akal, anotasi yang baik, struktur kode yang jelas, dan CS yang akurat tidak hanya seperti menghargai karya seni, tetapi juga mengurangi biaya komunikasi untuk pengembangan hilir dan pengembangan kolaboratif. Alasan apa yang tidak kita miliki untuk tidak melakukan ini? Untuk memberikan contoh negatif: Penyalahgunaan Div adalah masalah khas sekarang. Menghitung untuk melihat berapa banyak tag yang Anda gunakan? Semantik yang berbeda harus menggunakan kode tag yang sesuai, terutama HTML5 menyediakan tag semantik yang lebih kaya. Mereka semua menunggu tuduhan di medan perang. Mari kita membebaskan mereka!
Pengembangan Halaman yang Dapat Diakses
Aksesibilitas dan kemudahan penggunaan adalah hal yang sangat subyektif dan ramah pengguna. Halaman -halaman yang dipresentasikan oleh orang biasa mungkin tidak selalu tampak begitu mempertimbangkan di antara kelompok -kelompok khusus. Kita harus merasa bersalah ketika orang buta menggunakan perangkat lunak membaca layar untuk masuk ke lingkaran dalam area tertentu dari halaman. Hanya dapat dikatakan bahwa situs web domestik saat ini kurang memperhatikan hal ini, yang mengharuskan kita untuk bekerja sama untuk membiarkan lebih banyak orang merasakan antusiasme kita. >
Memastikan efisiensi
Sebagai bagian yang relatif perbatasan dari pengembangan proyek, pengembangan halaman mungkin perlu diselesaikan sedini mungkin untuk mendapatkan waktu untuk proyek, yang mengharuskan kami meningkatkan efisiensi sebanyak mungkin. Jika Anda ingin melakukannya dengan baik, terlebih dahulu Anda harus mempertajam alat Anda. Selain pembentukan pengalaman praktis dan kebiasaan kode yang dapat membantu kami meningkatkan efisiensi, jika Anda ingin meningkatkan kemampuan Anda untuk mengendalikan kemajuan perkembangan Anda sendiri, ada banyak alat tambahan yang dapat membantu kami mengembangkan halaman. Misalnya, menggunakan lebih sedikit atau sass dapat membantu kami memperluas dan mengatur CSS, sangat meningkatkan efisiensi penulisan CSS dan meningkatkan pemeliharaan. Misalnya, Anda dapat menggunakan penyelesaian otomatis Coding Zen dan blok kode khusus untuk memungkinkan Anda mengarahkan pedang seolah -olah Anda terbang. Saya bahkan telah melihat kata kunci blok kode yang meningkatkan kecepatan pengembangan melalui metode input khusus. Jika Anda menjelajahi lebih banyak, Anda pasti akan menemukan alat yang paling cocok untuk diri Anda sendiri.
Optimalisasi untuk server
Pengembangan halaman juga membutuhkan pemahaman optimisasi server dan meminimalkan beban di server. Misalnya, CSS Sprite adalah contoh khas untuk mengurangi jumlah permintaan server. Dalam pengembangan front-end halaman email NetEase, kami terus melakukan berbagai optimisasi, seperti terus mencari keseimbangan antara ukuran file dan nomor permintaan server; Untuk meningkatkan pemanfaatan cache sebanyak mungkin, peningkatan tambalan diadopsi; Nama -nama kelas dikaburkan dan dikompresi untuk menghindari penamaan yang terlalu lama; Base64 digunakan untuk mengurangi jumlah permintaan, dan langkah -langkah lainnya. Ini adalah hasil dari trade-off komprehensif dan optimisasi keseluruhan perlu dipertimbangkan dalam semua aspek. Karena ketika jumlah kunjungan halaman mencapai urutan besarnya, bahkan optimasi terkecil akan mencapai hasil yang cukup besar, dan bahkan masalah terkecil dapat membentuk bencana besar.
Rangkul html5
Ini adalah era yang penuh dengan peluang. Munculnya era HTML5 telah menciptakan peluang yang lebih besar dengan munculnya internet seluler, dan ada begitu banyak hal yang layak dipelajari dan ditemukan. HTML5 menyediakan antarmuka API JS yang kaya, yang perlu kita pelajari; Kemegahan CSS3 telah menarik perhatian yang cukup, yang perlu kita pelajari; Cara mengembangkan halaman yang lebih mudah beradaptasi pada perangkat seluler mengharuskan kita belajar ...
Tetap lapar, tetap bodoh
Semakin saya mengambil air, saya menemukan bahwa bagian bawahnya masih dalam dan bagian bawahnya tidak terbawah. Semakin banyak saya mempelajari konten di atas, semakin banyak saya menemukan bahwa lebih banyak gunung dan sungai yang perlu didaki. Tetap lapar, gunakan mata Anda untuk menemukan dan menemukan, dan terus -menerus memperkaya keterampilan Anda untuk menemukan posisi dan menembus kemacetan. Seperti kata pepatah, hanya dengan membangun rumah tingkat tinggi Anda dapat mencapai hasil alami. Artikel ini dibentuk karena saya membahas masalah bottleneck dengan rekan -rekan saya sebelumnya. Saya ingin menemukan posisi untuk diri saya dan para siswa di ujung depan halaman untuk memilah ide -ide saya. Ambil kalimat dari pidato CEO Apple di Stanford, tetap lapar dan tetap bodoh dan bagikan dengan semua orang.