知识点分类：

  1. 渲染机制（浏览器渲染页面）
  2. 运行机制（js引擎及js与浏览器的交互）
  3. 页面性能（页面运行流畅）
  4. 错误监控（线上收集，代码监控）

渲染机制类：

  1. 什么是DOCTYPE及其作用
    • DTD文档类型定义，是一系列语法规则，用来描述html,xml的文档类型，
    • 浏览器使用DTD来判断文档类型，决定使用何种引擎协议来解析，切换浏览器模式
    • doctype用来告诉浏览器文档类型和DTD规范的
    • 常见doctype有
      • html5:<!DOCTYPE html>
      • html4.0严格模式：<!DOCTYPE HTML PUBLIC ".../strict.dtd">，不包括展示性的和弃用的元素
      • html4.0宽松模式：<!DOCTYPE HTML PUBLIC ".../loose.dtd">，包括展示性的和弃用的元素
  2. 浏览器如何渲染（过程）

image.png

  1. 重排reflow
    • 定义：dom每个元素都有自己的盒子，这些都需要浏览器根据各种样式计算并根据计算结果将元素放到对应的位置，这个过程称之为Reflow
    • 触发：增删改DOM 节点，移动DOM位置（动画），修改CSS样式，修改网页的默认字体
    • 避免：本质上是减少reflow操作，主要思想就是合并多个reflow，最后再反馈到render tree
      • 直接修改ClassName
      • 让频繁reflow的元素“离线”
        • 使用DocumentFragment进行缓存操作,引发一次回流和重绘；
        • 使用display:none，只引发两次回流和重绘，使节点从render tree中失效，等经过多个会触发reflow操作后再“上线”
        • 使用cloneNode(true or false) 和 replaceChild 技术，引发一次回流和重绘
  1. document.addEventListener('DOMContentLoaded', function () {
  2.   var date = new Date(),
  3.       fragment = document.createDocumentFragment();
  4.   for (var i = 0; i < 7000; i++) {
  5.     var tmpNode = document.createElement("div");
  6.     tmpNode.innerHTML = "test" + i;
  7.     fragment.appendChild(tmpNode);
  8.   }
  9.   document.body.appendChild(fragment);
  10.   console.log("speed time", new Date() - date);
  11. });
  1.   - 减少会flush缓存队列属性的访问次数，如果一定要访问，使用缓存
  1. // 不好的写法
  2. for(let i = 0; i < 20; i++ ) { 
  3.     el.style.left = el.offsetLeft + 5 + "px"; 
  4.     el.style.top = el.offsetTop + 5 + "px"; 
  5. }
  6. // 比较好的写法
  7. var left = el.offsetLeft, 
  8. top = el.offsetTop, 
  9. s = el.style; 
  10. for (let i = 0; i < 20; i++ ) { 
  11.     left += 5;
  12.     top += 5; 
  13.     s.left = left + "px"; 
  14.     s.top = top + "px"; 
  15. }
  1. 重绘repaint
    • 定义：页面呈现的内容绘制在屏幕上
    • 触发：DOM改动，CSS改动
  2. 布局layout