[JavaScript知识库]2021-08-27

百度前端面经

最近参加了百度的前端面试，也算是有了一点点的经验吧，在这里给大家分享一下，第一次写这类文章，如果有写得不够好的地方麻烦大家多多担待哈，如果有不够完整的地方，大家也可以多多提意见哈。

百度的前端技术面试有三次，暂时我这边已经参加了两次了，第三次正在约。

干货：
1.自我介绍，这个也是每一次面试的开场白了。
2.直接就问了在浏览器输入一个URL到整个页面渲染结束的全过程。

1. 输入网址： http://www.baidu.com

2. 通过DNS解析获得网址的对应IP地址

3. 浏览器与远程web服务器 通过TCP三次握手协商来建立一个 TCP/IP 连接 该握手包括一个“同步报文”，一个“同步-应答报文”和一个“应答报文”，这三个报文在
   浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。

4. 浏览器 通过TCP/IP连接 向web服务器 发送一个 HTTP 请求

5. 服务器的永久重定向响应（从 http://baidu.com 到 http://www.baidu.com）

6. 浏览器跟踪重定向地址

7. 服务器处理请求

8. 服务器返回一个 HTTP 响应

远程服务器找到要请求的资源并使用 HTTP 响应返回该资源，值为 200 的 HTTP 响应状态表示一个正确的响应。

9. 到这里便是浏览器的工作过程了。。。 浏览器显示 HTML 　　浏览器发送请求获取嵌入在 HTML 中的资源（如图片、音频、视频、CSS、JS等等） 　　浏览器发送异步请求

构建DOM节点——解析样式信息——布局DOM节点——渲染

我在二面的时候也被问到了这个问题，不过二面就比一面问的更详细了，面试官问了我，浏览器与远程web服务器是TCP还是IP协议，服务器的重定向响应具体是什么样子的，什么是永久重定向，什么是重定向，还有服务器返回HTTP响应的时候，正确的只会是200吗？说实话，作为一个非计算机专业毕业的，基础不扎实的前端来说，这些不亚于送命题。

3.vue的双向绑定是什么实现的
这个问题也算是前端开发经常被问到的一个问题了，大概也就是下面这个样子了，如果怕面试官问得比较细的话，大家也可以再去看看。https://www.cnblogs.com/chenhuichao/p/10818396.html

1.实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。

2.实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。

3.实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。

4.vue2.0和3.0有什么区别
https://blog.csdn.net/weixin_39938331/article/details/111134611
这边只是提供楼主当时刷题学习时访问的页面

5.vuex有没有用过，为什么要使用vuex，能不能介绍一下vuex的5个属性分别是什么
https://www.cnblogs.com/lyxzxp/p/11778579.html

6.平时一般用什么布局呢？有没有用过flex呢？它都有什么属性呢？
https://www.cnblogs.com/watermelons/p/11777866.html

7.wepack中loader和plugin的区别
https://blog.csdn.net/jiang7701037/article/details/98887179

8.js和vue中异步的几种解决方案，或者说你平时在写代码的时候是使用什么方式解决异步的？

1.callback（回调函数）
2.Promise
3.Generator
4.asnyc/await
5.$nextTick
6.setTimeOut

9.简单介绍一下promise的原理
https://blog.csdn.net/zyz00000000/article/details/107386314

10.接上题，怎么实现一个promise
我也不是很理解面试官的意思，我这边一直在跟她表达我平时的使用方式，然后这道题就跳过了。

11.父子组件之间的传值

1.子组件使用props接收父组件传来的参数
2.子组件使用$emit调用父组件的方法3.父组件可以通过子组件的ref属性，来调用子组件内的方法4.子组件可以通过$parent获取父组件的一些参数
5.两个组件之间传参也可通过$router和$route携带参数和获取

然后面试官问我父子子组件之间是怎么传参的，我这边暂时就没想到了。

12.会问有没有使用过es6，es6有哪些新特性
https://www.jianshu.com/p/1a522c131ef6

13.接上题，es6和commonJs的区别

1. commonjs模块输出的是值的浅拷贝，ES6模块输出的是值的引用 (也就是说，cmmonjs模块输出后被改变，其他引用模块不会改变，而ES6模块会改变)
2. commonjs模块是运行时加载，而ES6模块是编译时输出接口，之所以webpack的tree-shaking只能作用于ES6模块，就是因为ES6模块在编译时就能确定依赖

14.因为我在简历中写到我经常会用echarts做可视化的一部分功能，所以面试官问到了我echarts的两种模式是什么？我这边回答svg和canvas，然后面试官问这两个区别是什么？

15.然后看简历问我在做项目的时候主要做过哪些系统优化的内容
https://blog.csdn.net/qq_29072193/article/details/110633359?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2_{aggregatepage}first_rank_v2~rank_aggregation-1-110633359.pc_agg_rank_aggregation&utm_term=%E5%81%9Avue%E9%A1%B9%E7%9B%AE%E5%8F%AF%E4%BB%A5%E4%BC%98%E5%8C%96%E7%9A%84%E5%9C%B0%E6%96%B9&spm=1000.2123.3001.4430

这篇文章给大家参考

16.然后回到了http的问题，下面涉及http的问题，我这边就不给链接了，确实不太熟悉，希望大佬可以在评论区补充一下，首先问我http1.1和2.0的区别是什么？

17.http的请求头包含什么

18.http的请求头和响应头有什么区别

19.什么是跨站脚本攻击？什么是SQL注入攻击？
https://www.cnblogs.com/liangshuang/p/8479111.html

20.在你做项目的时候，做了哪些安全性方面的内容？
我这边随意给大家举几个例子哈，算是抛砖引玉了。

1.页面拦截，避免随意访问
2.抖动和节流，防止恶意点击
3.页面数据脱敏
4.登录验证
5.特殊的页面要使用验证码 等等…

21.最后问了一个箭头函数和普通函数的区别，其他的就是一些比较常见的vue问题了，大概难度就是和v-if与v-show的区别差不多，比较容易回答的，我这边就不一一举例了。

后面是做代码题，我这边整理了四道题，直接给大家上代码吧，当然方法肯定有比我更好的，大家也不用非和我写的一样，只是我的一种编程思想吧。我这边是用vscode编程的，语言是JS写的

22.实现getMinList函数，在数组arr里边，顺序输出最小的count个数，如图，输出[2, 1, 0]

function printMinCount(arr, count) {
  var newArr = [].concat(arr);
  arr.sort(function(a, b) {
    return a - b;
  });
  let num = arr[count];
  let printArr = [];
  for (let i = 0; i < newArr.length; i++) {
    if (newArr[i] < num) {
      printArr.push(newArr[i]);
    } else if (newArr[i] === num && newArr[i + 1] !== num) {
      printArr.push(newArr[i]);
    }
  }
  console.log(printArr);
}
printMinCount([2, 3, 2, 1, 4, 3, 0, 87, 5], 3);

23.实现字符串的全排列 permutate(‘abc’) 输出 [ ‘abc’, ‘acb’, ‘bac’, ‘bca’, ‘cab’, ‘cba’ ]

function fullpermutate(str) {
  var result = [];
  if (str.length > 1) {
    //遍历每一项
    for (var m = 0; m < str.length; m++) {
      //拿到当前的元素
      var left = str[m];
      //除当前元素的其他元素组合
      var rest = str.slice(0, m) + str.slice(m + 1, str.length);
      //上一次递归返回的全排列
      var preResult = fullpermutate(rest);
      //组合在一起
      for (var i = 0; i < preResult.length; i++) {
        var tmp = left + preResult[i];
        result.push(tmp);
      }
    }
  } else if (str.length == 1) {
    result.push(str);
  }
  return result;
}
let result = fullpermutate("abc");
console.log(result);

24.计算一个字符串中，连续重复字母最多的字母及其出现的次数，这道题有可能会出现如果输入“sfe”，最后输出[ { name: ‘s’, value: 1 }, { name: ‘f’, value: 1 }, { name: ‘e’, value: 1 } ]的情况，请大家不要忽略。

function printMaxCount(arrStr) {
  var arr = arrStr.split("");
  var str = [];
  let strCount = [];
  let nowCount = 1;
  for (let i = 0; i < arr.length; i++) {
    if (arr[i] === arr[i + 1]) {
      nowCount++;
    } else {
      str.push(arr[i]);
      strCount.push(nowCount);
      nowCount = 1;
    }
  }
  let printData = [];
  if (
    strCount.sort(function(a, b) {
      return a - b;
    })[strCount.length - 1] > 1
  ) {
    for (let i = 0; i < str.length; i++) {
      if (strCount[i] > 1) {
        printData.push({
          name: str[i],
          value: strCount[i]
        });
      }
    }
  } else {
    for (let i = 0; i < str.length; i++) {
      printData.push({
        name: str[i],
        value: strCount[i]
      });
    }
  }
  console.log(printData);
}
printMaxCount("sfe");

25.自定义组件 怎么触发这个data的双向数据绑定，这道题当时我没有做，不过面试官发来的题中有这个。

==============================================================================
大概就是这样啦，如果后面还遇到什么面试问题的话，还会继续补充的！第一次写这种面经，没有什么经验，也不知道算不算重点，还望大家海涵。
最后希望大家都能拿到心仪的offer！