浏览器渲染全过程

HTML都会先被浏览器兼容性里的HTMLParser分析，最终都会搭建成一颗DOM树。

CSS能被浏览器兼容性里的CSSParser分析，产生CSS标准，CSS制度和DOM树融合形成一个3D渲染树，根据layout（合理布局）形成最后的3D渲染树。

为何要有layout呢？因为需要兼容不一样规格的显示屏。拥有3D渲染树以后就可以制作展现出来了。

普遍的js模块

SpiderMonkey：第一款js模块，由BrendanEich开发设计（js创作者）。

Chakra：微软开发设计，因为IE电脑浏览器。

JavascriptCore：webkit的js模块，Apple公司开发设计。

V8：Google研发的强大js模块，也协助Chrome从诸多电脑浏览器中突围。

浏览器兼容性和js模块之间的关系

这儿用webkit为列，webkit最主要的两大类：

WebCore：承担HTML、CSS的分析、合理布局、3D渲染等方面的工作；

JavascriptCore：分析、实行js代码。

以下是Chromium的架构图

一般JavaScript模块（沉重）

功效：javascript模块协助我们将要js代码编译成CPU认识指令系统，最后被cpu实行。

一般JavaScript模块除开编译程序以外还需要承担实行及其代码优化。js是表述形语言表达，由模块立即载入源代码，一边编译程序一边实行，那样高效率较低，而编译程序形语言表达（如c++）就是将源代码立即编译成可以直接实施的执行命令更有效率。

伴随着技术发展，对JavaScript特性的规定愈来愈高，V8模块便是在这里环境下所产生的，它造成的目的就是提升javascript实行性能。

V8模块（轻巧）

V8模块是一个JavaScript模块完成，最开始由一些语言上权威专家设计方案，之后被谷歌收购，接着谷歌搜索对它进行了开源系统。

V8应用C++开发设计，在运作JavaScript以前，对比其他的JavaScript的模块转化成字节码或解释执行，V8把它编译成原生态序列号（IA-32,x86-64,ARM,orMIPSCPUs），而且应用了如内联缓存文件（inlinecaching）等方式来提升性能。

将javascript代码转换成AST

V8模块首先会将javascript代码转换成AST（抽象语法树），实际上每一个计算机语言都会把源码分析成抽象语法树（abstractsyntaxtree,AST）。

AST是计算机中很早以前的一个概念，并不是V8独有的（仅仅V8在转换过程中进行了相当多的提升），也不是javascript独有的。

AST的用处

AST的功效并不仅仅是用于在V8的编译程序上，例如人们常用的Babel软件将es6->es5、ts->js、过流保护剖析、DeadCode、编译程序压缩打包、css预处理器、eslint这些，这个功能的完成都少不了AST。

AST编译过程

V8实行js的简单步骤

浏览器兼容性将源代码以流的形式交给v8模块，v8模块掌握到源代码然后进行编码转换

词法分析Scanner，将编码转为tokens

语法分析器Parser、Preparser，直接把tokens转换成AST树形结构

字节码形成

parser是直接将tokens转换成AST树形结构

preParse称作预分析，为何必须预分析呢？

主要是因为并非所有的js代码一开始就会强制执行，假如对每一个js代码都经过分析，会影响到网页页面使用效率。因此v8模块就完成了延迟时间分析的解决方案，将不必要函数公式开展预分析，其实就是只分析临时必须内容，但对函数的全量分析要在函数公式被启用的时候才会开展

就像我们在一个函数outer内部结构界定了此外一个函数inner，那样inner函数便会开展预分析

标签：icode9,JavaScript,代码,浏览器,3D渲染,Google研发 来源：

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。