js 常问考点

ldyldyydl
59 阅读5分钟

js基本数据类型和引用数据类型有什么区别？

基本类型引用类型
定义Number、String、Boolean、Null、 Undefined、Symbol，这些类型可以直接操作保存在变量中的实际值Object（function、date、regexp等）
存储基本数据类型是指存放在栈中的简单数据段，数据大小确定，内存空间大小可以分配，它们是直接按值存放的，所以可以直接按值访问引用类型是存放在堆内存中的对象，变量其实是保存的在栈内存中的一个指针（保存的是堆内存中的引用地址），这个指针指向堆内存，通过这个引用地址可以快速查找到保存中堆内存中的对象
赋值基本数据类型赋值可以直接传值引用类型赋值的实质是传址（相当于新建了个指针存放在堆中，指向栈中基本数据类型的地址）
深浅拷贝浅拷贝基本类型没有问题，深拷贝也没有问题浅拷贝引用类型就会导致拷贝的数据变动影响源数据，深拷贝的实现为递归查找父对象中所有属于对象的属性类型都遍历赋给子对象，故不会有这个问题

总结：

    1. 声明变量时内存分配不同
    • 原始类型：在栈中，因为占据空间是固定的，可以将他们存在较小的内存中-栈中，这样便于迅速查询变量的值
    • 引用类型：存在堆中，栈中存储的变量，只是用来查找堆中的引用地址。

    这是因为：引用值的大小会改变，所以不能把它放在栈中，否则会降低变量查寻的速度。相反，放在变量的栈空间中的值是该对象存储在堆中的地址。地址的大小是固定的，所以把它存储在栈中对变量性能无任何负面影响

  • 不同的内存分配带来不同的访问机制

    • 在javascript中是不允许直接访问保存在堆内存中的对象的，所以在访问一个对象时，首先得到的是这个对象在堆内存中的地址，然后再按照这个地址去获得这个对象中的值，这就是传说中的按引用访问。

    • 基本类型的值则是可以直接访问到的。

  • 复制变量时的不同

    • 基本类型：在将一个保存着原始值的变量复制给另一个变量时，会将原始值的副本赋值给新变量，此后这两个变量是完全独立的，他们只是拥有相同的value而已。

    • 引用类型：在将一个保存着对象内存地址的变量复制给另一个变量时，会把这个内存地址赋值给新变量

  • 参数传递的不同（把实参复制给形参的过程，解构等）

    首先我们应该明确一点：ECMAScript中所有函数的参数都是按值来传递的，但是为什么涉及到原始类型与引用类型的值时仍然有区别呢？还不就是因为内存分配时的差别。 　

    • 原始值：只是把变量里的值传递给参数，之后参数和这个变量互不影响。
    • 引用值：对象变量它里面的值是这个对象在堆内存中的内存地址。

    因此它传递的值也就是这个内存地址，这也就是为什么函数内部对这个参数的修改会体现在外部的原因了，因为它们都指向同一个对象。

前端常用首屏渲染性能指标有哪些

  1. 首次内容渲染（First Contentful Paint，FCP）：指浏览器首次渲染出页面的第一个内容元素的时间点。它反映了用户在浏览器中看到页面内容的时间。 使用 Performance Timing API 或 Navigation Timing API 来获取该指标，具体可以访问 performance.timing 对象，获取相关属性如 responseStart 、 domContentLoadedEventStart 等
  2. 首屏可交互（First Meaningful Paint，FMP）：指浏览器首次渲染出有意义的页面内容，并且用户可以与页面进行交互的时间点。它反映了用户感知到页面可用性的时间。performance.mark("fmp")
  3. 首次有效渲染（First Meaningful Paint，FMP）：指浏览器首次渲染出有意义的页面内容的时间点。它与 FCP 类似，但更关注用户感知到的有意义内容的时间。可以通过监测 navigationStart 事件和首次绘制事件（ firstPaint 或 firstContentfulPaint ）之间的时间差来获取该指标。
  4. 加载时间（Load Time）：指页面完全加载所需的时间。它包括下载页面的所有资源（HTML、CSS、JavaScript、图片等）以及执行相关的脚本和渲染过程。可以通过测量 load 事件和 navigationStart 事件之间的时间差来计算该指标，使用 Performance Timing API。
  5. 白屏时间（Blank Screen Time）：指从页面开始加载到首次有内容渲染出来之间的时间。它反映了用户在浏览器中看到空白页面的时间。 可以通过监测 navigationStart 事件和首次绘制事件（ firstPaint 或 firstContentfulPaint ）之间的时间差来获取该指标。
  6. 首次字节时间（First Byte Time，FBT）：指从发出请求到接收到第一个字节响应的时间。它反映了服务器响应的速度和网络延迟。 performance.timing.responseStart

window.performance.timing 字段说明

  1. navigationStart ：表示导航开始的时间，作为其他计时属性的基准参考时间。
  2. fetchStart ：指示浏览器开始获取文档的时间。
  3. domainLookupStart 和 domainLookupEnd ：测量 DNS（域名系统）解析所需的时间。
  4. connectStart 和 connectEnd ：测量与服务器建立连接所需的时间。
  5. requestStart ：表示浏览器开始向服务器请求文档的时间。
  6. responseStart 和 responseEnd ：测量接收到第一个字节和完整响应的时间。
  7. domLoading 和 domInteractive ：指示浏览器开始解析 HTML 并构建 DOM 的时间。
  8. domContentLoadedEventStart 和 domContentLoadedEventEnd ：测量 DOMContentLoaded 事件开始和结束的时间。该事件表示初始 HTML 文档已完全加载和解析。
  9. loadEventStart 和 loadEventEnd ：指示 load 事件开始和结束的时间。该事件表示所有资源（包括图像、样式表、脚本等）已加载完成。
avatar
文章
阅读
粉丝