2017补全计划-JS引擎，UI引擎-学习笔记

参考资料有点多：

一篇给小白看的 JavaScript 引擎指南

浅析JavaScript引擎的技术变迁

浏览器渲染的那些事(一)

浏览器渲染的那些事(二)

浏览器渲染的那些事(三)

浏览器的JavaScript引擎（这篇比较有用）

目前学到的，关于JS引擎：

定义：JS引擎用于读取和编译 JavaScript 代码

不同浏览器有不同的引擎实现，内部多都分不同模块，进行分类工作

引擎有词法分析器，不同引擎实现不同，V8快大概因为他分析器逻辑厉害（找到了V8文档，还没阅读）

UI引擎： 目前找到的资料还不能帮我更好理解

学到印象比较深刻的是：



webkit代码中说明了如何根据display属性决定某个节点创建什么对象的渲染对象。

RenderObject* RenderObject::createObject(Node* node, RenderStyle* style)
{
Document* doc = node->document();
RenderArena* arena = doc->renderArena();
...
RederObject* o = 0;

switch(style->display()){
case NONE:
break;
case INLINE:
o = new (arena) RenderInline(node);
break;
case BLOCK:
o = new (arena) RenderBlock(node);
break;
...
}
return o;
}

不同的浏览器有不同的渲染引擎，Firefox浏览器为Gecko引擎，Safari为WebKit引擎，Chrome为Blink引擎。它的主要作用是生成网页，通常分成四个阶段。

解析HTML为DOM，解析CSS为CSSOM（CSS Object Model）

将DOM和CSSOM合成一棵渲染树（render tree）

完成渲染树的布局（layout）

将渲染树绘制到屏幕

在学习JS引擎过程中，又再次碰到JS的单线程（进程）问题，再次引出H5的worker，H5的多线程其实只算单线程（因为只能主线程控制），worker和主线程之间通过onmessage() 和 postMsg() 通信，多线程的作用主要体现在计算能力，我打算在接下来的项目中，使用一下用多线程代替string-base部分的各种render函数 （虽然多线程不能操作DOM，但是可以把render的string返回给主线程），如果一个巨大div的拼接需要大概3~4个函数，100多行代码循环执行，那把3~4个render函数分至2个worker线程，不知道能不能把执行时间提高一倍？