当前位置: 首页 > Web前端 > HTML5

页面提速里面写5G网速和Lazyloading

时间:2023-04-05 20:31:50 HTML5

最近比较关注网速,不管是财经人提到的新基建5G,还是家用路由器的5GWifi,包括即将入手的新5G手机……写完之前的文章:gMISJimmys升级到支持IPv4/IPv6双栈网络模式,感觉有必要写一下热点5G及其带宽速度。虽然互联网发展了这么多年突飞猛进,但是如果你注意某些情况,打开一个图文页面还是很困难的。虽然终端手机和运营商都提供了百兆或者百兆的连接速度,但是基本图文页面的打开还是很难用流畅来形容。静下心来,现在的网页浏览有点像开车去城里的大医院看病;1)冲出小区,冲上城市主干道(宽带入户:快),2)主干道拥堵,乌龟3)跨区高速和环城公路拥堵,速度慢(城际、跨运营商、跨界:拥堵),4)进院区难,停车时间长,挂号排队长(服务器带宽和队列:慢),5)看病看病几分钟的快速面试(服务器处理单个请求:快)。粗略地说,当前的拥塞点在网络中间层,而不是终端层(最后一公里)。无论是快速的5G手机、5G基站,还是百兆、千兆的光纤到户线路,都是从离开小区开始。只是卡住,阻塞,缓慢。拥堵点从小区到电信局,跨城市,跨运营商,跨国家,服务器端带宽和队列,即骨干网和数据中心。1.5GWifi和5GCellular的共同点是5G都是无线通信技术。两者的区别在于,前者的5G指的是Wifi通信标准802.11x中的5Ghtz频段,而后者的5G指的是第五代通信标准。具体使用的频段由各个国家和运营商决定。下图是中国三大运营商5GCellular使用的频段。5GWifi和5GCellular必须这样翻译:5GWifi:5G赫兹频率高保真无线连接技术;5GCellular:第五代蜂窝网络技术。5G手机是支持第五代蜂窝网络技术的手机。5G家用路由器是支持5G赫兹频率高保真无线连接技术的路由器。最近网络新闻中提到的5G应该是指5GCellular。可以想象,无论5G基站扩容多少,5G手机用得再快,也解决不了上述过程中出现的卡、堵、慢等问题。5GCellular下的点对点本地连接可能是积极的,可能有助于推动物联网在本地组网。在骨干网和数据中心如此拥堵难行的情况下,为什么一些大型的互联网业务看起来还很流畅,别说图文浏览,就连视频点播和直播也不例外?大致有三点:1)资源下沉&转发到离用户最近的地方(医生到小区门口开医生);2)2)压缩和传输技术的进步使得高清图像数据流可以在低速网络上运行(骑自行车或者坐飞机去看VIP医生);3)3)热点数据。这些都需要巨大的开支(更多的硬广告时间/更多的软内容设计框架)来支撑。2.网络页面加载中的延迟加载延迟加载既是系统工程又是社会工程,无论是终端提速,还是骨干网和数据中心提速。作为其中的个体,一个网站和一个网页如何在现有的网速条件下为用户提供更好的浏览体验,是技术和设计者需要共同考虑的问题。其中,LazyLoading技术是比较流行的技术之一。通常,浏览器加载一个图形页面,通常是按照自然顺序,从前到后,从上到下。当一些资源比较大的时候,可以通过一些技巧来跳过这些大对象,在展示页面的整体布局之后,分配时间和精力去处理这些大对象。这是延迟加载。比如网页中的图片,或者大数据列表。我们曾经在gMISJimmys的部署中遇到需要将几万条记录加载到一个Select中。异步延迟加载可以提升浏览体验,避免页面卡顿。gMIS/JimmysGitHub源码:comm/ido.js:functionimageLoadAsync(imgId,imgRealPath);详细来说,LazyLoading可以分为两个层次:1)将图片等与正文区分开来,通过网页中JavaScript的window.setTimeout可以延迟部分图片的加载;2)另外,在网页中使用javascript的window.setTimeout可以将一组图片每张延迟一定的时间。尤其是后一种方式,只要延迟速度能跟上用户的浏览阅读速度,这样就可以避免并发发送多个HTTP请求拖慢浏览器速度,也可以避免瞬间并发请求对服务器的冲击。在-Ufqi-News福新闻和一些基于-GWA2的应用中,我们设计了如下的异步延迟加载图片的策略。....该策略的具体实现是先将一组图片的默认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属性loading属性允许浏览器延迟加载屏幕外的图像/iframe,直到用户滚动到它们附近。指示元素是延迟加载(loading="lazy")还是立即加载(loading="eager")。WIP:WHATWGPR#3752可能以后想要异步加载img、iframe等资源,只需要设置一个loading属性即可。本文url4p:-R/K2SN