HTML5 Techniques for Optimizing Mobile Performance

모바일기기에서의 HTML5 웹애플리케이션 퍼포먼스 향상을 위한 기법들입니다.

HTML5 Techniques for Optimizing Mobile Performance

Hardware acceleration에 대한 설명과 CSS3를 사용해 페이지 전환효과를 주는 Sliding, Flipping, Rotating 의 예제 소스코드가 있습니다. 이 외에도 몇 가지 사항이 더 나오는데 제가 여기에서 처음 알게된 네트워크 접속상태 관련 속성에 대해서 말씀을 드리겠습니다.

  • navigator.onLine
  • window.ononline
  • window.onoffline
  • navigator.connection.type

위 속성들에 대한 테스트는 제 갤럭시S(진저브레드 2.3.4)에서 하였습니다. 그런데 모바일 브라우저들의 자바스크립트 속성 지원여부는 폰마다 제조사마다 조금씩 다른 편이기 때문에 다른 폰에서는 아래의 테스트 결과와 다를 수도 있습니다.

먼저, navigator에 onLine 이라는 프로퍼티가 있습니다. 이 프로퍼티가 true이면 현재 인터넷에 연결이 가능한 상태입니다.

alert(navigator.onLine);		// true 또는 false

window에 online 이벤트와 offline 이벤트가 있습니다. 먼저 제 폰 브라우저의 window에 각 이벤트가 있는지 확인해보고 아래와 같은 이벤트 리스너를 등록하고 테스트해보았습니다.

alert('ononline' in window);		// true, online 이벤트 있음
alert('onoffline' in window);	// true, offline 이벤트 있음

window.addEventListener('online', function () {
	alert('online');
}, false);

window.addEventListener('offline', function () {
	alert('offline');
}, false);

현재 네트워크에 연결된 상태라 하더라도 online 이벤트는 최초 페이지 로딩시에는 발생하지 않았습니다. 그리고 비행기 탑승모드로 진입하여 네트워크 연결을 끊었습니다. 그런데 기대했던 offline 이벤트는 발생하지 않았습니다. 그리고 비행기 탑승모드를 해제하여 다시 네트워크를 연결하였습니다. 그때 ‘online’ 이라는 alert가 떴습니다. window의 online 이벤트는 발생하는 것으로 생각됩니다. 그런데 잠시 뒤에 ‘online’ alert이 한 번 더떴습니다. 이벤트가 두 번 발생한 것으로 생각됩니다. 뭔가 아직 안정되진 않은 것 같습니다.

navigator에 connection 이라는 프로퍼티가 있습니다. 여기에 type이라는 프로퍼티가 있는데 이 값을 가지고 현재 폰이 연결된 네트워크의 종류를 알 수 있습니다.

  • UNKNOWN : 0
  • ETHERNET : 1
  • WIFI : 2
  • CELL_2G : 3
  • CELL_3G : 4

제 폰에서 navigator.connection.type의 값을 확인해본 결과 3G 접속상태에서는 UNKNOWN을 의미하는 0이 나오고 WIFI 접속상태에서는 값이 2로 제대로 나왔습니다. 3G를 잘 못찾는 것으로 봐서 navigator.connection.type 속성도 아직 안정되진 않은 것 같았습니다.