首页 > 其他分享 >一个浏览器上面呈现的内容 是怎么生成的呢?

一个浏览器上面呈现的内容 是怎么生成的呢?

时间:2022-10-09 16:37:23浏览次数:48  
标签:转换成 浏览器 AST 呈现 js 引擎 解析 生成 代码

 

浏览器的渲染过程:


浏览器从服务器下载完文件后,就要对其进行解析和渲染.
HTML Parser将HTML解析转换成DOM树.
CSS Parser将样式表解析转换成CSS规则树.
转换完成后的DOM树和CSS规则树,附加在一起形成渲染树.
形成渲染树之后,并没有马上进行渲染,而是需要进行布局一番,才进行重画出来

 

js由谁来执行呢? js由JavaScript引擎来解析并执行.

js引擎做的事情就是让js能够变成cpu能够执行的指令.
所以引擎里的三个功能分别做了三件事:
1: parse模块:将JavaScript代码转换成AST(抽象语法树), 主要对js源代码进行词法分析和语法分析
2: Ignition模块:一个解释器,可以将AST转换成ByteCode(字节码)。
3: TurboFan模块:一个编译器,可以将字节码编译为CPU认识的机器码。

 

V8引擎执行过程

V8引擎的官方在Parse过程提供了以下这幅图,最后就来详细了解一下Parse具体的执行过程。

  • ①Blink内核将JS源码交给V8引擎;
  • ②Stream获取到JS源码进行编码转换;
  • ③Scanner进行词法分析,将代码转换成tokens;
  • ④经过语法分析后,tokens会被转换成AST,中间会经过Parser和PreParser过程:
    • Parser:直接解析,将tokens转成AST树;
    • PreParser:预解析(为什么需要预解析?)
      • 因为并不是所有的JavaScript代码,在一开始时就会执行的,如果一股脑对所有JavaScript代码进行解析,必然会影响性能,所以V8就实现了Lazy Parsing(延迟解析)方案,对不必要的函数代码进行预解析,也就是先解析急需要执行的代码内容,对函数的全量解析会放到函数被调用时进行。
  • ⑤生成AST后,会被Ignition转换成字节码,然后转成机器码,最后就是代码的执行过程了;

标签:转换成,浏览器,AST,呈现,js,引擎,解析,生成,代码
From: https://www.cnblogs.com/aashui/p/16772588.html

相关文章

  • 分布式主键生成设计策略
    1写作目的这几天被虾皮裁员的消息刷屏了,实话实说互联网的行情确实很差,各处都在裁员。而且最近在忙试用期转正答辩,还不错,光荣的成为了一个大厂的正式员工,很庆幸在这么不稳定......
  • 浏览器
    历史记录chormefirefoxieiehttps://www.xiazaiba.com/hotsoft/ie/https://baike.baidu.com/item/MicrosoftEdge/17511966?fr=aladdinIE浏览器20年1995年:微软Inter......
  • spring boot项目使用mybatis-plus代码生成实例
    前言mybatis-plus官方地址https://baomidou.commybatis-plus是mybatis的增强,不对mybatis做任何改变,涵盖了代码生成,自定义ID生成器,快速实现CRUD,自动分页,逻辑删除等功能......
  • 如何使用 Delphi/Lazarus 代码在 FastReport VCL 中生成二维码?
    FastReportVCL是用于在软件中集成商务智能的现代解决方案。它提供了可视化模板设计器,可以访问最受欢迎的数据源,报告引擎,预览,将过滤器导出为30多种格式,并可以部署到云,Web,电......
  • 浏览器中javascript简易实现json数据保存到客户端
    思路很简单,就是利用Blob、URL.createObjectURL()方法和<a>便签的HTML5新属性download来模拟远端文件下载保存。下面直接上代码savePath:function(){varme......
  • java 生成GUID,可以用UUID类来生成GUID
    全局唯一标识符(GUID,GloballyUniqueIdentifier)是一种由算法生成的二进制长度为128位的数字标识符,一般用16进制表示。在理想情况下,任何计算机和计算机集群都不会生成......
  • Mac的chrome浏览器右键翻译失败解决方案
    右键翻译失败解决办法我们打开chrome浏览器右键翻译老是失败或者重试mac用户打开终端输入nslookupgoogle.cn得到的Adress220.181.174.162保存起来用终端以管理员权......
  • Python 生成的页面中文乱码问题
    第一保证程序源文件中的中文的编码格式,如我们把源文件的编码设置成utf8的。reload(sys)sys.setdefaultencoding(‘utf-8’)第二,告诉浏览器,我们需要用什么格式来展示......
  • 生成函数题
    城市规划\[设G(n)表示n个点的有标号无向图数量,我们知道,G(n)=2^{\binom{n}{2}}\\设F(n)表示n个点的有标号无向联通图数量,显然\\\text{我们枚举一号店所在的联通块大小,......
  • spring boot项目使用mybatis-plus代码生成实例
    前言mybatis-plus官方地址https://baomidou.commybatis-plus是mybatis的增强,不对mybatis做任何改变,涵盖了代码生成,自定义ID生成器,快速实现CRUD,自动分页,逻辑删除等功......