3

일반적으로 내 HTML 코드는 Javascript 또는 CSS로부터 깨끗하고 의미 론적이며 무료입니다. 내 .JS 및 .CSS 파일을 맨 위에 포함하고 레이어 기능을 DOM 요소 위에 포함합니다. 이것의IE 6 성능 대 깨끗하고 눈에 잘 띄지 않는 자바 스크립트

긍정적는 다음과 같습니다 우려의

  • 건축 분리가 자바 스크립트 나 CSS가 지원되지 않는
  • 우아한 저하는 검색 엔진 친 화성이 큰 하나

  • 있습니다
  • 음수 :

    • IE6의 성능 문제

    DOM에 액세스하는 Javascript 코드를 통해 모든 이벤트가 요소에 연결되므로 IE의 성능이 저하됩니다.

    이것은 특히 jQuery (내가 좋아하는 Javascript 프레임 워크 인 경우)를 사용할 때 특히 그렇습니다.

    두 가지 선택이있는 것 같습니다. 코드를 멋지게 유지하고 사용자 6 명 (사용자 기반의 약 20 %)이 불평하거나 IE 6을 개선하는 코드를 "de-normalize"합니다. 공연.

    이 상황에 "중간"이 있습니까? 아니면 내가 운명이야?


    참고 : 성능상의 문제는 자바 스크립트를 별도의 파일로 인해 발생했다고는 말할 수 없습니다.

    별도의 파일에 보관하면서 IE에서 멋진 성능을 얻을 수 있습니다.

    문제는 HTML의 'onclick'속성에 실제 이벤트 핸들러를 추가해야한다는 것입니다. 예를 들어 : 난 그냥 쓸 수 있다면

    <span onclick="doSomething()">More...</span> 
    

    그것은 훨씬 더 좋은 것 :

    <span id="more-button">More...</span> 
    

    을 그리고 다음으로, 자바 스크립트, 별도로 할당 :

    $("#more-button").click(doSomething); 
    

    를 불행하게도, 이것은 IE6 성능에 좋지 않은 것 같습니다.

    +1

    이벤트 처리기 첨부 메커니즘이 느려지고 있다는 증거가 있습니까? 선택자는 얼마나 복잡한가요? 선택기가 통과하는 DOM은 얼마나 복잡합니까? 수백 개의 DOM 요소와 이벤트 핸들러가 없다면'attachEvent'가 진정한 범인이되는 것을 보지 않기 때문에 묻습니다. jQuery의 이벤트 시스템은 그다지 훌륭하지 않지만, 너무 느려서는 안됩니다. –

    답변

    3

    YUI Theater에서 사용할 수있는 talk에서 Joseph Smarr은 성능에 대해 이야기하고 DOM 요소를 찾아 이벤트 처리기를 연결하는 대신 성능상의 이유로 코드에 onmousedown 처리기 등을 사용하는 것이 좋습니다. . 그러나, 나는 어떤 것들이 속도를 높이는 조치를 모릅니다. 눈에 거슬리지 성능 부스트를위한 다른 기술 (EIDT : 따라서 IE에 국한되지, 그들은 브라우저 독립적 참고)이다

    • 사용 onmousedown 대신 onclick. Smarr은 두 사건의 해고 사이에 100ms 정도의 기간이 있다고 말합니다.
    • 인식 성능의 경우 : window.setTimeout(visualFeedback, 0)을 사용하여 시각적 피드백을 즉시 제공하십시오. 이를 통해 브라우저는 그래픽 변경 사항을 즉각적으로 그려 사용자에게 어떤 일이 일어나고 있음을 알릴 수 있습니다.
    • DOM을 탐색해야 할 때 중간 결과를 변수에 캐시하여 재사용합니다.

    첫 번째 두 점의 이점을 보여주는 demo도 있습니다. 상단의 버튼은 onclick이고 정상적인 실행은 아래에있는 버튼은 onmousedownsetTimeout(func, 0)입니다.

    +0

    아니요, 위의 향상에 대해 몰랐습니다. 말해 주셔서 감사합니다. 내 HTML 코드를 어지럽히 기보다는이를 사용하는 것이 좋습니다. – Jonathan

    +0

    나는 onclick을 위해 100ms 지연이 있다는 것을 확신하지 못한다. 나는 지연이 단지 1 대신에 마우스를 클릭 할 때 2 액션을 취해야한다는 사실에 불과하다고 생각한다. – Alex

    +0

    아, IE의 실제 기술적 결함이 아닐까? – Jonathan

    1

    자바 스크립트 코드를 별도의 파일에 넣기 때문에 성능 문제가 있다고 생각하지 않습니다. 나는 그렇게한다. 많은 사람들이 그렇게한다 ... 그렇게하는 것이 가장 좋은 방법이라고 생각한다.

    JQuery에는 성능 문제가 있습니다. 그것은 한 곳을 볼 수 있습니다. 당신이 볼 필요가있는 다른 장소는 자바 스크립트 코드 자체입니다. 그것을 보지 않고서는 애플리케이션을 더 잘 수행 할 수 있도록 도와 줄 수 없습니다.

    +0

    위의 "메모"를 참조하십시오. – Jonathan

    +0

    당신이 언급 한 나쁜 성능 - 이벤트 핸들러를 연결할 때 페이지가로드됩니까? 또는 이벤트가 처리되는 시점입니까? –

    +0

    좋은 질문입니다. 결정하기가 어렵습니다. 방금 dynaTrace라는 제품을 설치했습니다. 그것은 약간의 빛을 발산하기를 바란다. – Jonathan

    0

    코드가 브라우저에서 실행되고 IE6에서 성능이 좋지 않으면 운이 좋은 것입니다.

    정말 오래된 동물을 무시하십시오!

    코드가 대부분의 브라우저에서 완벽하게 실행되고 IE6이 실행할 수 없기 때문에 속도를 늦춰야하는 경우 해당 IE6 사용자에게 메시지를 표시하거나 모든 브라우저에서 성능이 좋지 않아야합니다.

    하지만 상황은 간단하고 직설적 인 것처럼 보입니다. 문제되지 않는다! IE6은 죽었을 것입니다! 일부 대형 웹 사이트에서도 IE6 사용자에게 업데이트 공지를 표시하기 시작했습니다. 그들의 보통 내용 대신에, 그것은 쓰레기이기 때문에 더 이상 그것을지지하지 않습니다!

    +2

    예, 사용자의 20 %를 무시하십시오 ... -1 – Martin

    +0

    IE 성능 조정 때문에 코드가 더 느리게 실행되지 않습니다. 그건 문제가 아니야. 문제는 IE 성능 튜닝이 우려의 분리를 깨고 SEO를 어렵게 만든다는 것입니다. 그래서 내 질문은, 나는 A) 깨끗한 코드 또는 B) IE 성능 중 하나를 선택해야합니까? 아니면 둘 다 가질 수있는 방법입니까? – Jonathan

    +0

    @Martin : 예, 20 %의 사용자를 무시합니다. 소프트웨어가 싫증나고 퇴화시켜야한다는 메시지를 표시합니다. 예, 예, 예. 포인트. @ janathanconway : 여전히 IE에서 실행되는지 확인하려면 A를 선택하십시오. 2002 년 브라우저를 실행하는 사용자는 성능에 대해 중요하지 않습니다! IE6은 단지 짜증이 난다. 2002 년에도 더 나은 대안이 있었다. 당시 MS는 전쟁에서 승리했고 독점 꿈을 꾸고있었습니다. – Frunsi

    관련 문제