js预加载loading的另类优化方案

野生程序猿-杂烧5年前野生技术1061

各位做前端的朋友有没做过loading预加载素材的功能,一般游戏开发正常都会用到。其实加载多图的时候我们为了优化体验都是需要做loading效果的。


哪些东西需要loading?最常见的就是图片,部分用到json等配置文件的也可以loading,再有就是部分音效,甚至js代码也可以loading预加载。很多朋友还停留在普通的网页前端,还没有loading的意识。尤其很多依赖框架开发的朋友,优化需求来了无从下手。


如何实现loading效果?今天我们不谈代码,主要谈一下思路。一个类客户端的web软件,往往是要考虑UI框架的加载,然后考虑主页图片素材的加载,然后功能页也得考虑加载。既然是loading那么第一个页面肯定是个单独的loading页面,尽可能的在这个页面少调用js,少调用图片。基本上loading页面整个html+js+css+图片控制在200k内,千万别用繁重的框架,一上来先加载个1-2MB的js,搞的客户火气很大,尤其是我们教学类软件很多动画效果,有的时候框架选不好,砸了自己招牌。


因此我们需要从原理上考虑这个loading效果,就是加载的优化。很多框架没有很好的loading方案,包括目前比较火的vue、uniapp、angularjs等等,尽管有一些方案但是不那么容易实现。这里我来给个野生思路,这个思路来源于游戏外挂,就是做一个外挂程序,nodejs、php都可以轻松实现。

首先我们用后端程序分析出编译好的文件,如

<script src=./static/js/chunk-vendors.cfb20cce.js></script><script src=./static/js/index.30e098f1.js></script>

替换为下面代码(demo的主要部分)

<script src=./static/js/preloadjs.min.js></script>
<script>
var need_loading_list=[];
var queue = new createjs.LoadQueue();

queue.on("complete", handleComplete);
queue.on('progress', handleProgress);
queue.loadManifest(need_loading_list);
function handleComplete() {
	//隐藏loading代码
	
	//重新加载js
	document.write(`<script src=./static/js/chunk-vendors.cfb20cce.js></script><script src=./static/js/index.30e098f1.js></script>`);
	
}
function handleProgress() {
	//loading进度条展示的代码
}
</script>

还需要用后端语言读取编译后的素材,如static文件夹,得到一个需要提前loading的list(实际情况可以根据每个页面的需要,用后端程序自动分析出对应页面用到的素材),同时后端代码直接修改编译好的文件进行代码的修改,达到自动化效果,当一个工具使用。


这是个野生程序猿的野生思路,不一定适合多数人,但是效果可以保证,已经用在多个项目里了。我一般控制首次加载不超过200K,然后其它都是异步加载。


相关文章

野生程序猿的养成(一)

很多时候我们开发的时候,思维不能太定视,视野一定要广,很多时候需要变通着想问题解决问题。如果你有以下类似案例,那你也是野生程序猿或者离野生程序猿不远了。一、用截图代替图片生成。用前端技术做复杂的图,然...

野生技术,活用exec

exec的支持,让程序有了很大的空间,尤其我们用electon开发桌面应用。我们可以调用ffmpeg处理视频、音频;我们也可以调用bat批处理;我甚至直接用exec配合各种程序开发出了远程管理工具。那...