区块链技术博客
www.b2bchain.cn

九、资源串行加载优化策略求职学习资料

D0b2wT.gif

本文介绍了九、资源串行加载优化策略求职学习资料,有助于帮助完成毕业设计以及求职,是一篇很好的资料。

对技术面试,学习经验等有一些体会,在此分享。

九、资源串行加载优化策略

实践场景:一个活动页面,页面中引用到了大量的图片,为了动画效果,需要提前将所有的图片加载进来。这种场景类似于许多游戏,在游戏加载之前需要加载大量的静态资源。

对于游戏来说,需要考虑的场景可能更复杂,因为一个新版本需要加载的资源类型可能更复杂。不过对于这样一个活动页面来说,我们就只考虑大量图片的情况。

最开始没有去思考性能优化的需求,因此直接简单粗暴的一次性加载了所有图片。

// images 是所有的图片地址集合 images.keys().map(path => new Promise(resolve => {   const image = new Image();   image.src = images(path);   image.onload = image.onerror = resolve; }))

代码是简单了,可是导致的最终结果就是 http 线程严重阻塞。因此简单手段来处理这种大量图片同时加载的方案肯定不行。

优化的思路就是让图片一张一张加载。这样的思路在之前的文章里其实有提到过,当一次任务超过能力范围时,就把任务进行拆分,让每一次的任务都属于力所能及的范围之类。这种分片的思路在性能优化策略里是被大量使用的。

那么当前的场景应该如何具体来实现呢?代码如下
“`js
images.keys().reduce((cachePromise, path) => cachePromise.then(() => {
return new Promise(resolve => {
const image = new Image();
const complete = () => {
clearTimeout(timer);

九、资源串行加载优化策略

实践场景:一个活动页面,页面中引用到了大量的图片,为了动画效果,需要提前将所有的图片加载进来。这种场景类似于许多游戏,在游戏加载之前需要加载大量的静态资源。

对于游戏来说,需要考虑的场景可能更复杂,因为一个新版本需要加载的资源类型可能更复杂。不过对于这样一个活动页面来说,我们就只考虑大量图片的情况。

最开始没有去思考性能优化的需求,因此直接简单粗暴的一次性加载了所有图片。

// images 是所有的图片地址集合 images.keys().map(path => new Promise(resolve => {   const image = new Image();   image.src = images(path);   image.onload = image.onerror = resolve; }))

代码是简单了,可是导致的最终结果就是 http 线程严重阻塞。因此简单手段来处理这种大量图片同时加载的方案肯定不行。

优化的思路就是让图片一张一张加载。这样的思路在之前的文章里其实有提到过,当一次任务超过能力范围时,就把任务进行拆分,让每一次的任务都属于力所能及的范围之类。这种分片的思路在性能优化策略里是被大量使用的。

那么当前的场景应该如何具体来实现呢?代码如下
“`js
images.keys().reduce((cachePromise, path) => cachePromise.then(() => {
return new Promise(resolve => {
const image = new Image();
const complete = () => {
clearTimeout(timer);

九、资源串行加载优化策略

实践场景:一个活动页面,页面中引用到了大量的图片,为了动画效果,需要提前将所有的图片加载进来。这种场景类似于许多游戏,在游戏加载之前需要加载大量的静态资源。

对于游戏来说,需要考虑的场景可能更复杂,因为一个新版本需要加载的资源类型可能更复杂。不过对于这样一个活动页面来说,我们就只考虑大量图片的情况。

最开始没有去思考性能优化的需求,因此直接简单粗暴的一次性加载了所有图片。

// images 是所有的图片地址集合 images.keys().map(path => new Promise(resolve => {   const image = new Image();   image.src = images(path);   image.onload = image.onerror = resolve; }))

代码是简单了,可是导致的最终结果就是 http 线程严重阻塞。因此简单手段来处理这种大量图片同时加载的方案肯定不行。

优化的思路就是让图片一张一张加载。这样的思路在之前的文章里其实有提到过,当一次任务超过能力范围时,就把任务进行拆分,让每一次的任务都属于力所能及的范围之类。这种分片的思路在性能优化策略里是被大量使用的。

那么当前的场景应该如何具体来实现呢?代码如下
“`js
images.keys().reduce((cachePromise, path) => cachePromise.then(() => {
return new Promise(resolve => {
const image = new Image();
const complete = () => {
clearTimeout(timer);

部分转自互联网,侵权删除联系

赞(0) 打赏
部分文章转自网络,侵权联系删除b2bchain区块链学习技术社区 » 九、资源串行加载优化策略求职学习资料
分享到: 更多 (0)
D0b2wT.gif

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

b2b链

联系我们联系我们