前端问题汇总——第六篇

 

1.Vue和react之间的区别是什么？

参考链接：https://juejin.im/post/5b8b56e3f265da434c1f5f76

2.静态页面被插入了广告，请问有哪些可能的原因？lutong的音乐mv被篡改有可能也是这方面的问题？展开联想即可，https的流量劫持，要说明下？

原来的视频播放应用，被人家插入了其他视频，原理也是这方面造成的，该怎样来避免呢？

主要考察的是HTTPS方面的问题，流量劫持，使用HTTPS协议之后，在播放视频之前判断视频的地址链接是否是我们限定的地址，如果不是，直接关闭视频服务；

流量劫持：https://zhuanlan.zhihu.com/p/40682772

3.js的执行机制是什么？事件循环机制说明？（同步任务，异步任务，宏任务，微任务等的关系）

 

4.怎样提升页面的性能？检测页面性能的方法有哪些？使用chrome的performance,可以在console中将相应的结果打印出来

 

5.promise的实现原理是什么?

promise()其实就是一个状态及，内部实现一个事件消息队列，一个完成，再完成另一个；

 

6.浏览器或者node的v8引擎的垃圾回收机制介绍，是怎样管理内存的使用的？

 

7.闭包的应用，怎样避免内存泄漏，怎样清除对闭包的应用？

将对闭包的引用指向null即可

 

8.页面的性能的监控方法？怎样上报页面的性能问题？

性能监控：

异常监控：使用window.onerror方法全局监控页面是否会报错，使用try catch上传页面的报错

 

9.页面的异常问题怎样上报？使用try catch捕获错误问题？如果是无法预料到的问题，该怎样上传呢？如何全局上传整个系统存在的问题？window.onerror回调函数是否有应用过？

 

tc面试

1.http请求头的属性有哪些？和HTTPS的区别？HTTPS中的ack是啥？这层安全体制是怎样实现的？怎样在实践中应用？

2.高级前端工程师的定义？你觉得要达到什么程度才算高级工程师？

3.百灵动画实现的主要技术有哪些？动画效果实现的原理？细节要讲清楚？

4.自己有过属于个人的项目吗？当初为什么要做它？使用了哪些技术？

5.你觉得你比别人强在哪里？在回答别人的问题时候，尽量不要问一些不重要的问题，给人造成不开心的感觉？让人感觉很劳累？

6.es6主要添加了哪些内容？数组主要添加了哪些方法？说话的时候不要说好像，可能之类的词

7.前端安全问题，主要有哪些？在项目中遇到过哪些安全方面的问题？简单的安全攻击问题能说明一下吗？百灵中的问题你觉得主要实现这种攻击的原因有哪些？千万不要说自己没有去想，去研究；

域名解析系统被人给窃取了账号和密码，更改了视频的域名解析内容

8.面试前一定要将简历中的项目细节完全熟悉，清楚，不能太陌生；

9.你最近在学习什么东西？关注的最新的技术有哪些？有没有去探究其实现原理？

10.你看过哪些书？学习到了什么知识？

 

其他公司1面试问题汇总：

1.将数组中的对象，根据id值转为树形解结构？这是一道非常常见的数据结构和算法的问题，在ops系统汇总，各个页面的目录结构数据，就是通过这种方式实现的tree；

2.自定义组件怎么做到v-model的值双向绑定？

3.vue怎么自定义事件？vue的事件和js原生事件有什么区别？

4.什么是接口？接口的作用是什么？

 

其他公司2面试问题汇总：

1.请问下方的代码的结果是？

try{
    setTimeout(()=>{
       console.log(as);
       console.log(2);
       throw new Error(3);
   },0);
    console.log(ddssd);
  }catch(e){
     console.log(e);
  }  
  
  

2.下方的代码执行后的打印结果是？

  Promise.resolve("foo").then(Promise.resolve("bar")).then(function(result){
       console.log(result);
  }) //仅仅打印foo

微众银行：

综述：webank，腾讯旗下国内第一个私营的银行，总的感觉面试不是特别难，考察的全是基础的知识，自己都知道，但是有时候一个基础的知识，人家问的很细致，就不能非常深入的回答，不要小看任何简单的问题，任何一个问题，往深了说，都有很多的内容

1.看代码写结果，这个问题看似简单，已经烂大街了，但是要深入分析，讲解；

var nodes=document.getElementsByTagName("button");
for(let i=0;i<=nodes.length;i++){
    nodes[i].addEventListener("click",function(){
          console.log(i); //
    })
}
//假设共有6个button,用户打印出来只有为六个六，请问该怎样理解这个问题？

解答如下：

ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

{
  let a = 10;
  var b = 1;
}

a // ReferenceError: a is not defined.
b // 1

上面代码在代码块之中，分别用let和var声明了两个变量。然后在代码块之外调用这两个变量，结果let声明的变量报错，var声明的变量返回了正确的值。这表明，let声明的变量只在它所在的代码块有效。

for循环的计数器，就很合适使用let命令。

for (let i = 0; i < 10; i++) {
  // ...
}

console.log(i);
// ReferenceError: i is not defined

上面代码中，计数器i只在for循环体内有效，在循环体外引用就会报错。

下面的代码如果使用var，最后输出的是10。

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10

上面代码中，变量i是var命令声明的，在全局范围内都有效，所以全局只有一个变量i。每一次循环，变量i的值都会发生改变，而循环内被赋给数组a的函数内部的console.log(i)，里面的i指向的就是全局的i。也就是说，所有数组a的成员里面的i，指向的都是同一个i，导致运行时输出的是最后一轮的i的值，也就是 10。

如果使用let，声明的变量仅在块级作用域内有效，最后输出的是 6。

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6

上面代码中，变量i是let声明的，当前的i只在本轮循环有效，所以每一次循环的i其实都是一个新的变量，所以最后输出的是6。你可能会问，如果每一轮循环的变量i都是重新声明的，那它怎么知道上一轮循环的值，从而计算出本轮循环的值？这是因为 JavaScript 引擎内部会记住上一轮循环的值，初始化本轮的变量i时，就在上一轮循环的基础上进行计算。

另外，for循环还有一个特别之处，就是设置循环变量的那部分是一个父作用域，而循环体内部是一个单独的子作用域。

for (let i = 0; i < 3; i++) {
  let i = 'abc';
  console.log(i);
}
// abc
// abc
// abc

上面代码正确运行，输出了 3 次abc。这表明函数内部的变量i与循环变量i不在同一个作用域，有各自单独的作用域。

2.请问["1", "2","3" ].map(parseInt);的返回值是？为什么？

["1", "2","3" ].map(parseInt);  //1  NaN  NaN

3.什么是闭包？有什么作用？多用于什么场景下？为什么在很多设计模式中使用了闭包？

 

4.怎样区分行和块元素？他们俩之间有啥区别？

不要再说，布局到页面上之后自动占一行就是块元素，img，video，radio元素既不是块级元素也不是行元素，根本区别是什么？

 

5.flex布局是什么？怎样使用？  有哪些属性？分别的作用是？内容还是挺多的？

 

 

6.实现一个函数，以重复输出一个给定的字符串（str第一个参数）n次（num第二个参数），例如repeatStringNumTimes("*",3),应该输出三个星号***，（实现方法越多越好）；

方法一：使用for循环实现

方法二：使用递归实现

方法三：ES5方法实现

Object.keys(Array.from({ length: 100 })); 

Object.keys(
Array.apply(null,{ length: 100 }));

Object.keys(Array.from({ length: 100 })).map(function(item) {
	return +item;
});

方法四：ES6方法实现

ES6中数组实例有keys、values、entries方法，分别用于遍历数组的索引、键值、键值对，它们都返回遍历器对象（详细?Iterator和for…of循环）

因此我们可以用ES6的Array.from转成数组：

Array.from(new Array(100).keys());

优雅进阶 - 扩展运算符

ES6新增 ... 扩展运算符，极大方便了相关操作(详见?函数的扩展里面的扩展运算符)

因此我们可以更加优雅地实现：

[...Array(100).keys()]

或者

[...Array.from({ length: 100 }).keys()]

思路就是这样，当然我们还可以混合搭配出各种解法，甚至ES5、ES6混合,有可能还有各种奇妙解法，每个人去细细专研吧.

7.在工作中是否遇到过适配性的问题？一般都是怎样解决的？

• 动态改变根目录下html标签下的font-size，在使用rem相对单位
• 使用媒体查询@media，写一个完整的媒体查询的样例

@media only screen and (max-width: 500px) {
    .gridmenu {
        width:100%;
    }
}

腾讯云：

1.你做过的最有代表性和最优难度的项目是？具体的难度点是？要用最简单的话将其表达出来；如果是电话面试，则要保持电话信号畅通；

2.性能优化的主要方式有哪些？

3.请求的资源太多，不可以使用并发吗？

4.合并文件加载时，不能全部合并到一个文件中去吗？你不是说请求的资源越少越好吗？

5.什么情况下才会用雪碧图？

反思：在简单的问题都要进行深刻的认识和思考，不能人云亦云，多问几个为什么？为什么一定要这样做？有什么局限性？多从放方向去推导问题；

 

第二次的问题汇总：

1.自我介绍？

2.百灵的最高的KPI,最高的并发量是多大？心跳是多少？没有进行压力测试吗？问这种问题就是在考虑真假的问题？

3.光标挪动的时候，选择哪个最近的实现原理是什么？这是上面写的内容；

4.js中实现继承的方法有哪些?

5.vue 和react之间的区别是？他们主要使用的react？但是两者之间的区别还是很小的；会其中一个，肯定会另一个；

6.什么是mvvm?什么是mvc?

7.数据可视化中性能提升的原理是什么？数据分组的20分组的原因是？

8.怎样使用实现左右垂直居中？使用弹性布局怎样实现？非常基础的一个问题；使用传统的布局方法该怎样实现？如果中间的元素的高和宽都是不确定的，该怎样来实现？

在父亲元素设置以下三条即可：

#parent{
   display:flex;
   justify-content:center; //垂直方向居中
   align-items:center; //水平方向居中
   flex-wrap:warp; //如果水平超出，则自动换行
}

9.弹性布局的属性有哪些？能说一说吗？弹性布局的内容属于基础，不能不熟悉；