前端新手遇到的问题---“ 默认图片替换、字体属性、Promise学习 ”知识

问题源自知乎—浪子神剑老师的前端面试每日 3+1，我仅在此为大家提供解题方案以及思路，在此感谢浪子神剑老师。

1. [html] img中的src加载失败时如何用默认图片来替换呢？

2. [css] 举例说明跟字体相关的属性有哪些？

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)

1. [软技能] 请解释下Expires和Cache-Control有什么区别？

问题1：[html] img中的src加载失败时如何用默认图片来替换呢？

1.翻阅W3C提供的img元素文档后，会发现文档中只提到了img出现了这样的Image 对象的事件句柄

查看HTML DOM onerror 事件句柄

其定义为“在装载图像的过程中发生错误时调用的事件句柄”。

用法如下

所以可以通过调用函数的方式，当图片装载错误时修改img图象的src值来完成图片替换。

线下调试的时候会遇到的情况：

1、img的src图片加载失败的时候，会卡在一直重复请求加载src图片

初步判断是由于编辑器会跳到服务端来打开页面出现的状况，可以试下本地打开页面

2、onerror函数无法执行

可能由于onerror函数名输入错误导致，片面粘贴他人代码后建议再次输入onerror这个函数名。

3、VScode打开网页的快捷方式

ALT+B

4、网上有很多同学反馈img 使用 onerror 以后，如果 onerror 指定的图片也是不存在的话，会出现无限死循环 404。下面可以通过调用setTimeout函数来处理这个问题。

问题2：[css] 举例说明跟字体相关的属性有哪些

查看W3C提供的文档：CSS3 字体

描述符	值	描述
font-family	name	必需。规定字体的名称。
src	URL	必需。定义字体文件的 URL。
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	可选。定义如何拉伸字体。默认是 "normal"。
font-style	ormal italic oblique	可选。定义字体的样式。默认是 "normal"。
font-weight	normal bold 100 200 300 400 500 600 700 800 900	可选。定义字体的粗细。默认是 "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中的个人见解。

关于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