【优化】前端性能优化---计算⾸屏加载时间和⾸屏加载速度慢怎么解决？SPA单页⾯应⽤：计算⾸屏加载时间和⾸屏加载速度慢怎么解决？
1. 什么是⾸屏加载时间?
⾸屏加载时间，指的是浏览器从相应⽤户输⼊⽹址，到⾸屏内容渲染完成的时间，此时整个⽹页不⼀定全部渲染完成，但需要展⽰当前视窗需要的内容。
计算⾸屏加载时间公式：
times = (performance.timing.domComplete - performance.timing.navigationStart) / 1000
performance对象的内容
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格式⽂件的形式引⽤到页⾯上，使⽤雪碧图只需要引⽤⼀张图⽚，对内存和带宽更加友好。
使⽤雪碧图的优点有以下⼏点：
1. 将多张图⽚合并到⼀张图⽚中，可以减⼩图⽚的总⼤⼩
2. 将多张图⽚合并到⼀张图⽚后，只需⼀次⽹络请求就可以将所需的资源全部下载，减⼩建⽴连接的消耗，在移动端尤为明显
雪碧图的制作与使⽤⽅法：
1. 使⽤图像编辑软件如Photoshop将多张图放到同⼀个图层并导出或使⽤⾃动化构建⼯具⾃动拼接合并后的图⽚
2. 引⽤图⽚时，图⽚地址为合并后的图⽚地址，通过background-position调整背景图的位置，并通过容器的宽⾼共同作⽤，来选出所
web后端是指什么需的图⽚
注意：
在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
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。