[AngularJS] {{value}}의 렌더링 문제

AngularJS를 책으로 배우고 나서 그동안 jQuery로만  점점 늘어만 가는 자바스크립트 코드를 줄여줄 수 있는 괜찮은 프레임워크구나 생각을 했다.

막상 실무에 적용을 하고 보니 몇 가지 문제가 있었다.

1. 구 IE지원의 문제: 사실 프레임워크의 문제라기 보다 IE의 구현에 문제가 있지만 이미 사용하고 있으니 어떡한담.
  고객사에서 아직도 IE6를 사용하고 있다는 것을 들은 적이 있다. jQuery 2.x로 넘어가기 힘든 원인도 같은 맥락.

2. {{value}}로 값을 매핑할 수 있는데 가끔 이 값 자체가 화면에 보였다가 사라져서 난감 했다.

  현재 고객은 UI에 엄청 민감하다.

2번 사항에 대해 찾아보니 이미 많은 글들이 있었다.

URL을 정리해본다.

thierry.nicola

 Faster AngularJS Rendering (AngularJS and ReactJS) {{링크}} 2014.4.19

 AngularJS: My solution to the ng-repeat performance problem {{링크}} 2013.7.24

Improving AngularJS long list rendering performance using ReactJS {{링크}} 2014.6.20

Speeding up AngularJS apps with simple optimizations {{링크}} 2015.8.6

stackoverflow

 AngularJS really slow at rendering with about 2000 elements? {{링크}} 2014.9.9 => Angular JS 1.3+ One-time binding

  => One-time binding: https://docs.angularjs.org/guide/expression

 Render value without data-binding {{링크}} => data-ng-bind

 why ng-bind is better than {{}} in angular? {{링크}} => ng-cloak

  => ngClock : https://docs.angularjs.org/api/ng/directive/ngCloak

AngularJS Performance Tuning for Long Lists {{링크}}

시도

찾아만 보고 시도를 안하면 안되겠지?

다행히 사용하고 있는 라이브러리가 1.3.6이라서 1.3버전 이후에 등장한 원타임바인딩이 지원이 되었다.

기존에 {{value}}를 쓰고 있었다면 {{::value}}로만 바꿔주면 되어서 기계적으로 변경이 가능했다.

AngularJS의 장점중에 하나가 양방향 바인드인데 이게 부하를 많이 준다는 것 같다.

우선 바꾸어서 해보니 전에처럼 {{value}가 값으로 바뀌는 현상은 적어졌다. 문제는 그래도 가끔씩 나온 다는 것.

{{value}} 대신에 엘리먼트의 속성으로 data-ng-bind를 사용하는 것은 어떨까?

문제는 렌더링 도중에 외곽선 같은 존재에 대한 것이 보인다는 게 문제다.

그렇다면 CSS를 이용해서 앵귤러JS가 초기화 되기 전까지 안보이게 하면 안될까?
ng-cloak가 바로 그렇다. HTML에 angular-csp.css를 추가해주고 해당 엘리먼트에 ng-cloak이라는 속성을 지정하면 된다.

<link rel="stylesheet" type="text/css" href="angular-csp.css">