Vue项目首次加载慢的优化方法

0123_6

已于 2022-09-29 14:40:45 修改

阅读量5.7k

点赞数 1

分类专栏： Vue 文章标签：性能优化前端

于 2022-05-12 18:13:56 首次发布

本文链接：https://blog.csdn.net/qq_33437985/article/details/124731279

版权

Vue 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

它是影响页面在加载阶段的主要标准。
优化关键渲染路径是指优先显示与当前用户操作相关的内容。
提供快速的web体验需要浏览器进行大量工作。作为web开发人员，大部分工作是隐藏的：我们编写HTML，，屏幕上会出现一个漂亮的页面。但是浏览器到第一如何从使用HTML，CSS和JavaScript变成屏幕上的渲染像素呢？
性能优化就是要了解在接收HTML，CSS和JavaScript字节和将它们转换为渲染像素所需的处理之间的这些中间步骤中发生了什么，这是关键的渲染路径。
在这里插入图片描述
通过优化关键渲染路径，我们可以显著缩短首次渲染页面的时间。此外，了解关键渲染路径也是构建性能良好的交互式应用程序的基础。交互式更新过程是相同的，只是在一个连续的循环中完成，理想的速度为60帧/s！但首先，概述浏览器如何显示简单页面。

ndm文档

如何优化

为尽快完成首次渲染，我们需要最大限度减小以下三种可变因素（关键渲染路径的各种指标）：

（1）关键资源的数量。关键资源，所有可能阻碍页面渲染的资源。
（2）关键路径长度。获取构建页面所需的所有关键资源所需的RTT(Round Trip Time)
（3）关键字节的数量。作为完成和构建页面的一部分而传输的字节总数。

渲染阻断：
渲染阻塞是一个组件，它将不允许浏览器渲染整个DOM树，直到给定的资源被完全加载。

关键资源：

DOM，一旦HTML被解析，就会建立一个DOM树。
CSSOM Tree，CSSOM也是基于对象的树，它负责处理与DOM树相关的样式。一般来说，CSS被认为是一种阻塞渲染资源。
JavaScript，什么是解析器阻塞？当需要下载和执行JavaScript代码时，浏览器会暂停执行和构建DOM树。当JavaScript代码被执行完后，DOM树的构建才继续进行。JavaScript很可能会查询CSSOM，这意味着，在执行任何JavaScript之前，CSS文件必须被完全下载和解析。
注意，DOMContentLoaded在HTML DOM被完全解析和加载时被触发。该时间不会等待image，子frame甚至是样式表被完全加载，唯一的目标是文档被加载。可以在window中添加事件，以查看DOM是否被解析和加载。

window.addEventListener('DOMContentLoaded',(event)=>{
    console.log('DOM被解析且加载成功')
})

关键资源是可能阻止网页首次渲染的资源。这些资源越少，浏览器的工作量就越小，对 CPU 以及其他资源的占用也就越少。同样，关键路径长度受所有关键资源与其字节大小之间依赖关系图的影响：某些资源只能在上一资源处理完毕之后才能开始下载，并且资源越大，下载所需的往返次数就越多。最后，浏览器需要下载的关键字节越少，处理内容并让其出现在屏幕上的速度就越快。要减少字节数，我们可以减少资源数（将它们删除或设为非关键资源），此外还要压缩和优化各项资源，确保最大限度减小传送大小。

优化关键渲染路径的常规步骤如下：
（1）对关键路径进行分析和特性描述：资源数、字节数、长度。
（2）最大限度减少关键资源的数量：删除它们，延迟它们的下载，将它们标记为异步等。
（3）优化关键字节数以缩短下载时间（往返次数）。
（4）优化其余关键资源的加载顺序：您需要尽早下载所有关键资产，以缩短关键路径长度

关键渲染路径优化
如何优化关键渲染路径，上一章初步了解了关键渲染路径的流程，此时，可以对此做一定的优化。我们可以从三个大类方向优化

一、减少网络发送的数据量

 1.采用精简（移除注释，空格）、混淆（额外缩短变量名）的方式

 2.gzip压缩，现在绝大部分浏览器都支持gzip压缩

 3.部分资源可考虑采用内联的

 4.静态资源采用浏览器缓存，时间要长

二、减少关键资源的数量，移除非关键渲染资源

1.css默认会生成cssom。通过非关键资源拆出来，单独外联引入，增加media，则浏览器只会下载，不会解析（用到的时候解析）。但是此时额外增加了网络请求，需要权衡

  2.js执行会等待cssom构建完毕，并且会阻塞dom的构建。动态引入js

三、缩短关键呈现路径的长度

 1.通过外联js加async，则不会等待cssom，异步执行，不阻塞dom构建

如何优化关键渲染路径？
为尽快完成首次渲染，我们需要最大限度减小以下三种可变因素:

关键资源的数量。
关键路径长度。
关键字节的数量。
关键资源是可能阻止网页首次渲染的资源。这些资源越少，浏览器的工作量就越小，对 CPU 以及其他资源的占用也就越少。
同样，关键路径长度受所有关键资源与其字节大小之间依赖关系图的影响: 某些资源只能在上一资源处理完毕之后才能开始下载，并且资源越大，下载所需的往返次数就越多。

最后，浏览器需要下载的关键字节越少，处理内容并让其出现在屏幕上的速度就越快。要减少字节数，我们可以减少资源数（将它们删除或设为非关键资源），此外还要压缩和优化各项资源，确保最大限度减小传送大小。

**优化关键渲染路径的常规步骤如下: **

1.对关键路径进行分析和特性描述: 资源数、字节数、长度。
2.最大限度减少关键资源的数量: 删除它们，延迟它们的下载，将它们标记为异步等。
3.优化关键字节数以缩短下载时间（往返次数）。
4.优化其余关键资源的加载顺序: 您需要尽早下载所有关键资产，以缩短关键路径长度。

转载自：https://developers.google.com/web/fundamentals/performance/critical-rendering-path/optimizing-critical-rendering-path?hl=zh-cn

优化CSS

概述

CSS 如何阻塞文档解析？
理论上，既然样式表不改变 DOM 树，也就没有必要停下文档的解析等待它们。然而，存在一个问题，JavaScript 脚本执行时可能在文档的解析过程中请求样式信息，如果样式还没有加载和解析，脚本将得到错误的值，显然这将会导致很多问题。所以如果浏览器尚未完成 CSSOM 的下载和构建，而我们却想在此时运行脚本，那么浏览器将延迟 JavaScript 脚本执行和文档的解析，直至其完成 CSSOM 的下载和构建。也就是说，在这种情况下，浏览器会先下载和构建 CSSOM，然后再执行 JavaScript，最后再继续文档的解析。

按需加载css

优化图像

关键路径图片预加载preload
图片延迟加载，等页面主体加载好后，再加载

优化网页字体

优化JavaScript(针对客户端渲染的网站)

JS延迟加载

js的加载，解析和执行会阻塞页面的渲染过程，因此我们希望js脚本能够尽可能的延迟加载，提高页面的渲染速度。

将js脚本放在文档的底部，来使js脚本尽可能的在最后来加载执行。
给js脚本添加defer属性，这个属性会让脚本的加载与文档的解析同步解析，然后在文档解析完成后再执行这个脚本文件，这样的话就能使页面的渲染不会阻塞。多个设置了defer属性的脚本按规范来说最后是顺序执行的，但是在一些浏览器中可能不是这样。defer属性只对外部文件有效，对本地js文件没有效果；defer属性是遇到script标签时，浏览器开始异步下载，当遇到</html>标签时，表明页面加载完成，开始执行js文件。js文件按顺序执行。
给js脚本添加async属性，这个属性会使脚本异步加载，不会阻塞页面的解析过程，但是当脚本加载完成后立即执行js脚本，如果这个时候文档没有解析完成的话同样会阻塞。多个async属性的脚本的执行顺序是不可预测的。只对外部文件有效，对本地js文件没有效果；async属性是遇到script标签开始通知浏览器异步下载，下载完成后，立即执行。js执行不按照顺序。
动态创建DOM标签的方式，我们可以对文档的加载事件进行监听，当文档加载完成后再动态的创建script标签来引入js脚本。
使用setTimeout，在每一个脚本文件最外层设置一个定时器。
按需加载js
Vue组件按需加载，用v-if代替v-show
优化服务器带宽
延迟加载体积大或渲染慢的组件
将一些基本不变的数据缓存到本地，下次加载的时候会更快一些
将js，css，图片，文件进行提取到单独的文件，和开启gzip压缩

preload和prefetch区别

preload 告诉浏览器立即加载资源;
prefetch 告诉浏览器在空闲时才开始加载资源；
preload、prefetch 仅仅是加载资源，并不会“执行”;
preload、prefetch 均能设置、命中缓存；
正确使用 preload、prefetch 不会导致重复请求；

HTTP缓存

何时起作用
在这里插入图片描述
HTTP缓存是作用于网站导航阶段的网络请求的开始阶段。

导航阶段，指用户发出URL请求到页面开始解析的这个过程。
网络请求阶段
我们简单的讲述一下，在HTTP缓存之前所发生的流程。
用户输入：地址栏中输入一个查询关键字，此时分2种情况
搜索内容：地址栏会使用浏览器默认的搜索引擎，来合成新的带搜索关键字的URL
符合URL规则地址栏会根据规则，把内容加上协议，合成为完整的URL

卸载原页面并重定向到新页面(如果有原页面)
浏览器会将现有页面卸载掉并重定向到用户所输入的url页面，也就是图中的Precess Unload Event和Redirect流程。

处理Service Worker(如果有的话)
如果当前页面注册了Service Worker：主要用途是拦截，重定向和修改页面发出的请求，充当网络请求的仲裁者的角色。也就是图中Service Worker Init与Service Worker Fecth Event步骤

HTTP Cache

最好最快的请求就是没有请求
浏览器对静态资源的缓存本质上是HTTP协议的缓存策略，其中分为强制缓存和协商缓存。两种缓存策略都会将资源缓存到本地

强制缓存策略根据过期时间决定使用本地缓存还是请求新资源
协商缓存每次都会发出请求，经过服务器进行对比后决定采用本地缓存还是新资源

具体采用哪种缓存策略，由HTTP协议的首部信息决定。

消息头按照用途可分为4大类：

通用头：适用于请求和响应的头字段
请求头：用于表示请求消息的附加信息的头字段
响应头：用于表示响应消息的附加信息的头字段
实体头：用于消息体的附加信息的头字段

其中我们对HTTP缓存用到的字段进行一次简单的分类和汇总

头字段	所属分组
Cache-control	通用头
Expires	实体头
ETag	实体头
ETag:在更新操作中，有时候需要基于上一次请求的响应数据来发送下一次请求。在这种情况下，这个字段可以用来提供上次响应与下次请求之间的关联信息。上次响应中，服务器会通过ETag向客户端发送一个唯一标识，在下次请求中客户端可以通过if-match,if-none-match,if-range字段将这个标识告知服务器，这样服务器就知道该请求和上次的响应是相关的。

这个字段的功能和Cookie是相同的，但Cookie是网景公司自行开发的规格，而ETag是将其进行标准化后的规格

Expires和Cache-control：max-age=x(强缓存)

Expiress和Cache-control:max-age=x是强制缓存策略的关键信息，两者均是响应首部信息(后端返给客户端的)。
Expires是HTTP1.0 加入的特性，通过指定一个明确的时间点作为缓存资源的过期时间，在此时间点之前客户端将使用本地缓存的文件应答请求，而不会向服务器发出实体请求。
Expires的优点：

可以在缓存过期时间内减少客户端的HTTP请求
节省了客户端处理时间和提高了Web应用的执行速度
减少了服务器负载以及对客户端网络资源的消耗

问题:
Expires所指定的时间点是以服务器为准的时间，但是客户端进行过期判断时是将本地的时间与此时间点对比。

针对这个问题，HTTP1.1 新增了Cache-control首部信息以便更精准地控制缓存。
常用的Cache-control信息有以下几种。

no-cache:
使用ETag响应头来告知客户端（浏览器，代理服务器）这个资源首先需要被检查是否在服务器端修改过，在这之前不能被复用。这个意味着no-cache将会和服务器进行一次通讯，确保返回的资源没有修改过，如果没有修改过，才没有必要下载这个资源。反之，则需要重新下载。
no-store
public & private
max-age=<seconds>
s-maxage=<seconds>
no-transform
与Expires相比，max-age可以更精确的控制缓存，并且比Expires有更高的优先级

强制缓存策略下(Cache-control未指定no-cache和no-store)的缓存判断流程
在这里插入图片描述
ETag和if-none-match(协商缓存)
Etag是服务器为资源分配的字符串形式的唯一性标识，作为响应首部信息返回给浏览器

浏览器在Cache-control指定no-cache或者max-age和expries均过期之后，将Etag值通过if-none-match作为请求头部信息发送给服务器。

服务器接收到请求之后，对比所请求资源你的ETag值是否改变，如果未改变将返回304 Not Modified，并且根据既定的缓存策略分配新的Cache-control信息；如果资源发生了改变，则会返回最新的资源以及重新分配的ETag值。
在这里插入图片描述
如果强制浏览器使用协商缓存策略，需要将Cache-control首部信息设置为no-cache，这样便不会判断max-age和Expires过期时间，从而每次资源请求都会经过服务器对比。