我们创建了另外一个指令，用来阻止对隐藏元素的监视，这个指令支持优化#1，相较于原数据，我们多了更多的隐藏DOM节点，所以必须消除对多出来的DOM节点的监视。这也支持优化#3，让推迟单词节点的创建更加容易。因为直到这行数据的tokenized版本出现我们才会创建他 。
下面的代码就是所有的优化后的样子，我们自定义的指令是粗体显示。
<span sly-repeat='line in logLinesToShow' sly-evaluate-only-when='logLines'> <div ng-mouseenter=”mouseHasEntered = true”> <span ng-show='!mouseHasEntered'>{{logLine | formatLine }} </span> <div ng-show='mouseHasEntered' sly-prevent-evaluation-when-hidden> <span sly-repeat='tokens in line'>{{token | formatToken }}</span> </div> </div> </span>
Sly-repeat 是ng-repeat的变体，用来隐藏多出来的DOM元素而不是销毁他们，sly-evaluate-only-when阻止内部change watchers除非“logLines”变量修改，sly-prevent-evaluation-when-hidden主要负责当鼠标移动到指定行的上面的时候，隐藏的div才显示。
这里展示出了AngularJS对于封装和分离的控制力，我们做了复杂的优化但是并没有影响模板的结构(这里展示的代码并不是真正产品里的代码，但是他展示了所有的要点)。
结果：
我们来看一下效果，我们添加了一些代码来衡量，从鼠标点击开始，一直到Angular's $digest循环结束(意味着更新DOM结束)。
我们衡量点击”下一页“按钮的性能是通过Tomcat日志，环境用的是MacBook Pro上的Chrome，结果见下表(每个数据都是10次测试的平均值)：
数据已经缓存
从服务器获取数据
简单实现
1190 ms
1300 ms
优化后
35 ms
201 ms
这些数据不包括浏览器用在DOM布局和重绘(JavaScript执行完成后)的时间，每次大概30毫秒。尽管如此，效果也显而易见；下一页的响应时间从1200毫秒骤降至35毫秒(如果算上渲染是65毫秒)。
“从服务器获取数据”里的数据包括了我们使用AJAX从后端获取log数据的时间。这个跟点击下一页按钮不同，因为我们预取下一页的log数据，但是或许适用于其他的UI响应。即使这样，优化后的程序也可以做到实时更新。
您可能感兴趣的文章: