首屏加载

最新推荐文章于 2024-05-13 12:49:45 发布

与之歌

最新推荐文章于 2024-05-13 12:49:45 发布

阅读量384

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_44413053/article/details/108029953

版权

首屏加载

定义

用户能够看到第一屏区域内所有元素加载完的时间就是“首屏加载”时间
首屏位置调用 API 开始统计 -> 绑定首屏内所有图片的 load 事件 -> 页面加载完后判断图片是否在首屏内，找出加载最慢的一张 -> 首屏时间

指标

白屏时间 = 开始渲染时间(首字节时间+HTML下载完成时间)+头部资源加载时间。

(chrome.loadTimes().firstPaintTime - chrome.loadTimes().startLoadTime)*1000

用户可操作时间(即 document.ready)

performance.timing.domContentLoadedEventEnd - performance.timing.navigationStart

onload 总下载时间

performance.timing.loadEventEnd - performance.timing.navigationStart

优化

1、cdn
2、gzip
3、缓存

接口缓存(前端、后端)
文件强缓存

4、懒加载

路由懒加载
组件懒加载
图片懒加载

5、script延迟加载 async/defer
6、骨架屏、loading
7、ssr
8、http2.0/子域名解决队头阻塞
9、webp

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>demo</title>
    <style>
    #loader-wrapper { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 999999; }
    #loader {
      display: block; position: relative; left: 50%; top: 40%; z-index: 1001; width: 90px; height: 90px; margin: -45px 0 0 -45px; border-radius: 50%; border: 3px solid transparent;border-top-color: #fe9501;         
      -webkit-animation: spin 2s linear infinite;
      -ms-animation: spin 2s linear infinite;
      -moz-animation: spin 2s linear infinite;
      -o-animation: spin 2s linear infinite;
      animation: spin 2s linear infinite;
    }
    #loader:before {
      content: ""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; border: 3px solid transparent; border-top-color: #fe9501;
      -webkit-animation: spin 3s linear infinite;
      -moz-animation: spin 3s linear infinite;
      -o-animation: spin 3s linear infinite;
      -ms-animation: spin 3s linear infinite;
      animation: spin 3s linear infinite;
    }
    #loader:after {
      content: ""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border-radius: 50%; border: 3px solid transparent; border-top-color: #fe9501;
      -moz-animation: spin 1.5s linear infinite;
      -o-animation: spin 1.5s linear infinite;
      -ms-animation: spin 1.5s linear infinite;
      -webkit-animation: spin 1.5s linear infinite;
      animation: spin 1.5s linear infinite;
    }
    @-webkit-keyframes spin {
      0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); }
      100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }
    }
    @keyframes spin {
      0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); }
      100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }
    }
    </style>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but yearlybill doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app">
      <div id="loader-wrapper">
        <div id="loader"></div>
      </div>
    </div>
    <!-- built files will be auto injected -->
  </body>
</html>