问题源自知乎—浪子神剑老师的前端面试每日 3+1，我仅在此为大家提供解题方案以及思路，在此感谢浪子神剑老师。
-
[html] img中的src加载失败时如何用默认图片来替换呢？
-
[css] 举例说明跟字体相关的属性有哪些？
-
[js] 阅读下面关于setTimeout和Promise的代码，判断结果会输出什么？为什么？
setTimeout(function () {
console.log(1);
})
Promise.resolve(function () {
console.log(2)
})
new Promise(function (resolve) {
console.log(3);
resolve();
}).then(function () {
console.log(4)
})
console.log(5)-
[软技能] 请解释下Expires和Cache-Control有什么区别？
问题1：[html] img中的src加载失败时如何用默认图片来替换呢？
1.翻阅W3C提供的img元素文档后，会发现文档中只提到了img出现了这样的Image 对象的事件句柄
查看HTML DOM onerror 事件句柄
其定义为“在装载图像的过程中发生错误时调用的事件句柄”。
用法如下
<img src="image.gif" onerror="myFunction()">
<script>
function myFunction() {
alert('无法加载图片。');
}
</script>所以可以通过调用函数的方式，当图片装载错误时修改img图象的src值来完成图片替换。
<img src="image.gif" onerror="this.src='img/03-03.jpg'">线下调试的时候会遇到的情况：
1、img的src图片加载失败的时候，会卡在一直重复请求加载src图片
初步判断是由于编辑器会跳到服务端来打开页面出现的状况，可以试下本地打开页面
2、onerror函数无法执行
可能由于onerror函数名输入错误导致，片面粘贴他人代码后建议再次输入onerror这个函数名。
3、VScode打开网页的快捷方式
ALT+B
4、网上有很多同学反馈img 使用 onerror 以后，如果 onerror 指定的图片也是不存在的话，会出现无限死循环 404。下面可以通过调用setTimeout函数来处理这个问题。
<!DOCTYPE >
<html>
<head>
<script>
/**
* 图片出错处理，可以重加载指定的图片。超过重试次数仍不能正常显示的，显示缺省图片。
* 示例<img onerror="showImgDelay(this,'1.jpg',2)" src="1.jpg">
*
* imgObj:img节点对象
* imgSrc:出错时加载的图片地址
* maxErrorNum:最大出错次数，防止出现死循环
*/
function showImgDelay(imgObj,imgSrc,maxErrorNum){
showSpan.innerHTML += "--" + maxErrorNum;
if(maxErrorNum>0){
imgObj.onerror=function(){
showImgDelay(imgObj,imgSrc,maxErrorNum-1);
};
setTimeout(function(){
imgObj.src=imgSrc;
},500);
}else{
imgObj.onerror=null;
imgObj.src="images/default.jpg";
}
}
</script>
</head>
<body>
<img onerror="showImgDelay(this,'a1.jpg',2);" src="1a.jpg" width="200" height="200"/>
<span id="showSpan"></span>
</body>
</html> 问题2：[css] 举例说明跟字体相关的属性有哪些
查看W3C提供的文档：CSS3 字体
| 描述符 | 值 | 描述 |
|---|---|---|
| font-family | name | 必需。规定字体的名称。 |
| src | URL | 必需。定义字体文件的 URL。 |
| font-stretch |
|
可选。定义如何拉伸字体。默认是 "normal"。 |
| font-style |
|
可选。定义字体的样式。默认是 "normal"。 |
| font-weight |
|
可选。定义字体的粗细。默认是 "normal"。 |
| unicode-range | unicode-range | 可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。 |
问题3：[js] 阅读下面关于setTimeout和Promise的代码，判断结果会输出什么？为什么？
setTimeout(function () {
console.log(1);
})
Promise.resolve(function () {
console.log(2)
})
new Promise(function (resolve) {
console.log(3);
resolve();
}).then(function () {
console.log(4)
})
console.log(5)我查看了许多关于Promise的介绍，都没有很好的领悟。下面是我在学习Promise中的个人见解。
执行结果是
3
5
4
1
分析：在一般情况下，同步事件优于异步事件先执行。同步事件执行中，异步事件会挂起在事件轮询表中，等待同步事件执行完毕，然后根据异步事件的时间先后顺序执行！（相当于排队买票，离开之后，在回来继续排队，哪个的号在先，哪个先买！）
1.根据程序从上到下的原则，首先执行的是console.log(3);然后到console.log(5)；
2.此时根据resolve()的性质，会调用console.log(4)；
3.最后调用异步函数中的console.log(1);
4.console.log(2)由于不在实例中没有启动，则不调用。
下面有几道经典案例可以巩固下
问题1：
问题2：
console.log(1)
let promise = new Promise((resolve, reject) => {
console.log(2)
resolve()
console.log(3)
})
setTimeout(() => {
console.log(4)
}, 0);
console.log(5)
promise.then(() => {
console.log(6)
})
console.log(7)问题描述
正确执行顺序我会放在期望答案的最后，防止在看题时看到结果。
这个问题主要问的是两个关键点：1. promise在构造时内部就已经执行结束。2. promise.then和setTimeout的执行顺序
期望答案
关键点1：在Promise对象new的时候，Promise内部resolve前后就都执行了，resolve只与then有关（resolve调用时的参数为then的参数），并不会阻止后面代码的执行。
关键点2：promise.then的执行时间会早于setTimeout,promise和setTimeout都可以处理异步问题，promise为微任务setTimeout为宏任务，promise.then会在本次任务的最后的去调用，而setTimeout会开启一个新的任务去执行其内部的内容，即下一次任务的开始。所以6比4先打印。
问题执行结果：1 2 3 5 7 6 4
