JavaScript의 점진적인 향상?
https://stackoverflow.com/questions/1360412
-
20-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
대부분의 사람들은 현재 JavaScript (Enhanced Version)가있는 브라우저와 JavaScript가없는 브라우저 (간단한 버전)를 제공하는 브라우저를 제공하는 진보적 인 향상에 대해 이야기합니다.
그러나 브라우저 간의 JavaScript 성능에는 큰 차이가있어 브라우저 간의 JavaScript 기반 기능 중에서 선택을 지원하기 위해 해당 용어를 적용하는 것이 유용 할 수 있습니다.
불용하고 필수적인 기능 (및 애니메이션)이 수많은 복잡한 웹 앱에서,이 기능 세트는 모든 브라우저에서 작동해야하며 Chrome 및 Safari에서만 이러한 기능 세트가 작동해야합니다. 및 Firefox 및 Chrome, Safari 및 Opera 등의 특정 브라우저에서 특정 기능을 활성화하는 데 너무 느리기 때문에 이것.
때로는 사용자 경험이 특정 비 필수 기능에 액세스 할 수 없다면 개선 될 것 같은 느낌이 듭니다. 예를 들어, IE 사용자가 Chrome 사용자가 크기를 조정할 수있는 특정 패널을 크기를 조정하는 것을 허용하지 않습니다.
해결책
그것은 유지 보수 악몽처럼 들립니다.
HTML 버전을 갖는 것이 의미가없는 웹 애플리케이션이 있다는 것을 알고 있습니다. 즉, 가능한 경우 모든 페이지의 HTML 버전을 먼저 구축 한 다음 JavaScript를 사용하여 시작합니다. 향상시키다 사용자 경험.
IE는 JS와 관련하여 Safari, Chrome 및 FF보다 성능이 떨어지지 만 JS를 켜는 IE에서 사용할 수없는 페이지를 실제로 개발 했습니까? 나는 그것을 보지 못했습니다 - 야생에서는 다양한 JS 구현이 충분히 빠르다고 생각합니다.
다른 팁
나는 이것을 직접하지 않았지만 예산이 허용된다면 많은 의미가 있음을 알 수 있습니다 (그리고 사용자의 브라우저 선택을 제어 할 수 없습니다).
하루가 끝나면 IE 사용자는 느린 브라우저를 사용하고 있지만 여전히 사용자입니다. 따라서 모든 사용자에게 최상의 사용자 경험을 제공하려면 IE 사용자에게 다른 버전의 애플리케이션을 제공하여 더 높은 수준의 성능을 제공하는 데 시간을 소비하는 것이 좋습니다.
사용자의 99%가 빠른 응용 프로그램은 사용자의 30%에 불과한 응용 프로그램보다 의심 할 여지가 없습니다. 유일한 질문은 더 중요한 것입니다 - 사용자 경험 또는 개발 시간 (그리고 몇 년 안에 평균 사용자가 더 빠른 컴퓨터에서 더 빠른 브라우저를 실행할 것임을 고려하십시오).
내 경험은 코드의 일부가 느리고 코드의 일부가 빠른 속도에 종종 놀랄 것이기 때문에 그러한 작업은 벤치 마크에 의해 주도되어야합니다.
여담으로, Lombardi Blueprint GWT 이외의 비현실적이지만 매우 흥미로운 접근 방식이 있습니다. 여기에는 Java로 작성된 레이아웃 알고리즘이 있으며, 클라이언트 측 (GWT를 통해)과 서버 측 (표준 JVM을 통해) 모두에서 실행할 수 있도록 작성되었습니다. 결과적으로 브라우저의 벤치마킹 성능을 기반으로 클라이언트 측 (빠른 브라우저)에서 레이아웃을 수행하는 것과 서버 측의 레이아웃 (느린 브라우저)을 수행하는 것 사이를 동적으로 전환 할 수 있습니다.
요즘 브라우저와 관련된 두 가지 문제 :
속도. 제 경험은 IE 7이 나머지보다 훨씬 느리게 작동한다는 것입니다. 내 해결책은 사용자에게보다 빈번한 UI 진행 업데이트를 제공하는 것입니다. UI 업데이트에는 시간이 걸리므로 더 빠른 브라우저의 업데이트를 최소화합니다. 예를 들어, 즉 50 개의 이벤트를 처리 한 후 더 많은 피드백으로 화면을 업데이트합니다. 다른 브라우저의 경우 200 개의 이벤트를 처리 한 후.
기능 부족. 예를 들어 캔버스. 그러나 여러 사이트를 구축하는 것은 큰 비용입니다. 그리고 그들도 테스트하십시오. 그래서 나는 모든 데스크탑 브라우저에 대해 예산을 1 버전으로 소비합니다. 모바일 ESP iPhone 용 추가 사이트를 만듭니다.
HTH,
래리
내가하는 일은 공통 기능이있는 기본 JavaScript 파일을 작성하여 가장 낮은 분모 (JavaScript 1.5)로 이동하는 것입니다. 그런 다음 최근 버전의 JavaScript에 대한 다른 파일이 있으며, 이들은 JavaScript 객체의 기능을 대체하여 점차 더 많은 지원을 추가 할 수 있습니다.
캔버스 태그를 사용하려면 IE와 Firefox/Opera/Safari가 캔버스 요소를 만드는 방식이 다르기 때문에 다른 파일에 추가 할 수 있습니다.
이것은 유지 보수에 대한 기쁨이 아니지만 새로운 HTML/JavaScript 기능을 사용하려면 이것이 최고의 모델 인 것 같습니다.
나는 Andy와 동의합니다. 다른 브라우저에 다른 버전의 응용 프로그램을 제공하는 것은 도로의 잠재적 인 유지 보수 문제입니다. 나는 항상 모든 브라우저에서 작동하는 하나의 앱 버전을 제공하는 것이 더 나은 방법을 발견했습니다. 예를 들어, 브라우저 스 니퍼를 피하려고합니다. 응용 프로그램이 가장 멋진 것은 아니지만 모든 사람에게 적합하며 유지하기가 더 쉽습니다.
브라우저 차이 중 일부를 추상화하는 모든 Nifty JavaScript 라이브러리를 사용하면 이런 종류의 물건이 더 쉬워집니다. 게다가, 오래된 브라우저에서 많은 일을 할 수 있습니다. 방금 "다르게"완료되었습니다;)
따라서 괜찮은 크기의 응용 프로그램을 구축한다고 가정 해 봅시다. 브라우저 스니핑이 많은 기능이 켜져 있고 어떤 기능이 꺼질 것인지 결정할 수 있습니다. 당신은 오페라 9.x를 위해 스니핑했고, 지금 (오늘날) 오페라 10이 나옵니다. 모든 페이지에서 모든 스나이퍼를 업데이트해야합니다. 그리고 다른 브라우저가 곧 나옵니다 ... 그리고 다른 브라우저가 나옵니다. 당신은 당신이 지원하는 브라우저와 지원 할 기능을 결정하면서 모든 시간을 보내려고합니다.
나는 하루에 여러 브라우저를 사용합니다. 그래서 내가 당신의 사이트에 갈 때, 나는 세 가지 다른 인터페이스를 보게 될 것입니다. 내가 기대할 것으로 예상되는 기능이나 내가 기대하는 행동이 거기에 없기 때문에 혼란 스러울 것입니다. 결국, 나는 좌절하고 다시는 사이트로 가지 않을 것입니다.
또한 브라우저보다 JavaScript 조각이 얼마나 빨리 실행되는지에 더 많은 것이 있습니다. 나는 아직도 Firefox 3.5를 달리는 오래된 펜티엄이 있습니다. 때로는 고통스럽게 느릴 수 있습니다.
답은 코드를 브라우저 기능으로 분류하는 것이 아니라 속도 범주로 분류해야한다고 생각합니다.
다시 말해, 사이트 계층의 기능을 제공하십시오. 첫 번째 계층은 기본 HTML이고, 두 번째 계층은 JavaScript 사용성 개선, 세 번째 계층은 JavaScript 애니메이션 아이 캔디입니다.
그런 다음 사용자가 원할 때마다 "애니메이션을 끄려면 클릭하십시오!", "클릭하여 애니메이션을 켜려면 클릭하십시오!", "기본 HTML에서보기"를 클릭하고 기본값을 선택하는 것의 조합을 수행하십시오. 속도 이유에 대한 브라우저를 기반으로 한 특정 속도 카테고리 (예 : IE7이 전체 애니메이션으로 속도 문제를 증명하는 것처럼 보이면 두 번째 "JavaScript 사용성 개선"계층으로 기본값을 제공합니다).
