Scott Tiger Tech Blog

Blog technologiczny firmy Scott Tiger S.A.

Archiwum dla Sierpień, 2012

Navigation Timing

Autor: Piotr Karpiuk o 3. sierpnia 2012

Pomiędzy kliknięciem przez internautę linku na stronie WWW a pojawieniem się na ekranie docelowej strony (czytaj: między ustami a brzegiem pucharu) zachodzi wiele zdarzeń, których pomiar czasowy jest interesujący z punktu widzenia webmastera zainteresowanego optymalizacją swojej witryny. Oprócz samej transmisji danych mamy jeszcze do czynienia m.in. z ewentualnymi przekierowaniami, przeszukiwaniem DNS, a nade wszystko istotnym dla webmastera procesem renderowania odebranych od serwera danych.

Navigation Timing to mechanizm wyspecyfikowany przez W3C a zaimplementowany już w większości przeglądarek, pozwalający na dostęp z poziomu JavaScriptu na stronie WWW do wyników bardzo dokładnego, nieinwazyjnego pomiaru czasu tych wszystkich zdarzeń związanych z ładowaniem strony.

Ile

Obiekt window.performance.timing zawiera właściwości (tutaj przykładowe wartości, czyli liczba ms od 1970-01-01, 0 oznacza „nie dotyczy”):

  connectEnd: 1345162846490                     loadEventStart: 1345162846538                
  connectStart: 1345162846490                   navigationStart: 1345162846490               
  domComplete: 1345162846538                    redirectEnd: 0                               
  domContentLoadedEventEnd: 1345162846538       redirectStart: 0                             
  domContentLoadedEventStart: 1345162846538     requestStart: 1345162846490                  
  domInteractive: 1345162846538                 responseEnd: 1345162846534                   
  domLoading: 1345162846534                     responseStart: 1345162846490                 
  domainLookupEnd: 1345162846490                secureConnectionStart: 0                     
  domainLookupStart: 1345162846490              unloadEventEnd: 0                            
  fetchStart: 1345162846490                     unloadEventStart: 0
  loadEventEnd: 1345162846538

Przystępny opis poszczególnych pól można znaleźć na stronie Microsoftu, ale być może lepiej spojrzeć na rysunek:

Czytaj więcej »

Napisany w JavaScript, WWW | Brak komentarzy »

Cross-Origin Resource Sharing (CORS)

Autor: Piotr Karpiuk o 1. sierpnia 2012

W miarę rozwoju Internetu coraz większego znaczenia nabiera współdzielenie zasobów, a także aplikacje agregujące dane pochodzące z różnych źródeł. Aplikacje webowe typu mashup udostępniają na jednej stronie WWW dane pochodzące z różnych serwerów, np. na jednym pulpicie użytkownik może mieć kursy walut, prognozę pogody, program telewizyjny itp. Jeszcze do niedawna implementacja takich witryn napotykała spore problemy za sprawą polityki bezpieczeństwa JavaScriptu. Chodzi o zasadę same origin policy, która utrudnia skryptom strony WWW komunikację się z innymi serwerami niż ten, z którego pochodzi witryna. Twórcy aplikacji webowych rozwiązywali ten problem albo niewydajnie (gdy serwer witryny służy przeglądarce jako pośrednik w komunikacji z innym serwerem), albo uciekając się do podejrzanych hakerskich technik w rodzaju JSONP.

Rozszerzenie AJAXa obecne już od dłuższego czasu we współczesnych przeglądarkach udostępnia mechanizm Cross-Origin Resource Sharing (CORS), znacznie upraszczający cały proces.

Rozważmy taki scenariusz: serwer api.alice.com udostępnia dane, z których chce skorzystać aplikacja webowa umieszczona na api.bob.com.

Z punktu widzenia programisty JavaScript wywołanie AJAX CORS wygląda tak jak komunikacja z macierzystym serwerem:

          xhr.open('GET', 'http://api.alice.com/cors', true);
          xhr.withCredentials = true;
          xhr.send();

(Opcjonalnie można ustawić własność withCredentials obiektu XHR, aby spowodować żeby w zleceniu do zdalnego serwera poszły również ciasteczka domeny api.alice.com i żeby ta domena mogła ustawiać ciasteczka. Trzeba nadmienić, że w przeciwieństwie do samej przeglądarki kod JavaScriptu aplikacji api.bob.com nie będzie miał dostępu do ciasteczek domeny api.alice.com – ani w postaci nagłówków HTTP, ani w document.cookie).

Różnice w porównaniu ze zwykłym zleceniem AJAX do macierzystego serwera występują w nagłówkach HTTP automatycznie wysyłanych przez przeglądarkę:

        Origin: http://api.bob.com

Czytaj więcej »

Napisany w JavaScript, WWW | Brak komentarzy »