快应用

Appearance

性能优化 ​

智能电视机器普遍性能较低，应用尤其要注意性能优化，以下是一些优化建议。

减少dom层级 ​

注意合理安排dom排布以减少层级，一般情况下，层级越深，加载及渲染的速度都会越慢。

点击查看源码
html
<!--1-->
<div>
    <div>
        <div>
            <p>hello</p>
        </div>
    </div>
</div>
<!--2-->
<div>
    <div></div>
    <div></div>
    <p></p>
</div>

上述例子中，同样的节点数，2相对1，性能更好。

懒加载 ​

对于任意节点通常采取不加载、懒加载、取消加载的策略，

即能不加载就不加载、能晚加载就晚加载，可以取消的任务一定要cancel。

点击查看源码
javascript
    data(){
        lazyLoad:true ,
        handle:null,
    }
      
    <div v-if="!lazyLoad">
        <heav_component/>
    </div>

    this.handle = setTimeOut(()=>{
        this.lazyLoad = false
    },200)

上述例子中，一个较重的组件,可以延迟200毫秒后加载

点击查看源码
javascript
    clearTimeOut(this.handle)

当上述例子中的节点无需加载时，注意cancel当前任务以提高性能

点击查看源码
javascript
    clearTimeOut(this.handle)
    this.handle = setTimeOut(()=>{
        //do something
    },200)

实际过程中一些重复性的动作可以用clearTimeOut和setTimeOut成对出现，来避免重复执行任务

ul 优化 ​

实际开发过程中，ul因其复杂性，是优化需注意的重点。

减少template运算 ​

在template中，一些无需实时计算的数据，尽量在拼装list阶段完成计算。例如：

点击查看源码
javascript
<ul>
  <li v-for="item in list">
    <div v-show="item.cornerType === 1"></div>
  </li>
</ul>

上述例子中的逻辑可以改成：

点击查看源码
javascript
<ul>
  <li v-for="item in list">
    <div v-show="item.isShowCorner"></div>
  </li>
</ul>
<script>
  this.list.map(item=>{
    item.isShowCorner = item.cornerType === 1
  })
</script>

通过上述转换，将运算逻辑放在数据拼装阶段，有利于提高性能。

dom分页加载 ​

当list中数据量过大时，可以考虑将dom加载分页，以减少同时创建多dom而导致的页面卡顿。

懒加载 ​

对性能要求较高时，可以结合使用ul的onBind事件，在一个view展示出来时才去加载dom.

点击查看源码
javascript
<ul>
<li v-for="item in list" @on-bind="onBindItem">
  <div>
    <div id="placeHolder"/>
    <div id="content" v-if="item.hasBind"/>
  </div>
</li>
</ul>

<script>
    onBindItem(e) {
      let i = e.position
      let item = this.list[i]
      item.hasBind = true
    },
</script>

图片 ​

由于图片占用内存较大，并且在加载及渲染时都会占用较多资源，所以在实际开发过程中，应尽量减少图片的大小。 尽量保证图片尺寸小于视图大小。

点击查看源码
javascript
<img style="width:100px,height:100px" src="img.jpg" />

上述例子中的img宽高是100,而图片则要尽量在100x100以内