2020-09-14 题目来源：http://www.h-camel.com/index.html
[html] 进入编辑页面时，如何把光标聚焦到第一个input？
首先来看看如何为input设置光标聚集 <input type="text" autofocus>
那多个input如何处理呢：
let arr = document.querySelectorAll("input");
//arr[0].autofocus = "true";
arr[0].setAttribute("autofocus", true);
但是这样第一个input并没有光标，是因为页面元素已经渲染结束了。
敲黑板了******
arr[0].focus(); // 就可以实现效果了
控制input输入框光标的位置 https://blog.csdn.net/weixin_33831196/article/details/86249293
[css] fixed定位脱离文档流与float有什么区别？
使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围；
而对于使用absolute、fixed的position脱离文档流的元素，其他盒子内的文本都会无视它。
[js] requestAnimationFrame在EventLoop的什么阶段执行？
实现动画效果的方法比较多，
Javascript 中可以通过定时器 setTimeout 来实现，
css3 可以使用 transition 和 animation 来实现，
html5 中的 canvas 也可以实现。
除此之外，html5 还提供一个专门用于请求动画的API，那就是 requestAnimationFrame，顾名思义就是请求动画帧。
MDN文档 https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame
简书 https://www.jianshu.com/p/f6d933670617
[软技能] 前端是如何监控性能的？
前端页面性能是一个非常核心的用户体验指标，主要采用的是Navigation Timing API以及sendBeacon等方法。开发者可以通过 window.performance 属性获取。
1.确定统计时间 用户输入网址，回车后开始等待的时间。
一个是通过navigationStart获取，相当于在URL输入栏回车或者页面按F5刷新的时间点；
另外一个是通过 fetchStart，相当于浏览器准备好使用 HTTP 请求获取文档的时间。
从开发者实际分析使用的场景，浏览器重定向、卸载页面的耗时对页面加载分析并无太大作用；通常建议使用 fetchStart 作为统计起始点。
2.首字节
主文档返回第一个字节的时间，是页面加载性能比较重要的指标。对用户来说一般无感知，对于开发者来说，则代表访问网络后端的整体响应耗时。
3.白屏时间
用户看到页面展示出现一个元素的时间。很多人认为白屏时间是页面返回的首字节时间，但这样其实并不精确，因为头部资源还没加载完毕，页面也是白屏。
domInteractive - fetchStart，此时页面资源加载完成，即将进入渲染环节。
统计页面性能指标的方法
let times = {};
let t = window.performance.timing;
// 优先使用 navigation v2 https://www.w3.org/TR/navigation-timing-2/
if (typeof win.PerformanceNavigationTiming === 'function') {
try {
var nt2Timing = performance.getEntriesByType('navigation')[0]
if (nt2Timing) {
t = nt2Timing
}
} catch (err) {
}
}
//重定向时间
times.redirectTime = t.redirectEnd - t.redirectStart;
//dns查询耗时
times.dnsTime = t.domainLookupEnd - t.domainLookupStart;
//TTFB 读取页面第一个字节的时间
times.ttfbTime = t.responseStart - t.navigationStart;
//DNS 缓存时间
times.appcacheTime = t.domainLookupStart - t.fetchStart;
//卸载页面的时间
times.unloadTime = t.unloadEventEnd - t.unloadEventStart;
//tcp连接耗时
times.tcpTime = t.connectEnd - t.connectStart;
//request请求耗时
times.reqTime = t.responseEnd - t.responseStart;
//解析dom树耗时
times.analysisTime = t.domComplete - t.domInteractive;
//白屏时间
times.blankTime = (t.domInteractive || t.domLoading) - t.fetchStart;
//domReadyTime
times.domReadyTime = t.domContentLoadedEventEnd - t.fetchStart;
10分钟彻底搞懂前端页面性能监控 https://zhuanlan.zhihu.com/p/82981365