}除此之外{
选择器=element.nodeName.toLowerCase();
}
返回选择器。
}
导出函数blankScreen(){
constwrapperSelectors=[\”body\”,\”html\”,\”#container\”,\”.content\”];
让空点=0；
函数isWrapper(元素){
letselector=getSelector(元素);
if(wrapperSelectors.indexOf(选择器)=0){
空点++；
}
}
加载（函数（）{
让x元素，y元素；
调试器；
for(leti=1;i=9;i++){
xElements=document.elementsFromPoint(
(窗口.innerWidth*i)/10,
window.innerHeight/2
）；
yElements=document.elementsFromPoint(
窗口.innerWidth/2,
(窗口.innerHeight*i)/10
）；
isWrapper(xElements[0]);
isWrapper(yElements[0]);
}
如果（空点=0）{
letcenterElements=document.elementsFromPoint(
窗口.innerWidth/2,
window.innerHeight/2
）；
发送（{
kind:“稳定”，
输入：“空白”，
空点：\”\”+空点，
screen:window.screen.width+“x”+window.screen.height,
viewPoint:window.innerWidth+“x”+window.innerHeight,
选择器：getSelector(centerElements[0]),
});
}
});
}
//screen.width 屏幕宽度screen.height 屏幕高度
//window.innerWidth 删除工具栏和滚动条的窗口宽度window.innerHeight 删除工具栏和滚动条的窗口高度
4.5 加载时间
表演时间[2]
DOM内容已加载[3]
FMP[4]
4.5.1 阶段含义
图片.png
| 字段的含义|
| — | — |
| 导航开始| 初始化页面。如果没有卸载前一页，则同一浏览器上下文中前一页的时间戳等于fetchStart 值。
| redirectStart | 第一次HTTP 重定向发生的时间（如果有跳转并且是同一域内的重定向），否则为0 |
| redirectEnd | 最后一次重定向完成的时间，否则为0 |
| fetchStart | 当浏览器准备好使用http 请求检索文档时但在检查缓存之前发生。
|domainLookupStart | DNS 域名查找开始的时间（如果有本地缓存或keepalive）。
|domainLookupEnd | DNS 域名查询结束时间|
| connectStart | TCP 开始建立连接的时间。这与fetchStart 值相同。
| secureConnectionStart | https 连接开始时间，如果不是安全连接则为0
| connectEnd | TCP 完成握手的时间（对于持久连接）。
| requestStart | HTTP 请求开始读取实际文档的时间，包括从本地缓存读取。
| requestEnd | 读取实际文档的HTTP 请求的结束时间，包括从本地缓存读取。
| responseStart | 返回浏览器从服务器接收到第一个字节（或从本地缓存读取）时的Unix 毫秒时间戳。
| responseEnd | 返回浏览器从服务器接收到最后一个字节（或从本地缓存读取或从本地资源读取）时的Unix 毫秒时间戳。
| unloadEventStart | 上一页卸载时间戳为0。
对应于| unloadEventEnd | unloadEventStart 并返回卸载函数完成执行时的时间戳。
| domLoading | 返回当前网页DOM 结构解析开始时的时间戳。此时，document.readyState变为加载状态，并抛出readyStateChange事件。
| domInteractive | 返回当前网页的DOM 结构完成解析并开始加载嵌入资源的时间戳。 document.readyState 变为交互状态，并抛出readyStateChange 事件（此时DOM 树解析和网页尚未开始。
| domContentLoadedEventStart | 网页domContentLoaded 事件发生的时间。
| domContentLoadedEventEnd | 网页的domContentLoaded 事件脚本完成的时间，domReady 时间。
| domComplete | 一旦DOM 树被解析并且资源准备就绪，document.readyState 就会完成并引发readystatechange 事件。
|loadEventStart | 加载事件发送到文档的时间，即加载回调函数开始执行。
|loadEventEnd | 加载回调函数完成的时间|
4.5.2 阶段计算
| 字段说明|
| |
| 卸载| 卸载上一页所花费的时间。
| 重定向时间| 重定向结束时间|
| 应用程序缓存| 缓存读取时间
|DNS解析时间较长|domainLookupEnd domainLookupStart 检查域名解析服务是否正常。
| tcp | TCP 连接时间| connectEnd connectStart 建立连接的时间
| ssl | SSL 安全连接需要很长时间| connectEnd secureConnectionStart 建立数据安全连接需要很长时间
| ttfb | Time to First Byte (TTFB) 网络请求所花费的时间| requestStart 是从发出页面请求到接收响应数据的第一个字节所花费的时间（以毫秒为单位）
| 响应数据传输时间| 响应结束- 响应开始| 检查网络是否正常。
| dom | DOM解析耗时较长| 检查DOM结构是否良好，是否有JS块的页面解析。
| dcl | DOMContentLoaded 事件需要很长时间| domContentLoadedEventEnd domContentLoadedEventStart 当HTML 文档完全加载和解析时，会触发DOMContentLoaded 事件，而无需等待样式表、图像和子框架完成加载。
| 资源| domComplete domContentLoadedEventEnd 太大。
| domReady | DOM 阶段渲染时间| domContentLoadedEventEnd fetchStart 的DOM 树和页面资源加载完成时间，触发domContentLoaded 事件。
| 首次渲染时间| 首次渲染时间| 从加载文档到出现图像的第一个非空帧的时间（也称为白屏时间）
| 第一次交互时间| domInteractive-fetchStart 的DOM 树解析完成时间（如果document.readyState 是交互式的）
| 第一个数据包时间消耗| 第一个数据包时间responseStart-domainLookupStart | 从DNS解析到响应返回到浏览器的时间
| 整页加载时间| 整页加载时间- fetchStart |
| onLoad | onLoad 事件需要很长时间。
|
图片.png
4.5.3 数据结构
{
\”title\”:\”前端监控系统\”,
“网址”:“http://localhost:8080/”，
\”时间戳\”:\”1590828364183\”,
“用户代理”:“Chrome”，
\”类型\”:\”经验\”,
\”类型\”:\”计时\”,
\”连接时间\” : \”0\”,
“ttfb时间”:“1”，
“响应时间”:“1”，
“解析DOM时间”:“80”，
“domContentLoadedTime”:“0”，
“互动时间”:“88”，
“加载时间”:“89”
}
4.5.4 实现
importonloadfrom“…/util/onload”；
从“…/util/tracker”导入tracker；
importformatTimefrom“…/util/formatTime”；
importgetLastEventfrom“…/util/getLastEvent”；
importgetSelectorfrom \”…/util/getSelector\”;
导出函数计时(){
加载（函数（）{
设置超时(()={
持续的{
获取开始，
开始连接，
连接终止，
开始请求，
响应开始，
响应完成，
正在加载dom，
多姆互动，
domContentLoadedEventStart,
domContentLoadedEventEnd，
加载事件开始
}=性能.计时；
发送（{
kind: \”经验\”,
type:“计时”，
connectTime:connectEnd-connectStart, //TCP连接时间较长
ttfbTime:responseStart-requestStart,//ttfb
responseTime:responseEnd-responseStart,//响应响应时间
parseDOMTime:loadEventStart-domLoading,//DOM解析渲染耗时较长
domContentLoadedTime:
domContentLoadedEventEnd-domContentLoadedEventStart, //DOMContentLoaded事件回调耗时较长
timeToInteractive:domInteractive-fetchStart, //第一次交互时间
loadTime:loadEventStart-fetchStart,//完成加载时间
});
},3000);
});
}
4.6 性能指标
PerformanceObserver.observe[5] 方法用于监视由传递的参数指定的性能条目类型的集合。当记录指定类型的性能表项时，会调用性能监控对象的回调函数。
条目类型[6]
绘画时机[7]
活动时间[8]
液晶聚合物[9]
FMP[10]
是时候进行互动了[11]
| 字段说明|
| |
| FP | 包含第一次绘制到屏幕上的用户定义的背景绘制。
|
| FCP | 首次内容绘制| 浏览器将第一个DOM（例如文本、图像或SVG）渲染到屏幕上的时间。
|
| FMP | 第一个有意义的油漆|
|
| LCP（最大内容绘制）表示视口中最大页面元素的加载时间。
|
| DCL (DomContentLoaded)（DOM 加载完成） DOMContentLoaded 事件在HTML 文档完全加载和解析时触发，无需等待样式表、图像和子框架完成加载。
|
| L | (onLoad) 仅在加载所有依赖资源后触发。
|
| TTI（交互时间）用于标记应用程序可以可视化呈现并可靠地响应用户输入的点。
|
| FID | 首次输入延迟| 从用户首次与页面交互（单击链接、单击按钮等）到页面响应该交互的时间。
|
图片.png
图片.png
4.6.1 数据结构设计
1. paint
{
\”title\”:\”前端监控系统\”,
“网址”:“http://localhost:8080/”，
\”时间戳\”:\”1590828364186\”,
“用户代理”:“Chrome”，
\”类型\”:\”经验\”,
“类型”:“油漆”，
“第一画”:“102”，
“firstContentPaint”:“2130”，
“第一有意义的油漆”:“2130”，
“最大内容绘画”:“2130”
}
2. firstInputDelay
{
\”title\”:\”前端监控系统\”,
“网址”:“http://localhost:8080/”，
\”时间戳\”:\”1590828477284\”,
“用户代理”:“Chrome”，
\”类型\”:\”经验\”,
\”类型\”:\”firstInputDelay\”,
“输入延迟”:“3”，
“句号”:“8”，
\”开始时间\” : \”4812.344999983907\”,
“选择器”:“HTMLBODY#container.contentH1”
}
4.6.2 实现
通过window.performance.timing获取关键时间节点。
图片.png
从“…/utils/tracker”导入tracker；
importonloadfrom“…/utils/onload”；
importgetLastEventfrom \”…/utils/getLastEvent\”;
importgetSelectorfrom“…/utils/getSelector”；
导出函数计时(){
让我们将其设为FMP、LCP。
//添加性能条目的观察者
newPerformanceObserver((entryList,观察者)={
constperfEntries=entryList.getEntries();
FMP=perfEntries[0];
observer.disconnect();//结束观察
}).observe({entryTypes:[\”element\”]});//观察页面上有意义的元素
//添加性能条目的观察者
newPerformanceObserver((entryList,观察者)={
constperfEntries=entryList.getEntries();
constlastEntry=perfEntries[perfEntries.length-1];
LCP=最后一个条目；
observer.disconnect();//结束观察
}).observe({entryTypes:[“largest-contentful-paint”]});//观察页面最大元素
//添加性能条目的观察者
newPerformanceObserver((entryList,观察者)={
constlastEvent=getLastEvent();
constfirstInput=entryList.getEntries()[0];
if(第一个输入){
//开始处理时间-开始点击时间，区别是处理延迟
letinputDelay=firstInput.processingStart-firstInput.startTime;
letduration=firstInput.duration;//处理时间
if(inputDelay0||持续时间0){
发送（{
kind: \” experience\”, //用户体验指标
type: \”firstInputDelay\”, //第一个输入延迟
inputDelay:inputDelay?formatTime(inputDelay):0,//延迟时间
持续时间：持续时间？格式时间（持续时间）:0，
startTime:firstInput.startTime,//开始处理的时间
selecter: 最后一个事件
?getSelector(lastEvent.path||lastEvent.target)
:\”\”,
});
}
}
observer.disconnect();//结束观察
}).observe({type:“first-input”,buffered:true});//第一次交互
//页面内容一开始是空的，所以要等到页面渲染完毕再做决定
加载（函数（）{
设置超时(()={
持续的{
获取开始，
开始连接，
连接终止，
开始请求，
响应开始，
响应完成，
正在加载dom，
多姆互动，
domContentLoadedEventStart,
domContentLoadedEventEnd，
加载事件开始
}=窗口.性能.计时；
//发送时间指示器
发送（{
kind: \” experience\”, //用户体验指标
type: \”timing\”, //统计各个阶段的时间
connectTime:connectEnd-connectStart, //TCP连接时间较长
ttfbTime:responseStart-requestStart,//第一个字节到达时间
responseTime:responseEnd-responseStart,//响应响应时间
parseDOMTime:loadEventStart-domLoading,//DOM解析渲染时间
domContentLoadedTime:
domContentLoadedEventEnd-domContentLoadedEventStart, //DOMContentLoaded事件回调耗时较长
timeToInteractive:domInteractive-fetchStart, //第一次交互时间
loadTime:loadEventStart-fetchStart,//完成加载时间
});
//发送性能指标
letFP=Performance.getEntriesByName(“第一次绘制”)[0];
letFCP=performance.getEntriesByName(“first-contentful-paint”)[0];
console.log(\”FP\”,FP);
console.log(\”FCP\”,FCP);
console.log(\”FMP\”,FMP);
console.log(\”LCP\”,LCP);
发送（{
kind:“经验”
nce”,
type: “paint”,
firstPaint: FP ? formatTime(FP.startTime) : 0,
firstContentPaint: FCP ? formatTime(FCP.startTime) : 0,
firstMeaningfulPaint: FMP ? formatTime(FMP.startTime) : 0,
largestContentfulPaint: LCP
? formatTime(LCP.renderTime || LCP.loadTime)
: 0,
});
}, 3000);
});
}
4.7 卡顿
响应用户交互的响应时间如果大于100ms,用户就会感觉卡顿
4.7.1 数据设计 longTask
{
“title”: “前端监控系统”,
“url”: “http://localhost:8080/”,
“timestamp”: “1590828656781”,
“userAgent”: “chrome”,
“kind”: “experience”,
“type”: “longTask”,
“eventType”: “mouseover”,
“startTime”: “9331”,
“duration”: “200”,
“selector”: “HTML BODY #container .content”
}
4.7.2 实现
new PerformanceObserver
entry.duration > 100 判断大于100ms，即可认定为长任务
使用 requestIdleCallback上报数据
import tracker from “…/util/tracker”;
import formatTime from “…/util/formatTime”;
import getLastEvent from “…/util/getLastEvent”;
import getSelector from “…/util/getSelector”;
export function longTask() {
new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
if (entry.duration > 100) {
let lastEvent = getLastEvent();
requestIdleCallback(() => {
tracker.send({
kind: “experience”,
type: “longTask”,
eventType: lastEvent.type,
startTime: formatTime(entry.startTime), // 开始时间
duration: formatTime(entry.duration), // 持续时间
selector: lastEvent
? getSelector(lastEvent.path || lastEvent.target)
: “”,
});
});
}
});
}).observe({ entryTypes: [“longtask”] });
}
4.8 PV、UV、用户停留时间
4.8.1 数据设计 business
{
“title”: “前端监控系统”,
“url”: “http://localhost:8080/”,
“timestamp”: “1590829304423”,
“userAgent”: “chrome”,
“kind”: “business”,
“type”: “pv”,
“effectiveType”: “4g”,
“rtt”: “50”,
“screen”: “2049×1152”
}
4.8.2 PV、UV、用户停留时间
PV(page view) 是页面浏览量，UV(Unique visitor)用户访问量。PV 只要访问一次页面就算一次，UV 同一天内多次访问只算一次。
对于前端来说，只要每次进入页面上报一次 PV 就行，UV 的统计放在服务端来做，主要是分析上报的数据来统计得出 UV。
import tracker from “…/util/tracker”;
export function pv() {
tracker.send({
kind: “business”,
type: “pv”,
startTime: performance.now(),
pageURL: getPageURL(),
referrer: document.referrer,
uuid: getUUID(),
});
let startTime = Date.now();
window.addEventListener(
“beforeunload”,
() => {
let stayTime = Date.now() – startTime;
tracker.send({
kind: “business”,
type: “stayTime”,
stayTime,
pageURL: getPageURL(),
uuid: getUUID(),
});
},
false
);
}
扩展问题
性能监控指标
前端怎么做性能监控
线上错误监控怎么做
导致内存泄漏的方法，怎么监控内存泄漏
Node 怎么做性能监控
1. 性能监控指标
| 指标 | 名称 | 解释 |
| — | — | — |
| FP | First-Paint 首次渲染 | 表示浏览器从开始请求网站到屏幕渲染第一个像素点的时间 |
| FCP | First-Contentful-Paint 首次内容渲染 | 表示浏览器渲染出第一个内容的时间，这个内容可以是文本、图片或SVG元素等等，不包括iframe和白色背景的canvas元素 |
| SI | Speed Index 速度指数 | 表明了网页内容的可见填充速度 |
| LCP | Largest Contentful Paint 最大内容绘制 | 标记了渲染出最大文本或图片的时间 |
| TTI | Time to Interactive 可交互时间 | 页面从开始加载到主要子资源完成渲染，并能够快速、可靠的响应用户输入所需的时间 |
| TBT | Total Blocking Time 总阻塞时间 | 测量 FCP 与 TTI 之间的总时间，这期间，主线程被阻塞的时间过长，无法作出输入响应 |
| FID | First Input Delay 首次输入延迟 | 测量加载响应度的一个以用户为中心的重要指标 |
| CLS | Cumulative Layout Shift 累积布局偏移 | 测量的是整个页面生命周期内发生的所有意外布局偏移中最大一连串的布局偏移分数 |
| DCL | DOMContentLoaded | 当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载 |
| L | Load | 检测一个完全加载的页面，页面的html、css、js、图片等资源都已经加载完之后才会触发 load 事件 |
2. 前端怎么做性能监控
FP、FCP、LCP、CLS、FID、FMP 可通过 PerformanceObserver获取
TCP连接耗时、首字节到达时间、response响应耗时、DOM解析渲染的时间、TTI、DCL、L等可通过performance.timing获取
长任务监听，PerformanceObserver 监听 longTask
const {
fetchStart,
connectStart,
connectEnd,
requestStart,
responseStart,
responseEnd,
domLoading,
domInteractive,
domContentLoadedEventStart,
domContentLoadedEventEnd,
loadEventStart,
} = window.performance.timing;
const obj = {
kind: “experience”, // 用户体验指标
type: “timing”, // 统计每个阶段的时间
dnsTime: domainLookupEnd – domainLookupStart, // DNS查询时间
connectTime: connectEnd – connectStart, // TCP连接耗时
ttfbTime: responseStart – requestStart, // 首字节到达时间
responseTime: responseEnd – responseStart, // response响应耗时
parseDOMTime: loadEventStart – domLoading, // DOM解析渲染的时间
domContentLoadedTime:
domContentLoadedEventEnd – domContentLoadedEventStart, // DOMContentLoaded事件回调耗时
timeToInteractive: domInteractive – fetchStart, // 首次可交互时间
loadTime: loadEventStart – fetchStart, // 完整的加载时间
}
image.png
3. 线上错误监控怎么做
资源加载错误 window.addEventListener(‘error’) 判断e.target.src || href
js运行时错误 window.addEventListener(‘error’)
promise异常 window.addEventListener(‘unhandledrejection’)
接口异常 重写xhr 的 open send方法，监控 load、error、abort，进行上报
4. 导致内存泄漏的方法，怎么监控内存泄漏
全局变量
被遗忘的定时器
脱离Dom的引用
闭包
监控内存泄漏
window.performance.memory
开发阶段
浏览器的 Performance
移动端可使用 PerformanceDog
image.png
5. Node 怎么做性能监控
日志监控 可以通过监控异常日志的变动，将新增的异常类型和数量反映出来 监控日志可以实现pv和uv的监控，通过pv/uv的监控，可以知道使用者们的使用习惯，预知访问高峰
响应时间 响应时间也是一个需要监控的点。一旦系统的某个子系统出现异常或者性能瓶颈将会导致系统的响应时间变长。响应时间可以在nginx一类的反向代理上监控，也可以通过应用自己产生访问日志来监控
进程监控 监控日志和响应时间都能较好地监控到系统的状态，但是它们的前提是系统是运行状态的，所以监控进程是比前两者更为紧要的任务。监控进程一般是检查操作系统中运行的应用进程数，比如对于采用多进程架构的web应用，就需要检查工作进程的数，如果低于低估值，就应当发出警报
磁盘监控 磁盘监控主要是监控磁盘的用量。由于写日志频繁的缘故，磁盘空间渐渐被用光。一旦磁盘不够用将会引发系统的各种问题，给磁盘的使用量设置一个上限，一旦磁盘用量超过警戒值，服务器的管理者应该整理日志或者清理磁盘
内存监控 对于node而言，一旦出现内存泄漏，不是那么容易排查的。监控服务器的内存使用情况。如果内存只升不降，那么铁定存在内存泄漏问题。符合正常的内存使用应该是有升有降，在访问量大的时候上升，在访问量回落的时候，占用量也随之回落。监控内存异常时间也是防止系统出现异常的好方法。如果突然出现内存异常，也能够追踪到近期的哪些代码改动导致的问题
cpu占用监控 服务器的cpu占用监控也是必不可少的项，cpu的使用分为用户态、内核态、IOWait等。如果用户态cpu使用率较高，说明服务器上的应用需要大量的cpu开销；如果内核态cpu使用率较高，说明服务器需要花费大量时间进行进程调度或者系统调用；IOWait使用率反映的是cpu等待磁盘I/O操作；cpu的使用率中，用户态小于70%，内核态小于35%且整体小于70%，处于正常范围。监控cpu占用情况，可以帮助分析应用程序在实际业务中的状况。合理设置监控阈值能够很好地预警
cpu load监控 cpu load又称cpu平均负载。它用来描述操作系统当前的繁忙程度，又简单地理解为cpu在单位时间内正在使用和等待使用cpu的平均任务数。它有3个指标，即1分钟的平均负载、5分钟的平均负载，15分钟的平均负载。cpu load过高说明进程数量过多，这在node中可能体现在用于进程模块反复启动新的进程。监控该值可以防止意外发生
I/O负载 I/O负载指的主要是磁盘I/O。反应的是磁盘上的读写情况，对于node编写的应用，主要是面向网络业务，是不太可能出现I/O负载过高的情况，大多数的I/O压力来自于数据库。不管node进程是否与数据库或其他I/O密集的应用共同处理相同的服务器，我们都应该监控该值防止意外情况
网络监控 虽然网络流量监控的优先级没有上述项目那么高，但还是需要对流量进行监控并设置流量上限值。即便应用突然受到用户的青睐，流量暴涨的时候也可以通过数值感知到网站的宣传是否有效。一旦流量超过警戒值，开发者就应当找出流量增长的原因。对于正常增长，应当评估是否该增加硬件设备来为更多用户提供服务。网络流量监控的两个主要指标是流入流量和流出流量
应用状态监控 除了这些硬性需要检测的指标之外，应用还应该提供一种机制来反馈其自身的状态信息，外部监控将会持续性地调用应用地反馈接口来检查它地健康状态。
dns监控 dns是网络应用的基础，在实际的对外服务产品中，多数都对域名有依赖。dns故障导致产品出现大面积影响的事件并不少见。由于dns服务通常是稳定的，容易让人忽略，但是一旦出现故障，就可能是史无前例的故障。对于产品的稳定性，域名dns状态也需要加入监控。
关于本文
最后：
总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。
面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。
cpu占用监控也是必不可少的项，cpu的使用分为用户态、内核态、IOWait等。如果用户态cpu使用率较高，说明服务器上的应用需要大量的cpu开销；如果内核态cpu使用率较高，说明服务器需要花费大量时间进行进程调度或者系统调用；IOWait使用率反映的是cpu等待磁盘I/O操作；cpu的使用率中，用户态小于70%，内核态小于35%且整体小于70%，处于正常范围。监控cpu占用情况，可以帮助分析应用程序在实际业务中的状况。合理设置监控阈值能够很好地预警
cpu load监控 cpu load又称cpu平均负载。它用来描述操作系统当前的繁忙程度，又简单地理解为cpu在单位时间内正在使用和等待使用cpu的平均任务数。它有3个指标，即1分钟的平均负载、5分钟的平均负载，15分钟的平均负载。cpu load过高说明进程数量过多，这在node中可能体现在用于进程模块反复启动新的进程。监控该值可以防止意外发生
I/O负载 I/O负载指的主要是磁盘I/O。反应的是磁盘上的读写情况，对于node编写的应用，主要是面向网络业务，是不太可能出现I/O负载过高的情况，大多数的I/O压力来自于数据库。不管node进程是否与数据库或其他I/O密集的应用共同处理相同的服务器，我们都应该监控该值防止意外情况
网络监控 虽然网络流量监控的优先级没有上述项目那么高，但还是需要对流量进行监控并设置流量上限值。即便应用突然受到用户的青睐，流量暴涨的时候也可以通过数值感知到网站的宣传是否有效。一旦流量超过警戒值，开发者就应当找出流量增长的原因。对于正常增长，应当评估是否该增加硬件设备来为更多用户提供服务。网络流量监控的两个主要指标是流入流量和流出流量
应用状态监控 除了这些硬性需要检测的指标之外，应用还应该提供一种机制来反馈其自身的状态信息，外部监控将会持续性地调用应用地反馈接口来检查它地健康状态。
dns监控 dns是网络应用的基础，在实际的对外服务产品中，多数都对域名有依赖。dns故障导致产品出现大面积影响的事件并不少见。由于dns服务通常是稳定的，容易让人忽略，但是一旦出现故障，就可能是史无前例的故障。对于产品的稳定性，域名dns状态也需要加入监控。
关于本文
最后：
总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。
面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。
#以上关于比较全的前端监控体系搭建篇的相关内容来源网络仅供参考，相关信息请以官方公告为准！
原创文章，作者：CSDN，如若转载，请注明出处：https://www.sudun.com/ask/92134.html
