H5页面性能优化

---

sidebarDepth: 2
collapsable: true

h5页面性能优化

该部分内容主要整理了h5性能优化方案及常用工具的使用

优化方案

1、资源加载

1. 首屏加载

 

• 即在可见的屏幕范围内，内容展现完全，loading进度条消失

2. 按需加载

• 首先要明确，按需加载虽然能提升首屏加载的速度，但是可能带来更多的界面重绘，影响渲染性能，因此要评估具体的业务场景再做决定。 比如页面中使用到的图片，如果对应的视图部分没有显示出来，先不加载，等对应视图显示出来后再加载。

  Eg： 下面展示一个按需加载图片的逻辑

      // 页面加载完成时先调用一下，首屏内的图片。
      loadImg()
      document.addEventListener('scroll', function (e) {
       
      // 跟着滚动，继续加载剩下的图片
        loadImg()
      })
      function loadImg () {
       
      // slice可以将类数组转化成数组对象
        [].slice.call(document.querySelectorAll('[data-src]')).forEach(function (item) {
       
          // 判断元素是否已经进入视野
          if (item.getBoundingClientRect().y <= innerHeight) {
       
            // 设置src<