Strona główna > Internet Explorer > IE 11 DEV-mały przybornik dla schludnego programisty

IE 11 DEV-mały przybornik dla schludnego programisty

Każdy programista wie, że jego kod świadczy o nim, jego wiedzy, doświadczeniu, zdeterminowaniu i otwartości na nowości. W poprzednim odcinku pokazywałem narzędzie, które analizuję stronę w momencie kiedy chcemy – jasno musimy oznaczyć początek-koniec, a efekt końcowy to dużo wykresów, literek I zestawień.

Czasem nie potrzebujemy aż tyle, po prostu potrzebujemy wiedzieć jak Nasza strona radzi sobie z obciążeniem. Do tego powstał miły, prosty, mały pasek narzędziowy, który możemy uruchomić skrótem klawiaturowym CTRL+SHIFT+U

image

Teraz popatrzmy na złośliwy kod:

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>

<script>

function lekkiStres() {

for (var i = 0; i < 100000; i++) {
var liczymy = Math.sqrt(i) + Math.log(i);
}

}


</script>

<button onclick="lekkiStres()">Lekki stres</button>

</body>
</html>

Kod jest przygotowany specjalnie w ten sposób, by dużo liczyć przez chwilę. To co chcemy wykazać to to czy strona jest responsywna dla użytkownika – to oznacza czy renderuje 60 klatek na sekundę, czy jest dostępna dla “dotyku” i myszki.

Jak zaczniemy klikać nagle okaże sie, że ilość klatek leci w dół, aż do liczby 2, 3, a nawet 0!!! to jest niedopuszczalna sytuacja.

image

dodatkowo możemy przyglądać się tylko jednej z metryk, ale bardziej szczegółowo. W tym celu należy kliknać poszczególny kwadrat z statystyką.

Czas rysowania nowych elementów na stronie w sekundach

image

Ilość klatek, jakie są renderowane – na bieżąco – bardzo dobrze widać przeszkadzający skrypty w tle

image

Zużycie pamięci

image

Poziomzużycia procesora

image

Poniżej prezentuję ekstremalna sytuację, w której przeglądarka zgłasza… że skrypt JavaScript zamroził ją (zawiesił)… tego własnie chcemy się wystrzegać im prędzej się da – dlatego obserwujmy cyferki na wczesnym etapie prac programistycznych.

image

  1. Brak komentarzy.
  1. No trackbacks yet.

Skomentuj

Wprowadź swoje dane lub kliknij jedną z tych ikon, aby się zalogować:

Logo WordPress.com

Komentujesz korzystając z konta WordPress.com. Log Out / Zmień )

Zdjęcie z Twittera

Komentujesz korzystając z konta Twitter. Log Out / Zmień )

Facebook photo

Komentujesz korzystając z konta Facebook. Log Out / Zmień )

Google+ photo

Komentujesz korzystając z konta Google+. Log Out / Zmień )

Connecting to %s

%d blogerów lubi to: