电话面：40分钟

背景：双非硕 非科班

官网显示晚上7:30面，7:45面试官打电话过来了

• 面试官介绍了一下部门情况
• 自我介绍，接触前端的过程，如何学习前端的，有没有看过什么书，可以实习多久？
• 聊了聊其中一个项目，为什么做这个？
• 为什么选Vue，还了解什么框架？对Vue3有了解，那说一下你了解的部分
• 讲一下页面渲染过程，讲到了V8引擎执行机制，这部分聊了十多分钟
• 页面白屏如何进行优化？了解gzip吗？ -没回答全，就说了下打包
• html文件加载流程 页面先加载DOM还是CSS
• 了解闭包吗 谈到了闭包的形成机制以及缺点。
• 为什么要设计闭包？讲了下纯函数。有没有更实际的应用？讲了下项目中用到的防抖函数（好像还不满意）
• 给你一个抢茅台的页面，怎么保证用户的公平性？（提示：用算法） 这题没答上，用队列？
• 又聊回项目，讲项目中遇到的难点。
• 了解webGL吗？ 没用过

面试官说下周换人来面，和他们组技术栈不太匹配 :)

复盘

对于页面白屏的问题，可以从以下几个方面来回答^[1]：

• HTTP 请求头中的 Accept-Encoding 头添加 gzip
• 采用HTTP2 （首部压缩、流量控制、服务器推送）
• 静态资源CDN
• 缓存
• JS文件放在底部，防止阻塞
• 图片懒加载、雪碧图、采用webp格式图片
• 服务端渲染

对于抢购页面的设计，可以从以下几个方面回答^[2][3]：

设计思路：

• 初始化时调用后台接口获取活动截止时间，与用户当前时间比较，计算剩余时长
• 开启定时器，根据剩余时长渲染倒计时

方法一：new Date()

由于本地时间用户可以修改，因此不能直接通过本地时间来判断，我们进行时间校验

//首先获取服务器时间
let serverTime = await getServerTime()
//获取本地时间
let clientTime = new Date()
//设定一个时间差
let diff = 5000
if(Math.abs(serverTime-clientTime) > diff){
    //时间有误，禁止访问
}

方法二：通过浏览器提供的performance.now()，与本地时间无关

let t0 = window.performance.now();
doSomething();
let t1 = window.performance.now();
console.log("doSomething函数执行了" + (t1 - t0) + "毫秒.")

了解了基本功能后，我们可以大致实现下

async function getTime(){
    serverTime = await getServerTime()
    localTime = performance.now()
}
function getCurrentTime(){
    // 用(服务端时间+本地时间差值)来模拟当前服务器时间
    return serverTime + (performance.now()-localTime)
}
async function foo(){
    await getTime()
    document.addEventListener("click",()=>{
        let time = getCurrentTime()
        // 用这个时间进行倒计时逻辑处理
})
}
foo()

参考链接:

[1] :前端性能优化 24 条建议
[2] :Javascript实现秒杀倒计时（时间与服务器时间同步）
[3] :前端时间校验与校准