【优化】前端性能优化---计算首屏加载时间和首屏加载速度慢怎么解决？

最新推荐文章于 2024-04-23 16:26:38 发布

卸载引擎

最新推荐文章于 2024-04-23 16:26:38 发布

阅读量2.7k

点赞数 1

分类专栏：编译与打包前端优化文章标签：前端性能优化

本文链接： https://blog.csdn.net/weixin_42960907/article/details/123311468

版权

前端优化同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

编译与打包

3 篇文章 0 订阅

订阅专栏

SPA单页面应用：计算首屏加载时间和首屏加载速度慢怎么解决？

1. 什么是首屏加载时间?
2. 首屏加载速度慢怎么解决？

1. 什么是首屏加载时间?

首屏加载时间，指的是浏览器从相应用户输入网址，到首屏内容渲染完成的时间，此时整个网页不一定全部渲染完成，但需要展示当前视窗需要的内容。

计算首屏加载时间公式：
times = (performance.timing.domComplete - performance.timing.navigationStart) / 1000

performance对象的内容

performance.getEntries() //获取每个资源的加载时间-针对大的优化

2. 首屏加载速度慢怎么解决？

2.1 减少入口文件体积

常用的手段是路由懒加载，只有在解析路由才会加载相应的组件

const routes = [
  {
    path: "blogs",
	name: "blogs",
	component: () => import('./components/blog.js')
  }
];

2.2 静态资源本地缓存

后端返回的资源：采用http缓存
前端合理利用localStorage
CDN静态资源缓存

2.3 UI框架按需加载

在日常使用的UI框架，例如element-UI，antd，我们按需引入：

import { Button } from 'antd';

2.4 避免组件重复打包

假设A.js文件是一个常用的库，现在有多个路由使用A.js文件，这样就造成重复下载。

解决方案：
在webpack的config文件中，修改CommonsChunkPlugin的配置minChunks:2
minChunks为2会把使用2次及以上的包抽离出来，放进公共的依赖文件中，避免了重复加载组件。

2.5 图片资源压缩

图片资源虽然不在编码过程中，但是它对页面加载速度影响较大。对于所有的图片资源，可以进行适当的压缩。
对于页面上的icon，可以使用在线字体图标，或者使用雪碧图将众多小图标合并到一张图上，以减少http请求的压力。

雪碧图被运用在众多使用了很多小图标的网站上。相对于把每张小图标以.png格式文件的形式引用到页面上，使用雪碧图只需要引用一张图片，对内存和带宽更加友好。

使用雪碧图的优点有以下几点：

将多张图片合并到一张图片中，可以减小图片的总大小
将多张图片合并到一张图片后，只需一次网络请求就可以将所需的资源全部下载，减小建立连接的消耗，在移动端尤为明显

雪碧图的制作与使用方法：

使用图像编辑软件如Photoshop将多张图放到同一个图层并导出或使用自动化构建工具自动拼接合并后的图片
引用图片时，图片地址为合并后的图片地址，通过background-position调整背景图的位置，并通过容器的宽高共同作用，来选出所需的图片

注意：

在HTTP2中，已经不需要考虑减少请求数，故雪碧图在HTTP2中优化性能的意义已经不大

2.6 开启gzip压缩

拆包之后，可以再使用gzip做一下压缩，安装compression-webpack-plugin
在webpack中配置压缩

const CompressionWebpackPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = ['js','css'];

// 配置compression-webpack-plugin压缩
new CompressionWebpackPlugin({
	algorithm：'gzip',
	test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
	threshold: 10240,
	minRatio: 0.8
});

卸载引擎

关注关注

1
点赞
踩
16

收藏

觉得还不错? 一键收藏
打赏
0
评论
【优化】前端性能优化---计算首屏加载时间和首屏加载速度慢怎么解决？

SPA单页面应用：计算首屏加载时间和首屏加载速度慢怎么解决？首屏加载时间，指的是浏览器从相应用户输入网址，到首屏内容渲染完成的时间，此时整个网页不一定全部渲染完成，但需要展示当前视窗需要的内容。计算首屏加载时间公式： times = (performance.timing.domComplete - performance.timing.navigationStart) / 1000
复制链接

扫一扫

专栏目录

应用篇 1：优化首屏体验——Lazy-Load 初探(2).md

04-01

前端性能优化实践# 知识体系与小册格局 ## 写给读者提起性能优化，大家现在脑海里第一时间会映射出什么内容呢？可能是类似[“雅虎军规”](https://developer.yahoo.com/performance/rules.html?guccounter=1)和[《高性能 JavaScript》](https://book.douban.com/subject/5362856/)这样历久弥香的经典之作，也可能是搜索引擎聚合给你的一篇又一篇以性能优化为主题的个人或团队实践而来的“私货”。至少当我确定自己的研发方向、并接到第一个性能优化任务时，我做的第一件事是向搜索引擎求助，第二件事是买书，然后开始了摸着石头过河，前后花费了大量的时间和精力。我深感性能优化实在是前端知识树中特别的一环——当你需要学习前端框架时，文档和源码几乎可以告诉你所有问题的答案，当你需要学习 Git 时，你也可以找到放之四海皆准的实践方案。但性能优化却不一样，它好像只能是一个摸索的过程。这个摸索的过程是痛苦的、漫长的，也是紧要的。因为在如今的互联网环境下，一个前端团队如果只把性能优化这个任务写在纸上，而不投入实践，它将缺失最基本的竞争力。笔者写这本小册，是希望通过短短十数个章节的讲解，尽可能降低一些大家学习性能优化的成本。一方面，这本小册为没有接触过性能优化的新同学建立起一个正确的前端性能优化的“世界观”，知道性能优化是什么、为什么、怎么做，从而使性能优化这件事情有迹可循，有路可走。这样在面试现场被问到性能优化层面的问题时，能够做到滔滔不绝、言之有物，而非像背书一样罗列干巴巴的知识点，最终淹没在茫茫的求职大军中。另一方面，小册可以为在职的工程师们提供一线团队已经实践过的“方法论”，知道什么场景下该做什么事情，最终在脑海中留下一张涵盖核心原理和实践的、可随时查阅并且高度可扩展的性能优化思路索引表。然后在今后的开发生活中可以去践行它，更进一步去挖掘它。把性能优化变作你前端工程师生涯的一门必修课，进而演化为自己研发方面的核心竞争力。同时，相信大家可以明确这样一个学习观念：任何技术的掌握，都离不开一定比例的理论基础和实际操作的支撑。具体到前端性能优化这件事情上，我认为它是 20% 的理论，加上至少 80% 的实践，甚至很多理论本身也都是我们在具体的业务场景中实践出来的。所以希望大家阅读本小册时，能够读到一些“书本之外的东西”——最好是一边读一边回忆自己既有的开发经历，尝试去留意哪些知识是已知的，哪些是未知的。这样读完之后，就可以有的放矢地把这些知识转换为自己的项目实践——前端技术日新月异，性能方案永远都在更迭，所以一定要形成自己的学习思路。建议每一位读者都带着“学了就要用”的心态去读这本小册。如果阅读结束，能够为你带来哪怕一个小小的开发习惯或者优化观念上的改变，这数小时的阅读时间就算没有白费。 ## 知识体系：从一道面试题说起在展开性能优化的话题之前，我想先抛出一个老生常谈的面试问题： > 从输入 URL 到页面加载完成，发生了什么？这个问题非常重要，因为我们后续的内容都将以这个问题的答案为骨架展开。我希望正在阅读这本小册的各位可以在心里琢磨一下这个问题——无须你调动太多计算机的专业知识，只需要你用最快的速度在脑海中架构起这个抽象的过程——我们接下来所有的工作，就是围绕这个过程来做文章。我们现在站在性能优化的角度，一起简单地复习一遍这个经典的过程：首先我们需要通过 DNS（域名解析系统）将 URL 解析为对应的 IP 地址，然后与这个 IP 地址确定的那台服务器建立起 TCP 网络连接，随后我们向服务端抛出我们的 HTTP 请求，服务端处理完我们的请求之后，把目标数据放在 HTTP 响应里返回给客户端，拿到响应数据的浏览器就可以开始走一个渲染的流程。渲染完毕，页面便呈现给了用户，并时刻等待响应用户的操作（如下图所示）。 ![](https://user-gold-cdn.xitu.io/2018/10/18/16685737b823244c?w=489&h=329&f=png&s=19023) 我们将这个过程切分为如下的过程片段： 1. DNS 解析 2. TCP 连接 3. HTTP 请求抛出 4. 服务端处理请求，HTTP 响应返回 5. 浏览器拿到响应数据，解析响应内容，把解析的结果展示给用户大家谨记，我们任何一个用户端的产品，都需要把这 5 个过程滴水不漏地考虑到自己的性能优化方案内、反复权衡，从而打磨出用户满意的速度。 ## 从原理到实践：各个击破我们接下来要做的事情，就是针对这五个过程进行分解，各个提问，各个击破。具体来说，DNS 解析花时间，能不能尽量减少解析次数