【前端面经】腾讯WXG实习一面

电话面：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()