首页 > 其他分享 >协程及其实现,图片懒加载

协程及其实现,图片懒加载

时间:2022-12-03 11:36:26浏览次数:36  
标签:src 协程 js 线程 加载 图片

一、什么是协程?

答:协程就是一个无优先级的子程序调度组件,允许子程序在特定的地方挂起和恢复。协程包含于线程,线程包含于进程。只要内存足够,一个线程可以有任意多个协程,但某一时刻只能有一个协程运行,且所有的协程共享该线程分配的计算机资源。

!!!进程与线程由操作系统控制,协程则可由程序员进行控制!!!

二、为什么需要协程?

答:协程允许我们使用写同步代码的逻辑实现异步任务,避免了回调的嵌套,使得代码逻辑清晰。

三、nodejs实现

答:使用js中的Generator迭代生成器,使用yield关键字挂起异步任务,使用时调用next()获取;也可使用Promise和async方法返回以解决回调嵌套。

 

四、图片懒加载

4.1什么是图片懒加载?

答:当访问一个页面时,先不显示真正的img或背景图片路径,只有当图片出现在浏览器可视区域内时,才显示其真正的路径,这就是图片懒加载。

4.2为什么要使用图片懒加载?

答:当一个页面有很多图片时,比如淘宝、京东等电商网页,一上来就会发送大量的请求,会导致浏览器加载速度变慢,且js文件一般置于文档底部,如果恰好页面头部依赖此js文件,页面将无法完整显示,且服务器压力过大。

4.3如何实现?

答:先将img的src属性去掉,这样就不会发送请求了,再通过js设置图片路径,在合适的时间进行显示。

1.使用另一个别名,如data-src将图片路径进行存储;

2.获取用户浏览的位置,在用户浏览到相应的位置后再将data-src的路径值赋予src发送请求

标签:src,协程,js,线程,加载,图片
From: https://www.cnblogs.com/jackdongdong/p/16947170.html

相关文章