前端面经（四）

笔试题

1.async/await的顺序问题（重点）

async function async1() {
    console.log('async1 start') // 2
    await async2()

    // await后面的都作为回调内容 —— 微任务
    console.log('async1 end') // 6
}

async function async2() {
    console.log('async2') // 3
}

console.log('script start') // 1

setTimeout(function () { // 宏任务 setTimeout
    console.log('setTimeout') // 8
}, 0)

async1()

// 初始化 Promise 时，传入的函数会立刻被执行
new Promise(function (resolve) {
    console.log('promise1') // 4
    resolve()
}).then(function () { // 微任务
    console.log('promise2') // 7
})

console.log('script end') // 5
// 同步代码执行完毕（event loop - call stack 被清空）
// 执行微任务
// 尝试触发 DOM 渲染
// 触发 Event Loop,执行宏任务

注意点

• await后面的都作为回调内容 —— 微任务
• resolved会触发then后面的回调，rejected会触发catch后面的回调 —— 微任务
• 初始化 Promise 时（new Promise），传入的函数会立刻被执行

2.判断机器人是否回到原点

在二维平面上，有一个机器人从原点 (0, 0) 开始。给出它的移动顺序，判断这个机器人在完成移动后是否在 (0, 0) 处结束。

移动顺序由字符串表示。字符 move[i] 表示其第 i 次移动。机器人的有效动作有 R（右），L（左），U（上）和 D（下）。如果机器人在完成所有动作后返回原点，则返回 true。否则，返回 false。

注意：机器人“面朝”的方向无关紧要。 “R” 将始终使机器人向右移动一次，“L” 将始终向左移动等。此外，假设每次移动机器人的移动幅度相同。

示例 1:

输入: “UD”
输出: true
解释：机器人向上移动一次，然后向下移动一次。所有动作都具有相同的幅度，因此它最终回到它开始的原点。因此，我们返回 true。
示例 2:

输入: “LL”
输出: false
解释：机器人向左移动两次。它最终位于原点的左侧，距原点有两次 “移动” 的距离。我们返回 false，因为它在移动结束时没有返回原点。

JAVA版答案

class Solution {
    public boolean judgeCircle(String moves) {
        char[] cs =moves.toCharArray();
        int r=0,l=0,d=0,u=0;//统计上下左右分别移动的次数
        for(int i=0;i<cs.length;i++) {
            if(cs[i]=='R') {
                r++;
            }else if(cs[i]=='L') {
                 l++;
            }else if(cs[i]=='D') {
                 d++;
            }else if(cs[i]=='U') {
                 u++;
            }
        }
        //如果左右移动相等，上下移动相等，则可以回到原点
        if(r==l && d==u) { 
            return true;
        }
        return false;
    }
}

面试题

1.路由懒加载

为什么要进行路由懒加载

1. 当进行打包构建应用时，打包后的代码逻辑实现包可能会非常大。
2. 当我们把不同的路由对应的组件分别打包，在路由被访问时再进行加载，就会更加高效。

如何使用路由懒加载呢

• 最常用的是通过import()来实现它。

    routes: [   //未使用                  routes:[   //使用
    {                                       {
      path: '/imgDetail',                    path:'/imgDeatail',
      name: 'imgDetail',                     name::'imgDetail',
      component: imgDetail                   component:()=>import('../components/imgDetail')
    },                                     },
  ]                                       ]
 
 或者依然使用第一种路由的声明方式，但是在函数外部引用：
   const imgDetail = ()=> import('./components/imgDetail')

路由懒加载所做的事情

• 通过Webpack编译打包后，会把每个路由组件的代码分割成一一个js文件，初始化时不会加载这些js文件，只当激活路由组件才会去加载对应的js文件。

2.浏览器渲染原理

可参考深入浅出浏览器渲染原理

3.token作用

登陆验证

4.浏览器缓存

5.js执行过程

• 同步代码，一行一行放在Call Stack 执行
• 遇到异步，会先“记录”下，等待时机（定时、网络请求等)
• 时机到了，就移动到Callback Queue
• 如Call Stack为空（即同步代码执行完）Event Loop开始工作
• 轮询查找Callback Queue ，如有则移动到Call Stack 执行
• 然后继续轮询查找(永动机一样)