现在有一个需求，前端需要同步服务器的时间，因为前端的时间是不可靠的，解决方案有很多，但是不管什么方案，都是需要和服务端进行交互，那么怎么减轻后端的工作量直接实现呢？
HTTP Header 中的 Date
HTTP Header 中有一个字段叫做 Date，它的格式是 RFC 1123，也就是 Fri, 30 Sep 2022 02:30:19 GMT，这个时间是服务器的时间，我们可以直接从 HTTP Header 中获取这个时间，然后前端直接使用这个时间即可。
打开控制台，查看一下请求的 HTTP Header，可以看到 Date 字段，这个就是服务器的时间：
这里有一个细节，可以看到这个时间的结尾有GMT的字母，代表这个时间是 GMT 时间，也就是格林威治时间，我们需要将这个时间转换成本地时间，因为我们前端的时间是本地时间，如果不转换，那么前端的时间就会和服务器的时间不一致。
如上图，带了GMT的后缀的时间是ok的，不带的就需要转换了。
本地时间和 GMT 时间
我们知道，本地时间和 GMT 时间是有区别的，比如北京时间和 GMT 时间的区别是 8 小时，那么我们如何获取本地时间和 GMT 时间的区别呢？
const date = new Date()
const offset = date.getTimezoneOffset() // 480
这里的offset就是本地时间和 GMT 时间的区别，单位是分钟，如果是北京时间，那么offset就是 480，如果是东京时间，那么offset就是 540。
本地时间和 GMT 时间的转换
我们知道了本地时间和 GMT 时间的区别，那么我们就可以将 GMT 时间转换成本地时间了，这里有一个小技巧，我们可以直接使用new Date()来转换，因为new Date()可以接受GMT格式的时间，然后会自动转换成本地时间。
const date = new Date('Fri, 30 Sep 2022 02:30:19 GMT')
console.log(date) // Fri Sep 30 2022 10:30:19 GMT+0800 (中国标准时间)
这里我们可以看到，new Date()接受了GMT格式的时间，然后自动转换成了本地时间。
前端实现
现在我们已经知道了如何获取服务器的时间，以及如何将 GMT 时间转换成本地时间，那么我们就可以实现前端获取服务器时间了。
axios.head('https://www.baidu.com?_=' + new Date().getTime()).then(res => {
const date = new Date(res.headers.date)
console.log(date) // Fri Sep 30 2022 10:30:19 GMT+0800 (中国标准时间)
})
这里使用axios发送一个head请求，然后获取Date字段，然后转换成本地时间，这样就可以获取到服务器的时间了，加时间戳是为了防止浏览器缓存。
优化
上面的代码是可以正常工作的，但是有一个问题，就是每次都要发送一个head请求，这样会增加服务器的压力，所以我们可以优化一下，比如我们可以在页面加载的时候就获取服务器的时间，然后每隔一段时间再获取一次，这样就可以减少服务器的压力了。
let date = new Date()
function getServerTime() {
setTimeout(() => {
axios.head('https://www.baidu.com?_=' + new Date().getTime()).then(res => {
date = new Date(res.headers.date)
console.log(date) // Fri Sep 30 2022 10:30:19 GMT+0800 (中国标准时间)
}).finally(() => {
getServerTime()
})
}, 1000 * 60 * 5)
}
getServerTime()
function timeStep(time) {
date.setTime(date.getTime() + time)
setTimeout(() => {
timeStep(time)
}, time)
}
timeStep(1000);
这里我们使用setTimeout来模拟服务器的时间，然后每隔一段时间就获取一次服务器的时间，这样就可以减少服务器的压力了。
总结
没啥好总结的，就是获取服务器的时间，然后转换成本地时间，然后模拟服务器的时间，这样就可以实现前端获取服务器时间了。
