W tym wpisie pokaże jakich błędów unikać pisząc w Delphi skomplikowane działania, aby nie marnować czasu użytkownika końcowego naszej aplikacji. Do dzieła!

Stałe

Zacznijmy od rzeczy najprostszej, wykluczania operacji których wynik jest zawsze taki sam. Głupota? Prosty przykład, obliczenia w których występuje liczba PI podniesiona do kwadratu. Wartość tego wyrażenia jest zawsze taka sama, gdyż PI wynosi zawsze tyle samo.

procedure TForm1.Button1Click(Sender: TObject);
var
  k: Double;
begin
  k := GetTickCount * Sqr(PI) + 4;
end;

W takiej sytuacji zamiast podnosić 3,14 za każdym razem do kwadratu, najlepiej wyliczyć sobie tą wartość chociażby na systemowym kalkulatorze i zadeklarować nową stałą. Rzecz jasna, jak wcześniej wspomniałem, ma to sens tylko gdy wykonujemy naprawdę dużo obliczeń – inaczej jest to sztuka dla sztuki.

procedure TForm1.Button1Click(Sender: TObject);
const
  PI_2 = 9.8696044010893586188344909998762;
var
  k: Double;
begin
  k := GetTickCount * PI_2 + 4;
end;

Unikanie dzielenia

Swego czasu, wyczytałem iż lepiej jest przykładowo mnożyć razy 0,5 niż dzielić przez 2. Próbowałem potwierdzić to różnymi testami, ale za każdym razem dostawałem identyczny wynik. Strzelam że obecne procesory lepiej sobie radzą z dzieleniem w stosunku do mnożenia liczb zmiennoprzecinkowych niż kiedyś.

Dlatego też porada ta nie ma dzisiaj większego sensu, ale warto o niej pamiętać.

Power, Sqr, Sqrt

Funkcja Power, analogicznie do swojej nazwy kryje w sobie dużą moc , nie mniej, należy się jej wystrzegać jak ognia. Power przyjmuje 2 argumenty, pierwszym jest liczba którą chcemy podnieść do potęgi, a drugim wykładnik potęgi.

Daje to ogromne możliwości z uwagi na fakt iż jest to liczba zmiennoprzecinkowa. Nie mniej, w sytuacji w której podnosimy liczbę do potęgi drugiej, bądź wyciągamy pierwiastek stopnia drugiego bezwzględnie stosujmy funkcje Sqr oraz Sqrt. Pierwiastek 4 stopnia? Zagnieżdżone dwie funkcję Sqrt będą na pewno szybsze niż jeden Power.

Oto małe porównanie szybkości wykonywania się poszczególnych operacji:

I na koniec wynik testu z pierwiastkiem czwartego stopnia:

Podsumowanie

Liczę że te kilka porad pozwoli Wam na optymalizację wielokrotnie wykonywanych działań matematycznych w Delphi. Oczywiście należy też pamiętać o doprowadzeniu danego równania do jak najprostszej postaci przed przystąpieniem do implementacji w programie.

function nazwa($argument)
{
  if (warunek)
  {
    return FALSE;
  }
  ... ciało funkcji
}

…czy też:

function nazwa($argument)
{
  if (warunek)
  {
    return FALSE;
  }
  else
  {
    ... ciało funkcji
  }
}

Intuicyjnie może się wydawać że pierwszy metoda będzie działać szybciej, gdyż po spełnieniu warunku wychodzimy od razu z funkcji – parser nie musi przetwarzać reszty kodu. Z kolei w drugiej, mimo iż to co znajduje się w bloku else się nie wykona i tak musi zostać przeczytane przez PHP. Jak jest w rzeczywistości? Sprawdźmy to!

Pierwsza konstrukcja, w której po spełnieniu warunku wykluczającego dalsze przetwarzanie, od razu zwracamy wartość jest na pewno bardziej przejrzysta. Nie musimy ciągnąć za sobą nawiasu kończącego blok else przez całą resztę instrukcji. Drugi fragment kodu z kolei charakteryzuje się bardziej logiczniejszą strukturą – gdyż wyraźnie widzimy co się stanie w przypadku spełnienia warunku jak i jego odrzucenia.

Przejdźmy zatem do testów. Przygotowałem na tą okazję dwie, identyczne pod względem działania, funkcje korzystające z dwóch w/w konstrukcji zapisu:

function test_return($arg)
{
  if ($arg % 2 == 0)
  {
    return 0;
  }
  $arg = $arg*7+2;
  $a = $arg+3;
  $b = 1024;
  $arg = $a - $b*$arg;
  $arg =- 500;
  $arg *= 2;
  return $arg+256;
}

…oraz:

function test_else($arg)
{
  if ($arg % 2 == 0)
  {
    return 0;
  }
  else
  {
    $arg = $arg*7+2;
    $a = $arg+3;
    $b = 1024;
    $arg = $a - $b*$arg;
    $arg =- 500;
    $arg *= 2;
    return $arg+256;
  }
}

Jak można zauważyć, funkcje te nie mają zbytniego sensu, nie mniej ich głównym celem jest odrzucanie liczb parzystych a przetwarzanie jedynie nieparzystych.

Procedura testowa polegała na wykonaniu jednego miliona iteracji każdej z funkcji, podając kolejne liczby całkowite jako argument poczynając od 0.

for ($i = 0; $i < 1000000; $i++)
{
  test_return($i);
}

Wyniki jakie otrzymałem prezentują się następująco:

Jak widać, wyniki są identyczne. W praktyce występowały pewne wahania w zależności od wywołania skryptu, nie mniej średnio, obie funkcje wykonują się w tym samym czasie. Nie ma więc znaczenia jakiego typu konstrukcji użyjemy – najlepiej tej która bardziej nam w danej chwili odpowiada.

Dlaczego tak się dzieje? Przyczyny braku różnicy w czasie wykonania można dopatrywać się tym, iż parser PHP bądź co bądź musi przeczytać całą zawartość skryptu przed jego kompilacją i uruchomieniem. Skompilowany kod jednej i drugiej funkcji nie różni się zatem niczym, co mogło by w istotny sposób wpłynąć na czas jego wykonania.

Zdecydowana większość systemów reklamowych opiera się na załączaniu zewnętrznego kodu JavaScript, który w przypadku wolnego serwera dostawcy reklam, może powodować niepotrzebne spowalnianie ładowania się naszej strony. O ile w sytuacji takich gigantów jak Google AdSense nie mamy się o co martwić, to przy korzystaniu z usług innych podmiotów czy też systemów pośredniczących (np.: OpenX), może warto zastanowić się jak pozbyć się tego problemu i nie opóźniać pokazania treści tylko przez reklamę. Zniecierpliwiony użytkownik naszej witryny może ją po prostu opuścić zanim zdąży cokolwiek zobaczyć.

Przedstawione rozwiązanie problemu jest stricte teoretyczne, gdyż docelowa implementacja zależy od konkretnego przypadku, a osoby które zajmują się tworzeniem stron internetowych na pewno będą wiedziały jak przenieść to na własny grunt.

Załóżmy hipotetyczną budowę naszej witryny w następującej postaci:

Przykładowy kod takiej witryny mógł by wyglądać w następujący sposób:

<div id="header"></div>
<div id="advert"></div>
<div id="content"></div>

Jeśli nie chcemy aby warstwa reklamowa blokowała pojawienie się treści, wystarczy że przeniesiemy ją na sam koniec. Ktoś powie – ok, ale w tym wypadku reklama powędruje na dół strony. Musimy zatem zastosować pewną sztuczkę. Mianowicie, zwiększamy dolny margines warstwy nagłówka o wartość wysokości sekcji reklamowej, tak aby powstała pusta luka. Z kolei warstwę z reklamą, pozycjonujemy w sposób absolutny (position: absolute;) przy pomocy stylów, umieszczając ja w otrzymanej wnęcę.

<div id="header" style="margin-bottom: 50px;"></div>
<div id="content"></div>
<div id="advert" style="position: absolute; top: 200px; height: 50px;"></div>

Tym sposobem, przeglądarka wyświetlając stronę, najpierw pokaże nagłówek, treść a dopiero na samym końcu reklamę – ale w odpowiednim miejscu. Jeśli ta z jakichś powodów nie będzie w stanie się wyświetlić (padnie serwer reklamy), to nie spowoduje to blokowania treści.

Oczywiście to co znajduje się pod reklamą, np.: stopka strony, nie pokaże się dopóki nie zostanie pobrana reklama, nie mniej, nie jest to tak istotny element w stosunku do treści po którą sięga odwiedzający witrynę.

Rozwiązania tego nie możemy zastosować w sytuacji w której odległość warstwy z reklamą jest zmienna w stosunku do początku strony, gdyż w tym momencie nie jesteśmy w stanie pozycjonować warstwy przy pomocy atrybutu absolute. Metodę tą stosuje z powodzeniem na dwóch swoich stronach i spisuje się znakomicie – cotozaplik.pl oraz checksum.me.

Przyczyną tego stanu jest sposób w jaki przeglądarka pobiera kolejne zasoby dołączone do odwiedzanej strony. Łącząc wszystkie drobne grafiki w jeden większy plik, a następnie przy pomocy stylów CSS wybierając interesującą nas część, możemy znacznie przyspieszyć ładowanie takiej strony.

Jak działa przeglądarka?

Otwierając dowolną stronę www, uzyskujemy od serwera treść dokumentu HTML, to czy jest on statyczny czy generowany dynamicznie (przez np.: php) nie ma w tej chwili znaczenia, która jest parsowana i wyświetlana przez przeglądarkę. Jeśli ta napotka na swej drodze zewnętrzne zasoby w postaci stylów CSS, skryptów JavaScript czy też grafikę rozpoczyna ich pobieranie.

W czym tkwi problem?

Na nieszczęście, z uwagi na fakt iż protokół HTTP jest protokołem bezstanowym, każde pobranie zasobu poprzedzone jest otwarciem gniazda TCP, nawiązaniem połączenia, pobraniem danych oraz zamknięciem połączenia. Stwarza to pewien narzut w postaci danych oraz czasu. Jeśli mamy do czynienia z dużymi plikami, przykładowo zdjęciami, nie jest to tak istotne. Z kolei jeśli naszą stronę ozdabiają różne drobne elementy graficzne, wtedy ów narzut nie tyle przekracza rozmiar zasobu co wprowadza niepotrzebne opóźnienia, gdyż samo nawiązanie sesji TCP trwa dłużej niż pobranie piku.

Jak temu zaradzić?

Dobrym rozwiązaniem jest scalenie wszystkich elementów graficznych w jeden plik, np.: w postaci kolumny obrazków. Ktoś może powiedzieć, jaki w tym zysk skoro i tak przeglądarka musi pobrać tą samą ilość danych? Zgadza się, jednakże zyskujemy mnóstwo czasu na narzucie związanym z tworzeniem połączenia i jego kończeniem dla każdego zasobu z osobna. Co to oznacza w praktyce? Znacznie szybsze ładowanie strony. Oczywiście opłacalność zabiegu w dużej mierze zależy od ilości grafiki klasyfikującej się do scalenia.

A w praktyce?

Przejdźmy zatem do części praktycznej. O ile samo scalenie obrazków nie powinno stwarzać problemów o tyle ich późniejsze wykorzystanie może rodzić pytania. Jak „wyciąć” grafikę na której nam zależy? Oczywiście stosując odpowiednią klasę stylów kaskadowych. Najprostszym sposobem jest używanie obrazków jako tło którym jest nasz zbiorczy plik graficzny, przesunięty o żądaną ilość pikseli.

Zastosujmy teraz zdobytą wiedzę do stworzenia menu strony składającego się z etykiet tekstowych oraz ikon. Potrzebny nam będzie zestaw stosownych obrazków oraz odpowiednie style zastosowane do menu. Zacznijmy jednak od napisania samego kodu HTML:

<ul class="menu">
  <li class="home">Strona główna</li>
  <li class="mail">Kontakt</li>
  <li class="download">Pobierz</li>
  <li class="tools">Narzędzia</li>
</ul>

…kolejno arkusza stylów:

.menu
{
  list-style: none;
  color: #404040;
  font: bold 16px Arial;
}
.menu li
{
  float: left;
  height: 24px;
  line-height: 24px;
  padding: 0px 30px;
}
.home     { background: url(icons.png) 0px   0px no-repeat; }
.mail     { background: url(icons.png) 0px -24px no-repeat; }
.download { background: url(icons.png) 0px -48px no-repeat; }
.tools    { background: url(icons.png) 0px -72px no-repeat; }

…jeszcze dodajmy tylko użyty zestaw ikon:

…i cieszmy oko gotowym menu:

Jak widać, cała zabawa polega na odpowiednim przesunięciu tła tak aby trafić w interesujący nas punkt. Każda ikona ma rozmiar 24x24px, zatem musimy wymusić wysokość elementu menu właśnie na 24px, tak aby sąsiednie obrazki nie były widoczne.

Co zrobić w sytuacji w której mamy dużo rysunków o różnych rozmiarach? Można scalać je podobnie, jednakże lepszym wyjściem jest pogrupowanie identycznych pod względem rozmiaru w osobne pliki.