前端页面优化策略

news2024/11/8 17:10:13

目录

  • 1 为什么要优化
  • 2 优化方案
  • 3 加载策略优化
    • 3.1 script执行时机
    • 3.2 预加载资源
      • prefetch 和 preload
      • dns-prefetch 和 preconnect
  • 4 骨架屏
  • 4 资源请求优化
    • 4.1 图片懒加载及异步解码方案

1 为什么要优化

从用户角度看,优化能够让页面加载得更快、对用户操作响应更及时,用户体验更良好,提升用户体验和降低用户流失率非常重要。其中 Global Web Performance Matters for ecommerce报告中也有具体说明优化的重要性。

从企业角度看,优化能够减少页面请求数或者减小请求所占带宽,能够节省可观的资源成本,最终提高收益转化。

通常情况分以下几个阶段

  • 初始化。
  • 到达新的页面,网络连接,从服务器下载html,css,js,页面白屏。
  • 页面基本框架出现,js请求页面数据,页面处于loading状态。
  • 出现所需的数据,完成整个页面的渲染,用户可交互。从图形直观看H5 启动过程:
    在这里插入图片描述

如何缩短这些过程的时间,就成了优化 H5 性能的关键。接下来我们详细看一下各个阶段注意的优化点。

2 优化方案

  • 加载策略优化
  • 骨架屏
  • 资源请求优化(静态资源、图片以及 webp 、图片懒加载、组件按需加载)

3 加载策略优化

3.1 script执行时机

在这里插入图片描述

默认情况:HTML解析,然后加载 JS,此时 HTML 解析中断,然后执行 JS,最后 JS执行完成并恢复 HTML解析。

defer情况下:HTML 和 JS 并驾齐驱,最后才执行 JS( js脚本在所有元素加载完成后执行,而且是按照js脚本声明的顺序执行,但要等到dom文档全部解析完才会被执行)。

async 情况下:HTML和 JS 并驾齐驱,JS 的执行可能在 HTML解析之前就已完成了 (js脚本是乱序执行的,不管你声明的顺序如何,只要某个js脚本加载完就立即执行)。

module情况下:与defer情况类似,只不过在提取的过程中会加载多个 JS 文件而已 (声明acript标签type="module"属性从而拥抱es6的模块导入导出语法, 加载也和defer差不多,只不过可以加载多个JS文件而已)

3.2 预加载资源

prefetch 和 preload

<script rel="preload " as="script" href="index.js" />
<script rel="preload" as="script" href="index.js" />

preload 是一个新的 Web 标准,在页面生命周期中提前加载你指定的资源,同时确保在浏览器的主要渲染机制启动之前。preload 是告诉浏览器页面必定需要的资源,浏览器一定会加载这些资源,

prefetch 是提示浏览器,用户在下次导航时可能会使用的资源(HTML,JS,CSS或者图片等),因此浏览器为了提升性能可以提前加载、缓存资源。prefetch 的加载优先级相对较低,浏览器在空闲的时候才会在后台加载。

因为 prefetch 是告诉浏览器页面可能需要的资源,浏览器不一定会加载这些资源。所以建议:对于当前页面很有必要的资源使用 preload,对于可能在将来的页面中使用的资源使用 prefetch。

注意:用 preload 和 prefetch 情况下,如果资源不能被缓存,那么都有可能浪费一部分带宽,请慎用。非首页的资源建议不用
preload,prefetch 作为加载下一屏数据来用。

dns-prefetch 和 preconnect

DNS 请求需要的带宽非常小,但延迟较高,这点特别是在手机网络上比较明显。预读取 DNS 能让延迟明显减少一些(尤其是移动网络下)。为了帮助浏览器对某些域名进行预解析,你可以在页面的html标签中添加 dns-prefetch 告诉浏览器对指定域名预解析。

dns-prefetch 是一项使浏览器主动去执行域名解析的功能。dns-prefetch 应该尽量的放在网页的前面,推荐放在后面。具体使用方法如下:

<link rel="dns-prefetch" href="//*.com">

和 DNS prefetch 类似,preconnect 不仅会解析 DNS,还会建立 TCP 握手连接和 TLS 协议(如果是https的话)。用法如下:

在这里插入图片描述

preconnect 允许浏览器在 HTTP 请求实际发送到服务器之前建立早期连接。可以预先启动 DNS 查找、TCP 握手和 TLS 协商等连接,从而消除这些连接的往返延迟并为用户节省时间。

![<link rel="preconnect" href="//*.com.cn" />](https://img-blog.csdnimg.cn/a0388e2d34a14ceda2b7ffffd313da12.png)

4 骨架屏

骨架屏就是在页面资源尚未加载完成以及渲染尚未完成时,需要先给用户的展示页面大致结构。直到资源加载完成以及渲染完成后,使用渲染的页面。相比于之前的Loading动画,骨架屏页面更容易让用户产生一种错觉,页面快加载完了。
在这里插入图片描述

骨架屏处理方案也很多,常用方案有以下几种:

首屏:可以在index.html模版中手写骨架屏相关代码。

其他页面:可以利用UI提供SVG图

作为SPA中路由切换的loading:需自己编写骨架屏,推荐两个成熟方便定制的svg组件去定制骨架屏- react-content-loader和vue-content-loader。

骨架图渲染前不要出现任何网络请求,在此之前 HTML 内容不要超过 4KB。

相关链接:

https://www.npmjs.com/package/react-content-loader react-content-loader
https://www.npmjs.com/package/vue-content-loader vue-content-loader
http://npm.corpautohome.com/package/@auto/vite-plugin-cd @auto/vite-plugin-cdn

4 资源请求优化

4.1 图片懒加载及异步解码方案

我的另一篇博客:
https://blog.csdn.net/weixin_52268321/article/details/131175291?spm=1001.2014.3001.5501

参考:https://mp.weixin.qq.com/s/xXyBFnPhsqsEGgwm-ee-NA

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

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

相关文章

领域事件驱动DDD(一) 值对象以及实体

对领域事件驱动的一些知识的梳理&#xff08;以下内容是从内到外进行梳理&#xff09; 值对象&#xff1a;一个没有标识符的对象。 值对象通常不会被修改&#xff0c;而是通过创建新的值对象来表示不同的状态。 没有自己的生命周期&#xff0c;它们随着所属的实体或聚合根的…

自动化测试-Selenium

目录 什么是自动化测试 Selenium介绍 Selenium是什么 Selenium特点 Selenium工作原理 SeleniumJava环境搭建 1.下载chrome浏览器,查看版本号. 2.下载chrome浏览器驱动 3.配置环境变量 4.创建java项目,在pom文件中添加依赖 5. 验证环境是否搭建成功 Selenium常用API…

libevent实践08:实现定时器第二季

简介 获取libevent的版本号字符串 /**Get the Libevent version.Note that this will give you the version of the library that yourecurrently linked against, not the version of the headers that youvecompiled against.return a string containing the version numbe…

利用RabbitMQ实现消息投递削峰填谷

目录 异步和同步如何选择 异步线程 同步收发消息 一、导入依赖库 二、创建RabbitMQ配置类 三、创建消息任务类 异步和同步如何选择 依靠多线程&#xff0c;Java代码可以同步执行也可以异步执行 RabbitMQ提供了同步和异步两种收发消息模式 我们采用 Java异步线程 MQ同步…

MongoRepository

一、介绍 MongoRepository是一个接口,与HibernateRepository类似,通过继承MongoRepository接口,我们可以非常方便地实现对一个MongoDB集合中的文档数据进行增删改查,示例如下所示: import org.bson.types.ObjectId; import org.springframework.data.mongodb.repository…

[数据结构 -- 手撕排序第一篇] 插入排序

目录 1、常见的排序算法 2、插入排序的思路 2.1 基本思想 2.2 直接插入排序 2.2.1 单趟排序的思路 2.2.2 单趟排序代码实现 3、插入排序代码 4、插入排序打印测试 5、插入排序的时间复杂度 5.1 最坏情况 5.2 最好情况 6、直接插入排序的特性总结 1、常见的排序算法 2、插入排序…

SpringMVC (二) 第一个MVC程序

学习回顾&#xff1a;SpringMVC &#xff08;一&#xff09; 什么是SpringMVC Hello&#xff0c;SpringMVC 现在我们来看看如何快速使用SpringMVC编写我们的程序吧&#xff01; 一、配置版 1、新建一个Moudle &#xff0c; springmvc-02-hello &#xff0c; 添加web的支持&…

Spring面试题--AOP

什么是AOP&#xff0c;你们项目中有没有使用到AOP&#xff1f; AOP称为面向切面编程&#xff0c;用于将那些与业务无关&#xff0c;但却对多个对象产生影响的公共行为和逻辑&#xff0c;抽取并封装为一个可重用的模块&#xff0c;这个模块被命名为“切面”&#xff08;Aspect&a…

2024中山大学898水文地质与工程地质考研初试复习资料

C8260153[电子书]2024年中山大学898水文地质与工程地质考研精品资料 说明&#xff1a;本套资料由高分研究生潜心整理编写&#xff0c;高清电子书&#xff0c;考研推荐资料。 一、考研真题及重点名校真题 1.附赠重点名校真题 ①重点名校&#xff1a;水文地质学基础2010-2013…

魏副业而战:抖音图文带货玩法,月入5w+

我是魏哥&#xff0c;与其在家躺平&#xff0c;不如魏副业而战&#xff01; 最近魏哥一直在研究短视频带货&#xff0c;看了很多案例&#xff0c;发现了一些NB的账号。 说真的&#xff0c;视频带货真的可以认真的研究研究&#xff0c;不管是做直播&#xff0c;还是发视频&…

【C++11】左值引用 与 右值引用

定义 左值 / 左值引用 左值&#xff08;Lvalue&#xff09;&#xff1a; 左值是一个表示数据的表达式(如变量名或解引用的指针)&#xff0c;我们可以 对它取地址 可以对它赋值&#xff0c;左值可以出现赋值符号的左边&#xff0c;右值不能出现在赋值符号左边。定义时const修…

青少年机器人技术一级核心知识点:机械结构及模型(二)

随着科技的不断进步&#xff0c;机器人技术已经成为了一个重要的领域。在这个领域中&#xff0c;机械结构是机器人设计中至关重要的一部分&#xff0c;它决定了机器人的形态、运动方式和工作效率。对于青少年机器人爱好者来说&#xff0c;了解机械结构的基础知识&#xff0c;掌…

持续集成工具Jenkins安装和部署

前言 Jenkins的执行流程图如下&#xff1a; 1. 前期准备 1.1 安装JDK 目前新版本的Jenkins对JDK的要求基本上都在JDK11以上&#xff0c;所以我这边将我服务器的JDK版本升级成为JDK11。 具体升级步骤如下&#xff1a; 下载安装包 官网可能需要注册账号&#xff0c;这里我…

微信:如何查询自己名下已实名认证绑定的几个微信账户?

你知道如何查询自己名下已实名认证绑定了几个微信账户吗&#xff1f;微信规则同一个人最多可以注册绑定完成5个微信账户认证&#xff0c;如果想注册新微信号&#xff0c;必须保证实名认证微信账户不足5个。而且通过查询自己名下实名认证微信账户还可以确认&#xff0c;自己的身…

LINUX系统(ubuntu)安装以及应用调试(不定时更新)

一&#xff1a;linux的介绍 Linux是一种基于UNIX操作系统的开源&#xff08;Open Source&#xff09;操作系统。它由芬兰计算机科学家 Linus Torvalds 在1991年首次发布&#xff0c;目前已经发展成为最流行和广泛使用的操作系统之一。 Linux以其稳定性、安全性和灵活性而闻名…

07-C++学习笔记-函数

&#x1f4da; 函数的概念 函数是一段可重复使用的代码块&#xff0c;用于完成特定的任务。通过使用函数&#xff0c;可以将程序划分为多个模块&#xff0c;提高代码的可读性、可维护性和复用性。 在C中&#xff0c;函数由函数头和函数体组成。函数头包含函数的返回类型、函数…

日期格式化不起作用 2022-09-18T05:25:30.000+00:00

java->web JsonFormat(pattern “yyyy-MM-dd HH:mm:ss”)一般版本问题或依赖冲突不起作用 解决&#xff1a; spring:jackson:serialization:write-dates-as-timestamps: falsedate-format: yyyy-MM-dd HH:mm:ss这个配置会在java对象传输给web前端的时候对日期的字段进行…

Linux 查看端口占用命令

文章目录 1、lsof -i:端口号2、netstat 命令2.1 netstat -tunlp 命令2.2 netstat -anp 命令 1、lsof -i:端口号 用于查看某一端口的占用情况&#xff0c;比如查看5000端口使用情况&#xff1a; lsof -i:5000常用命令&#xff1a; lsof -i:5000&#xff1a;查看5000端口占用 …

QT或VS2015报错:Error: C2661: QColor::ct::ct: 没有重载函数接受 5 个参数解决方案

安装了QT5.14.2 MSCV2015配置并同时在QT或VS2015测试并运行都提示没有重载函数接受 5 个参数。 同时还会出现C2134错误&#xff1a;QMetaObject::SuperData::operator const QMetaObject *: 调用不会生成常数表达式的错误 搜索了网络上的结果都让换其它版本&#xff0c;没有…

高压线路零序电流方向保护程序逻辑原理(一)

一、微机型零序电流方向保护概念 &#xff08;一&#xff09;保护电流元件的配置 零序电流方向保护是反应大接地电流系统的线路发生接地故障时&#xff0c;零序电流分量大小和方向的多段式电流方向保护。在我国大接地电流系统线路上都装设了这种接地保护装置&#xff0c;这种保…