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

    xiaoxiao2021-03-26  30

    参考资料有点多:

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

    转载请注明原文地址: https://ju.6miu.com/read-662597.html

    最新回复(0)