【前端面经】腾讯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() 参考链接:
[1] :前端性能优化 24 条建议
[2] :Javascript实现秒杀倒计时（时间与服务器时间同步）
[3] :前端时间校验与校准
