首页 > 编程语言 >直播电商源码,用异步加成打造更高性能

直播电商源码,用异步加成打造更高性能

时间:2024-08-24 09:26:20浏览次数:11  
标签:异步 console log img return 源码 const 电商

直播电商源码,用异步加成打造更高性能

单线程和异步

  • js是单线程语言,同时只能做一件事
  • 浏览器和node已支持js启动进程,如Web Worker
  • js和DOM渲染共用同一个线程,因为js可修改DOM结构
  • 遇到等待(网络请求,定时任务)不能卡住,所以需要异步
  • 同步会阻塞代码执行,异步不会阻塞代码执行
  • 应用场景——
    (1) 网络请求,如ajax图片加载
    (2)定时任务,如setTimeout
// 异步 (callback 回调函数)
console.log(100)
setTimeout(() => {
    console.log(200)
}, 1000)
console.log(300)
console.log(400)

// 同步
console.log(100)
alert(200)
console.log(300)

 

Promise

//手写promise加载一张图片
function loadImg(src) {
    const p = new Promise(
        (resolve, reject) => {
            const img = document.createElement('img')
            img.onload = () => {
                resolve(img)
            }
            img.onerror = () => {
                const err = new Error(`图片加载失败 ${src}`)
                reject(err)
            }
            img.src = src
        }
    )
    return p
}

const url = 'https://img.mukewang.com/5a9fc8070001a82402060220-140-140.jpg'
loadImg(url).then(img => {
    console.log(img.width)
    return img
}).then(img => {
    console.log(img.height)
}).catch(ex => console.error(ex))

const url1 = 'https://img.mukewang.com/5a9fc8070001a82402060220-140-140.jpg'
const url2 = 'https://img3.mukewang.com/5a9fc8070001a82402060220-100-100.jpg'

loadImg(url1).then(img1 => {
    console.log(img1.width)
    return img1 // 普通对象
}).then(img1 => {
    console.log(img1.height)
    return loadImg(url2) // promise 实例
}).then(img2 => {
    console.log(img2.width)
    return img2
}).then(img2 => {
    console.log(img2.height)
}).catch(ex => console.error(ex))

 

以上就是直播电商源码,用异步加成打造更高性能, 更多内容欢迎关注之后的文章

 

标签:异步,console,log,img,return,源码,const,电商
From: https://www.cnblogs.com/yunbaomengnan/p/18377390

相关文章