悟悟悟悟悟悟悟悟悟悟悟悟悟悟悟悟悟悟悟悟悟悟悟

1.渲染任务会在定时器任务与promise任务之后。
2.requestAnimationFrame被调用后会在下一次屏幕刷新之前推送这个任务到任务队列（如果主线程执行超过16.6ms依然会执行这个任务，若主线程执行时间小于16.6ms【16.6ms是60fps的刷新率，如果屏幕刷新率高的话，这个数值会更低。】，则会以16.6毫秒执行一次），js会通过事件循环去执行该任务，在没有其他耗时操作的前提下，setTimeout由于不知道屏幕的刷新时间，所以可能会出现卡顿。
3.requestIdleCallback在主线程不空闲时就不会执行任务队列的任务了，它会一直等到下一帧有空闲时推送任务到任务队列，可以设置超时时间去执行任务队列任务。
一帧需要执行的任务如下图，如果js实行代码太久，则会导致如滚动事件，点击事件无法响应。

requestIdleCallback执行验证

let rafNumber = 0;
    function test(params) {
      requestAnimationFrame(() => {
        console.log("开始执行requestAnimationFrame");
        rafNumber += 1;
        if (rafNumber < 2) {
          test();
        }
      });
    }
    test();
    requestIdleCallback(() => {
      console.log("开始执行requestIdleCallback");
    });
    function delay() {
      const time = Date.now();
      while (true) {
        if (Date.now() - time > 30) {
          break;
        }
      }
      console.log("delay执行完毕");
    }
    delay();

4.浏览器的word-break默认为normal会使用默认换行规则，汉字换行，英文按空格换行。
5.只要保证 原始尺寸 = 样式尺寸 * devicePixelRatio 那么图片就很清新。
6.fixed会定位于视口，但如果父元素有transform属性则会定位于父元素位置。
7.使用display:inline-block，元素间的空白符会被解析，可以把元素连着写便不会有问题
8.eval函数会让变量无法释放回收。
9.箭头函数无法被改变this，它本省声明在哪里，this就是哪个
10.

var a = function (params) {
  console.log("外部");
};
(() => {
  a();
  if (false) {
    function a(params) {
      console.log("内部");
    }
  }
  a();
})();

11.事件循环详细记录：
浏览器刷新率不能直接设置，但可以通过以下方法间接影响：调整显示器设置：更改显示器的刷新率可以影响浏览器的刷新率。
requestAnimationFrame会在微任务之后执行，所以微任务会阻止页面的渲染。
任务是没有优先级的，任务队列有，在Chrome中至少有3种队列 1.微队列（浏览器环境promise，MutationObserver），优先级最高。2.交互队列 用户操作的任务，优先级高 3.延时队列，存放计时器的，优先级中 。
每次执行一次宏任务，如果有微任务则会清空微任务。
12.可以动过元素.style操作元素的内联样式。通过document.styleSheets去操作外部与内部样式表（document.styleSheets[0].addRule）。
13.渲染流程：
1. 解析html。会先开启预解析线程，去下载所有外部js和css文件。遇见css会先解析后续html，遇见script会停止解析html，并等待下载完成执行。script标签可以使用defer延迟执行，多个defer会按相同顺序。async异步加载后，加载完成后立马执行。
2. link的preload会优先下载，但不会执行，需要自己去声明script标签（实验后发现浏览器会先直接去下载所有的外部文件，而不是遇见标签再去下载）prefetch是在浏览器空闲的时候去下载非本页需要的资源。
3. 生成DOM和CSSOM，通过样式计算生成带有样式的DOM树。
4. 布局。计算每个节点的几何信息，包括宽高，位置。生成的布局树和DOM不会是一一对应的（回流）。
5. 分层。浏览器会依靠自己的策略对页面进行分层，分出单独的层独立，不影响其他层，能够增加效率，避免一个层改变，整个页面重绘。
6. 绘制。生成绘制指令集，主线程在此步做完任务（重绘）。
7. 分块。合成线程对其进行分块。
8. 光栅化（GPU）。
9. 画（GPU根据生成的信息进行绘制，transform就再这一步）。
先进行重排（回流），再进行重绘。
14.获取几何信息，会立即重排，以便获取最新的信息。
15.原型链

  Function.__proto__ === Function.prototype // true
  function a(){}
  a.prototype.__proto__ === Object.prototype // true
  a.__proto__ === Function.prototype // true

16.css计算过程
1）确定声明值，比较用户样式表和浏览器样式表，没有冲突的样式值直接确定。
2）解决层叠冲突，import,内联style，id，（类选择器，属性选择器，伪类选择器），（元素和伪元素），按权重确定。
3）按写法顺序。
4）继承。
5）还没有值的使用默认值。
17. css外边距塌陷
1）父子元素

子元素设置外边距无效果，解决可以给父元素设置overflow: hidden；float: left; display: inline-block; position: absolute;解决。
2）兄弟元素

解决给第一个元素添加父元素设置触发bfc。
触发了BFC后外边距才有效果。
18.css中父子元素，默认排列方式是从左到右，从上到下，所以设置右边距和下边距永远不会超过左边与右边，可以设置direction:rtl;成从右到左排列。

触发bfc下边距才有效果
外盒子有估计宽高，内盒子的外边距不会撑开它。
19.for in遍历会遍历对象自身的和原型上的（可枚举）属性，并且不能遍历symbol类型，可以通过Object.getOwnPropertyNames和Object.getOwnPropertySymbols结合获取所有自身所有属性（包括不可枚举）。也可以通过反射api Reflect.ownKeys获取。
20.使用el.className = 'abc’设置class所有浏览器都支持。
21.postMessage的使用
1）在同源网站之间传递信息，必须在当前页面获取到对应窗口。