黑马程序员技术交流社区

标题: 执行机制探秘 [打印本页]
作者: 可爱的骨头    时间: 2021-1-25 16:18
标题: 执行机制探秘
try-catch 是捕捉异常的神奇,不管是调试还是防止软件崩溃,都离不开它。
1
2
3
4
5
6
7
8
9
10
11
function test(){
    try{
        console.log(1);
    }finally{
        condole.log(2);
    }
}

console.log(test());
<!-- 1  2 -->
//结果：它按顺序执行了
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//在 try 中加入 return 语句
function test(){
    try{
        console.log(1);
        return 'try';
    }catch(e){
        //TODO
    }finally{
        console.log(2);
    }
}

console.log(test());
<!-- 1 2 try -->
//在 try和 catch的代码块中,如果碰到 return语句,那么在 return之前,会先执行finally中的内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//在 finally中也加入 return语句
function test(){
    try{
        console.log(1);
        return 'try';
    }catch(e){
        //TODO
    }finally{
        console.log(2);
        return 'finally';
    }
}

console.log(test());
<!-- 1 2 finally -->
//按照上一条规则,finally是会先执行的,所以如果 finally里有 return语句,那么就真的return了。
结论：
任何执行 try 或者 catch 中的 return 语句之前,都会先执行 finally 语句(如果 finally 存在的话)
内部机制
在 try 语句中,在执行 return 语句时,要返回的结果已经准备好了,就在此时,程序转到 finally 执行了。在转去之前,try 中先把要返回的结果存放到不同于 x 的局部变量中去,执行完 finally 之后,再从中取出返回结果。
因此,即使 finally 中对变量 x 进行了改变,但是不会影响返回结果。
他应该使用栈保存返回值。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//测试
function test(){
        var x = 1;
        try{
                x++;
                return x;
    }
        finally{
            ++x;
    }
}


console.log(test());
<!-- 2 -->
JavaScript 如何实现异步编程,可以详细描述 EventLoop 机制
同步编程：即是一种典型的请求——响应模型,当请求调用一个函数或方法后,需等待其响应返回,然后执行后续代码。
一般情况下,同步编程,即是按照代码顺序依次执行,能很好的保证程序的执行,但在某些场景下,比如加载文件内容,请求数据等需要返回大量的内容时,耗费时间较长,此时程序不能继续向下运行,这显然是不友好的。这正需要异步编程大显身手！
异步编程：不同于同步编程的请求——响应模式,其是一种事件驱动编程,请求调用函数或方法后,无需立即等待响应,可以继续执行其他任务,而在之前任务响应返回后可以通过状态、通知和回调来通知调用者。
通常实现异步方式是多线程,如 C#,即同时开启多个线程,不同操作能并行执行。
JavaScript 语言试单线程,单线程在程序执行时,所走的程序路径是按照连续顺序排下来的。前面必须处理好,后面才会执行。前面代码报错,后面的程序将不会执行。
JavaScript 单线程异步编程可以实现多任务并发执行。 - 并行：指同一时刻内多任务同时进行 - 并发：指在同一时间段内,多任务同时进行着,但是某一时刻,只有某一任务执行。
并发模型
JavaScript 异步编程使得多个任务可以并发执行,而实现这一功能的基础是 JavaScript 拥有一个基于事件循环的并发模型
事件循环
JavaScript 引擎负责解析,执行 JavaScript 代码,但它不能单独运行,而需要一个宿主环境,一般为浏览器。调用 Javascript 引擎完成多个 javaScript 代码块的调度,执行,这种机制就称为事件循环。
事件循环流程
setTimeout
在setTimeout异步回调函数里当我们输出异步任务注册到执行的时间,发现并不等于我们指定的时间,而且多次执行时间隔也不同！
所以异步执行时间不精确是必然的。
JavaScript 异步实现
关于 JavaScript 的异步实现,以前有：回调函数,发布订阅模式,Promise 三类,而在 ES6 中提出了生成器(Generator)方式实现。
宏任务和微任务分别有哪些
JavaScript 中,有两类任务队列：宏任务队列(macro tasks)和微任务队列(micro tasks)。宏任务队列可以有多个,微任务队列只有一个。
微任务和宏任务皆为异步任务,他们都属于一个队列,主要区别在于他们的执行顺序,Event Loop 的走向和取值。
分析一个复杂的异步嵌套逻辑
JavaScript 语言的执行环境是单线程的。
这种执行模式实现简单,执行环境相对单纯。但随着前端业务日渐复杂,事物和请求等日渐增多,这种单线程执行方式在复杂的业务下势必效率低下。
为避免和解决这种问题,JS 语言将任务执行模式分为异步和同步。”同步模式”就是后一个任务等待前一个任务结束,然后再执行,程序的执行顺序与任务的排列顺序是一致的、同步的;”异步模式”则完全不同,每一个任务有一个或多个回调函数,前一个任务结束后,不是执行后一个任务,而是执行回调函数,后一个任务则是不等前一个任务结束就执行,所以程序的执行顺序与任务的排列顺序是不一致的,异步的。
“异步模式”非常重要。在浏览器端,避免浏览器失去响应,最好的例子就是 Ajax 操作。
回调函数
异步编程最基本的方法。
回调函数就是一个参数,将这个函数作为参数传到另一个函数里面,当那个函数执行完之后,再执行传进去的这个函数。这个过程就叫做回调。
在 JavaScript 中,回调函数具体的定义为：函数 A 作为参数(函数引用)传递到另一个函数 B 中,并且这个函数 B 执行函数 A。我们就说函数 A 叫做回调函数。如果没有名称(函数表达式),就叫做匿名回调函数。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//定义主函数,回调函数作为参数
function A(callback) {
  callback();
  console.log("我是主函数");
}

//定义回调函数
function B() {
  setTimeout("console.log('我是回调函数')", 3000); //模仿耗时操作
}

//调用主函数,将函数B传进去
A(B);

//输出结果
我是主函数;
我是回调函数;
上面的代码中,我们先定义了主函数和回调函数,然后再去调用主函数,将回调函数传进去。
定义主函数的时候,我们让代码先去执行 callback()回调函数,但输出结果却是后输出回调函数的内容。这就说明了主函数不用等待回调函数执行完,可以接着执行自己的代码。所以一般回调函数都用在耗时操作上面。比如 ajax 请求,比如处理文件等。
补充回调函数应用场合和优缺点：
回调函数这种方式的优点是比较容易理解,可以绑定多个事件,每个事件可以指定多个回调函数,而且可以”去耦合”,有利于实现模块化。缺点就是整个程序都要变成事件驱动型,运行流程会变得很不清晰。
如何在保证页面运行流畅的情况下处理海量数据
10w 条记录的数组,一次性渲染到页面,如何处理可以不冻结 ul？
可能在看到这个问题的第一眼,我们会想到用append,不过在循环添加过程中,都会修改 DOM 结构,并且由于数据量大,导致循环执行时间长,浏览器的渲染帧率过低。
事实上,包含 10W 个li的长列表,用户不会立即看到全部,只会看到少部分。因此,对于大部分的li的渲染工作,我们可以延时完成。
我们可以从减少 DOM 操作次数和缩短循环时间两个方面减少主线程阻塞的时间。
我们知道可以通过DocumentFragment的使用,减少 DOM 操作次数,降低回流对性能的影响。
在缩短循环时间方面,我们可以通过分治的思想,将li分批插入到页面中,并且我们通过requestAniminationFrame在页面重绘前插入新节点。
事件绑定
如果我们想监听海量元素,推荐方法是使用 JavaScript 的事件机制,实现事件委托,这样可以显著减少 DOM 事件注册的数量。
解决方案
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
(function() {
  const ulContainer = document.getElementById("list-with-big-data");

  // 防御性编程
  if (!ulContainer) {
    return;
  }

  const total = 100000; // 插入数据的总数
  const batchSize = 4; // 每次批量插入的节点个数,个数越多,界面越卡顿
  const batchCount = total / batchSize; // 批处理的次数
  let batchDone = 0; // 已完成的批处理个数

  function appendItems() {
    // 使用 DocumentFragment 减少 DOM 操作次数,对已有元素不进行回流
    const fragment = document.createDocumentFragment();

    for (let i = 0; i < batchSize; i++) {
      const liItem = document.createElement("li");
      liItem.innerText = batchDone * batchSize + i + 1;
      fragment.appendChild(liItem);
    }

    // 每次批处理只修改 1 次 DOM
    ulContainer.appendChild(fragment);
    batchDone++;
    doAppendBatch();
  }

  function doAppendBatch() {
    if (batchDone < batchCount) {
      // 在重绘之前,分批插入新节点
      window.requestAnimationFrame(appendItems);
    }
  }

  // kickoff
  doAppendBatch();

  // 使用 事件委托 ,利用 JavaScript 的事件机制,实现对海量元素的监听,有效减少事件注册的数量
  ulContainer.addEventListener("click", function(e) {
    const target = e.target;

    if (target.tagName === "LI") {
      alert(target.innerText);
    }
  });
})();





欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2