美好的世界V
美好的世界V

浏览器原理3:数组存储

[toc]

示例代码

function foo(){
    var a = {name:"极客时间"}
    var b = a
    a.name = "极客邦" 
    console.log(a)
    console.log(b)
}
foo()
输出
{name: '极客邦'}
{name: '极客邦'}

function foo(){
    var a = 1
    var b = a
    a = 2
    console.log(a)
    console.log(b)
}
foo()
输出
2
1

仅改变了a中name的属性值，但是最终a和b打印出来的值都被改变了。像是ab都引用了 同样的对象，但是对与常量，却是分别打印不同的值。

  • 使用之前就需要确认其变量数据类型的称为静态语言。

  • 在运行过程中需要检查数据类型的语言称为动态语言

  • 支持隐式类型转换的语言称为弱类型语言

  • 不支持隐式类型转换的语言称为强类型语言

image-20220227155212166

JavaScript是一种弱类型的、动态的语言。那这些特点意味着什么呢？

  • 弱类型，JavaScript引擎在运行代码的时候自己会计算出来。
  • 动态，可以使用同一个变量保存不同类型的数据。
image-20220227155318713

内存模型

JavaScript的执行过程中， 主要有三种类型内存空间，分别是代码空间、栈空间和堆空间。

function foo(){
    var a = "极客时间"
    var b = a
    var c = {name:"极客时间"}
    var d = c
}
foo()

原始类型的数据值都是直接保存在“栈”中的

引用类型的值是存放在“堆”中的然后再栈上产生一个引用。

image-20220227170019798

为什么设计堆和栈？

这是因为JavaScript引擎需要用栈来维护程序执行期间上下文的状态，如果栈空间大了话，所有的数据都存放在栈空间里面，那么会影响到上下文切换的效率，进而又影响到整个程序的执行效率。比如文中的foo函数执行结束了，JavaScript引擎需要离开当前的执行上下文，只需要将指针下移到上个执行上下文的地址就可以了，foo函数执行上下文栈区空间全部回收。

通常情况下，栈空间都不会设置太大，主要用来存放一些原始类型的小数据。而引用类型的数据占用的空间都比较大，所以这一类数据会被存放到堆中，堆空间很大，能存放很多大的数据，不过缺点是分配内存和回收内存都会占用一定的时间

赋值操作原则

在JavaScript中，赋值操作和其他语言有很大的不同，原始类型的赋值会完整复制变量值，而引用类型的赋值是复制引用地址

image-20220227170030392

闭包合赋值操作的结合

function foo() {
    var myName = "极客时间"
    let test1 = 1
    const test2 = 2
    var innerBar = { 
        setName:function(newName){
            myName = newName
        },
        getName:function(){
            console.log(test1)
            return myName
        }
    }
    return innerBar
}
var bar = foo()
bar.setName("极客邦")
bar.getName()
console.log(bar.getName())
image-20220227162405782
  1. 当JavaScript引擎执行到foo函数时，首先会编译，并创建一个空执行上下文。
  2. 在编译过程中，遇到内部函数setName，JavaScript引擎还要对内部函数做一次快速的词法扫描，发现该内部函数引用了foo函数中的myName变量，由于是内部函数引用了外部函数的变量，所以JavaScript引擎判断这是一个闭包，于是在堆空间创建换一个“closure(foo)”的对象（这是一个内部对象，JavaScript是无法访问的），用来保存myName变量。
  3. 接着继续扫描到getName方法时，发现该函数内部还引用变量test1，于是JavaScript引擎又将test1添加到“closure(foo)”对象中。这时候堆中的“closure(foo)”对象中就包含了myName和test1两个变量了。
  4. 由于test2并没有被内部函数引用，所以test2依然保存在调用栈中。

垃圾回收

回收栈的数据

实例
function foo(){
    var a = 1
    var b = {name:"极客邦"}
    function showName(){
      var c = 2
      var d = {name:"极客时间"}
    }
    showName()
}
foo()
内存结构
image-20220227163401618

原始类型的数据被分配到栈中，引用类型的数据会被分配到堆中，当foo函数执行结束之后，foo函数的执行上下文会从堆中被销毁掉。

执行到showName函数时，一个记录当前执行状态的指针（称为ESP），指向调用栈中showName函数的执行上下文，表示当前正在执行showName函数。

当showName函数执行完成之后，JavaScript会将ESP下移到foo函数的执行上下文，这个下移操作就是销毁showName函数执行上下文的过程。

所以说，当一个函数执行结束之后，JavaScript引擎会通过向下移动ESP来销毁该函数保存在栈中的执行上下文。

堆中数据回收

栈中通过移动esp指针完成栈的回收，那么栈回收后堆的数据就无效了，如何回收？要回收堆中的垃圾数据，就需要用到JavaScript中的垃圾回收器了。

代际假说

代际假说有以下两个特点：

  • 第一个是大部分对象在内存中存在的时间很短，就是很多对象一经分配内存，很快就变得不可访问；
  • 第二个是不死的对象，会活得更久。

V8中会把堆分为新生代和老生代两个区域，新生代中存放的是生存时间短的对象，老生代中存放的生存时间久的对象。新生区通常只支持1～8M的容量，而老生区支持的容量就大很多了。

  • 副垃圾回收器，主要负责新生代的垃圾回收。
  • 主垃圾回收器，主要负责老生代的垃圾回收。
垃圾回收的通用流程

第一步是标记空间中活动对象和非活动对象。所谓活动对象就是还在使用的对象，非活动对象就是可以进行垃圾回收的对象。

第二步是回收非活动对象所占据的内存。其实就是在所有的标记完成之后，统一清理内存中所有被标记为可回收的对象。

第三步是做内存整理。频繁回收对象后，内存中就会存在大量不连续空间，称为内存碎片。如果需要分配较大连续内存的时候，就有可能内存不足。所以最后一步需要整理这些内存碎片

副垃圾回收器

新生区采用Scavenge算法，新生代空间对半划分为两个区域，一半是对象区域，一半是空闲区域，对象区域中的垃圾做标记；完成之后，，副垃圾回收器会把这些存活的对象复制到空闲区域中，把对象有序地排列起来，复制过程相当于内存整理操作，复制后空闲区域就没有内存碎片了。对象区域与空闲区域进行角色翻转，也就是原来的对象区域变成空闲区域，原来的空闲区域变成了对象区域。这样就完成了垃圾对象的回收操作，同时这种角色翻转的操作还能让新生代中的这两块区域无限重复使用下去。

image-20220227165340416
主垃圾回收器

老生区中的对象有两个特点，一个是对象占用空间大，另一个是对象存活时间长。

主垃圾回收器是采用标记-清除（Mark-Sweep）的算法

标记阶段就是从一组根元素开始，递归遍历这组根元素，在这个遍历过程中，能到达的元素称为活动对象，没有到达的元素就可以判断为垃圾数据。

接下来就是垃圾的清除过程

image-20220227165731131

对一块内存多次执行标记-清除算法后，会产生大量不连续的内存碎片，于是又产生了另外一种算法——标记-整理（Mark-Compact），后续步骤不是直接对可回收对象进行清理，而是让所有存活的对象都向一端移动

image-20220227165837381
全停顿

不过由于JavaScript是运行在主线程之上的，执行垃圾回收算法，需要将正在执行的JavaScript脚本暂停下来，待垃圾回收完毕后再恢复脚本执行。我们把这种行为叫做全停顿（Stop-The-World）

image-20220227165921784
增量标记

老生代的垃圾回收而造成的卡顿，V8将标记过程分为一个个的子标记过程，同时让垃圾回收标记和JavaScript应用逻辑交替进行，直到标记阶段完成，我们把这个算法称为增量标记

image-20220227170002664

编译器和解释器

编译器和解释器

编译器：在程序执行前将静态代码转为机器码
解释器：在运行时动态将代码解释为机器能理解的代码
image-20220227170343244
  1. 在编译型语言的编译过程中，编译器首先会依次对源代码进行词法分析、语法分析，生成抽象语法树（AST），然后是优化代码，最后再生成处理器能够理解的机器码。如果编译成功，将会生成一个可执行的文件。但如果编译过程发生了语法或者其他的错误，那么编译器就会抛出异常，最后的二进制文件也不会生成成功。
  2. 在解释型语言的解释过程中，同样解释器也会对源代码进行词法分析、语法分析，并生成抽象语法树（AST），不过它会再基于抽象语法树生成字节码，最后再根据字节码来执行程序、输出结果

js引擎执行代码

image-20220227170535409

1. 生成抽象语法树（AST）和执行上下文

无论你使用的是解释型语言还是编译型语言，在编译过程中，它们都会生成一个AST

image-20220227170654390 
var myName = "极客时间"
function foo(){
  return 23;
}
myName = "geektime"
foo()

抽象语法树

image-20220227170752561

编译器或者解释器后续的工作都需要依赖于AST，而不是源代码。

生成AST需要经过两个阶段。

第一阶段是分词（tokenize），又称为词法分析，其作用是将一行行的源码拆解成一个个token

image-20220227170924199

第二阶段是解析（parse），又称为语法分析，其作用是将上一步生成的token数据，根据语法规则转为AST。但如果源码存在语法错误，这一步就会终止，并抛出一个“语法错误”。

2. 生成字节码

其实一开始V8并没有字节码，而是直接将AST转换为机器码，由于执行机器码的效率是非常高效的，所以这种方式在发布后的一段时间内运行效果是非常好的。但是随着Chrome在手机上的广泛普及，特别是运行在512M内存的手机上，内存占用问题也暴露出来了，因为V8需要消耗大量的内存来存放转换后的机器码。为了解决内存占用问题，V8团队大幅重构了引擎架构，引入字节码，并且抛弃了之前的编译器，最终花了将进四年的时间，实现了现在的这套架构。

字节码就是介于AST和机器码之间的一种代码。但是与特定类型的机器码无关，字节码需要通过解释器将其转换为机器码后才能执行。

机器码所占用的空间远远超过了字节码，所以使用字节码可以减少系统的内存使用。

image-20220227172005916

3. 执行代码

如果有一段第一次执行的字节码，解释器Ignition会逐条解释执行.解释器Ignition除了负责生成字节码还会解释执行字节码。果发现有热点代码（HotSpot，一段代码被重复执行多次），那么后台的编译器TurboFan就会把该段热点的字节码编译为高效的机器码。当再次执行这段被优化的代码时，只需要执行编译后的机器码。

image-20220227172952998

4.优化措施

  1. 提升单次脚本的执行速度，避免JavaScript的长任务霸占主线程，这样可以使得页面快速响应交互；
  2. 避免大的内联脚本，因为在解析HTML的过程中，解析和编译也会占用主线程；
  3. 减少JavaScript文件的容量，因为更小的文件会提升下载速度，并且占用更低的内存。

消息队列机制

事件循环机制

  • 第一点引入了循环机制，具体实现方式是在线程语句最后添加了一个for循环语句，线程会一直循环执行。
  • 第二点是引入了事件，可以在线程运行过程中，等待用户输入，等待过程中线程处于暂停状态，一旦接收到用户输入的信息，那么线程会被激活，然后执行运算，最后输出结果

如果想处理其他线程的消息，则要有一个消息队列，不断循环从消息队列中取出消息执行，没有消息的时候就暂停线程。

js中渲染主线程会频繁接收到来自于IO线程的一些任务，接收到这些任务之后，渲染进程就需要着手处理，比如接收到资源加载完成的消息后，渲染进程就要着手进行DOM解析了；接收到鼠标点击的消息后，渲染主线程就要开始执行相应的JavaScript脚本来处理该点击事件

image-20220301073912106

这个消息模式是很多不同系统都会采用的方式。

  1. 添加一个消息队列；
  2. IO线程中产生的新任务添加进消息队列尾部；
  3. 渲染主线程会循环地从消息队列头部中读取任务，执行任务。

而对于夸进程的消息，则在主线程对应的进程中有一个单独的线程，把进程发来的消息转发给消息队列，进而被主线程获取

image-20220301074734929
安全退出主线程

定要退出当前页面时，页面主线程会设置一个退出标志的变量，在每次执行完一个任务时，判断是否有设置退出标志，如果设置了，那么就直接中断当前的所有任务，退出线程。

页面使用单线程的缺点

任务缺乏优先级

队列中的任务先进先出，先进的任务必须完成，后边的任务才能开始执行，高优先级的任务无法及时得到响应。

比如监控DOM节点的变化情况（节点的插入、修改、删除等动态变化）通过设置监听来实习会调。因为DOM变化非常频繁，如果每次发生变化的时候，都回掉接口，那么这个当前的任务执行时间会被拉长，从而导致**执行效率的下降**。如果这些DOM变化做成异步的消息事件，添加到消息队列的尾部，那么又会影响到监控的实时性，因为要等到队列中其他消息都完成。

我们把消息队列中的任务称为宏任务，每个宏任务中都包含了一个微任务队列。每次从消息队列中取出宏任务执行，执行完后，如果宏任务还有微任务，就执行这些微任务。然后在从队列中取出下一个宏任务。

我们把上边的dom更新做成一系列的微任务队列，提高了异步消息的及时性。

单任务执行时间过长

因为所有的任务都是在单线程中执行的，所以每次只能执行一个任务，而其他任务就都处于等待状态。如果其中一个任务执行时间过久，那么下一个任务就要等待很长时间。

image-20220301080816573

setTimeout原理

代码实现

它就是一个定时器，用来指定某个函数在多少毫秒之后执行它会返回一个整数，表示定时器的编号，同时你还可以通过该编号来取消这个定时器。

function showName(){
  console.log("极客时间")
}
var timerID = setTimeout(showName,200);
延迟消息队列

Chrome中维护一个需要延迟执行的消息队列，包括了定时器和Chromium内部一些需要延迟执行的任务。所以当通过JavaScript创建一个定时器时，渲染进程会将该定时器的回调任务添加到延迟队列中。这个会调任务包含了回调函数showName、当前发起时间、延迟执行时间。

消息循环逻辑
//消息循环伪代码
void ProcessTimerTask(){ //处理延迟消息
  //从delayed_incoming_queue中取出已经到期的定时器任务
  //依次执行这些任务
}

TaskQueue task_queue；
void ProcessTask();
bool keep_running = true;
void MainTherad(){
  for(;;){
    //执行消息队列中的任务
    Task task = task_queue.takeTask();
    ProcessTask(task);
    
    //执行延迟队列中的任务
    ProcessDelayTask()

    if(!keep_running) //如果设置了退出标志，那么直接退出线程循环
        break; 
  }
}
延迟消息处理逻辑

理完消息队列中的一个任务之后，就开始执行ProcessDelayTask函数。ProcessDelayTask函数会根据发起时间和延迟时间计算出到期的任务，然后依次执行这些到期的任务。等到期的任务执行完成之后，再继续下一个循环过程。通过这样的方式，一个完整的定时器就实现了。

延迟消息删除

其实浏览器内部实现取消定时器的操作也是非常简单的，就是直接从delayed_incoming_queue延迟队列中，通过ID查找到对应的任务，然后再将其从队列中删除掉就可以了。

注意事项
  • 当前任务过久影响定时器

通过setTimeout设置的回调任务被放入了消息队列中并且等待下一次执行，这里并不是立即执行的；要执行消息队列中的下个任务，需要等待当前的任务执行完成，由于当前这段代码要执行5000次的for循环，所以当前这个任务的执行时间会比较久一点。这势必会影响到下个任务的执行时间

function bar() {
    console.log('bar')
}
function foo() {
    setTimeout(bar, 0);
    for (let i = 0; i < 5000; i++) {
        let i = 5+8+8+8
        console.log(i)
    }
}
foo()
  • 嵌套调用定时器，那么最短间隔为4毫秒

定时器被嵌套调用5次以上，系统会判断该函数方法被阻塞了，如果定时器的调用时间间隔小于4毫秒，那么浏览器会将每次调用的时间间隔设置为4毫秒

image-20220301082213589
  • 未激活的页面，setTimeout执行最小间隔是1000毫秒，为了省电及优化页面
  • 延时执行时间有最大值，以32个bit来存储延时值的，是2147483647毫秒，大约24.8天
  • 回调函数中的this指向全局变了而不是某个对象
var name= 1;
var MyObj = {
  name: 2,
  showName: function(){
    console.log(this.name);
  }
}
setTimeout(MyObj.showName,1000)
//输出1,因为这段代码在编译的时候，执行上下文中的this会被设置为全局window

//解决
//第一种是将MyObj.showName放在匿名函数中执行，如下所示：

//箭头函数
setTimeout(() => {
    MyObj.showName()
}, 1000);
//或者function函数
setTimeout(function() {
  MyObj.showName();
}, 1000)

//第二种是使用bind方法，将showName绑定在MyObj上面，代码如下所示：
setTimeout(MyObj.showName.bind(MyObj), 1000)

XMLHttpRequest原理

XMLHttpRequest提供了从Web服务器获取数据的能力，如果你想要更新某条数据，只需要通过XMLHttpRequest请求服务器提供的接口，就可以获取到服务器的数据，然后再操作DOM来更新页面内容，整个过程只需要更新网页的一部分就可以了

异步回调

就是在主线程调用函数里直接执行传入的callback函数

let callback = function(){
    console.log('i am do homework')
}
function doWork(cb) {
    console.log('start do work')
    cb()
    console.log('end do work')
}
doWork(callback)
异步回调

就是主线程函数继续执行，callback在未来某个时间点在发生回调

let callback = function(){
    console.log('i am do homework')
}
function doWork(cb) {
    console.log('start do work')
    setTimeout(cb,1000)   
    console.log('end do work')
}
doWork(callback)

上边讲过浏览器页面是通过事件循环机制来驱动的，每个渲染进程都有一个消息队列，页面主线程按照顺序来执行消息队列中的事件，如执行JavaScript事件、解析DOM事件、计算布局事件、用户输入事件等等，如果页面有新的事件产生，那新的事件将会追加到事件队列的尾部。所以可以说是消息队列和主线程循环机制保证了页面有条不紊地运行。当循环系统在执行一个任务的时候，会为每个任务维护一个系统调用栈。

举例

image-20220301222422617

Parse HTML任务在执行过程中会遇到一系列的子过程，比如在解析页面的过程中遇到了JavaScript脚本，那么就暂停解析过程去执行该脚本，等执行完成之后，再恢复解析过程。

每个任务在执行过程中都有自己的调用栈，那么同步回调就是在当前主函数的上下文中执行回调函数，异步回调是指回调函数在主函数之外执行，一般有两种方式：

  • 第一种是把异步函数做成一个任务，添加到信息队列尾部；
  • 第二种是把异步函数添加到微任务队列中，这样就可以在当前任务的末尾处执行微任务了。

XMLHttpRequest运作机制

image-20220301222552185

调用xhr.send来发起网络请求，渲染进程会将请求发送给网络进程，然后网络进程负责资源的下载，等网络进程接收到数据之后，就会利用IPC来通知渲染进程；渲染进程接收到消息之后，会将xhr的回调函数封装成任务并添加到消息队列中，等主线程循环系统执行到该任务的时候，就会根据相关的状态来调用对应的回调函数

xmlhttprequest写法

  • 创建xmlhttprequest对象
  • 注册回调函数
  • 配置基础请求信息
  • 发起请求
  • 回调被执行
 function GetWebData(URL){
    /**
     * 1:新建XMLHttpRequest请求对象
     */
    let xhr = new XMLHttpRequest()

    /**
     * 2:注册相关事件回调处理函数 
     */
    xhr.onreadystatechange = function () {
        switch(xhr.readyState){
          case 0: //请求未初始化
            console.log("请求未初始化")
            break;
          case 1://OPENED
            console.log("OPENED")
            break;
          case 2://HEADERS_RECEIVED
            console.log("HEADERS_RECEIVED")
            break;
          case 3://LOADING  
            console.log("LOADING")
            break;
          case 4://DONE
            if(this.status == 200||this.status == 304){
                console.log(this.responseText);}
            console.log("DONE")
            break;
        }
    }
    xhr.ontimeout = function(e) { console.log('ontimeout') }
    xhr.onerror = function(e) { console.log('onerror') }
    /**
     * 3:打开请求
     */
    xhr.open('Get', URL, true);//创建一个Get请求,采用异步

    /**
     * 4:配置参数
     */
    xhr.timeout = 3000 //设置xhr请求的超时时间
    xhr.responseType = "text" //设置响应返回的数据格式
    xhr.setRequestHeader("X_TEST","time.geekbang")
    /**
     * 5:发送请求
     */
    xhr.send();
}

XMLHttpRequest存在问题

跨域问题

会报错 Access to XMLHttpRequest at 'https://time.geekbang.org/' from origin 'https://www.geekbang.org' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

HTTPS混合内容的问题

TTPS混合内容是HTTPS页面中包含了不符合HTTPS安全要求的内容，比如包含了HTTP资源，通过HTTP加载的图像、视频、样式表、脚本等，都属于混合内容。

宏任务

定义

页面中的大部分任务都是在主线程上执行的，这些任务包括了：

  • 渲染事件（如解析DOM、计算布局、绘制）；
  • 用户交互事件（如鼠标点击、滚动页面、放大缩小等）；
  • JavaScript脚本执行事件；
  • 网络请求完成、文件读写完成事件。

为了协调这些任务有条不紊地在主线程上执行，页面进程引入了消息队列和事件循环机制，渲染进程内部会维护多个消息队列，比如延迟执行队列和普通的消息队列。然后主线程采用一个for循环，不断地从这些任务队列中取出任务并执行任务。我们把这些消息队列中的任务称为宏任务。

执行过程

  • 先从多个消息队列中选出一个最老的任务，这个任务称为oldestTask；
  • 然后循环系统记录任务开始执行的时间，并把这个oldestTask设置为当前正在执行的任务；
  • 当任务执行完成之后，删除当前正在执行的任务，并从对应的消息队列中删除掉这个oldestTask；
  • 最后统计执行完成的时长等信息。

问题

各种IO的完成事件、执行JavaScript脚本的事件、用户交互的事件等都随时有可能被添加到消息队列中，而且添加事件是由系统操作的，js不能准确控制加入队列的位置，也就很难控制任务开始执行的时间。

image-20220301224400020

两个settimeout之间因为插入了系统任务，会导致第二个回调的时间不可控。

微任务

异步任务的两种方式

第一种是把异步回调函数封装成一个宏任务，添加到消息队列尾部，当循环系统执行到该任务的时候执行回调函数。 setTimeout和XMLHttpRequest的回调函数都是这种方式。

第二种方式的执行时机是在主函数执行结束之后、当前宏任务结束之前执行回调函数，这通常都是以微任务形式体现的。

微任务就是一个需要异步执行的函数，执行时机是在主函数执行结束之后、当前宏任务结束之前。

当javascript执行一段脚步的时候，系统会为其创建一个全局上下文，同时会在js引擎内部创建一个微任务队列，用来存放要执行的微任务。也就是说，执行一次宏任务后，会执行微任务队列中的所有微任务，当所有微任务都完成，在执行下一个宏任务。每个宏任务都关联了一个微任务队列。

微任务的产生方式

  1. 使用MutationObserver监控某个DOM节点，然后用js来修改节点。当DOM节点发生变化时，就会产生DOM变化记录的微任务。

  2. 使用Promise，当调用Promise.resolve()或者Promise.reject()的时候，也会产生微任务。

微任务的执行时间

当宏任务中的js快执行完成时，扫描全局执行上下文中的微任务队列，从队列中遍历执行所有微任务，直到微任务为空，若此时还有新的微任务产生，那么继续执行微任务，直到微任务队列为空。也就是说在执行微任务过程中产生的新的微任务并不会推迟到下个宏任务中执行，而是在当前的宏任务中继续执行

image-20220301225430059

在JavaScript脚本的后续执行过程中，分别通过Promise和removeChild创建了两个微任务，并被添加到微任务列表中。接着JavaScript执行结束，准备退出全局执行上下文，这时候就到了检查点了，JavaScript引擎会检查微任务列表，发现微任务列表中有微任务，那么接下来，依次执行这两个微任务。等微任务队列清空之后，就退出全局执行上下文

总结微任务

  • 微任务和宏任务是绑定的，每个宏任务在执行时，会创建自己的微任务队列。
  • 微任务的执行时长会影响到当前宏任务的时长。比如一个宏任务在执行过程中，产生了100个微任务，执行每个微任务的时间是10毫秒，那么执行这100个微任务的时间就是1000毫秒，也可以说这100个微任务让宏任务的执行时间延长了1000毫秒。所以你在写代码的时候一定要注意控制微任务的执行时长。
  • 在一个宏任务中，分别创建一个用于回调的宏任务和微任务，无论什么情况下，微任务都早于宏任务执行

监听DOM变化方法演变

监听DOM变化一直是前端工程师一项非常核心的需求。

采用轮询方式，

使用setTimeout定时查询dom是否有改变，有改变就执行回调函数，确定就是间隔太长就会响应不及时，间隔太短而页面没变化就会浪费资源。

观察者模式

通过设置同步的回调callback，使用观察者模式来监听dom变动。缺点是js变化太频繁时会造成性能开销。比如利用JavaScript动态创建50个节点，触发50次回调，每个回调函数需要执行时间，假设每次回调的执行时间是4毫秒，50次回调的是200毫秒，浏览器正在执行一个动画效果，由于Mutation Event触发回调事件，就会导致动画的卡顿。

异步模式

使用MutationObserver将响应函数改成异步调用，可以将多次dom变化的事件和为一次，封装一个结构来记录期间所有变化，触发一次异步调用。缺点是settimeout调用时间无法保证，可能会有别的耗时事件插入。、

微任务模式

在每次DOM节点发生变化的时候，渲染引擎将变化记录封装成微任务，并将微任务添加进当前的微任务队列中。这样当执行到检查点的时候，V8引擎就会按照顺序执行微任务了 ，然后异步执行回调函数

Promise原理

js上已知的异步编程模型，就是把主线程的任务发送给其他线程，然后其他线程完成后给主线程的消息队列发消息，主线程接受回调，任务完成。这就是页面编程的一大特点：异步回调。

image-20220302073750428

异步回调的缺点就是大量的回调函数会导致代码逻辑不连贯不符合人的直觉。

//执行状态
function onResolve(response){console.log(response) }
function onReject(error){console.log(error) }

let xhr = new XMLHttpRequest()
xhr.ontimeout = function(e) { onReject(e)}
xhr.onerror = function(e) { onReject(e) }
xhr.onreadystatechange = function () { onResolve(xhr.response) }

//设置请求类型，请求URL，是否同步信息
let URL = 'https://time.geekbang.com'
xhr.open('Get', URL, true);

//设置参数
xhr.timeout = 3000 //设置xhr请求的超时时间
xhr.responseType = "text" //设置响应返回的数据格式
xhr.setRequestHeader("X_TEST","time.geekbang")

//发出请求
xhr.send()

封装异步代码

我们重点关注的是输入内容（请求信息）*和*输出内容（回复信息）**，同封装使代码线性。

//makeRequest用来构造request对象
function makeRequest(request_url) {
    let request = {
        method: 'Get',
        url: request_url,
        headers: '',
        body: '',
        credentials: false,
        sync: true,
        responseType: 'text',
        referrer: ''
    }
    return request
}

//[in] request，请求信息，请求头，延时值，返回类型等
//[out] resolve, 执行成功，回调该函数
//[out] reject  执行失败，回调该函数
function XFetch(request, resolve, reject) {
    let xhr = new XMLHttpRequest()
    xhr.ontimeout = function (e) { reject(e) }
    xhr.onerror = function (e) { reject(e) }
    xhr.onreadystatechange = function () {
        if (xhr.status = 200)
            resolve(xhr.response)
    }
    xhr.open(request.method, URL, request.sync);
    xhr.timeout = request.timeout;
    xhr.responseType = request.responseType;
    //补充其他请求信息
    //...
    xhr.send();
}
//最终调用过程，
XFetch(makeRequest('https://time.geekbang.org'),
    function resolve(data) {
        console.log(data)
    }, function reject(e) {
        console.log(e)
    })

这样比较简洁，但是代码复杂后会有回调地狱的问题

image-20220302075751071

因为上个任务的回调内会处理下一个任务，就会形成嵌套，且每个任务都有成功和失败的两个状态，需要分别处理。

Promise改造

//改造发送请求
function XFetch(request) {
  //这里的两个参数上在promise.then和promise.catch时设置
  function executor(resolve, reject) {
      let xhr = new XMLHttpRequest()
      xhr.open('GET', request.url, true)
       //失败事件处理
      xhr.ontimeout = function (e) { reject(e) }
       //失败事件处理
      xhr.onerror = function (e) { reject(e) }
      xhr.onreadystatechange = function () {
          if (this.readyState === 4) {
              if (this.status === 200) {
                //成功事件处理
                  resolve(this.responseText, this)
              } else {
                  let error = {
                      code: this.status,
                      response: this.response
                  }
                  //失败事件处理
                  reject(error, this)
              }
          }
      }
      xhr.send()
  }
  return new Promise(executor)
}

Promise线性执行

我们再利用XFetch来构造请求流程，代码如下：

var x1 = XFetch(makeRequest('https://time.geekbang.org/?category'))
var x2 = x1.then(value => {
    console.log(value)
    return XFetch(makeRequest('https://www.geekbang.org/column'))
})
var x3 = x2.then(value => {
    console.log(value)
    return XFetch(makeRequest('https://time.geekbang.org'))
})
x3.catch(error => {
    console.log(error)
})

Promise特点

  • 首先我们引入了Promise，在调用XFetch时，会返回一个Promise对象。
  • 构建Promise对象时，需要传入一个executor函数，XFetch的主要业务流程都在executor函数中执行。
  • 如果运行在excutor函数中的业务执行成功了，会调用resolve函数；如果执行失败了，则调用reject函数
  • 其中x1.x2.x3的异常都会回到x3.catch处处理，通过这种方式可以将所有Promise对象的错误合并到一个函数来处理。
  • 在excutor函数中调用resolve函数时，会触发promise.then设置的回调函数；而调用reject函数时，会触发promise.catch设置的回调函数
  • 通过构造promise函数，然后通过promis.then。来设置回调函数，实现回调函数的延时绑定。
  • 需要将回调函数onResolve的返回值穿透到最外层。因为我们会根据onResolve函数的传入值来决定创建什么类型的Promise任务，创建好的Promise对象需要返回到最外层，这样就可以摆脱嵌套循环了
image-20220302082158818

之所以可以使用最后一个对象来捕获所有异常，是因为Promise对象的错误具有“冒泡”性质，会一直向后传递，直到被onReject函数处理或catch语句捕获为止。具备了这样“冒泡”的特性后，就不需要在每个Promise对象中单独捕获异常了

Promise与微任务

实例

function executor(resolve, reject) {
    resolve(100)
}
let demo = new Promise(executor)

function onResolve(value){
    console.log(value)
}
demo.then(onResolve)

首先执行new Promise时，Promise的构造函数会被执行。Promise的构造函数会调用Promise的参数executor函数，然后执行resolve函数，resolve函数会回调then函数，然后执行onResolve函数。但是onResolve函数时延时设置的，所以内部肯定是有个延时调用onResolve函数的过程。

原理实现

//模拟promise
function Bromise(executor) {
    var onResolve_ = null
    var onReject_ = null
     //模拟实现resolve和then，暂不支持rejcet
    this.then = function (onResolve, onReject) {
        onResolve_ = onResolve
    };
    this.catch = function(onReject){
        onReject_ = onReject
    }
  //    延时发送消息，使在promise。then执行后在执行回调
    function resolve(value) {
          setTimeout(()=>{
            onResolve_(value)
            },0)
    }
  
     function reject(value) {
          setTimeout(()=>{
            onReject_(value)
            },0)
    }
    executor(resolve, null);
}

//调用
function executor(resolve, reject) {
    resolve(100)
}
//将Promise改成我们自己的Bromsie
let demo = new Bromise(executor)

function onResolve(value){
    console.log(value)
}
demo.then(onResolve)

但是settimeout的延时执行效率低，所以内部是把resolve和reject作为微任务添加到微任务队列中，在每个主人任务完成后执行，这样可以保证resolve和reject 的及时执行。

async|await

ES7 引入了async/await，这是JavaScript异步编程的一个重大改进，提供了在不阻塞主线程的情况下使用同步代码实现异步访问资源的能力，并且使得代码逻辑更加清晰

案例：连续访问两个地址，对数据做处理

//promise写法
fetch('https://www.geekbang.org')
      .then((response) => {
          console.log(response)
          return fetch('https://www.geekbang.org/test')
      }).then((response) => {
          console.log(response)
      }).catch((error) => {
          console.log(error)
      })
      
//async/wait写法      
async function foo(){
  try{
    let response1 = await fetch('https://www.geekbang.org')
    console.log('response1')
    console.log(response1)
    let response2 = await fetch('https://www.geekbang.org/test')
    console.log('response2')
    console.log(response2)
  }catch(err) {
       console.error(err)
  }
}
foo()

整个异步处理的逻辑都是使用同步代码的方式来实现的，而且还支持try catch来捕获异常，这就是完全在写同步代码，所以是非常符合人的线性思维的

生成器 VS 协程

生成器函数是一个带星号函数，而且是可以暂停执行和恢复执行的

function* genDemo() {
    console.log("开始执行第一段")
    yield 'generator 2'

    console.log("开始执行第二段")
    yield 'generator 2'

    console.log("执行结束")
    return 'generator 2'
}

console.log('main 0')
let gen = genDemo()
console.log(gen.next().value)
console.log('main 1')
console.log(gen.next().value)
console.log('main 2')
console.log(gen.next().value)
console.log('main 3')
//结果
main 0
 开始执行第一段
generator 2
main 1
开始执行第二段
generator 2
main 2
 执行结束
generator 2
 main 3

生成器函数的特性，可以暂停执行，也可以恢复执行。

  1. 在生成器函数内部执行一段代码，如果遇到yield关键字，那么JavaScript引擎将返回关键字后面的内容给外部，并暂停该函数的执行。
  2. 外部函数可以通过next方法恢复函数的执行
生成器的原理

生成器就是协程的一种实现方式，下边先解释协程

协程

协程是一种比线程更加轻量级的存在。你可以把协程看成是跑在线程上的任务，一个线程上可以存在多个协程，但是在线程上同时只能执行一个协程。比如有ab两个协程，a在运行，当a暂停后，b才可以运行。如果从A协程启动B协程，我们就把A协程称为B协程的父协程。

一个线程也可以拥有多个协程。协程不是被操作系统内核所管理，而完全是由程序所控制（也就是在用户态执行）。

协程执行过程
image-20220302224914481
总结
  1. 通过调用生成器函数genDemo来创建一个协程gen，创建之后，gen协程并没有立即执行。
  2. 要让gen协程执行，需要通过调用gen.next。
  3. 当协程正在执行的时候，可以通过yield关键字来暂停gen协程的执行，并返回主要信息给父协程。
  4. 如果协程在执行期间，遇到了return关键字，那么JavaScript引擎会结束当前协程，并将return后面的内容返回给父协程。
  5. gen协程和父协程是在主线程上交互执行的，并不是并发执行的，它们之前的切换是通过yield和gen.next来配合完成的。
  6. 当在gen协程中调用了yield方法时， js会保存gen协程的调用栈，恢复父协程的调用栈。当父协程调用gen.next后时，js在保存父协程的调用栈，恢复gen函数的调用栈。
协程切换过程
image-20220302225732361
生成器实现promise
//promise写法
fetch('https://www.geekbang.org')
      .then((response) => {
          console.log(response)
          return fetch('https://www.geekbang.org/test')
      }).then((response) => {
          console.log(response)
      }).catch((error) => {
          console.log(error)
      })
     
//改造后
//foo函数是一个生成器函数，在foo函数里面实现了用同步代码形式来实现异步操
function* foo() {
    let response1 = yield fetch('https://www.geekbang.org')
    console.log('response1')
    console.log(response1)
    let response2 = yield fetch('https://www.geekbang.org/test')
    console.log('response2')
    console.log(response2)
}

//执行foo函数的代码
let gen = foo()
function getGenPromise(gen) {
    return gen.next().value
}
getGenPromise(gen).then((response) => {//相当于response1.then
    console.log('response1')
    console.log(response)
    return getGenPromise(gen)
}).then((response) => {
    console.log('response2')
    console.log(response)
})
  • 先执行gen =foo ，创建gen协程
  • 在父协程中通过执行gen.next把主线程的控制权交给gen协程。
  • gen协程执行后，通过fetch函数创建一个Promise对象response1，然后yield暂停gen协程的执行，并将response1返回给父协程
  • 父协程恢复执行后，调用response1.then方法等待请求结果。
  • fetch发起请求产生结果后，回调then的函数，打印response，然后再通过gen.next把执行权交给gen协程，gen协程产生另一个promise，重复上边步骤。

async/await原理

async/await技术背后的秘密就是Promise和生成器应用，往低层说就是微任务和协程应用

async是一个通过异步执行并隐式返回 Promise 作为结果的函数。

async
async function foo() {
    return 2
}
console.log(foo())  // Promise {: 2}
await
async function foo() {
    console.log(1)
    let a = await 100
    console.log(a)
    console.log(2)
}
console.log(0)  
foo()
console.log(3)
//打印 
0
1
3
100
2
执行流程图
image-20220303074758340
过程描述

  1. 先执行console.log，打印0

  2. 执行foo函数，因为有async，会保存当前调用栈，然后切换到协程foo，执行打印1

  3. 接着执行await 100这里比较复杂。

    1. 首先创建一个promise对象，如下，并且把resolve（100）函数交给微任务队列

      let promise_ = new Promise((resolve,reject){
  resolve(100)
})

      然后js会暂停当前协程，将主线程的控制权转交给父协程执行，同时会将promise_对象返回给父协程。

  4. 接下来执行父协程开始执行console.log(3)，然后父协程执行结束，在结束前进入微任务的检查点，执行微任务队列中的微任务，里边有resolve(100)等待执行，然后就会触发promise_.then的回调函数。

    1. promise_.then((value)=>{
   //回调函数被激活后
  //将主线程控制权交给foo协程，并将vaule值传给协程
})

    此时又切换回foo协程，并将value也就是100传给该协程，

  5. foo协程激活后，把100赋值给变量a，然后继续向后执行，最后把控制权转给父协程。

总结

用async/await可以实现用同步代码的风格来编写异步代码，这是因为async/await的基础技术使用了生成器和Promise，生成器是协程的实现，利用生成器能实现生成器函数的暂停和恢复。而promise又利用了微任务和延时消息。

async function foo() {
    console.log('foo')
    return 100
}
async function bar() {
    console.log('bar start')
    let a =await foo()
    console.log(a)
    console.log('bar end')
}
console.log('script start')
setTimeout(function () {
    console.log('setTimeout')
}, 0)
bar();
new Promise(function (resolve) {
    console.log('promise executor')
    resolve();
    console.log('promise executor2')
}).then(function () {
    console.log('promise then')
})
console.log('script end')

执行过程

image-20220303082728002

你可能感兴趣的:(浏览器原理3:数组存储)

  • 华为OD机试E卷 --找终点--24年OD统一考试（Java & JS & Python & C & C++） 飞码创造者 最新华为OD机试题库2024华为odjavajavascriptpythonc语言
    文章目录题目描述输入描述输出描述用例JS算法源码Java算法源码python算法源码c算法源码c++算法源码题目描述给定一个正整数数组，设为nums，最大为100个成员，求从第一个成员开始，正好走到数组最后一个成员，所使用的最少步骤数。要求:1.第一步必须从第一元素开始，且1<=第一步的步长
  • 从零创建一个 Django 项目 m0_74825172 djangopython后端
    1.准备环境在开始之前，确保你的开发环境满足以下要求：安装了Python(推荐3.8或更高版本)。安装pip包管理工具。如果要使用MySQL或PostgreSQL，确保对应的数据库已安装。创建虚拟环境在项目目录中创建并激活虚拟环境，保证项目依赖隔离：#创建虚拟环境python-mvenvenv#激活虚拟环境#WindowsenvScriptsactivate#Linux/Macsourceenv/
  • 云原生周刊：Prometheus 3.0 正式发布 云计算
    开源项目推荐Achilles-SDKAchilles-SDK是一个专为构建Kubernetes控制器而设计的开源开发工具包。它简化了控制器的开发流程，提供了强大的API和高效的抽象层，使开发者能够专注于业务逻辑的实现，而无需处理底层复杂性。Achilles-SDK支持快速构建高性能、可扩展的Kubernetes控制器，是开发Kubernetes原生应用和自动化操作的理想选择。KLKL是一个为终端提
  • 《盘古大模型——鸿蒙NEXT的智慧引擎》 人工智能深度学习
    在当今科技飞速发展的时代，华为HarmonyOSNEXT的发布无疑是操作系统领域的一颗重磅炸弹，其将人工智能与操作系统深度融合，开启了智能新时代。而盘古大模型在其中发挥着至关重要的核心作用。赋予小艺智能助手超强能力在鸿蒙NEXT中，盘古大模型赋予了小艺智能助手更强的记忆、推理和规划能力，使其能够支持23类常用记忆类型，掌握万亿token的知识量。基于盘古大模型，小艺可以实现诸如将带有表格的图片转化
  • [Mac + Icarus Verilog + gtkwave] Mac运行Verilog及查看波形图 Xminyang MacVerilogHDLmacosverilog
    目录1.MAC安装环境1.1IcarusVerilog编译1.2gtkwave查看波形2.安装遇到的问题2.1macOScannotverifythatthisappisfreefrommalware2.2gtkwave-binisnotcompatiblewithmacOS14orlater3.运行示例3.1源代码3.2编译Verilog3.3生成.vcd文件3.3查看波形3.4脚本运行参考1.
  • 附原文 |《2024年漏洞与威胁趋势报告》深度解读 漏洞
    在信息技术飞速发展的当下，网络安全已然成为全球瞩目的焦点。安全极客社区精心译制的《2024年漏洞与威胁趋势报告》明确指出，2023年堪称网络安全领域的重要分水岭。这一年，新发现漏洞的数量出现了前所未有的增长态势，其中高危或严重级别的漏洞占比高达一半，漏洞利用的时间线显著缩短，然而平均修复时间却过长。金融服务、制造业以及公用事业等行业面临的网络威胁愈发严峻，首席信息安全官所承担的法律责任也日益加重。
  • Java Arrays 方法详解 赔罪 Java系统学习java算法eclipse开发语言intellij-ideajava-eeArray方法详解
    目录1.JavaArrays.fill()方法详解2.JavaArrays.copyOf()方法详解3.JavaArrays.copyOfRange()方法详解4.JavaArrays.sort()方法详解1.sort(T[]a)2.sort(T[]a,intformIndex,inttoIndex)3.sort(T[]a,Comparatorc)(1)按第一维元素比较二维数组：(2)按第二维元素
  • 华为数通HCIA(学习笔记) 想做运维大佬 华为数通(HCIA)笔记系列华为学习笔记
    2024-03-22重启华为数通学习计划由于工作原因，预计将在2024年6月30日之前完成HCIP的学习并通过HCIP的考试-在2025年6月30日前完成HCIE的学习并通过HCIE的考试此为学习笔记，实验笔记和试题笔记会分别更新到其他帖子中一、数据网络通信基础1.1专业名词LAN(LocalAreaNetwork)：局域网Ethrenet：以太网Campus：园区网VLAN(VirtualLAN
  • Ultralytics YOLOv8 英伟达™ Jetson®处理器部署 kuan_li_lyg 树莓派&JetsonYOLO机器人自动驾驶强化学习计算机视觉深度学习人工智能
    系列文章目录前言本综合指南提供了在英伟达Jetson设备上部署UltralyticsYOLOv8的详细攻略。此外，它还展示了性能基准，以证明YOLOv8在这些小巧而功能强大的设备上的性能。备注本指南使用SeeedStudioreComputerJ4012进行测试，它基于运行最新稳定JetPack版本JP5.1.3的NVIDIAJetsonOrinNX16GB。对于较
  • python学习笔记 浅夏入秋^_^ Python编程语言python学习开发语言
    python学习笔记第1-3章基础知识https://www.jetbrains.com/help/pycharm/小技巧：如果在编辑器中未选择任何内容，按⌘C可将文本光标处的整行复制到剪贴板。按两次⌃Space可调用代码补全功能的特殊变体，这样您可以从没有在当前文件中声明的命名空间补全XML标记名称。如果命名空间尚未声明，则会自动生成声明。使用代码|检查代码可对整个项目或自定义范围运行代码分析，
  • kali设置系统时间 浅夏入秋^_^ 渗透linux安全运维
    kali设置系统时间1、查看系统时间，发现时间不对┌──(root㉿kali)-[~]└─#date2022年05月29日星期日23:08:47EDT2、修改系统时间步骤：tzselect#依次选择Asia-China-BeijingTime-Yesecho"ZONE=Asia/Shanghai">>/etc/sysconfigrm-f/etc/localtime#链接到上海时区文件ln-sf/u
  • 浅谈云计算08 | 基本云架构 时光札记z 云计算云计算架构云原生
    浅谈基本云架构一、负载分布架构二、资源池架构三、动态可扩展架构四、弹性资源容量架构五、服务负载均衡架构六、云爆发架构七、弹性磁盘供给架构八、冗余存储架构在当今数字化时代，云计算已成为企业发展的核心驱动力，而其背后的一系列关键架构则是支撑云计算高效稳定运行的基石。从负载分布到资源池构建，从动态扩展到服务负载均衡等架构，它们各自承担独特功能且紧密协作，在保障系统性能、可靠性、资源优化及数据安全等方面发
  • 联想计算机型号,联想笔记本所有型号介绍（经典五款推荐） Yaooo5 联想计算机型号
    导语：笔记本电脑是如今很畅销的电子产品之一，很多上班人士或者是学生，都在使用笔记本电脑。在笔记本电脑的领域中，不少品牌都在不断的创新，而我们最熟悉的莫过于就是联想。联想笔记本在国内的畅销程度可以说是首屈一指。那么旗下都有哪些型号呢?这也是让很多用户疑惑的地方。小编今天的文章就来为大家详细的介绍一下，联想笔记本的经典型号。一、联想小新Air13Pro联想小新Air13Pro的确首先做到了5000以内
  • 华为OD机试2024年E卷-最长连续交替方波信号[200分]（ Java | Python3 | C++ | C语言 | JsNode | Go）实现100%通过率 梅花C 华为OD题库华为od
    题目描述输入一串方波信号，求取最长的完全连续交替方波信号，并将其输出，如果有相同长度的交替方波信号，输出任一即可，方波信号高位用1标识，低位用0标识如图：说明：一个完整的信号一定以0开始然后以0结尾，即010是一个完整的信号，但101，1010，0101不是输入的一串方波信号是由一个或多个完整信号组成两个相邻信号之间可能有0个或多个低位，如0110010，011000010同一个信号中可以有连续的
  • 《C++编程思想》笔记 Wanncye C++面试题汇总书籍课程笔记c++开发语言mfc
    《C++编程思想》笔记第3章：C++中C第4章：数据抽象第5章：隐藏实现第6章：初始化与清除第7章：函数重载与默认参数第8章：常量第9章：内联函数第10章：名字控制第13章：动态对象创建第14章：组合和继承第15章：多态性和虚函数第16章：模板介绍第3章：C++中C标准C和C++有一种特征叫做函数原型。用函数原型，在声明和定义一个函数时，必须使用参数类型描述。这种描述就是“原型”。调用函数时，编译
  • 《CPython Internals》阅读笔记：p221-p231 python
    《CPythonInternals》学习第12天，p221-p231总结，总计11页。一、技术总结无。二、英语总结(生词：2)1.atatimeidiom.separately(单独地)inthespecifiedgroups(一次)。示例：(1)Icanonlydoonethingatatim(我一次只能做一件事)。(2)Wecarriedtheboxestwoatatimeupthestair
  • inotifywait监听php,用inotifywait监视文件变化并执行相应脚本 函明
    Inotify是一个Linux特性，它监控文件系统操作，比如读取、写入和创建。Inotify反应灵敏，用法非常简单，并且比cron任务的繁忙轮询高效得多。在内核2.6.13以上都可以使用。Inotify一种强大的、细粒度的、异步文件系统监控机制，它满足各种各样的文件监控需要，可以监控文件系统的访问属性、读写属性、权限属性、删除创建、移动等操作，也就是可以监控文件发生的一切变化。inotify-to
  • android自定义控件不显示,解决Android Studio Design界面不显示layout控件的问题 叶江流 android自定义控件不显示
    AndroidStudio更新到3.1.3后，发现拖到Design中的控件在预览界面中不显示；解决办法：在Styles.xml中的parent="..."中的Theme前添加Base@color/colorPrimary@color/colorPrimaryDark@color/colorAccent补充知识：AndroidStudioXML文件之style标签详解前言:Android的样式一般定
  • linux服务器用amd,主力机从Intel换成AMD 32核锐龙 Linux之父：半年用下来感觉特好... 胡厨厨 linux服务器用amd
    原标题：主力机从Intel换成AMD32核锐龙Linux之父：半年用下来感觉特好来源：快科技去年5月，在编译LinuxKernel5.7rc7的空当，Linux之父LinusTorvalds对主力电脑做了一次大调整，从i9-9900K升级为了AMD锐龙线程撕裂者3970X。8核到32核当然可以说是质变，而且Torvalds过去15年一直都是用Intel平台作开发。用了半年多Torvalds对AMD
  • linux出现bash: ./java: cannot execute binary file 问题的解决办法 w36680130 linux
    linux出现bash:./java:cannotexecutebinaryfile问题的解决办法参考文章：（1）linux出现bash:./java:cannotexecutebinaryfile问题的解决办法（2）https://www.cnblogs.com/longshiyVip/p/4802339.html备忘一下。
  • Python字符串常用操作 Taichi呀 pythonpython开发语言
    Python字符串常用操作一、字符串的切片1.1、通过下标及下标范围取值my_str='myNameIsTaichi'value1=my_str[2]#正向Nvalue2=my_str[-5]#反向从-1开始a字符串分割，语法：string[end:step]start：头下标，以0开始end：尾下表，以-1开始step步长str="abc-123-如果我是DJ你会爱我吗.mp4"print(st
  • Jetson Nano部署TensorRT加速的YOLO V8 Hylan_J 学习项目YOLOgithubarm开发
    JetsonNano部署YOLOV8刷JetPack镜像Step1：格式化SD卡Step2：下载镜像文件Step3：烧录镜像文件Python环境配置Solution1：更改默认的Python环境Solution2：使用conda管理Python环境YOLOV8部署Step1：源码下载Step2：trtexec环境变量设置Step3：pt权重文件导出为ONNX格式Step4：ONNX文件生成engi
  • C++语法 叹完气改代码 c++开发语言
    c++基础语法（.cpp）变量声明：变量声明类似初始化，注意声明范围，局部变量和全局变量，数组为组合类型输入输出：scanf：输入，淘汰不安全，%x：ASCLL码值类型，%s，数组类型scanf_s(“%s”,&str,10),输入数组，设定大小输入memset（）：按大小设定变量，_s设定范围更多参考帮助c语言中文网http://c.biancheng.net/cpp/biancheng/cpp
  • -bash: ./imxdownload: cannot execute binary file: Executable file format error（可执行文件格式错误） 蓝天澈水 Linuxbashlinux开发语言经验分享arm
    这可能是因为可执行文件不符合当前主机架构，因此需要在当前主机上再次编译生成可执行文件。1.复制把源代码文件复制到当前主机2.编译sudogccimxdownload.c-oimxdownload3.尝试将以上生成的可执行文件复制到.bin所在的文件夹。赋予权限下载到SD卡。$:sudochmod777imxdownloa$:./imxdownloadu-boot.bin/dev/sdbI.MX6U
  • 如何防止缓存雪崩、击穿和穿透?思维导图 代码示例（java 架构) 用心去追梦 缓存java架构
    防止缓存雪崩、击穿和穿透是确保缓存系统稳定性和性能的关键。以下是一个思维导图结构，以及一个简化的Java架构代码示例，展示了如何通过设计和技术手段来预防这些问题。思维导图结构防止缓存问题缓存雪崩分散过期时间设置随机的TTL（Time-To-Live）限流与熔断服务降级流量控制预热机制提前加载热点数据缓存击穿分布式锁使用Redis等工具实现分布式锁缓存冗余多副本存储异步更新异步加载数据到缓存缓存穿透
  • Vue 3 中的 `setup()` 函数有什么作用？它在组件生命周期中的位置是什么？ chenNorth。 vuevue.jsjavascript前端
    在Vue3中，setup()函数是CompositionAPI的入口点，它在组件实例创建之前被调用，并且是响应式系统的上下文。setup()函数的作用和位置如下：setup()函数的作用响应式状态：在setup()函数中声明的变量会自动被转换为响应式状态，这些状态可以在模板中直接使用。生命周期钩子：setup()函数内部可以访问组件的生命周期钩子，如onMounted、onUpdated和onUn
  • Go语法和特性 penngo Gogolanglinuxbash
    文章目录1、语法基础1.1环境安装1.1.1安装1.1.2编译工具1.2基本语法1.2.1变量的声明与初始化1.2.1原生数据类型1.2.2指针1.2.3常量与类型别名1.2.4分支与循环1.3容器1.3.1数组1.3.2列表1.3.2字典1.3.3容器遍历1.4函数与接口1.4.1函数声明和参数传递1.4.2匿名函数和闭包1.4.2.1匿名函数1.4.2.2闭包1.4.3接口声明与嵌套1.4.4
  • DuckDB-Wasm 库详解 maply Node.jswasm前端node.js数据库IndexedDB
    DuckDB-Wasm详解DuckDB-Wasm是一种浏览器端实现的DuckDB数据库技术，旨在将DuckDB的强大功能移植到浏览器环境中，通过WebAssembly技术在浏览器内运行SQL查询。它为处理本地数据、快速分析和交互式数据探索提供了一种高效的解决方案，避免了服务器端依赖。1.DuckDB简介DuckDB是一个开源的列存储数据库，专注于在线分析处理（OLAP），特别适合处理中小型数据集。
  • 设计模式01：创建型设计模式之单例、简单工厂的使用情景及其基础Demo 我是苏苏 设计模式java开发语言
    一、单例模式1.情景连接字符串管理2.好处代码简洁：可全局访问连接字符串。性能优化：一个程序一个连接实例，避免反复创建对象（连接）和销毁对象（连接）。线程安全：连接对象不会被重复创建，从而避免并发冲突。3.DemousingSystem;usingSqlSugar;publicclassSqlSugarSingleton{//使用Lazy来保证延迟初始化和线程安全//Lazy通过内部的机制确保在多
  • 低调的12306：中国软件技术难度之最 老韩校长教编程 经验分享java
    低调的12306：中国软件技术难度之最同学们，今天老韩想聊点“大国重器”。不是什么导弹、卫星，也不是什么芯片、高铁，而是一个每天都在你指尖飞速运行的国民级应用——12306。一听到这个名字，有些人可能脑袋一歪：“12306？买火车票的那个软件？”没错，就是它。你用来抢春运票骂过无数次的12306，可能比你想象的更厉害。很多人不知道的是，12306是中国软件工程技术难度的天花板之一。你以为它只是一个
  • windows下源码安装golang 616050468 golang安装golang环境windows
             系统： 64位win7， 开发环境：sublime text 2，  go版本： 1.4.1    1.  安装前准备(gcc, gdb, git)        golang在64位系
  • redis批量删除带空格的key bylijinnan redis
    redis批量删除的通常做法： redis-cli keys "blacklist*" | xargs redis-cli del 上面的命令在key的前后没有空格时是可以的，但有空格就不行了： $redis-cli keys "blacklist*" 1) "blacklist:12: [email protected]
  • oracle正则表达式的用法 0624chenhong oracle正则表达式
      方括号表达示 方括号表达式 描述 [[:alnum:]] 字母和数字混合的字符 [[:alpha:]] 字母字符 [[:cntrl:]] 控制字符 [[:digit:]] 数字字符 [[:graph:]] 图像字符 [[:lower:]] 小写字母字符 [[:print:]] 打印字符 [[:punct：]] 标点符号字符 [[:space:]]
  • 2048源码(核心算法有，缺少几个anctionbar，以后补上) 不懂事的小屁孩 2048
    2048游戏基本上有四部分组成， 1：主activity，包含游戏块的16个方格，上面统计分数的模块 2：底下的gridview，监听上下左右的滑动，进行事件处理， 3：每一个卡片，里面的内容很简单，只有一个text，记录显示的数字 4：Actionbar，是游戏用重新开始，设置等功能(这个在底下可以下载的代码里面还没有实现) 写代码的流程 1：设计游戏的布局，基本是两块，上面是分
  • jquery内部链式调用机理 换个号韩国红果果 JavaScriptjquery
    只需要在调用该对象合适(比如下列的setStyles)的方法后让该方法返回该对象（通过this  因为一旦一个函数称为一个对象方法的话那么在这个方法内部this（结合下面的setStyles）指向这个对象） function create(type){ var element=document.createElement(type); //this=element;
  • 你订酒店时的每一次点击 背后都是NoSQL和云计算 蓝儿唯美 NoSQL
    全球最大的在线旅游公司Expedia旗下的酒店预订公司，它运营着89个网站，跨越68个国家，三年前开始实验公有云，以求让客户在预订网站上查询假期酒店时得到更快的信息获取体验。 云端本身是用于驱动网站的部分小功能的，如搜索框的自动推荐功能，还能保证处理Hotels.com服务的季节性需求高峰整体储能。 Hotels.com的首席技术官Thierry Bedos上个月在伦敦参加“2015 Clou
  • java笔记1 a-john java
    1，面向对象程序设计（Object-oriented Propramming，OOP）：java就是一种面向对象程序设计。 2，对象：我们将问题空间中的元素及其在解空间中的表示称为“对象”。简单来说，对象是某个类型的实例。比如狗是一个类型，哈士奇可以是狗的一个实例，也就是对象。 3，面向对象程序设计方式的特性：     3.1 万物皆为对象。    
  • C语言 sizeof和strlen之间的那些事 C/C++软件开发求职面试题 必备考点（一） aijuans C/C++求职面试必备考点
            找工作在即，以后决定每天至少写一个知识点，主要是记录，逼迫自己动手、总结加深印象。当然如果能有一言半语让他人收益，后学幸运之至也。如有错误，还希望大家帮忙指出来。感激不尽。        后学保证每个写出来的结果都是自己在电脑上亲自跑过的，咱人笨，以前学的也半吊子。很多时候只能靠运行出来的结果再反过来
  • 程序员写代码时就不要管需求了吗？ asia007 程序员不能一味跟需求走
          编程也有2年了，刚开始不懂的什么都跟需求走，需求是怎样就用代码实现就行，也不管这个需求是否合理，是否为较好的用户体验。当然刚开始编程都会这样，但是如果有了2年以上的工作经验的程序员只知道一味写代码，而不在写的过程中思考一下这个需求是否合理，那么，我想这个程序员就只能一辈写敲敲代码了。       我的技术不是很好，但是就不代
  • Activity的四种启动模式 百合不是茶 android栈模式启动Activity的标准模式启动栈顶模式启动单例模式启动
    android界面的操作就是很多个activity之间的切换,启动模式决定启动的activity的生命周期 ;   启动模式xml中配置     <activity android:name=".MainActivity" android:launchMode="standard&quo
  • Spring中@Autowired标签与@Resource标签的区别 bijian1013 javaspring@Resource@Autowired@Qualifier
    Spring不但支持自己定义的@Autowired注解，还支持由JSR-250规范定义的几个注解，如：@Resource、 @PostConstruct及@PreDestroy。   1. @Autowired    @Autowired是Spring 提供的，需导入    Package:org.springframewo
  • Changes Between SOAP 1.1 and SOAP 1.2 sunjing ChangesEnableSOAP 1.1SOAP 1.2
    JAX-WS SOAP Version 1.2 Part 0: Primer (Second Edition) SOAP Version 1.2 Part 1: Messaging Framework (Second Edition) SOAP Version 1.2 Part 2: Adjuncts (Second Edition)   Which style of WSDL
  • 【Hadoop二】Hadoop常用命令 bit1129 hadoop
    以Hadoop运行Hadoop自带的wordcount为例，   hadoop脚本位于/home/hadoop/hadoop-2.5.2/bin/hadoop，需要说明的是，这些命令的使用必须在Hadoop已经运行的情况下才能执行   Hadoop HDFS相关命令  hadoop fs -ls  列出HDFS文件系统的第一级文件和第一级
  • java异常处理（初级） 白糖_ javaDAOspring虚拟机Ajax
    从学习到现在从事java开发一年多了，个人觉得对java只了解皮毛，很多东西都是用到再去慢慢学习，编程真的是一项艺术，要完成一段好的代码，需要懂得很多。 最近项目经理让我负责一个组件开发，框架都由自己搭建，最让我头疼的是异常处理，我看了一些网上的源码，发现他们对异常的处理不是很重视，研究了很久都没有找到很好的解决方案。后来有幸看到一个200W美元的项目部分源码，通过他们对异常处理的解决方案，我终
  • 记录整理-工作问题 braveCS 工作
    1）那位同学还是CSV文件默认Excel打开看不到全部结果。以为是没写进去。同学甲说文件应该不分大小。后来log一下原来是有写进去。只是Excel有行数限制。那位同学进步好快啊。 2）今天同学说写文件的时候提示jvm的内存溢出。我马上反应说那就改一下jvm的内存大小。同学说改用分批处理了。果然想问题还是有局限性。改jvm内存大小只能暂时地解决问题，以后要是写更大的文件还是得改内存。想问题要长远啊
  • org.apache.tools.zip实现文件的压缩和解压，支持中文 bylijinnan apache
    刚开始用java.util.Zip，发现不支持中文（网上有修改的方法，但比较麻烦） 后改用org.apache.tools.zip org.apache.tools.zip的使用网上有更简单的例子 下面的程序根据实际需求，实现了压缩指定目录下指定文件的方法 import java.io.BufferedReader; import java.io.BufferedWrit
  • 读书笔记-4 chengxuyuancsdn 读书笔记
    1、JSTL 核心标签库标签 2、避免SQL注入 3、字符串逆转方法 4、字符串比较compareTo 5、字符串替换replace 6、分拆字符串 1、JSTL 核心标签库标签共有13个， 学习资料：http://www.cnblogs.com/lihuiyy/archive/2012/02/24/2366806.html 功能上分为4类： (1)表达式控制标签：out
  • [物理与电子]半导体教材的一个小问题 comsci 问题
          各种模拟电子和数字电子教材中都有这个词汇-空穴       书中对这个词汇的解释是; 当电子脱离共价键的束缚成为自由电子之后,共价键中就留下一个空位,这个空位叫做空穴       我现在回过头翻大学时候的教材,觉得这个
  • Flashback Database --闪回数据库 daizj oracle闪回数据库
    Flashback 技术是以Undo segment中的内容为基础的， 因此受限于UNDO_RETENTON参数。要使用flashback 的特性，必须启用自动撤销管理表空间。 在Oracle 10g中， Flash back家族分为以下成员： Flashback Database， Flashback Drop，Flashback Query(分Flashback Query,Flashbac
  • 简单排序:插入排序 dieslrae 插入排序
    public void insertSort(int[] array){ int temp; for(int i=1;i<array.length;i++){ temp = array[i]; for(int k=i-1;k>=0;k--)
  • C语言学习六指针小示例、一维数组名含义，定义一个函数输出数组的内容 dcj3sjt126com c
    # include <stdio.h> int main(void) { int * p; //等价于 int *p 也等价于 int* p; int i = 5; char ch = 'A'; //p = 5; //error //p = &ch; //error //p = ch; //error p = &i; //
  • centos下php redis扩展的安装配置3种方法 dcj3sjt126com redis
    方法一 1.下载php redis扩展包  代码如下 复制代码 #wget http://redis.googlecode.com/files/redis-2.4.4.tar.gz 2 tar -zxvf 解压压缩包，cd /扩展包 （进入扩展包然后 运行phpize 一下是我环境中phpize的目录，/usr/local/php/bin/phpize (一定要
  • 线程池(Executors) shuizhaosi888 线程池
    在java类库中，任务执行的主要抽象不是Thread，而是Executor，将任务的提交过程和执行过程解耦 public interface Executor { void execute(Runnable command); }   public class RunMain implements Executor{ @Override pub
  • openstack 快速安装笔记 haoningabc openstack
    前提是要配置好yum源 版本icehouse，操作系统redhat6.5 最简化安装，不要cinder和swift 三个节点 172 control节点keystone glance horizon 173 compute节点nova 173 network节点neutron control /etc/sysctl.conf net.ipv4.ip_forward =
  • 从c面向对象的实现理解c++的对象（二） jimmee C++面向对象虚函数
    1. 类就可以看作一个struct，类的方法，可以理解为通过函数指针的方式实现的，类对象分配内存时，只分配成员变量的，函数指针并不需要分配额外的内存保存地址。 2. c++中类的构造函数，就是进行内存分配(malloc)，调用构造函数 3. c++中类的析构函数，就时回收内存(free) 4. c++是基于栈和全局数据分配内存的，如果是一个方法内创建的对象，就直接在栈上分配内存了。 专门在
  • 如何让那个一个div可以拖动 lingfeng520240 html
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml
  • 第10章 高级事件（中） onestopweb 事件
    index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
  • 计算两个经纬度之间的距离 roadrunners 计算纬度LBS经度距离
    要解决这个问题的时候，到网上查了很多方案，最后计算出来的都与百度计算出来的有出入。下面这个公式计算出来的距离和百度计算出来的距离是一致的。 /** * * @param longitudeA * 经度A点 * @param latitudeA * 纬度A点 * @param longitudeB *
  • 最具争议的10个Java话题 tomcat_oracle java
    1、Java8已经到来。什么！？ Java8 支持lambda。哇哦，RIP Scala！ 　　随着Java8 的发布，出现很多关于新发布的Java8是否有潜力干掉Scala的争论，最终的结论是远远没有那么简单。Java8可能已经在Scala的lambda的包围中突围，但Java并非是函数式编程王位的真正觊觎者。 　 　2、Java 9 即将到来 　　 Oracle早在8月份就发布
  • zoj 3826 Hierarchical Notation(模拟) 阿尔萨斯 rar
    题目链接：zoj 3826 Hierarchical Notation 题目大意：给定一些结构体，结构体有value值和key值，Q次询问，输出每个key值对应的value值。 解题思路：思路很简单，写个类词法的递归函数，每次将key值映射成一个hash值，用map映射每个key的value起始终止位置，预处理完了查询就很简单了。 这题是最后10分钟出的，因为没有考虑value为{}的情
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他