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

最新推荐文章于 2022-07-04 17:08:22 发布

早起早睡的少年郎

最新推荐文章于 2022-07-04 17:08:22 发布

阅读量963

点赞数 1

分类专栏： JavaScript 文章标签： javascript javascript引擎浏览器

本文链接：https://blog.csdn.net/reusli/article/details/54883219

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

参考资料有点多：

一篇给小白看的 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线程，不知道能不能把执行时间提高一倍？