直播电商源码,用异步加成打造更高性能
直播电商源码,用异步加成打造更高性能
单线程和异步
- 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))
以上就是直播电商源码,用异步加成打造更高性能, 更多内容欢迎关注之后的文章