如何减少白屏的时间

前端性能优化是前端开发中一个重要环节,它包括很多内容,其中页面的白屏时间是用户最初接触到的部分,白屏时间过长会显著影响用户的留存率和转换率。

我们以一个 APP 内嵌 Webview 打开页面作为例子,来分析页面打开过程以及可优化的方向:

  • 前置条件
    • 性能监控指标
  • APP 内点击打开页面
  • DNS 解析
    • 预解析
    • 域名收敛
  • TCP 连接
    • 预连接
  • 发送并响应请求
    • HTTP/2
  • 浏览器解析页面
    • 服务端渲染
  • 加载资源并渲染页面
    • 骨架屏
    • 资源优化
    • 资源预加载
  • 请求接口,获取数据并渲染
    • 接口预加载
    • 接口合并
  1. 前端性能监控指标
    性能优化的前置条件是性能有测量标准并可以被监控。常用的性能监控指标有以下几块。
  • Navigation Timing API

    • responseStart - fetchStart:收到首字节的耗时
    • domContentLoadedEventEnd - fetchStart:HTML 加载完成耗时
    • loadEventStart - fetchStart:页面完全加载耗时
    • domainLookupEnd - domainLookupStart:DNS 解析耗时
    • connectEnd - connectStart:TCP 连接耗时
    • responseStart - requestStart:Time to First Byte(TTFB)
    • responseEnd - responseStart:数据传输耗时
    • domInteractive - responseEnd:DOM 解析耗时
    • loadEventStart - domContentLoadedEventEnd:资源加载耗时(页面中同步加载的资源)
  • Lighthouse Performance:

    • FP(First Paint):首次绘制
    • FCP(First Contentful Paint):首次内容绘制
    • FMP(First Meaningful Paint):首次有效绘制
    • LCP(Largest Contentful Paint):最大可见元素绘制
    • TTI(Time to Interactive):可交互时间
    • TTFB(Time to First Byte):浏览器接收第一个字节的时间
  • 除了上面之外,UC 内核也有一套性能监控指标:

    • T0:Blink 收到 HTTP Head 的时间。
    • T1:首屏有内容显示的时间。
    • T2:首屏全部显示出来的时间
  1. DNS 解析优化
    DNS 解析优化是性能优化重要的一环,DNS 的作用是根据域名获取对应的 IP 地址,获取之后后续的 HTTP 流程才能进行下去。

    DNS 解析是一个开销较大的过程,一次 DNS 解析通常需要耗费几十到上百毫秒,而在移动端网络或其他弱网环境下 DNS 解析延迟会更加严重,对 DNS 解析优化则可以减少这一步骤的耗时。

    • 2.1 DNS 预解析
      我们可以通过 DNS 预解析的方式提前获取 IP 地址,以缩短后续请求的响应时间。

    前端可以通过 dns-prefetch 预解析,具体方式如下:

    <link rel="dns-prefetch" href="https://hzfe.org/" />
    
    • 2.2 域名收敛
      域名收敛的目的是减少页面中域名的数量,从而减少所需的 DNS 解析次数,最终减 少页面的 DNS 解析过程的耗时,加快页面加载速度。
  2. TCP 连接优化
    前端可以通过 preconnect 在请求发送前预先执行一些操作,这些操作包括 DNS 解析,TCP 握手 和 TLS 协商。具体方式如下:

    <link href="https://hzfe.org" rel="preconnect" />
    

4. 请求优化
通过使用 HTTP/2 协议,可以依赖 HTTP/2 的多路复用、首部压缩、二进制分帧和服务端推送等特性,从而加快整体请求的响应速度,加快页面的渲染展示。

5. 页面解析优化
浏览器获取 HTML 文件后,需要对 HTML 解析,然后才能开始渲染页面,这个过程中页面也是处于白屏状态。通过对这一过程进行优化可以加快页面的渲染展示。

  • 5.1 服务端渲染(Server-Side Rendering)
    目前流行的前后端分离的开发模式,由于前端需要等待 JS 文件和接口加载完成之后才能渲染页面,导致白屏时间变长。服务端渲染是指在服务端将页面的渲染逻辑处理好,然后将处理好的 HTML 直接返回给前端展示。这样即可减少页面白屏的时间。

  • 5.2 预渲染
    除了服务端渲染之外,还可以在前端打包时使用 prerender-spa-plugin 之类的插件进行简单的预渲染,减少页面白屏的时间。

  1. 资源加载优化和页面渲染优化
    浏览器解析 HTML 的同时会加载相关的资源,通过对资源的加载过程进行优化也可以减少页面的白屏时间。
  • 6.1 骨架屏
    骨架屏是在需要等待加载内容的位置提供一些图形组合占位,提前给用户描述页面的基础结构,等待数据加载完成之后,再替换成实际的内容。

    骨架屏可以在数据加载前,提前渲染页面,缩短白屏时间,提升用户体验。

  • 6.2 静态资源优化
    静态资源的优化主要分为两个方向:减小资源大小,加快资源加载速度。

    • 减小资源大小

    • Gzip 压缩文件

    • JS 文件拆分,动态加载

    • 加快资源加载速度

    • CDN(Content Delivery Network)

    • HTTP/2

  • 6.3 资源预加载

    • prefetch

      前端可以使用 prefetch 来指定提前获取之后需要使用到的资源,浏览器将会在空闲的时候加载资源,例如:

      <link rel="prefetch" href="https://hzfe.org/index.js" as="script" />
      
    • preload

      前端可以使用 preload 来指定提前获取之后需要使用到的资源,浏览器将会立即加载对应资源,在解析到对应资源时即可立即执行,例如:

      <link rel="preload" href="https://hzfe.org/index.js" as="script" />
      
    • quicklink

      quicklink 是 Google 开源的预加载库,quicklink 会判断链接进入视口之后,在闲时预加载。quicklink 实际上加速的是次级页面。

  1. 接口请求优化
    浏览器在加载完 HTML 和资源之后,一般需要请求接口获取数据之后才会完整渲染页面,对接口请求进行优化也可加快页面的展示。
  • 接口合并

    过多的接口请求会影响页面初始化时的渲染过程,可以通过增加一层中间层合并部分请求,达到加速页面展示的目的。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/50054.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

文件上传漏洞(ctfshow web151-161)

Web151 F12修改源代码 exts后面png改为php 这样就可以上传php的文件了 Web152&#xff1a; 考点&#xff1a;后端不能单一校验 就是要传图片格式&#xff0c;抓个包传个png的图片 然后bp抓包修改php后缀解析 然后放包 Web153-web156 在php代码中可以使用“{}”代替“[]” …

如何防御IP劫持

摘要 IP劫持是一种网络攻击方式&#xff0c;攻击者通过各种手段获取对某个IP地址的控制权&#xff0c;并将其用于恶意目的。这种攻击可能会导致数据泄露、服务中断等严重后果。本文将介绍IP劫持的基本概念、攻击方式以及防御策略&#xff0c;并提供一些实际的代码示例。 IP劫…

WPF项目实战视频《二》(主要为prism框架)

14.prism框架知识&#xff08;1&#xff09; 使用在多个平台的MVVM框架 新建WPF项目prismDemo 项目中&#xff1a;工具-NuGet包管理&#xff1a;安装Prism.DryIoc框架 在git中能看Prism的结构和源代码&#xff1a;git链接地址 例如&#xff1a;Prism/src/Wpf/Prism.DryIoc.Wpf…

机器学习 | 回归算法原理——随机梯度下降法

Hi&#xff0c;大家好&#xff0c;我是半亩花海。接着上次的多重回归继续更新《白话机器学习的数学》这本书的学习笔记&#xff0c;在此分享随机梯度下降法这一回归算法原理。本章的回归算法原理还是基于《基于广告费预测点击量》项目&#xff0c;欢迎大家交流学习&#xff01;…

uniapp中出现图片过小会与盒子偏离

结论&#xff1a;在image的父盒子中加上display: flex&#xff0c;原因不清楚 出问题的代码和图片如下&#xff1a; <template><view style" background-color: greenyellow; height: 10rpx;width: 10rpx;"><image :src"imgSrc.seatnull" …

Ubuntu22.04使用NVM安装多版本Node.js和版本切换

Fabric官方目前支持Node.js开发区块链应用&#xff0c;建议使用Node长期支持版本&#xff08;LTS&#xff09;。 建议使用NVM安装Node.js&#xff0c;NVM可以帮助我们方便的在Node的不同版本之间进行切换&#xff0c;这样我们就可以同时工作在不同的项目上。 下面是安装的脚本…

Java中的Console对象:增强程序与用户交互的利器(readPassword()、readLine(),printf() 和format() )

在Java编程语言中&#xff0c;System.console() 方法扮演着尝试获取与当前运行的Java应用程序相关联的控制台&#xff08;Console&#xff09;对象的角色。这个控制台对象&#xff0c;如果成功获取&#xff0c;为程序提供了一个与用户进行交互的界面&#xff0c;无论是读取输入…

嵌入式C++、MQTT、数据库、Grafana、机器学习( Scikit-learn):智能建筑大数据管理平台(代码示例)

项目概述 智能建筑管理系统&#xff08;Intelligent Building Management System, IBMS&#xff09;是一个集成多种技术的复杂系统&#xff0c;旨在通过智能化手段提升建筑的管理效率、节能效果和居住舒适度。该系统涉及嵌入式系统、物联网&#xff08;IoT&#xff09;、大数据…

【数据库】 mysql基础语法学习(详细教程)

1. 数据库的基本操作1.1. MYSQL 登录与退出输入 mysql -uroot -p -P3306 -h127.0.0.1退出的三种方法mysql > exit;mysql > quit;mysql > \q;1.2. MYSQL 数据库的一些解释注意&#xff1a;数据库就相当于文件夹表就相当于文件1.3. mysql 注释符有三种&#xff1a;1、#.…

光明乳业:以科技赋能品质,引领乳业绿色新未来

近日&#xff0c;光明乳业再次成为行业焦点&#xff0c;其在科技创新与绿色发展方面的卓越表现赢得了广泛赞誉。作为中国乳制品行业的领军企业&#xff0c;光明乳业始终坚守品质至上的原则&#xff0c;不断探索科技创新之路&#xff0c;致力于为消费者提供更高品质、更健康的乳…

vdb:虚拟数据库

将文件虚拟成数据库&#xff0c;序列化写入、反序列化读取、直接读取。

Adobe正通过数字体验改变世界

在当今这个数字化飞速发展的时代&#xff0c;Adobe公司正以其创新的技术和卓越的产品引领着创意设计领域的变革。从Adobe发布的生成式AI工具&#xff08;Adobe Firefly&#xff09;&#xff0c;到Illustrator和Photoshop的新AI功能&#xff0c;再到广受认可的Adobe国际认证&…

GLSL教程 第5章:光照和材质

目录 5.1 光照模型基础 5.2 Phong光照模型 5.3 Blinn-Phong光照模型 5.4 Cook-Torrance光照模型 5.5 Lambert光照模型 5.6 材质属性的深入讲解 小结 光照和材质是计算机图形学中至关重要的元素&#xff0c;它们共同决定了渲染图像的视觉效果。光照模型用于模拟光源与物体…

政安晨【零基础玩转各类开源AI项目】基于Ubuntu系统部署LivePortrait :通过缝合和重定向控制实现高效的肖像动画制作

目录 项目论文介绍 论文中实际开展的工作 非扩散性的肖像动画 基于扩散的肖像动画 方法论 基于Ubuntu的部署实践开始 1. 克隆代码并准备环境 2. 下载预训练权重 3. 推理 快速上手 驱动视频自动裁剪 运动模板制作 4. Gradio 界面 5. 推理速度评估 社区资源 政安…

electron安装及快速创建

electron安装及快速创建 electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 详细内容见官网&#xff1a;https://www.electronjs.org/zh/docs/latest/。 今天来记录下练习中的安装过程和hello world的创建。 创建项目文件夹&#xff0c;并执行npm 初始化命…

C++实用指南:Lambda 表达式的妙用

Lambda 表达式的灵活性和强大功能确实为编程提供了许多便利。但是我们发现许多开发者仍然无法灵活运用其便利&#xff0c;于是写了这篇文章。 Lambda 允许我们编写更简洁和灵活的代码。例如在处理网络请求时&#xff0c;我们经常需要确保响应与当前的状态或需求仍然相关。通过…

STM32 | RTC闹钟实战

点击上方"蓝字"关注我们 01、rtc.h #ifndef __RTC_H#define __RTC_H​#include "stm32f4xx.h"#include "delay.h"#include "led.h"​void Rtc_My_Init(void);void RTC_Alarm_MyA(void);​​​#endif 02、rtc.c #include "rtc.h…

了解ChatGPT API

要了解如何使用 ChatGPT API&#xff0c;可以参考几个有用的资源和教程&#xff0c;这些资源能帮助你快速开始使用 API 进行项目开发。下面是一些推荐的资源&#xff1a; OpenAI 官方文档&#xff1a; 访问 OpenAI 的官方网站可以找到 ChatGPT API 的详细文档。这里包括了 API …

迅雷强制升级,漠视用户权力

用着迅雷&#xff0c;突然闪退&#xff0c;弹出升级界面。没有任何经过我的同意和操作&#xff0c;直接退出&#xff0c;强制升级。非常的蛮横和强硬。 升级完成之后&#xff0c;弹出一个提示框&#xff0c;提示框里有一个启动按钮&#xff0c;和一个加入开机自启的勾选框。意…

测试面试宝典(二十八)—— 请问黑盒测试和白盒测试有哪些方法?

黑盒测试方法主要包括&#xff1a; 1. 等价类划分法&#xff1a;将输入数据划分为若干个等价类&#xff0c;从每个等价类中选取一个代表性的数据进行测试。 2. 边界值分析法&#xff1a;针对输入或输出的边界值进行测试&#xff0c;因为这些边界值往往容易出现错误。 3. 因果…