第123题 H5页面如何进行首屏优化

  • 路由懒加载
    • 适用于单页面应用
    • 路由拆分，优先保证首页加载
  • 服务端渲染SSR
    • SSR渲染页面过程简单，性能好
    • 纯H5页面，SSR是性能优化的终极方案，但对服务器成本也高
  • 分页
    • 针对列表页，默认只展示第一页内容
    • 上划加载更多
  • 图片懒加载lazyLoad
    • 针对详情页，默认只展示文本内容，然后触发图片懒加载
    • 注意：提前设置图片尺寸，尽量只重绘不重排
  • Hybrid
    • 提前将HTML JS CSS下载到App内部，省去我们从网上下载静态资源的时间
    • 在App webview中使用file://协议加载页面文件
    • 再用Ajax获取内容并展示
  • 性能优化要配合分析、统计、评分等，做了事情要有结果有说服力
  • 性能优化也要配合体验，如骨架屏、loading动画等

图片懒加载演示

    <head>
      <style>
        .item-container {
          border-top: 1px solid #ccc;
          margin-bottom: 30px;
        }
        .item-container img {
          width: 100%;
          border: 1px solid #eee;
          border-radius: 10px;
          overflow: hidden;
        }
      </style>
    </head>
    <body>
        <h1>img lazy load</h1>
    
        <div class="item-container">
            <p>新闻标题</p>
            <img src="./img/loading.gif" data-src="./img/animal1.jpeg"/>
        </div>
    
        <div class="item-container">
            <p>新闻标题</p>
            <img src="./img/loading.gif" data-src="./img/animal2.webp"/>
        </div>
    
        <div class="item-container">
            <p>新闻标题</p>
            <img src="./img/loading.gif" data-src="./img/animal3.jpeg"/>
        </div>
    
        <div class="item-container">
            <p>新闻标题</p>
            <img src="./img/loading.gif" data-src="./img/animal4.webp"/>
        </div>
    
        <div class="item-container">
            <p>新闻标题</p>
            <img src="./img/loading.gif" data-src="./img/animal5.webp"/>
        </div>
    
        <div class="item-container">
            <p>新闻标题</p>
            <img src="./img/loading.gif" data-src="./img/animal6.webp"/>
        </div>
    
        <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
        <script>
          function mapImagesAndTryLoad() {
            const images = document.querySelectorAll('img[data-src]')
            if (images.length === 0) return
    
            images.forEach(img => {
                const rect = img.getBoundingClientRect()
                if (rect.top < window.innerHeight) {
                  // 漏出来
                  // console.info('loading img', img.dataset.src)
                  img.src = img.dataset.src
                  img.removeAttribute('data-src') // 移除 data-src 属性，为了下次执行时减少计算成本
                }
            })
          }
    
          window.addEventListener('scroll', _.throttle(() => {
            mapImagesAndTryLoad()
          }, 100))
    
          mapImagesAndTryLoad()
        </script>
    </body>
Last Updated:
Contributors: leeguooooo