WebGIS开发面试题：前端篇（三）
本系列内容主要介绍webgis开发过程中可能会遇到的常见面试题和答案，从前端到二维到三维，干货满满。记得关注我不走丢！
需要更多面试题、视频讲解、webgis教程的宝子戳↓↓↓
GIS学习
前几期内容点击下方链接：
WebGIS开发面试题：前端篇（一）
WebGIS开发面试题：前端篇（二）
1、同步异步
异步和单线程
-
JS是单线程语⾔，只能同时做⼀件事。
-
浏览器和node.js已⽀持JS启动进程，如Web Worker。
-
JS和DOM渲染共用同⼀个线程,因为JS可修改DOM结构。
异步是因为单线程而来的。
那么遇到等待(网络请求，定时任务)不能卡住，所以需要异步，异步是基于回调callback函数形式。
异步
//异步
console.log(100);
setTimeout(()=>{
console.log(200)
},1000) //callback
console.log(300);
//异步不会阻塞代码的执⾏。
同步
console.log(100);
alert(200);
console.log(300);
//同步会造成线程的阻塞。
总结
-
JS 是单线程的语⾔
-
异步不会阻塞代码的执行
-
同步会阻塞代码执行
应用****场景
网络请求，如何ajax-图片加载
定时任务，如setTimeout
题目
console.log("start");
let img = document.createElement("img");
img.onload = function(){
console.log("load");
}
img.src= "react.jpg";
console.log(img)
console.log("end")
2、promise
**1-1 promise有几种状态 **
pending
fulfilled
rejected
pending
var p = new Promise(() => { });
console.log(p)
fulfilled
var f = new Promise((resolve, reject) => {
resolve(1)
})
console.log(f)
rejected
var r = new Promise((resolve, reject) => {
reject(1)
})
console.log(r)
**1-2 状态之间的切换 **
pending–>fulfilled
var f = new Promise((resolve, reject) => {
setTimeout(()=>{
resolve(1);
},1000)
})
console.log(f)
pending -->rejected
var r = new Promise((resolve, reject) => {
setTimeout(()=>{
reject(1);
},1000)
})
console.log(r)
1-3 触发状态
**1-3-1 正常触发 **
1.正常情况下catch和then的返回值都是fulfilled的状态
2.触发函数中存在报错的情况，返回值是rejected的状态
// then
var p= new Promise((resolve, reject) => {
resolve(1);
reject(2);
})
var r = p.then(res=>{
console.log(res)
})
console.log(r) //fulfilled
//catch
var p= new Promise((resolve, reject) => {
reject(2);
})
var c = p.catch(err=>{
console.log(err)
})
console.log(c) //fulfilled
//catch 语句报错
var p= new Promise((resolve, reject) => {
reject(2);
})
var r = p.catch(res=>{
console.log(res)
throw "error"
})
console.log(r)
1-3-3 then和catch函数报错之后的触发
then和catch报错之后，获取的状态rejected，那么这种状态只能使用catch函数去调用
var p= new Promise((resolve, reject) => {
resolve(1);
reject(2);
})
var r = p.then(res=>{
console.log(res)
throw "error"
})
var t = r.catch(res=>{
console.log(res)
}) //
1-4 promise实现图片加载
const url ="react.jpg";
function loadImg(src){
return new Promise((resolve,reject)=>{
const img = document.createElement("img"); img.onload = ()=>{
resolve(img);
}
img.onerror = ()=>{
reject(new Error("图⽚加载失败"))
}
img.src = src;
})
}
loadImg(url).then(res=>{
console.log(res.width)
}).catch(err=>{
console.log(err)
})
3、Async,await-catch
(async()=>{
try{
var res = await jjf; }catch(err){
console.log(err); }
})();
Event-Loop
JS是单线程运行的
异步要基于回调来实现
event loop就是异步回调的实现原理
JS如何执行
从前到后，⼀行⼀行执行
如果某⼀行执行报错，则停止下⾯代码的执行
先把同步代码执行完，再执行异步代码
console.log(“start”); setTimeout(()=>{
console.log(“callback”) },2000)
console.log(“end”);
同步代码执⾏完毕,就会启动event-loop，是浏览器内核启动的。
4、调用栈
1、console.log(“start”）执行先将其放在调用栈中，控制台输出"start"
2、console.log(“start”)执行完毕，将其从调用栈中移除
接着将setTimeout()函数到调用栈中，因为它是⼀个webAPI，那么在webAPI中有⼀个定时器。
3、调用栈中移除setTimeout()，执行console.log(“end”)
4、console.log(“end”)执行之后，也从调用栈中移除
5、同步代码执行完毕之后，Event Loop会不断的循环callback Queue，看里面是否有异步任务
6、最后Event Loop会将callback Queue中的代码放到调用栈⾥去
7、 callback在调用栈中被执行完毕之后,被从调用栈中移除
Tips:这地方会等待3s之后，callback函数才会被放到Callback Queue中，被Event Loop捕获。
总结：
1-1 同步代码，⼀行⼀行放在call stack执行
1-2 遇到异步，会先"记录"下，等待时机(定时,网络请求)
1-3 时机到了，就移动到Callback Queue
1-4 Call Stack为空(即同步代码执行完)Event–Loop开发工作。
1-5 轮询查找Callback Queue，如有则移动到Call Stack执行。
1-6 继续轮询查询(永动机⼀样)
5、Event-Loop和Promise
-
微任务是ES6语法规定的
-
宏任务是由浏览器规定的
总结
-
宏任务有哪些?微任务有哪些?微任务触发时机更早
-
微任务、宏任务和DOM渲染的关系
-
微任务、宏任务和DOM渲染,在event loop的过程