文末
篇幅有限没有列举更多的前端面试题，小编把整理的前端大厂面试题PDF分享出来，一共有269页
domInteractive - fetchStart
// 首屏时间
domContentLoadedEventStart - fetchStart
复制代码
以上计算时间更多用于SSR渲染，而如今前端现状还有相当部分是SPA结构，由JS渲染在客户端。为了更好地满足监控指标与用户体验的契合。Google 提出 FP / FCP / FMP / TTI 等指标帮助我们统计相关数据，我们常用下面两条
FCP(First Contentful Paint) 首次绘制任何文本，图像，非空白canvas或SVG的时间点。就是用户第一次看到有意义的内容的时间。通常可以当作这个时间为白屏时长。获取API
window.performance.getEntriesByType('paint')
TTI(Time To Intercative) 可交互(可用时间), 用于标记应用已进行视觉渲染并能可靠响应用户输入的时间点。我们通常用这个值作为页面的首屏时间。浏览器并没有直接提供api去获取。但是google提供 github.com/GoogleChrom… 去获取。
==================================================================
大部分业务并不需要运行时的监控。但是一些重业务场景，比如说文本编辑器、线上课堂、画板。顿卡对用户体验的伤害巨大，也是用户更无法接受的。对于这类业务，我们开发测试场景可以用 chrome 的 perfermance 工具去测试、检测、定位性能顿卡。但是我们仍然需要用户测的监控来掌握业务线上实际运行情况。 requestAnimationFrame 通常用来实现动画。但是这里我们也可以用来作为帧率的监控。大概简单思路如下：
const everyFrameCostTime = []
let timestamp = Date.now()
function detect() {
const now = Date.now()
const cost = now - timestamp
timestamp = now
everyFrameCostTime.push(cost)
requestAnimationFrame(detect)
}
当cost 连续几次 高于一个 特地阈值，就可以视为页面顿卡了。这里可以视具体业务场景而定。
这种也有局限性，由于幸存者偏差，当页面卡死不动，监控代码本身也不起作用的。
===============================================================
数据发送方式
常用做法通常用向服务器发送一个img请求，然后将数据拼接成url参数一并发送过去。现代浏览器更提供了 navigator.sendBeacon(url, data) 方法来发送数据。在unload场景甚至不会阻塞下个页面的加载。为了保证基础库的健壮和不影响本身页面性能。我们要做好聚合和节流。
数据发送策略和存储
当用户基数过大，或者统计不需要那么多数据量，可以对数据发送做随机控制，来决定本次是否发送数据。或者将埋点数据加密存在本地，需要时在由用户主动向开发者发送，用来排查问题和减少数据服务器压力
=============================================================
说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。
我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。
我可以将最近整理的前端面试题免费分享出来，其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、数据结构与算法等等，还在持续整理更新中，希望大家都能找到心仪的工作。
有需要的朋友点击这里免费领取题目+解析PDF。
篇幅有限，仅展示部分截图：
JavaScript
-
js的基本类型有哪些？引用类型有哪些？null和undefined的区别。
-
如何判断一个变量是Array类型？如何判断一个变量是Number类型？（都不止一种）
-
Object是引用类型嘛？引用类型和基本类型有什么区别？哪个是存在堆哪一个是存在栈上面的？
-
JS常见的dom操作api
-
解释一下事件冒泡和事件捕获
-
事件委托（手写例子），事件冒泡和捕获，如何阻止冒泡？如何组织默认事件？
-
对闭包的理解？什么时候构成闭包？闭包的实现方法？闭包的优缺点？
-
this有哪些使用场景？跟C,Java中的this有什么区别？如何改变this的值？
-
call，apply，bind
-
显示原型和隐式原型，手绘原型链，原型链是什么？为什么要有原型链
-
创建对象的多种方式
-
实现继承的多种方式和优缺点
-
new 一个对象具体做了什么
-
手写Ajax，XMLHttpRequest
-
变量提升
-
举例说明一个匿名函数的典型用例
-
指出JS的宿主对象和原生对象的区别，为什么扩展JS内置对象不是好的做法？有哪些内置对象和内置函数？
-
attribute和property的区别
-
document load和document DOMContentLoaded两个事件的区别
-
JS代码调试
-
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
