青训营X豆包MarsCode 技术训练营第一课

用户33131266082
21 阅读4分钟

前端语言串讲

  • var,let,const

    • 变量提升

      • var声明的变量存在变量提升，即变量可以在声明之前调用，值为undefined
      • let和const不存在变量提升，即它们所声明的变量一定要在声明后使用，否则报错

    • 块级作用域

      • var不存在块级作用域
      • let和const存在块级作用域

    • 重复声明

      • var允许重复声明变量
      • let和const在同一作用域不允许重复声明变量

    • 修改声明的变量

      • var和let可以
      • const声明一个只读的常量。一旦声明，常量的值就不能改变，但对于对象和数据这种引用类型，内存地址不能修改，可以修改里面的值。

  • V8

    • JavaScriptCore的架构是采用生成字节码的方式，然后执行字节码。Google觉得JavaScriptCore这套架构不行，生成字节码会浪费时间，不如直接生成机器码快。所以V8在前期的架构设计上是非常激进的，采用了直接编译成机器码的方式。

    • Source code——代码 Parser——剖析器

    • AST——抽象语法树

      •  function add(a, b) {
     return a + b
 }

        image-20241106203302125

    • Full-Codegen——基线编译器 Crankshaft——曲轴 Machine code——机器语言

    • image-20241106202938231

    • 随着版本的引进，网页的复杂化，V8也渐渐的暴露出了自己架构上的缺陷：

      1. Full-Codegen编译直接生成机器码，导致内存占用大
      2. Full-Codegen编译直接生成机器码，导致编译时间长，导致启动速度慢
      3. Crankshaft 无法优化try，catch和finally等关键字划分的代码块
      4. Crankshaft新加语法支持，需要为此编写适配不同的Cpu架构代码

    • 为了解决上述缺点，V8采用JavaScriptCore的架构，生成字节码。这里是不是感觉Google又绕回来了。V8采用生成字节码的方式

    • image-20241106203639201

    • Ignition是V8的解释器，背后的原始动机是减少移动设备上的内存消耗。在Ignition之前，V8的Full-codegen基线编译器生成的代码通常占据Chrome整体JavaScript堆的近三分之一。这为Web应用程序的实际数据留下了更少的空间。

      Ignition的字节码可以直接用TurboFan生成优化的机器代码，而不必像Crankshaft那样从源代码重新编译。Ignition的字节码在V8中提供了更清晰且更不容易出错的基线执行模型，简化了去优化机制，这是V8 自适应优化的关键特性。最后，由于生成字节码比生成Full-codegen的基线编译代码更快，因此激活Ignition通常会改善脚本启动时间，从而改善网页加载。

      TurboFan是V8的优化编译器，TurboFan项目最初于2013年底启动，旨在解决Crankshaft的缺点。Crankshaft只能优化JavaScript语言的子集。例如，它不是设计用于使用结构化异常处理优化JavaScript代码，即由JavaScript的try，catch和finally关键字划分的代码块。很难在Crankshaft中添加对新语言功能的支持，因为这些功能几乎总是需要为九个支持的平台编写特定于体系结构的代码。

  • document

    • document对象是HTMLDocument(继承自Document类型）的一个实例，表达整个HTML页面。而且，document对象是window对象的一个属性，因此可以将其作为全局对象来访问

    • document.documentElement: 指向HTML页面中的html元素

    • document.body: 指向HTML页面中的body元素

    • HTMLHtmlElement对象和HTMLBodyElement对象继承了HTMLElement接口，HTMLElement可以表示所有的接口

    • HTMLDocument的实例，相比标准的document对象还有一些所没有的属性。这些属性提供了document对象所表现的网页的一些信息。

      • title属性：包含着title标签中的文本，用于显示在浏览器窗口的标题栏或标签页上
      • URL属性：包含页面完整的URL（即地址栏中显示的URL）
      • domain属性：只包含页面的域名
      • referrer属性：保存着链接到当前页面的那个页面的URL

  • image-20241106212230859

    • 分别了解了CSS中的attr和jQuery中的attr

  • 捕获与冒泡

  • JSS(CSS in JS)

    • JSX 将 DOM 和 JS 写在了一起，那 JSS 则将 DOM + CSS + JS 都写在一起，做到真正聚合。
avatar
文章
阅读
粉丝