얼마나 많은 데이터가 dom에 데이터 속성을 두어도 괜찮습니까?

때로는 동적 컨텐트에 대한 추가 AJAX 호출을 피하기 위해 페이지에 상당한 양의 데이터를 넣고 싶습니다. 내가하는 동안 조심해야하는 성능 패널티가 있다면 그렇게하는 동안 궁금해.얼마나 많은 데이터가 dom에 데이터 속성을 두어도 괜찮습니까?

출처

2013-05-03 idbentley

네 페이지가 커질 수 있습니다.로드하는 데 시간이 오래 걸립니다. 최소한 AJAX를 사용하면 spin.js와 같은 것을 사용하여 사용자가 페이지가 전혀로드되지 않는다고 생각하지 않게 할 수 있습니다. – Stephen

따라서 html5에는 엄격한 제한이 없습니다. 이는 부분적으로는 확실한 답변이지만, 성능에 미치는 영향에 대해서는 다루지 않습니다. – idbentley

@Stephen 그건 사실이지만, 또 얼마나 많은가. 페이지에 수 킬로바이트를 추가하면 페이지 로딩 시간에 영향을 미치지 않을 것으로 생각됩니다. 페이지가로드되면 성능에 더 많은 관심을 보였습니다. – idbentley

에서 HTML5 spec는 속성 데이터의 양에 제한이 없다 :

... 생성 된 DOM 트리의 깊이에 제한하거나, 태그 이름의 길이 에서 속성 이름 , 속성 값, 텍스트 노드 등을 포함 할 수 있습니다.

페이지를 렌더링하는 데 걸리는 시간은 콘텐츠의 길이에 따라 다르므로 속성에 저장된 많은 양의 데이터와 같이 추가 된 콘텐츠는 페이지를 느리게로드하십시오. 자바 스크립트로 데이터를 얻으려면 getAttribute() 데이터가 방대한 경우 더 느려질 수도 있습니다.

아약스 및/또는 서버 측 저장소 솔루션을 사용하면 필요에 따라 데이터를 검색 할 수 있으므로 HTML에 모든 것을 저장하는 것보다 훨씬 빠르게 수행 할 수 있습니다.

얼마 가량입니까? 그것은 당신이 데이터로 무엇을하는지, 어떤 종류의 데이터 등으로되어 있으며 대답하기가 거의 불가능합니다. 개발자는 유스 케이스 등을 기준으로 결정해야합니다.

출처

2013-05-03 22:12:51 adeneo

명확한 답변 : 그것이 달려 있습니다;) 주로 페이지의 데이터 양에 따라 달라집니다. 데이터로드 페이지와 초기로드 + 다른 서버 왕복의 초기 페이로드로드 수식을 수행해야합니다. 때로는 좀 더 나은 사용자 경험을 위해 일종의 기본/부분 페이지를 빠르게 제공하고 필요할 때 나중에 추가 콘텐츠를로드하는 것이 좋습니다 (지연로드 참조).

성능 테스트를 통해 올바른 대답을 얻을 수 있습니다.

이외에도 : 왜 dom에 데이터를 저장하나요? 클라이언트 측 데이터를 저장하는 가장 좋은 장소는 아닙니다. 왜 Javascript 변수를 사용하지 않습니까?

출처

2013-05-03 22:17:03

dom에 데이터를 저장하는 이유는 무엇입니까? 데이터는 템플릿을 그리는 시간에 사용할 수 있기 때문에 자바 스크립트를 컴파일 할 때는 사용할 수 없습니다. – idbentley

숨겨진 요소를 사용하여 속성 대신 데이터를 저장할 수 있으므로 속성과 비교하여 소비해야하는 이스케이프 및 인용의 양을 줄일 수 있습니다. 12 개의 작은 요청을 저장하면 발신자가 온라인에있는 동안 정보를 모두 한 번에 전송하는 것이 좋습니다. 또한 gzip 압축을 통해 토큰 풀을 생성 할 수있는 여러 개의 파일을 공통적으로 그룹화 할 수 있습니다. 번들 된 정보를 사용하면 AJAX가 제공하지 않는 페이지 내 콘텐츠의 SEO 이점을 얻을 수 있으며 반점이있는 연결에 대해서는 더 유리합니다. – dandavis

얼마나 많은 데이터가 dom에 데이터 속성을 두어도 괜찮습니까?

답변

관련 문제