Optymalizacja ładowania i uruchamiania witryny - Grupy dyskusyjne w eGospodarka.pl

eGospodarka.pl › Grupy › pl.comp.www › Optymalizacja ładowania i uruchamiania witryny

« poprzedni wątek

następny wątek »

Ilość wypowiedzi w tym wątku: 7

1. Data: 2009-06-23 12:36:03
Temat: Optymalizacja ładowania i uruchamiania witryny
Od: Peter May <p...@p...fm>

Wpisuję adres www i pobieram dane z serwera. W skrócie kod ma się tak:

DOCTYPE...
<html>
<body><div>
[...]
i przy samym końcu kodu html ładuję
[javascript] (http://developer.yahoo.com/performance/rules.html#j
s_bottom)
</div></body>

Wszystkie funkcje JavaScriptowe uruchamiam po załadowaniu całego drzewa
dokumentu html. Przy czym nie mam koncepcji jak zoptymalizować taką
funkcjonalność, jaką opiszę dalej.

Pewne elementy są pokazywane lub ukrywane przez kliknięcie w dany
element. Innymi słowy klik->pokaż, klik->ukryj i tak w kółko. Sęk w tym,
że wszystkie elementy, które chcę schować domyślnie, muszę załadować się
najpierw z display:block;, by je potem ukryć za pomocą funkcji js i
display:none; Musi tak być, bo przecież Ci, co nie mają włączonego lub
nie obsługują JavaScriptu, muszą zawartość mieć normalnie dostępną.
Powoduje to jednak, że strona zaraz po załadowaniu niejako "lata", bo
elementom nadawane są różne własności CSS, głównie display:none.

Wiadomo, że mógłbym wszystkie potrzebne mi elementy ładować od razu z
display:none, ale wtedy Ci, co nie mają lub nie obsługują JavaScript-u
po prostu nie dostaną się do opcji pod danym przyciskiem.

Mam ktoś "patent" jak zminimalizować tego typu "układanie elementów"
przez przeglądarkę?

--
Peter

[ pokaż wiadomość z nagłówkami ]

do góry
2. Data: 2009-06-23 12:47:14
Temat: Re: Optymalizacja ładowania i uruchamiania witryny
Od: ethanak <s...@b...pl>

Dnia Tue, 23 Jun 2009 14:36:03 +0200, Peter May napisał(a):

[...]
> Mam ktoś "patent" jak zminimalizować tego typu "układanie elementów"
> przez przeglądarkę?

A na samym początku (w head)

document.documentElement.className="mamyskrypta";

a potem w CSS:

.mamyskrypta .widoczny {
display: block;
}

.mamyskrypta .niewidoczny {
display: none;
}

Może być?

ethanak
--
mailto=window.atob('ZXRoYW5ha0Bwb2xpcC5jb20=');
http://milena.polip.com/ - Nie bede czekac na Ivo :)

[ pokaż wiadomość z nagłówkami ]

do góry
3. Data: 2009-06-23 14:27:17
Temat: Re: Optymalizacja ładowania i uruchamiania witryny
Od: Peter May <p...@p...fm>

ethanak pisze:
> Dnia Tue, 23 Jun 2009 14:36:03 +0200, Peter May napisał(a):
>
> [...]
>> Mam ktoś "patent" jak zminimalizować tego typu "układanie elementów"
>> przez przeglądarkę?
>
> A na samym początku (w head)
>
> document.documentElement.className="mamyskrypta";
>
>
> a potem w CSS:
>
> .mamyskrypta .widoczny {
> display: block;
> }
>
> .mamyskrypta .niewidoczny {
> display: none;
> }
>
> Może być?

Nie bardzo widzę sens powyższego. Ustawiasz dla elementu będącego
bezpośrednim dzieckiem document (tu <html>) klasę, która co ma robić? Bo
z powyższego wynika, że podwyższasz rangę klasy .widoczny i
.niewidoczny, co czasem też robię zamiast !important. Tylko co to ma dać
za efekt?

Natomiast wpadłem na pewien inny pomysł bazując na powyższym. Tuż za
<body> można ustawić JS-em klasę .niewidoczny i zmienić ją dla <body> na
.widoczny po tym, jak wykonają się już wszystkie skrypty. Ma to jednak
poważną wadę. W pewnych miejscach odczytuję szerokość i wysokość
elementów, co przy display:none dla <body> daje mi wartości auto dla
pożądanych elementów, bo nie są one jeszcze wyrenderowane. A tego nie chcę.

Może jest jakieś inne rozwiązanie.

--
Peter

[ pokaż wiadomość z nagłówkami ]

do góry
4. Data: 2009-06-23 14:35:06
Temat: Re: Optymalizacja ładowania i uruchamiania witryny
Od: yew <y...@q...dude>

Peter May pisze:
> Wpisuję adres www i pobieram dane z serwera. W skrócie kod ma się tak:
>
> DOCTYPE...
> <html>
> <body><div>
> [...]
> i przy samym końcu kodu html ładuję
> [javascript] (http://developer.yahoo.com/performance/rules.html#j
s_bottom)
> </div></body>
>
> Wszystkie funkcje JavaScriptowe uruchamiam po załadowaniu całego drzewa
> dokumentu html. Przy czym nie mam koncepcji jak zoptymalizować taką
> funkcjonalność, jaką opiszę dalej.
>
> Pewne elementy są pokazywane lub ukrywane przez kliknięcie w dany
> element. Innymi słowy klik->pokaż, klik->ukryj i tak w kółko. Sęk w tym,
> że wszystkie elementy, które chcę schować domyślnie, muszę załadować się
> najpierw z display:block;, by je potem ukryć za pomocą funkcji js i
> display:none; Musi tak być, bo przecież Ci, co nie mają włączonego lub
> nie obsługują JavaScriptu, muszą zawartość mieć normalnie dostępną.
> Powoduje to jednak, że strona zaraz po załadowaniu niejako "lata", bo
> elementom nadawane są różne własności CSS, głównie display:none.
>
> Wiadomo, że mógłbym wszystkie potrzebne mi elementy ładować od razu z
> display:none, ale wtedy Ci, co nie mają lub nie obsługują JavaScript-u
> po prostu nie dostaną się do opcji pod danym przyciskiem.
>
> Mam ktoś "patent" jak zminimalizować tego typu "układanie elementów"
> przez przeglądarkę?

Możesz pod każdym blokiem umieścić krótką instrukcję która ukryje/pokaże
blok prawie natychmiast po wyrenderowaniu (opóźnienia nie powinny być
widoczne), tzn:

<div id="b1">tresc</div>
<script type="text/javascript">showHide("b1");</script>

Wiem, że to wygląda nie najlepiej bo wrzucam <script> w body, ale to
tylko wywołania funkcji a nie programowanie JS w body.

--
yew

[ pokaż wiadomość z nagłówkami ]

do góry
5. Data: 2009-06-23 18:26:27
Temat: Re: Optymalizacja ładowania i uruchamiania witryny
Od: Paweł Piskorz <n...@p...nie?>

Peter May pisze:
> ethanak pisze:
>> Dnia Tue, 23 Jun 2009 14:36:03 +0200, Peter May napisał(a):
>>
>> [...]
>>> Mam ktoś "patent" jak zminimalizować tego typu "układanie elementów"
>>> przez przeglądarkę?
>>
>> A na samym początku (w head)
>>
>> document.documentElement.className="mamyskrypta";
>>
>>
>> a potem w CSS:
>>
>> .mamyskrypta .widoczny {
>> display: block;
>> }
>>
>> .mamyskrypta .niewidoczny {
>> display: none;
>> }
>>
>> Może być?
>
> Nie bardzo widzę sens powyższego. Ustawiasz dla elementu będącego
> bezpośrednim dzieckiem document (tu <html>) klasę, która co ma robić?

Ma sygnalizować, że JS jest włączony.

> Bo
> z powyższego wynika, że podwyższasz rangę klasy .widoczny i
> .niewidoczny, co czasem też robię zamiast !important. Tylko co to ma dać
> za efekt?

Efekt daje taki, że przy włączonym JS element z klasą .niewidoczny
zostanie ukryty, zaś przy wyłączonym JS styl ten nie zadziała, bo
braknie .mamskrypta które jest ustawiane przez JS.

--
message[autor="PablO"]::after {
content:"Pozdrawiam";
}

[ pokaż wiadomość z nagłówkami ]

do góry
6. Data: 2009-06-23 18:27:39
Temat: Re: Optymalizacja ładowania i uruchamiania witryny
Od: Paweł Piskorz <n...@p...nie?>

yew pisze:
> Możesz pod każdym blokiem umieścić krótką instrukcję która ukryje/pokaże
> blok prawie natychmiast po wyrenderowaniu (opóźnienia nie powinny być
> widoczne), tzn:
>
> <div id="b1">tresc</div>
> <script type="text/javascript">showHide("b1");</script>

Może mu to nie bardzo zadziałać, bo definicje wszystkich funkcji ma na
samym końcu strony ;)

--
message[autor="PablO"]::after {
content:"Pozdrawiam";
}

[ pokaż wiadomość z nagłówkami ]

do góry
7. Data: 2009-06-23 19:10:41
Temat: Re: Optymalizacja ładowania i uruchamiania witryny
Od: ethanak <s...@b...pl>

Dnia Tue, 23 Jun 2009 16:27:17 +0200, Peter May napisał(a):

[...]
> Nie bardzo widzę sens powyższego.

do {
Przeczytaj jeszcze raz.
} until (zrozumiałem)

> Ustawiasz dla elementu będącego
> bezpośrednim dzieckiem document (tu <html>) klasę, która co ma robić? Bo
> z powyższego wynika, że podwyższasz rangę klasy .widoczny i
> .niewidoczny, co czasem też robię zamiast !important. Tylko co to ma dać
> za efekt?

Zależność od włączenia JavaScriptu... za trudne żeby zrozumieć?

ethanak
--
mailto=window.atob('ZXRoYW5ha0Bwb2xpcC5jb20=');
http://milena.polip.com/ - nie czekam na Ivo!

[ pokaż wiadomość z nagłówkami ]

do góry