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。

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

前端页面优化策略

目录