H5开发中常见的性能优化

1、H5页面scroll滚动在iOS设备上抖动及安卓显示不完整优化

场景一:

这种情况下就删除heigth:100%,调整样式如下

.news-list {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  }

场景二:
滚动过程中ref回调refScroll中使用了大数据量计算导致

场景三:
检查页面是否有多个滚动条引起,chrome去除移动模式可以看到具体有多少个滚动条

场景四:

页面中有使用自动滚动组件,在页面滚动时禁止组件内滚动即可.

.am-notice-bar-marquee.scroll{
  right: 0 !important;
}

    refScroll(el) {
      super.refScroll(el);
      if ($('html').hasClass('theme-white')) {
        $(el).off("scroll", this.scrollFn).on("scroll", this.scrollFn);
      }
    }

    scrollFn() {
      $('.am-notice-bar-marquee').addClass('scroll');
      clearTimeout(this.time);
      this.time = setTimeout(() => $('.am-notice-bar-marquee').removeClass('scroll'), 1000);
    }
    

强制固定位置即可

安卓显示层级过多忽隐忽现显示不全
渲染层级过多出现页面显示不可控制,解决方案减少cpu渲染压力将未显示层级进行隐藏

if (bool) {
     $(".container-pages").css("display", "none")
     $(".container-pages:last").attr("style", "");
} else {
     $(".container-pages").attr("style", "");
}

2、首屏显示空白页时间过长优化

(1)第三方首屏无用js异步加载

<script async src="http://pingjs.qq.com/mta/app_link_h5_stats.js" name="MtaLinkH5"></script>

(2)第三方css本地化处理,防止阻塞首屏页面渲染及阻塞其后面的js语句的执行
(3)加入首页数据缓存及骨架屏处理

3、样式结构优化

• 动画实现过程中，启用GPU硬件加速:transform: tranlateZ(0)
• 为复杂动画元素新建图层,提高动画元素的z-index
• 不要一条一条地修改DOM的样式，预先定义好class，然后修改DOM的className
• 元素位置移动变换时尽量使用CSS3的transform来代替对top left等的操作
  变换（transform）和透明度（opacity）的改变仅仅影响图层的组合
• 将DOM离线后再修改, 由于display属性为none的元素不在渲染树中，对隐藏的元素操作不会引发其他元素的重排。

4、React优化

(1)使用key可以说已经成为React开发中的最佳实践了
原因是使用key能够让组件保持结构的稳定性。我们都知道React以其DOM Diff算法而著名，在实际比对节点更新的过程中带有唯一性的key能够让React更快得定位到变更的节点，从而可以做到最小化更新。

5、光标跳入父页面

但页面应用上下移动光标会跳入父页面中解决方法,给父页面加上如下样式

.@{container-prefix}-hide{
  display: none;
  pointer-events: none;
}

6、子页面滑动手势干扰父页面

子页面添加如下事件阻止冒泡

 $(e)
                .parents(".upload-modal")
                .on("touchstart", (e) => e.stopPropagation())
                .on("touchmove", (e) => e.stopPropagation())
                .on("touchend", (e) => e.stopPropagation());