写写5G网速及页面提速中的延迟加载Lazyloading

最近关注网络速度多一些，无论是财经人士口中的新基建的5G，还是家庭路由器中的5G Wifi，也包括即将购买新的5G手机… 写完上一篇：gMIS吉米斯 升级支持IPv4/IPv6双栈网络模式  之后，觉得还有必要再写写热点5G及其带宽速度。

尽管互联网络已经突飞猛进地发展建设这么多年，如果留意某些情况下，打开一个图文页面仍觉得很吃力。尽管终端手机和运营商都提供了百兆、几百兆的连接速度，基本的图文页面打开，仍难用流畅来形容。

冷静地观察一下，眼下的网络浏览有点像开车去城里的大医院看医生的过程；
1) 飞速地冲出小区上了城市主干道（宽带入户：快），
2) 主干道拥堵，龟速（社区到电信局共享带宽：卡），
3) 跨区快速路、城市环路拥堵，龟速（城市间、运营商之间、跨国：堵），
4) 进医院区难、停车漫长，挂号排队漫长（服务端带宽及队列：慢），
5) 见医生，快速面谈几分钟（服务器处理单个请求：快）。

概略地看，现在的堵点在中间网络层，不在终端层（最后一公里），无论是快速的5G手机、5G基站，还是光纤入户几百兆、千兆的路由，出了小区之后开始就卡、堵、慢。拥堵点在社区到电信局、跨城市跨运营商跨国家以及服务器端带宽及队列，也即骨干网和数据中心。

1. 5G Wifi 和 5G Cellular

两者的共同点是，这两个5G都是无线通信技术。
这两者的区别是前者的5G是指Wifi通信标准802.11x中的 5Ghtz的频率段，而后者5G是指第五代通信标准，具体用到多少频率段，各国各运营商自己选定。下图是中国三大运营商的5G Cellular用到的频率段。

5G Wifi 和 5G Cellular非要翻译一下是： 5G Wifi: 5G赫兹频率的高保真无线连接技术；5G Cellular: 第五代蜂窝式组网技术 。5G手机，就是支持第五代蜂窝式组网技术的手机。5G家用路由器就是支持5G赫兹频率高保真无线连接技术的路由器。

近期网络新闻中扑面而来的5G应该是指 5G Cellular，可想而知，扩展再多的5G基站，使用再快的5G手机，也无法解决上述过程中的卡、堵、慢。5G Cellular下的点对点的局部连接，或有积极意义，对推动局部组网的物联网或有帮助。

这么拥堵而艰难的骨干网和数据中心，为何一些成规模的互联网服务还是看起来很流畅，图文浏览不说，甚至是视频点播、直播也还可以？大致有三点：
1) 资源下沉&前置到用户最近的地方（医生到小区门口开诊）；
2) 2) 压缩及传输技术的进步使得高清图像数据流可以在低速网络上运行（骑车或者开飞机去看VIP医生）；
3) 3) 热点数据.

这些都需要巨大的开支（更多的硬广告时间/更构陷的软内容设计）来支撑。

2. 网络页面加载中的延迟加载Lazy loading

无论是终端提速，还是骨干网和数据中心的提速，都是系统工程、社会工程。作为其中的个体，一个网站和一个网页如何能在既有的网络速度条件下，为用户提供更好的浏览体验，是技术和设计人员需要共同考虑的问题。这其中延迟加载Lazy Loading技术是颇受欢迎的技术之一。

通常情况下，浏览器加载一个图文页面，通常是按自然顺序，由前到后，自上而下的进行。当某些资源尺寸较大时，可以通过一些技巧跳过这些大块头，将页面全貌布局显示完成后再分出时间和精力来处理这大块头的对象，这就是延迟加载。

比如网页中的图片，或者较大的数据List。我们曾经在 gMIS吉米斯 的部署中遇到要将上万条记录加载到一个 Select 中的需求，通过异步延迟加载可以很好的改善浏览体验，避免页面卡死。

gMIS/吉米斯 GitHub源代码：
comm/ido.js: function imageLoadAsync(imgId, imgRealPath);

细究起来，延迟加载Lazy Loading可以区分为两个层次：
1) 将图片等从主体文本中区分开来，通过网页中的 JavaScript 的 window.setTimeout 可以将某些图片延迟加载；
2) 更进一步地，可以将一组图片的每一张都使用网页中的 JavaScript 的 window.setTimeout 分别予以延迟一定的时间。

尤其是后一种做法，只要延迟的速度跟得上用户的浏览和阅读的速度即可，这样可以避免同时并发多个HTTP请求拖慢浏览器，也避免了瞬间地对服务器的并发请求的冲击。

在 -Ufqi-News 有福新闻 和 一些基于 -GWA2 吉娃兔 的应用中，我们设计了如下这样的图片异步延迟加载的策略。

 <img class=”iconList” src=”loading.gif” data-src=”real-image-1.jpg” alt=”-x-“/>  
 <img class=”iconList” src=”loading.gif” data-src=”real-image-2.jpg” alt=”-x-“/>
 
 ….
 
 <script>  
 var delayImgLoadi = window.setTimeout(function(){  
 //-  
 var myImgs = document.getElementsByClassName(“iconList”);  
 var imgListSize = myImgs.length;  
 var mysrc = ”;  
 for(var ii=0; ii<imgListSize; ii++){  
 mysrc = myImgs[ii].getAttribute(‘data-src’);  
 if(mysrc == ”){  
 myImgs[ii].src = ‘data:image/jpeg;base64,0’;  
 }  
 else{  
 var loadAsyncImg = window.setTimeout(function(myObj, mySrc){  
 myObj.src = mySrc;  
 }, 1000*1.5*ii, myImgs[ii], mysrc);  
 }  
 }  
 //-  
 }, 1500*1);  
 </script>
 

这种策略的具体实现是，
首先将一组图片的默认 src资源指向一个默认的图片（如 loading.gif ), 页面加载时会快速完成这个图片列表；
其次在页面下面安排了一段 JavaScript 代码，安排了一个异步执行的代码段A，其中将要读取上面一组图片；
再次，代码段A根据读取到的图片，判断其真实src（ data-src )是否合法，如果合法，就额外地安排另外一个异步执行的代码段B；
最后，代码段B将这个真实的src从服务器端读取过来，并呈现在页面中，执行速度是每1.5秒读取一个。

当代码段A被安排完成后，页面已经呈现完成，用户可以阅读其中的文字内容；当代码段B被执行时，用户已经开始阅读内容；随着代码段B被顺序执行时，图片也一一呈现，用户也就顺序阅读到图片；只要代码段B的执行速度大于用户的阅读速度，用户体验应该是能够保证的。

其中 src=“data:image/jpeg;base64,0” 表示加载一个空图片，内容为 Base64的形式文本，无需再做额外地HTTP请求。

幸运地是，针对这种设想，HTML国际标准组织正在设法将其变成标准的一部分。

Loading Attribute
The loading attribute allows the browser to defer loading of images/iframes that are off-screen until the user scrolls near them. Indicates if the element should be loaded lazily (loading="lazy") or loaded immediately (loading="eager").  WIP: WHATWG PR #3752

<img src="image.jpg" loading="lazy" alt="..." />
<iframe src="video-player.html" loading="lazy"></iframe>

也许未来，想要 img 和 iframe这些资源异步加载，只要一个 loading属性来设置一下即可。

本文Url4p：-R/K2SN