首页白屏解决方案

#首页白屏解决方案| 来源: 网络整理| 查看: 265

白屏原因：

vue首页白屏的原因是打包后的js和css文件过大，浏览器初始访问网站时，会先加载该项目的js和css文件，加载完成后才会进行页面渲染。如果打包的文件过大，加载时间就会变长，出现视觉上的页面白屏.

白屏时间(FP)

白屏时间(First paint):指浏览器从响应用户输入网址地址，到浏览器开始显示内容的时间。

白屏时间= 页面开始展示的时间点——开始请求的时间点首屏时间(FCP)

首屏时间(First Contentful Paint):指浏览器从响应用户输入网络地址，到首屏内容渲染完成的时间。

首屏时间= 首屏内容渲染结束时间点——开始请求的时间点最基本、简单解决方法

首页添加一个loading,在index.html里加一个loadingcss效果，当页面加载完成后消失。

代码解决方案：路由懒加载未使用路由懒加载的写法 import HelloWorld from '@/components/HelloWorld' routes:[{ path:'/', name:'HelloWorld', component:HelloWorld }] 复制代码

使用路由懒加载

routes:[{ path:'/index', name:'index', component:() => import('@/views/index') }] 复制代码

总结：使用懒加载，打包后才根据路由生成多个js和css文件，当访问到对应的路由时，才加载对应的文件

在移动端页面的首页时，先加载可视区域的内容，剩下的内容等它进入可视区域后再按需加载

CDN资源优化

随着项目越做越大，需要依赖的第三方npm包也越多，构建后的文件也越大。

将vue、vue-router、vuex、axios等vue的全家桶资源，全部改为通过CDN链接获取，在index.html里插入相应的链接复制代码 - 在vue.config.js中配置externals属性复制代码 module.exports = { ... externals:{ 'vue':'Vue', 'vuex':'Vuex', 'vue-router':'VueRouter', 'axios':'axios' } } 复制代码 - 卸载相关依赖的npm包复制代码 npm uninstall vue vue-router vuex axios 复制代码缓存接口缓存端内所有请求都走Native，实现接口缓存静态资源缓存静态资源长期不需要修改的，使用强缓存，设置Cache-Control实现，设置Cache-Control:max-age=31536000,浏览器在一年内直接使用本地缓存文件，不向服务器发送请求。资源随时变动，设置ETag实现协商缓存，初次请求资源时，设置ETag,并返回200，之后请求时带上If-none-match字段，询问服务器当前版本是否可用。并行化处理

利用HTTP2.0多路复用的特点，单个文件可以单独上线，不需要再做JS文件合并了。采用二进制数据帧和流的方式进行传输。

搭建性能平台(埋点)

目的：为了能获取到一部分上报数据。例如：页面访问次数，那些位置、入口点击数最高等

手动埋点原理：调用埋点SDK的函数，在需要埋点的业务逻辑功能位置调用接口上报埋点数据手动埋点的技术本质是，能获取到那些内容：域名：document.domainURLdomcument.URl 页面标题：document.title 分辨率：window.screen.height & window.screen.width 颜色深度：window.screen.colorDepth Referrer:cocument.referrer 埋点做法 // 命令式埋点 ()=>{ //...逻辑代码 sendData(params);//这里是发送埋点数据，params是封装的埋点数据 } // 声明式埋点 Touch 复制代码利用window.Performance（API）

可以拿到DNS解析时间、TCP建立连接时间、首页白屏时间、DOM渲染完成时间、页面load时间等

SSR

服务端渲染，在服务端将渲染逻辑处理好，然后将处理好的HTML直接返回给前端展示，可以解决白屏问题。

预渲染利用webpack的插件prerender-spa-plugin做预渲染配置如下 const path = require('path') const PrerenderSPAPlugin = require('prerender-spa-plugin') const Renderer = PrerenderSPAPlugin.PuppeteerRenderer module.exports = { configureWebpack: config => { let plugins = [] plugins.push(new PrerenderSPAPlugin({ staticDir: path.resolve(__dirname, 'dist'), routes: ['/', '/about'], minify: { collapseBooleanAttributes: true, collapseWhitespace: true, decodeEntities: true, keepClosingSlash: true, sortAttributes: true }, renderer: new Renderer({ renderAfterDocumentEvent: 'custom-render-trigger' }) })) config.plugins = [ ...config.plugins, ...plugins ] } } 复制代码

staticDir：预渲染输出的文件地址 routes：要做预渲染的路由 minify:压缩相关的配置 renderer 渲染引擎相关的配置总结：最后的结果是预渲染插件在编译阶段就将对应的路由编译好插入到app节点，这样就能在js文件解析过程中有内容展示，js解析完成后，Vue会将app节点内的内容替换成Vue渲染好的内容。

Chrome Dev Tools计算性能指标

可以使用Chrome Dev Tools计算性能指标

Network：页面中各种资源请求的情况（资源名称、状态、协议、资源类型和大小）等 Performance：页面各项性能指标的火焰图，（白屏时间、FPS、资源加载时间线）骨架屏

意义：骨架屏就是在页面尚未加载之前先给用户展示页面的大致结构，在骨架页面中，图片、文字、图标都将通过灰色矩形块或圆形块显示，直到页面请求数据后渲染页面。

原理：通过puppeteer在服务端操控headless Chrome打开开发中的需要生成骨架页面的页面，在等待页面加载渲染完成之后，保留页面布局样式的前提下，通过对页面中元素进行删减或增添，通过样式覆盖，使其展示为灰色块。

element-plus中有骨架屏复制代码

【本文地址】

公司简介

联系我们