抛砖引玉:大型网站性能优化之Javascript异步懒加载技术

Posted 2020-08-30

懒加载技术是现在许多大型网站的都使用的提高网站性能的方式,它的核心思想是当用户想看页面某个区域时，再加载该区域的数据。这在一定程度上减轻了服务器端的压力，也加快了页面的呈现速度。

 

其实国内很多网站都用到了懒加载技术,比如国内两个大型电商网站的页面都运用到了这项技术:

 

天猫首页:

京东商品列表页:

 

 

最近在学习时,自己写了一个带懒加载功能的电影列表展示页,大家可以先看下页面效果:

http://f81236211.w4w7.tumm.top/lazyload/ 

 

然后自己在页面底部写了一个分页功能,页面跳转后仍然是懒加载的,只有后面的内容滚动进视野区内时,才去加载.

(大家在看demo时,不要频繁跳转请求页面,因为给我提供数据的豆瓣开发者api进行了请求频率限制,频繁请求会暂时挂掉,其实我自己也把豆瓣的数据爬取到我的服务器数据库了了,但是还要写服务器端的传输数据接口太麻烦了,直接跨域从豆瓣拿了)

 

懒加载一般主要用于图片,因为我们都知道,一个页面加载中一般来说占流量最大的就是图片了,一般来说懒加载的主流实现方式是:先将需要懒加载的图片的真正src隐藏掉，这样图片就不会下载，然后在图片需要呈现给用户时再加上真实的src属性。

 

我这里写了一个懒加载图片的demo:

http://f81236211.w4w7.tumm.top/lazyimg/

 

大家可以看下,原理是:

1.一开始让页面中所有资源的src都是1.jpg,这样页面加载时只会加载一张图片

<img src="./img/1.jpg" data-src="img/3.jpg">
<img src="./img/1.jpg" data-src="img/4.jpg">
<img src="./img/1.jpg" data-src="img/a.jpg">
<img src="./img/1.jpg" data-src="img/b.jpg">
<img src="./img/1.jpg" data-src="img/c.jpg">

 

2.监测滚动条滚动,滚到到视野范围内时,让图片的src变为图片上data-src里面真实的图片地址,这样就实现了动态的懒加载效果.

 

现在很多网站图片的懒加载都是基于这个原理实现的,但是很多网站不止懒加载图片,还懒加载区块内容,就像许多空间新闻类网站的列表页一样,比如知乎:

以及qq空间:

当页面滚动滚动到视野区域内时,加载整块内容,包括html结构,我开头的电影demo里简单实现了这个效果,可以发现当滚动条滚动到这个区域时,整个html结构都是动态生成的,这是我电影懒加载demo里实现的效果:

我们先不讨论这样做的优缺点,只说一下简单实现原理:

1.做一个html模板.我这里用的arttemplate做的.

2.当页面首次呈现出来时把数据嵌入到模板里.然后把模板append到页面容器内.

3.当页面滚动到视野区时,去缓存中或者是用ajax去异步请求一屏的数据再次嵌入到模板里,然后append到页面容器内,这样的话如果有无限的数据就会产生知乎,QQ空间哪种无限内容加载的瀑布流效果.

(此处我的电影数据有限,所以没有做成瀑布流,做成了分页的形式,不能无限加载,只要加载5屏就会到页面底部选择是否跳转到新的一页,比较类似电商网站商品列表的风格)

 

由于懒得下插件,自己全用jquery写的,这里几个与本文有关的工具及插件,大家自行搜索:

懒加载:lazyload.js

分页:twbs-pagination

模板:arttemplate

数据:豆瓣开发者api

 

这是github源码地址:https://github.com/JOE-XIE/lazy-demo

 

关于图片懒加载以及区块的懒加载,大家如果有更NB的实现方式或优化方式欢迎在评论区分享一下,在此抛砖引玉,恳请大神指导!