时间:2021-05-25
一、浏览器渲染过程
1、用户打开页面,空白屏,等待html的返回
2、html下载完毕,开始解析html,初始渲染
3、下载css、js等资源,执行js渲染虚拟DOM
4、发起请求、获取数据,渲染内容
下面我们主要是讨论一下如何通过预渲染的方式降低空白屏的时间
缩小首屏载时间是一个重要的优化项,总结来主要有以下几种方式:
1、尽可能的缩小webpack或者其他打包工具生成的包的大小
2、使用服务端渲染的方式
3、使用预渲染的方式
4、使用gzip减小网络传输的流量大小
5、按照页面或者组件分块懒加载
二、传统页面开发
在React、Vue这种数据驱动的框架还没盛行的时候,一般我们都是直接在html上写dom结构的,要不就是直接服务端直出,所以我们在下载完html页面后,空白屏的时间是非常短的,因为dom是在html中的,并不是像现在以虚拟dom的方式写在js中,所以,我们不需要等待js下载完毕后才开始渲染页面,而是html下载完毕后直接渲染出dom结构。
如今我们运用Vue等框架进行开发的时候,一般在html结构都是下面这样的
在js资源没有下载完毕的情况下,页面一直都是处于空白的页面,一直要等到虚拟dom插入到id为app的div中,这时候白屏才消失开始展现页面,反正就是让人感觉特别慢就是了!
既然知道了白屏是怎么产生的,那我们下面就来尝试一下如何在webpack中集成预渲染的功能,来降低白屏的时间。
三、在webpack中集成预渲染功能
github:webpack中如何集成预渲染功能
这里我们尝试将一个使用vue编写的loading组件在webpack编译过程中将虚拟dom预渲染到html中,下面是loading组件的内容
上面__inline__是用于后面图片插入的标记,这里先不用管,其实这个组件就是一个简单的loading组件
最终我们想要的效果是,将这个vue组件的虚拟dom预渲染到html文件当中
向上面那样,在html页面返回时编译成base64内嵌到html中的loading就会马上显示,大大降低了白屏的时间,基本可以达到秒开页面,这时候我们不需要等待js资源的下载以及虚拟dom的插入,当然这里loading中的内容可以是任何你想要预先渲染的模板
因为这里我们的loading组件是用vue写的,所以我们试着看看如何来做预渲染并集成到webpack中(可以合着仓库的代码一起看,代码挺简单的,只是一个demo)
这里我们先把vue单文件中的html与css单独抽离出来
这里我们通过正则的方式将template与style标签中匹配到的内容单独抽离了出来,接下来我们需要将gif图转成base64并插入到我们抽出的css代码当中
上面我们通过extractAssetsInVueTpl函数抽离出了css,这里我们通过一个简单的函数将占位符替换成base64图片
下面我们就导出loading配置,包含了html模板与style样式字符串
简单写一个webpack入口配置,这里我们需要使用html-webpack-plugin将loading插入到html中(这里用到了插件的自定义模板)
在html中我们通过模板语法将loading的内容插入到html模板中对应的位置了
四、总结
这里只是写一个demo介绍一下原理,更复杂的可以使用vue-server-render来做同构直出或者使用一些像handlebars的模板引擎来生成模板,其实就是将服务端的渲染工作放到了编译的过程当中。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文介绍了VUE预渲染及遇到的坑,分享给大家,具体如下:npminstall-Dprerender-spa-plugin修改webpack.prod.conf.
最大预渲染设置是4,最大预渲染帧数同时占用额外的处理器时间和GPU额外显存,如果处理器并不好和显存并不大,请设置为1到2范围内,让大部分的性能用来渲染当前帧。
刚开始由于layuiform渲染与vue渲染有时间差有时会导致select里面是空白的后来就想办法等vue数据渲染完再渲染layuiform试过模块化导入lay
canvas玩多了后,就会自动的要开始考虑性能问题了。怎么优化canvas的动画呢? 【使用缓存】 使用缓存也就是用离屏canvas进行预渲染了,原理很简单
pr渲染视频的方法是: 1、打开premiere软件,双击项目面板空白地方,导入视频素材。 2、将刚刚导入的视频素材拖入到右侧时间轴面板中。 3、点击左侧