![2056ff06321c92c791061fea644fcc84.png](https://i-blog.csdnimg.cn/blog_migrate/e25720ddf48f52c810477fa1d31346e2.png)
7、异步和单线程
1、异步和同步的区别是什么?
异步不会阻塞代码的执行
同步会阻塞代码的执行
//异步
console.log(100)
setTimeout(()=>{
console.log(200)
},1000)
console.log(300)
//先打印100 和300 1秒之后在打印200
//同步
console.log(100)
alert(200)
console.log(300)
//先打印100,点击确认之后在打印300
2、手写Promise加载一张图片
//用promise的方式加载图片
function loadImage(src,prev){
console.log('我是上一个'+prev)
return new Promise((resolve,reject)=>{
let img = document.createElement('img')
img.src = src
document.body.appendChild(img)
img.onload = function () {
resolve(img)
}
img.onerror = function() {
const err = new Error('图片加载失败'+src)
reject(err)
}
})
}
var p = loadImage('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592141012940&di=9c0e87d2c015a45da9022dc42bb0a65e&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F14%2F75%2F01300000164186121366756803686.jpg')
p.then((res)=>{
let img = res
let width = img.width
let src = img.src
return loadImage('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592141012940&di=89c7c5e429c3ab15e5315d4736ce15b7&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F56%2F12%2F01300000164151121576126282411.jpg',src)
})
.then((res)=>{
let src = res.src
console.log(src)
})
.catch((err)=>{
console.log(err)
})
3、前端使用异步的场景有哪些?
1、网络请求,如ajax图片加载
2、定时任务,如setTimeout
8、JS WEB API
1、DOM
- DOM是那种数据结构?
从html标记语言解析成的一棵树 - DOM操作的常用API
新增/插入节点
获取子元素列表,获取父元素
删除子元素 - attr和property的区别?
property:修改对象属性,不会体现到html结构中
attribute:修改html属性,会改变html结构
两者都有可能引起dom重新渲染 - 一次性插入多个DOM节点,考虑性能
//dom查询做缓存
for(l