2008 15 Mayıs 2008

En İyi Uygulamalar: JavaScript Kullanıcı Çalışma

JavaScript Kullanıcı HTML belgesi Dibi ekleyin

Eğer komut sayfanın içeriği parçası eklemek için document.write (veya JavaScripts kullanarak sayfa içeriğinin herhangi bir dinamik nesil) yoksa, BODY etiketinin sonuna kadar sayfanın altına ifadeyi dahil komut dosyası taşıyın.
HTTP/1.1 belirtimi tarayıcılarda hostname başına paralel olarak en fazla iki bileşenlerini karşıdan önerir. Birden çok sunucu isimleri sizin görüntüleri hizmet varsa, paralel meydana ikiden fazla indirme alabilirsiniz. Bir komut dosyası indirirken, ancak, tarayıcı bile farklı konak üzerinde, başka herhangi bir indirme başlamaz.
Dinamik SCRIPT düğümleri oluşturmak ve sayfa AJAX kullanarak yüklendikten sonra uzaktan komut dosyalarını yüklemek için bir yol da vardır.

JavaScript çalışmasına en Externalise

JavaScript dosyaları tarayıcı tarafından önbelleğe çünkü harici JavaScript dosyalarını kullanarak sayfaları daha hızlı yükleme neden olacaktır. Inline JavaScript en 'HTML belgelerinde HTML belgesi talep her zaman indirilir. Bu aslında yapılan HTTP istekleri sayısını azaltabilir ama daha sonra HTML belgesinin boyutunu artırır. Dış JavaScript en tarayıcı tarafından önbelleğe alınır; HTML belgenin boyutunu HTTP istek sayısını artırmadan düşer.
Sitenizde kullanıcıların oturum başına birden fazla sayfa görünümü var ve sayfaları yeniden kullanmak aynı komut dosyalarını ve stil birçok varsa, önbelleğe harici dosyalardan daha büyük bir potansiyel faydası var, unutmayın.

Sizin Javascript Dosyalar Paketi

JavaScripts durumunda, CSS aksine, dosyaları sadece boşluk veya sekme kaldırarak daha düşük dosya boyutu verecek bazı standart algoritmaları kullanarak darlığı olabilir. Javascript packer bir örneği burada http://dean.edwards.name/packer/ bulunabilir

Herhangi bir Yinelenen Scripts kurtulun

Bu tüm betikleri çoğaltılmış olabileceğini çok sıradışı, ama en iyi on ABD web sitelerinin bir inceleme ikisi duplike komut içerdiğini göstermiştir. Komut çoğaltın ama açıkçası gereksiz HTTP istek ve israf JavaScript yürütme oluşturarak performansı azaltır.
Komut isimleri farklı olsa da, birçok durumda, komut ekip büyüklüğü ve sayısı nedeniyle aynı sayfa içinde yinelenen komut bir ihtimal.

Mümkünse DOM öğeleri erişim Küçült

JavaScript ile DOM öğelerini erişme, bunları asla bir daha duyarlı sayfasına sahip olmak için çok yavaş:
Erişilen elemanları • Önbellek referanslar
Ağaç ekleyebilirsiniz ardından • Güncelleme düğümleri "çevrimdışı" ve
• JavaScript ile düzeni sabitleme kaçının

İçerik ve Sunum ayrı Davranış

Biz İçerik (XHTML / XML) ayrı Sunum (CSS / XSLT), biz de Davranış ayırmak gerektiği gibi (JavaScript). Bu göze çarpmayan Javascript olarak adlandırılır. Harici CSS dosyaları bağlamak gibi, harici javascript dosyaları bağlanmalıdır.

Bunun yerine içeriği (örneğin, onmouseover, onclick, vb) Kodlama sabit davranış, davranış dinamik unsurları, sınıfları ve DOM kullanarak eşsiz elemanlar (kimlikleri) eklenmelidir. Temel belge, içeriği, sadece geçerli XHTML / XML ve hiçbir javascript içermelidir.
Javascript davranışı ekleyerek içeriğini artırmak gerekir. Içeriği faydalı ve javascript (ya da tam javascript desteği olmadan) olarak kullanılabilmelidir kalmalıdır.


2008 7 Mayıs 2008

En İyi Uygulamalar: sayfa ağırlığının farkında olun

Çok üzgünüm, geri bu makalede yaş kaydetmiş! Ben kaynağı hatırlamıyorum ... ama bu bizim için siteyi geliştirmek kimin için seyirci haberdar olması bizim için yararlı görünüyordu ... İşte i

Sayfa ağırlığı internet bağlantı hızları çeşitli Verilen bir sayfa için yükleme süresi belirlemek için kullanılabilir. Örnekleme yoluyla, aşağıdaki tabloda popüler bağlantı hızları bir dizi az üç farklı sayfaları için indirme kez gösterir.

Sayfa Ağırlık Download Times

Bağlantı Hızı

20 Kb Sayfa

40 Kb Sayfa

100 Kb Sayfa

14.4 Kbps

12 sn

25 sn

62 sn

28.8 Kbps

6 sn

12 sn

31 sn

33.3 Kbps

5 sn

10 sn

26 sn

56 Kbps (V.90)

2 sn

5 sn

13 sn

64 Kbps (ISDN)

2 sn

4 sn

12 sn

128 Kbps (DSL / Kablo)

1 sn

2 sn

6 sn

256 Kbps (DSL / Kablo)

<1 sn

1 sn

3 sn

Sayfa ağırlığı azaltmak Faydaları?

Sayfa ağırlık faydaları web sitesi sahipleri ve tüketiciler azaltılması olumlu etkisi. Potansiyel faydalar şunlardır:

  1. Sayfalar daha hızlı yüklenir. Sayfa ağırlık azaltmanın en belirgin etkisi, web sitenizin sayfalarını bakılmaksızın bağlantı hızını, ziyaretçiler için daha hızlı yüklenmesini olacaktır.
  2. Alt sayfa yükleme süreleri daha rahat ziyaretçi oluşturun. Ziyaretçiler hüsrana uğruyor ve sayfaları hızla yüklerseniz başka gitmek için daha az olasıdır. Öte yandan, yavaş yükleme sayfalarında ziyaretçi ve potansiyel müşterileri kaybetmek en emin yollarından biridir.
  3. Daha hızlı yük-kat artmış dönüşüm katkıda bulunacaktır. Daha fazla ziyaretçi sitenizde daha uzun kalır. Bunlardan daha fazla, alışveriş yaparken sizin gazeteye abone olma veya sitenizin kitap-işaretleme sona erecek.
  4. Sizin marka algısı artırılacaktır. Geri dönen müşteriler ve ilk kez ziyaretçilerin hem kendi sayfaları hızla yüklerseniz "profesyonel" olarak site (ve iş) tanımlamak için daha fazla eğilimli olacaktır.
  5. Temiz, sağlam kod sayfaları genellikle doğal arama motorları tarafından daha etkin endeksli olacak.
  6. Ağırlığı için optimize edilmiş sayfalar aslında yüksek trafik sitelerinde bant genişliği ücretleri kaydedebilirsiniz. 100.000 sayfa her birinin ağırlığı 150 Kb 100.000 sayfa Her bir kilo 75 Kb daha ISS'nizden iki kat daha fazla bant genişliği gerektirir. Kullanılan bant genişliği veya Tesellüm Fazlalıkları için ücret ISS'ler için bu azalma bant genişliği ücretleri önemli tasarruflar oluşturabilirsiniz.

Bir rapor yayınlanan aşağıdaki verileri göz önünde

Ziyaretçi Vazgeçme

Sayfa Yükleme Süresi

Kullanıcıların yüzde
Bekleyin devam

10 saniye

% 84

15 saniye

% 51

20 saniye

% 26

30 saniye

% 5


2008 24 Nisan 2008

En İyi Uygulamalar: CSS ile Çalışma

En azından Stil koyun

Aşamalı olarak yüklemek için bir sayfa istiyorsanız;, bunu en kısa sürede ne varsa, içeriğini görüntülemek için tarayıcı istiyorsanız olduğunu, belgenin HEAD içindeki sayfanın üst kısmında CSS koydu. Bu sayfa Bu sayfanın aşamalı oluşturmada kolaylaştırır olarak, daha hızlı yükleme gibi görünür yapar. Bu içerik bir çok daha yavaş internet bağlantıları kullanıcılar için sayfaları için özellikle önemlidir.

Bu genel kullanıcı deneyimini geliştirmek için bir belgelenmiş bir gerçektir, bu ilerleme göstergelerini ve görsel geri bildirimler sağlamak için önemlidir. , Sayfa öğeleri yeniden çizmek zorunda kalmamak için durumda IE, sayfanın blok oluşturma dahil olmak üzere kendi stillerini değişikliği, bazı tarayıcılar, CSS tamamen yüklenene kadar eğer. Bu nedenle, kullanıcı olduğunu görmek için alır Boş beyaz bir sayfa.

W3 HTML tanımlamalarına 'da CSS, HTML sayfasının HEAD bölümüne beni içermesi gerektiğini belirtiyor. at the bottom of the page, so it's best not to use it. Ayrıca IE'de, dikkat @import kullanarak aynı şekilde davranır <link> sayfanın alt kısmında, bu yüzden kullanmak en iyi değil.

Tarayıcı Özgül özelliklerini kullanma kaçının

Filtreler: Kullanım filtre Bellek tüketimini artırır ve element başına uygulanır değil, görüntü başına, sorun çarpılır öyle. Ayrıca, Filtreler IE Tescilli olup, dolayısıyla diğer tarayıcılarda beklendiği gibi çalışmaz. Eğer şeffaf ya da degrade arka istiyorsanız, görüntüleri ile 1Pixel kullanın.
İfadeler: CSS ifadeler CSS için de hoş bir özellik, ama hala IE özgü bir özelliktir. Ayrıca, bu ifadeler olduğuna dikkat etmek önemlidir sayfa işlenmiş ve yeniden boyutlandırıldığında değerlendirilir, kaydırılan ve kullanıcı sayfa üzerinde fare hareket bile. Bu sayfanızın performansı etkileyebilecek söylemeye gerek yok. Eğer lehte 'da eksileri daha fazla ağırlığa sahip' hissi sürece Dolayısıyla basit bir deyişle, CSS ifadeler kullanmaktan kaçının

CSS Externalise

Harici CSS kullanarak daha hızlı yükleme neden olacaktır sayfalarında JavaScript ve CSS dosyaları tarayıcı tarafından önbelleğe çünkü. HTML belgelerinde Inline CSS HTML belgesi talep her zaman indirilir. Bu aslında yapılan HTTP istekleri sayısını azaltabilir ama daha sonra HTML belgesinin boyutunu artırır. Harici CSS tarayıcı tarafından önbelleğe alınır; HTML belgenin boyutunu HTTP istek sayısını artırmadan düşer.

Sitenizde kullanıcıların oturum başına birden fazla sayfa görünümü var ve sayfaları yeniden kullanmak aynı komut dosyalarını ve stil birçok varsa, önbelleğe harici dosyalardan daha büyük bir potansiyel faydası var, unutmayın.

Sizin CSS Dosya Paketi

Paketleme veya CSS çatırdayan yük kere iyileştirilmesi böylece onun boyutunu azaltmak için kod gereksiz karakterleri kaldırma uygulamadır.

CSS bana satırsonu vb, beyaz boşluk gibi tüm yorum ve herhangi bir istenmeyen karakterleri kaldırarak darlığı olabilir


2008 14 Mart 2008

Bir UI Geliştirici için En İyi Uygulamalar

Yaş için, ben tüm İYİ Uygulamaları pekiştirmek için düşünüyordum, şimdi ve sonra her okuyorum. Nihayet! Ben kalem koymak için aşağıya aldım. Ben Bu mamut belge oluştururken mamut görev olacak anladım, bu yüzden bütün bir kategori adamaya karar verdi, bu yüzden ben de en iyi uygulamalar hakkında şeyler eklemeye devam olabilir ve ben onlara karşılaştığınızda ...

Eh! Burada içerik Yahoo, Google vs gibi standart geliştiriciler tarafından yazılmış olanlar ile benim kişisel UI geliştirme Best Practices bir birleşmesi olacak

Bu alanı izleyin ve browing tutmak En İyi Uygulamalar Kategori


2007 15 Eylül 2007

Doctypes nelerdir? TARAYICI tuhaflıklar & KESİN Mod nelerdir?

Basit konuşan (bugün önce doctype hakkında hiç duymamış olanlar için)! DOCTYPE <HTML> etiketinden önce gelen bir HTML belgesi ve beyanı olduğunu, böyle bir şey (bu çok sayfanın kaynak yapıştırılan) görünüyor

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


Neden doctype kullanmak?
Tarayıcı standartlar W3C tarafından tanıtıldı zaman her şey başladı. Daha önce web geliştiricileri onları ve en web sitelerinde doğru işlenir sayfaları oldukça bu özellikleri / standartlara uygun olmadığını CSS sahip olması, tarayıcılarının isteklerine göre CSS uygulanmaktadır.

Bu probleme çözüm nedenle oldu

  • hangi modu kullanmak istediğinizi seçmek için kendi standartlarını biliyordu web geliştiricileri sağlar.
  • Eski (tuhaflıklar) kurallarına göre eski sayfaları görüntülemeye devam.

Ve DOCTYPE doğdu.

Yani, sayfa standartlara veya tasarlanmış olup olmamasına bağlı olarak, uygun doctype seçin.


Doctype & Tarayıcı modları arasındaki ilişki
Olağandışı Modu veya Strict modu; Doctype içinde HTML sayfası işlemek ya da daha doğrusu nasıl tarayıcı CSS yorumlamak gerektiğini daha kesin olarak hangi modu tarayıcınızın söyler ifadedir.

Bu standartlar getirilmiştir önce yazılmış Eski sayfaları doctype yok. Bu nedenle hiçbir DOCTYPE HTML içinde olduğunda ardından tarayıcı kültürlerinden modunda.
DOCTYPE aşağıdakilerden biri olarak tanımlanır Fakat eğer tarayıcı KESİN Modunda olduğu söylenir.

<DOCTYPE html PUBLIC "- / / W3C / / DTD HTML 4.01 Transitional / / EN" "http://www.w3.org/TR/html4/loose.dtd">


NDK ev | BT İfade | İfade Damak | İfade Penmenship | İfade Awe | İfade Myself