2008 15 maja 2008

Dobre praktyki: Praca z JavaScript-tych

Włącz JavaScript jest u dołu dokumentu HTML

Jeśli nie masz document.write (lub dynamiczne generowanie zawartości strony za pomocą javascripts), aby wstawić fragment strony treści w skryptach, przenieść skrypt include na dole strony, przed końcem znacznika BODY.
HTTP/1.1 specyfikacja sugeruje, że przeglądarki pobrać nie więcej niż dwa elementy równolegle na nazwę hosta. Jeśli służyć obrazów z wielu hostów, można uzyskać więcej niż dwa pobrania występować równolegle. Podczas gdy skrypt jest pobieranie, jednak przeglądarka nie rozpocznie żadnych innych pobieranie, nawet na różnych hostów.
Istnieją również sposoby do dynamicznego tworzenia węzłów SCRIPT i załadować zdalnych skryptów po załadowaniu strony przy użyciu AJAX.

Uzewnętrznić wam JavaScript tych

Korzystanie z zewnętrznych plików JavaScript spowoduje szybsze ładowanie stron, ponieważ pliki JavaScript są buforowane przez przeglądarkę. Inline JavaScript w "w dokumentach HTML dostać pobierane za każdym razem dokument HTML jest wymagane. To może rzeczywiście zmniejszyć liczbę żądań HTTP wykonanych lecz następnie zwiększa rozmiar dokumentu HTML. Zewnętrzne JavaScript tych są buforowane przez przeglądarkę, rozmiar dokumentu HTML jest zmniejszona bez zwiększania liczby żądań HTTP.
Należy pamiętać, że jeśli użytkownicy witryny mają wiele odsłon na sesję i wielu stron ponownie wykorzystują te same skrypty i arkusze stylów, istnieje większe potencjalne korzyści z buforowanych plików zewnętrznych.

Spakuj pliki JavaScript

W przypadku JavaSkrypty, w przeciwieństwie do CSS, pliki mogą nawał korzystania z niektórych standardowych algorytmów, które dałyby obniżoną rozmiar niż zwykłe usunięcie spacji lub tabulacji. Przykładem javascript paczkującego można znaleźć tutaj http://dean.edwards.name/packer/

Pozbądź każdego duplikatu Skrypty

Jest to bardzo niezwykłe, że całe skrypty mogą być kopiowane, ale przegląd dziesięciu najlepszych amerykańskich stron internetowych pokazuje, że dwie z nich zawierają zduplikowany scenariusz. Duplikaty skrypty ale oczywiście zmniejsza wydajność tworzenia niepotrzebnych żądań HTTP i zmarnowane uruchamianie skryptów JavaScript.
Ponadto, w wielu przypadkach, choć skrypty nazwy są różne, istnieje prawdopodobieństwo duplikatów skryptów w obrębie tej samej strony ze względu na wielkość zespołu i liczbę skryptów.

Zminimalizować dostęp do elementów DOM w miarę możliwości

Dostęp do elementów DOM z JavaScript jest powolny, tak aby mieć bardziej sprawną stronę, należy:
• referencje Cache na dostęp elementów
: • węzły Aktualizacja "offline", a następnie dodać je do drzewa
• Należy unikać mocowania układu z JavaScript

Oddzielne zachowanie od treści i prezentacji

Tak jak oddzielna prezentacja (CSS / XSLT) z treści ust XHTML / XML), warto również oddzielić zachowania (JavaScript). To się nazywa dyskretny Javascript. Podobnie jak linki do zewnętrznych plików CSS, powinniśmy połączyć się do zewnętrznych plików javascript.

Zamiast twardego zachowanie kodowania do treści (np. onmouseover, onclick, itp.), zachowanie powinno być dynamicznie dodawane do elementów, klas i unikalnych elementów (IDS) wykorzystujących DOM. Podstawowy dokument, treści, powinien zawierać tylko prawidłowym XHTML / XML i JavaScript nie.
Javascript should poszerzyć zawartość dodając zachowanie. Treść powinna być przydatny i użyteczny bez javascript (lub bez pełnej obsłudze JavaScript).


2008 07 maja 2008

Najlepsze praktyki: Bądź świadom wagi strony

I został zapisany wiek artykułów z powrotem, więc Przepraszamy! Nie pamiętam źródła ... ale wydawało się przydatne dla nas, którzy muszą być świadomi, o publiczności, dla której rozwijamy miejsce dla ... więc tutaj i jest

Waga strona może być używany do określenia czasu pobierania dla danej strony na różnych prędkości połączeń internetowych. Jako przykład, poniższa tabela pokazuje czas pobierania dla trzech różnych stron na wielu popularnych szybkości połączeń.

Times Waga Strona pobierania

Szybkość połączenia

20 Strona Kb

40 Strona Kb

100 Strona Kb

14.4 Kbps

12 sek

25 sek

62 sek

28.8 Kbps

6 sek

12 sek

31 sek

33.3 Kbps

5 sek

10 sek

26 sek

56 Kbps (V.90)

2 sek

5 sek

13 sek

64 Kbps (ISDN)

2 sek

4 sek

12 sek

128 Kbps (DSL / Cable)

1 sek

2 sek

6 sek

256 Kbps (DSL / Cable)

<1 sek

1 sek

3 sek

Korzyści z redukcji wagi strony?

Pozytywny wpływ na zmniejszenie korzyści, wagi strony zarówno właścicielom witryn i konsumentów. Potencjalne korzyści obejmują:

  1. Strony ładują się szybciej. Najbardziej oczywistym skutkiem zmniejszenie wagi strony jest że witryna jego strony ładowały się szybciej, dla zwiedzających, niezależnie od ich szybkości połączenia.
  2. Krótszy czas ładowania stron tworzenie bardziej komfortowe odwiedzających. Odwiedzający mają mniejsze szanse stać się sfrustrowany i iść gdzie indziej, jeśli strony ładują się szybko. Z drugiej strony, powolnych stron stron jeden z najpewniejszych sposobów stracić odwiedzających i potencjalnych klientów.
  3. Szybsze obciążenia czasy przyczyni się do zwiększenia konwersji. Więcej odwiedzających pozostanie na swojej stronie dłużej. Więcej z nich trafi do dokonywania zakupów, logując się do biuletynu, lub książka oznakowanie witryny.
  4. Twoje postrzeganie marka zostanie zwiększona. Powracający klienci i po raz pierwszy odwiedzających podobne będą bardziej skłonni do opisu witryny (i biznesu) jako "profesjonalny" jeśli twoje strony ładują się szybko.
  5. Strony z czystym kodem stałym często są indeksowane bardziej efektywnie przez naturalnych wyszukiwarek.
  6. Strony zoptymalizowane dla wagi może faktycznie zaoszczędzić koszty przepustowości w witrynach o dużym natężeniu ruchu. 100.000 stron każdy ważył 150 Kb wymagać będzie dwa razy tyle pasma od ISP niż 100.000 stron każdej z wag 75 Kb. Dla ISP, które pobierają o przepustowości używanego lub nadmiarów, redukcja ta może stworzyć znaczne oszczędności na opłatach przepustowości.

Rozważmy następujące dane, opublikowane w raporcie

Porzucenie gość

Czas ładowania strony

Procent użytkowników
Kontynuacja Czekaj

10 sekund

84%

15 sekund

51%

20 sekund

26%

30 sekund

5%


2008 24 kwietnia 2008

Dobre praktyki: Praca z CSS

Umieść stylów w górę

Jeśli chcesz, aby załadować stronę stopniowo, który chcemy przeglądarkę do wyświetlenia cokolwiek zawartość ma jak najszybciej, należy umieścić CSS na górze strony w głowie dokumentu. To sprawia, że strony wydają się być ładowanie szybsze, gdyż ułatwia stopniowe obraz aktualnej strony. Jest to szczególnie istotne dla stron z dużą ilością treści i dla użytkowników wolniejszych łączy internetowych.

Jest udokumentowanym faktem, że w celu zwiększenia ogólnej doświadczenie użytkownika, ważne jest, aby zapewnić wskaźniki postępu i wizualnych mechanizmów zwrotnych. Aby uniknąć konieczności rysowania elementów strony, w przypadku gdy ich zmiana stylów, niektóre przeglądarki, w tym IE, renderowania blokuje strony do CSS jest w pełni załadowany. Z tego powodu użytkownik dostaje zobaczyć pusta biała strona.

W standardami W3C HTML "również stwierdza, że ​​musi mi to CSS w sekcji HEAD strony HTML. at the bottom of the page, so it's best not to use it. Należy również pamiętać, że w IE @import zachowuje się tak samo, jak przy użyciu <link> na dole strony, więc nie jest najlepiej z niego korzystać.

Unikaj używania przeglądarki specyfikę

Filtry: Korzystanie z filtrem zwiększa zużycie pamięci i jest stosowana na elemencie, a nie na obrazie, więc problem jest mnożona. Także Filtry są IE Proprietary, stąd nie będzie działać zgodnie z przeznaczeniem w innych przeglądarkach. Jeśli chcesz przezroczyste lub gradient tła, użyj 1Pixel z obrazami.
Określenia: wyrażenia CSS są fajnym dodatkiem mieć w CSS, ale wciąż jest IE Specyficzną cechą. Również ważne jest, aby pamiętać, że te wyrażenia są ocenione, gdy strona jest renderowana i rozmiaru, przewijane i nawet kiedy użytkownik przesuwa kursor strony. Trzeba powiedzieć, może to wpłynąć na wydajność swojej stronie. Stąd w prostych słowach, Unikaj wyrażeń CSS, chyba że uważasz swoje plusy "waży więcej niż jego wad"

Uzewnętrznić ci CSS

Korzystanie z zewnętrznego CSS spowoduje szybsze ładowanie stron, ponieważ JavaScript i CSS są zapisywane przez przeglądarkę. Inline CSS w dokumentach HTML dostać pobierane za każdym razem dokument HTML jest wymagane. To może rzeczywiście zmniejszyć liczbę żądań HTTP wykonanych lecz następnie zwiększa rozmiar dokumentu HTML. Zewnętrzny CSS są buforowane przez przeglądarkę, rozmiar dokumentu HTML jest zmniejszona bez zwiększania liczby żądań HTTP.

Należy pamiętać, że jeśli użytkownicy witryny mają wiele odsłon na sesję i wielu stron ponownie wykorzystują te same skrypty i arkusze stylów, istnieje większe potencjalne korzyści z buforowanych plików zewnętrznych.

Zapakuj swój plik CSS

Pakowania lub pożerające swój CSS jest praktyka usuwania zbędnych znaków z kodu do zmniejszenia jej rozmiaru zwiększając w ten sposób czas wczytywania.

CSS może mnie nawał usuwając wszystkie komentarze i niepotrzebne znaki, takie jak białe spacje, znaki nowej linii itd.


2008 14 marca 2008

Najlepsze praktyki dla deweloperów UI

Przez wieki, mam myśleć skonsolidować wszystkie najlepsze praktyki, Czytam co jakiś czas. Wreszcie! I nie schodzić się wprowadzić go do pióra. Uświadomiłem sobie, że to będzie ogromne zadanie tworzenia tego mamuta dokument, więc zdecydowałem się poświęcić całą kategorię do niej, więc mogłem trzymać dodając rzeczy na temat najlepszych praktyk, jak i kiedy je spotkać ...

Dobrze! Zawartość tutaj będzie połączenie z moich osobistych rozwoju Praktyk UI najlepsze z tych, napisany przez standardowe deweloperów, takich jak Yahoo, Google itp.

Watch this space i zachować browing na Najlepszego Kategoria Practices


2007 15 września 2007

Jakie są Deklaracje typu dokumentu? Jakie są dziwactwa PRZEGLĄDARKI i trybie ścisłym?

Prosta rzecz biorąc (dla tych, którzy nigdy nie słyszeli o doctype przed dzisiaj)! DOCTYPE jest deklaracja w dokumencie HTML występujący przed <HTML>, który wygląda mniej więcej tak (wklejony od źródła tej samej stronie)

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


Dlaczego warto korzystać z doctype?
Wszystko zaczęło się gdy standardy przeglądarki zostały wprowadzone przez W3C. Wcześniejsze developerzy realizowane CSS zgodnie z życzeniem przeglądarkach, aby strony wyświetlane poprawnie w nich i większość serwisów internetowych miał CSS, które nie całkiem pasują te specyfikacje i norm.

Dlatego rozwiązaniem tego problemu było

  • pozwalają programistów, którzy znali swoje standardy do wyboru tryb, w którym do użytku.
  • kontynuować wyświetlanie starych stron według starych (dziwactwa) zasad.

I DOCTYPE urodził.

Tak więc na podstawie tego, czy strona jest przeznaczona do normy, czy też nie, należy wybrać odpowiedni doctype.


Relacja między DOCTYPE & Przeglądarka trybach
Doctype jest oświadczenie, które mówi przeglądarkę jakim trybie powinna renderowania strony HTML lub raczej dokładniej w jaki sposób należy interpretować przeglądarka CSS w; trybie quirks lub trybie ścisłym.

Stare strony napisane zanim normy te zostały wprowadzone nie masz doctype. Dlatego, kiedy nie ma DOCTYPE w HTML następnie przeglądarka jest w trybie quirks.
Ale jeśli DOCTYPE określa się jako jedno z poniższych, a następnie przeglądarka mówi się, że w trybie ścisłym.

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


NDK startowej | Wyrażając IT | Podniebienie Wyrażając | Penmenship Wyrażając | Awe Wyrażając | Wyrażając Myself