JavaScript知识点梳理

本章思维导图的内容是JavaScript知识点梳理，JavaScript是世界上最流行的脚本语言，推荐大家点击参考学习。

前端技术栈

• 框架
  • 移动App
    • WebApp
      • React
      • Vue
      • Angular
    • NativeApp
      • Android
      • IOS
    • BridgeApp
      • React Native
      • Weex
    • HybridApp
      • Cordova
    • ProgressiveApp
      • PWA
      • Taro
    • OwndrawApp
      • Flutter
      • CrossApp
  • 客户端
    • Electron
  • 服务器端
    • Node
      • Express.js
      • Koa
      • Socket.io
  • Web前端
    • JQuery
    • Vue
    • React
    • Angular
    • ...
• 打包
  • Webpack
    • 子主题
  • Gulp
  • Grunt
  • Vite
• 测试
  • Jest
• 性能监控&分析
• Web Core
  • JS
    • DOM API
      • Query Elements
        • document.body
        • document.getElementById()
        • document.getElementsByClassName()
        • document.getElementsByName()
        • document.getElementsByTagNameNS()
        • document.getElementsByTagName()
        • document.querySelector()
        • docuemnt.querySelectorAll()
        • 获取DOM元素API
          • query 操作selector如果是id必须要加'#id'
          • query selector id 不能是纯数字
      • 辅助操作
        • document.cookie
          • get
          • set
        • Location
          • window.location
          • document.location
          • 对比
            • 都能获取URL
            • 都实现Location
            • document.location 只实现包含有文档的 URL 相关的信息
            • window.location常用的路由、地址、改变地址
        • document.domain
          • Document 接口的 domain 属性获取/设置当前文档的原始域部分，常用于同源策略。
        • 常见面试问题
      • Node
        • Node.insertBefore()
        • Node.nextSibling
          • 返回与该节点同级的下一个节点 Node，如果没有返回null。
        • 常用来设计考点，实现insertAfter
        • Node.nodeType
          • 常用来进行节点对比
        • Node.parentNode
          • 返回一个当前节点 Node的父节点
        • Node.childNodes
          • 返回包含指定节点的子节点的集合，该集合为即时更新的集合
        • 常用节点属性
        • Node.isEqualNode()
        • Node.appendChild()
        • Node.cloneNode()
        • document.append()
          • 注意此API
        • 用来实现节点复制
      • create 常用API
        • createElement()
        • createAttribute()
        • createEvent()
        • createDocumentFragment()
        • fragment文档碎片常用来性能优化
    • BOM API - 标准内置对象
      • Math
        • random
          • 伪随机数
        • abs
        • ceil
        • floor
        • 常用来实现取整|取余
      • 反射
        • Reflect
        • Proxy
        • 扩展加分点&Vue3考点
      • 值属性
        • Infinity
        • NaN
        • undefined
        • 常用来作为考点对比
        • globalThis
    • Js Core
      • 数据类型
        • 原始类型
          • Symbol ：typeof instance === "symbol"
          • undefined：typeof instance === "undefined"
          • Boolean：typeof instance === "boolean"
          • Number：typeof instance === "number"
          • String：typeof instance === "string
          • BigInt：typeof instance === "bigint"
        • NULL
          • typeof instance === "object"
        • Object
          • typeof instance === "object"。任何 constructed 对象实例的特殊非数据结构类型，也用做数据结构：new Object，new Array，new Map，new Set，new WeakMap，new WeakSet，new Date，和几乎所有通过 new keyword 创建的东西
        • 其他
          • 日期 Date
          • 有序集: 数组和类型数组
          • 键控集: Maps, Sets, WeakMaps, WeakSets
          • 结构化数据: JSON
        • 数据类型 & 常用方法
          • Array.prototype
          • String.prototype
          • Number.prototype
      • prototype
        • 继承
        • constructor
        • __proto__
        • new 操作符
        • class | function | object
        • 重点
          • prototype 和 __proto__ & constructor关系是什么
          • 如何理解继承
            • 任何对象都有一个prototype属性，prototype属性指向他的父级对象，可以通过此特性实现对象的父级查询，直到最后找到null
            • 所有对象都是来自于object的扩展
            • object的父级为null
          • 如何实现继承
            • prototype实现
            • class实现
          • function 变量提升 & 作用域
          • new class || new function原理
          • 这两块一般会结合来理解，可以加上constructor & prototype的理解
      • 事件循环机制
        • 宏任务
        • 微任务
        • 常见问题
          • promise & then、setTimeout、async & await、main执行顺序
          • settimeout & setinterval对比
          • 理解
  • CSS
    • Selector
    • Animation
    • Css 3
    • Position
  • HTML
    • Block element
    • Inline element
    • Command
  • HTML渲染
    • 
    • 
    • 性能优化
      • 重绘
        • 当页面元素样式改变不影响元素在文档流中的位置时（如background-color，border-color，visibility），浏览器只会将新样式赋予元素并进行重新绘制操作。
      • 重排（回流）
        • 回流当render tree中的一部分或全部因为元素的规模尺寸、布局、隐藏等改变时，浏览器重新渲染部分DOM或全部DOM的过程。回流也被称为重排，其实从字面上来看，重排更容易让人形象易懂（即重新排版整个页面）。
      • 什么时候会触发回流或重绘？
        • 添加或者删除可见的DOM元素；
        • 元素位置改变；
        • 元素尺寸改变——边距、填充、边框、宽度和高度；
        • 内容变化，比如用户在input框中输入文字，文本或者图片大小改变而引起的计算值宽度和高度改变；
        • 页面渲染初始化；
        • 浏览器窗口尺寸改变，resize事件发生时；
        • 计算offsetWidth和offsetHeight属性；
        • 设置style属性的值；
        • 有大量的用户行为以及潜在的DHTML改变会触发回流。例如，改变浏览器窗口的大小，使用一些JavaScript方法，包括计算样式，对DOM进行元素的添加或删除，或是改变元素的class等。【改变元素大小 & 计算位置】
      • 如何减少回流、重绘？
        • 1.尽可能在DOM树的最末端改变class
        • 2.避免设置多层内联样式
        • 3.动画效果应用到position属性为absolute或fixed的元素上
        • 4.避免使用table布局
        • 5.使用css3硬件加速，可以让transform、opacity、filters等动画效果不会引起回流重绘
        • CSS中避免回流、重绘
        • 1.避免使用JS一个样式修改完接着改下一个样式，最好一次性更改CSS样式，或者将样式列表定义为class的名称
        • 2.避免频繁操作DOM，使用文档片段创建一个子树，然后再拷贝到文档中
        • 3.先隐藏元素，进行修改后再显示该元素，因为display:none上的DOM操作不会引发回流和重绘
        • 4.避免循环读取offsetLeft等属性，在循环之前把它们存起来
        • 5.对于复杂动画效果,使用绝对定位让其脱离文档流，否则会引起父元素及后续元素大量的回流
        • JS操作避免回流、重绘
  • Performance（性能优化）
    • 减少重排、重绘
    • 首屏渲染
    • 图片懒加载
    • 按需加载
    • 压缩包大小
      • webpack 拆包
    • Script标签优化
      • async
      • defer
      • diff
        • 浏览器不会因 async 脚本而阻塞（与 defer 类似）。
        • 其他脚本不会等待 async 脚本加载完成，同样，async 脚本也不会等待其他脚本。
        • DOMContentLoaded 和异步脚本不会彼此等待：
        • DOMContentLoaded 可能会发生在异步脚本之前（如果异步脚本在页面完成后才加载完成）
        • DOMContentLoaded 也可能发生在异步脚本之后（如果异步脚本很短，或者是从 HTTP 缓存中加载的）
        • 现代的网站中，脚本往往比 HTML 更“重”：它们的大小通常更大，处理时间也更长。 当浏览器加载 HTML 时遇到 <script>...</script> 标签，浏览器就不能继续构建 DOM。它必须立刻执行此脚本。对于外部脚本 <script src="..."></script> 也是一样的：浏览器必须等脚本下载完，并执行结束，之后才能继续处理剩余的页面。
    • js 、图片、css缓存
    • 合并Http请求
      • 浏览器并发请求个数6-10个
  • Cache
    • 浏览器缓存
      • cookie
      • localstorage
      • sessionstorage
      • indexDB
      • cache
        • 很少用们可以忽略
    • http 缓存
      • 协商缓存（需要跟服务器交互）
      • 强制缓存
  • HTTP
    • Option
    • Request
    • Response
    • 三次握手
      • 发出Option，询问服务器端此次请求是否可行，服务器根据配置，返回对应的状态码，告诉浏览器是否可以进行下次请求 （Option）
      • 浏览器接收到请求，根据返回状态码确定是否发起具体请求，发出请求，带有具体参数（Request）
      • 浏览器处理请求，返回处理后的数据（Response ）
      • http缓存用于处理这些请求的缓存
    • SetCookie
    • Cache
• 代码管理
  • Git
  • SVN
  • TFS

初始化-Entry

• 编译 Compiler
  • 根据entry配置文件，递归分析依赖，对每个依赖进行编译（通过Babel 提供的@babel/traverse(遍历) 返回AST 抽象语法树进行递归分析,处理require依赖）
• 输出-Output