主要步骤

React.createElement语法糖

(1)React.createElement(type, [props], […children]);
(2)type：元素类型
(3)props：属性值
(4)children：子元素

虚拟DOM

(1)本质为JS对象，使用键值对存储信息，嵌套表示层级关系
(2)$$typeof：标识符，使用Symbol数据结构确保唯一性

渲染流程

(1)深度遍历解析HTML建立DOM树
(2)解析CSS建立CSSOM树
(3)依据DOM树和CSSOM树构造Render树
(4)计算各元素尺寸、位置
(5)绘制页面像素信息
(6)浏览器将各层信息发送给GPU，GPU将各层合成，显示在屏幕上
(7)(PS:上述这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的html都解析完成之后再去构建和布局render树。它是解析完某一部分（整体大块的）内容就显示一部分内容，同时，可能还在通过网络下载其余内容。)

一些使用hexo搭建博客时遇到的问题

1、一段时间为使用hexo，重新打开，生成新页面时，终端报错：’hexo’ 不是内部或外部命令，也不是可运行的程序或批处理文件 或 bash: hexo: command not found
解决办法：重新运行命令：npm install hexo-cli -g

2、生成的图片路径不正确，有/.io//等一些奇怪的前缀
原因：使用的hexo-asset-image插件存在bug
解决办法：手动修改node_modules/hexo-asset-image中index.js文件的处理方式

1、挂载节点不同：var声明的变量挂载在window上，const与let声明的变量不会

1
2
3
4
5
6

var a = 100;
console.log(a,window.a);    // 100 100
let b = 10;
console.log(b,window.b);    // 10 undefined
const c = 1;
console.log(c,window.c);    // 1 undefined

let声明的变量或const声明的常量会挂载到Script下，var会挂载到Global下（window类似于Global的代理）。可查看文章let和const声明的变量到底去哪里了？