2013-09-30 2 views
3

약 1400 개의 항목이있는 목록에 selected.js를 사용하려고합니다. 선택한 초기화 코드를 실행하는 데 약 1.5 초가 걸립니다.Chosen.js 성능

이가에 단순히 html: option.text 선택한 플러그인이 여전히 필요에 따라 작동하는 것 같다 설정되어있는 경우 SelectParser.prototype.add_option()에 느린 부분은 html: option.innerHTML

this.parsed.push({ 
    array_index: this.parsed.length, 
    options_index: this.options_index, 
    value: option.value, 
    text: option.text, 
    html: option.innerHTML, // <======= here 
    selected: option.selected, 
    disabled: group_disabled === true ? group_disabled : option.disabled, 
    group_array_index: group_position, 
    classes: option.className, 
    style: option.style.cssText     
    }); 

것을 아래로 추적하게한다.

& 성능 향상을위한 다른 정보를 변경하면 다른 의미가 있습니까?

+0

어떤 브라우저에서 1.5 초가 걸리나요? 1400 항목은 실제로 데이터/html의 양이 많기 때문에 선택한 초기화 속도를 상당히 늦출 수 있습니다. ajax 솔루션 (자동 완성과 함께)을 고려해야하며 자세한 내용은 다음 링크를 확인하십시오. http://stackoverflow.com/questions/12044330/jquery-chosen-plugin-dynamically-populate-list-by-ajax. JS DOM 조작은 많은 브라우저에서 매우 느리며 데이터를 분할하는 것이고 프론트 엔드와의 상호 작용을 피하는 가장 좋은 방법입니다. –

답변

2

HTML 직렬화는 일반적으로 느린 동작이지만, 두 번째 지연보다 더 많은 것으로 추정되는 것은 놀랍습니다. 실행 한 빠른 테스트에서는 Firefox 33과 Chrome 38에서 option.innerHTML을 실행하면 5000 밀리 초가 걸리므로 다른 브라우저도 비슷하게 동작해야합니다. 그래서 나는 당신이 문제의 출처를 잘못 확인했다고 의심합니다.

옵션의 서식이 손실됩니다
  1. , chosen.js는 순수한 텍스트가 표시됩니다

    어느 쪽이든, 당신의 변화는 두 가지 의미가 있습니다. 대부분의 시간 옵션이 인 경우 순수 텍스트 만 제공되므로 걱정할 필요가 없습니다.

  2. 옵션 텍스트가 HTML 코드로 삽입됩니다. 이로 인해 <과 같은 특수 문자가 사용될 때마다 문제가 발생합니다. 이는 잠재적 인 보안 문제 원인 (XSS)이기도합니다. 이를 막으려면 코드에 다음을 포함시켜야합니다.
html: option.text.replace("&", "&amp").replace("<", "&lt;").replace(">", "&gt;"), 
+0

적어도 내 스크립트는 조금 빠릅니다. – Peter