按需加载图片、html代码、js代码,前端页面性能优化

加载一个比较长的页面,或者图片比较多的页面,如果把资源一次性全部加载,在网络不是很好的情况下可能造成页面留白现象,用户体验极差!

因此呢,我们可以把用户暂时不会看到或用到的资源先不加载,在某个条件下,

如鼠标点击、滚动条高度到某一位置,窗口大小改变等等,按需加载资源!

1.按需加载图片 

用data-src设置个无效图片地址,滚动条快滚动到图片要显示时,把真正要显示的图片替换回来

(忽略不小心打错的[4])

2.按需加载html

将暂时闲置的html放到 <textarea>标签里,并给textarea设置display:none。(这里特别提一下,display:none的元素及里面子元素依旧会被渲染。但在vue里,v-if="false"的元素是不会渲染的!)

因为textarea里的代码会被认为是普通文本,文本里面的标签暂时并不需要被渲染,所以减少了初始渲染时间。

前:

后:

js代码:

3.按需加载js

猜你喜欢

转载自blog.csdn.net/illusion_melody/article/details/81386120