猫眼面试

最新推荐文章于 2021-06-21 20:00:16 发布

sliiva

最新推荐文章于 2021-06-21 20:00:16 发布

阅读量1k

点赞数 4

分类专栏：笔试面试积累文章标签：猫眼面经

本文链接：https://blog.csdn.net/lncci/article/details/82261826

版权

笔试面试积累专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文记录了一次猫眼面试的经历，涉及flex布局、负margin技巧、非数组实现队列、斐波那契数列、变量声明、继承方式、性能优化策略、应用层协议与HTTPS加密等前端核心知识点。

摘要由CSDN通过智能技术生成

1、三列布局（毕问题）:左右宽度固定，中间自适应

flex布局（超级简单易用）
html:
<div id="container">
  <div class="left">e</div>
  <div class="main">jddhfg</div>
  <div class="right">d</div>
</div>

css:
#container{ display:flex;}
.left{ width:300px; background:red;}
.right{ width:300px; background:green;}
.main{ flex:1;}
1、自身浮动法：左栏左浮动，右栏右浮动，中间栏放最后margin撑开距离。（注意设置屏幕的最小宽度，防止右div被挤下去）
  <div class="left">e</div>
  <div class="right">d</div>
  <div class="main">f</div>

.left{ float:left;width:200px;background:red;}
.right{ float:right;width:200px;background:red;}
.main{ margin:0 200px;background:green;}
2、绝对定位布局：左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右margin值撑开距离
html:
   <div id="main">ueru</div>
   <div id="left">f</div>
   <div id="right">fd</div>
css:
#main {position:absolute;top:0;width:100%;padding:0 200px;box-sizing:border-box;background:red;}
#left{position:absolute;top:0;left:0;width:200px;background:blue;}
#right{position:absolute;top:0;right:0;width:200px;background:green;}
3、margin负值法：左右两栏均左浮动，左右两栏采用负的margin值。中间栏被宽度为100%的浮动元素包起来。又称比翼双飞布局：
html:
    <div id="main">
       <div class="content"></div>
   </div>
   <div id="left"></div>
   <div id="right"></div>
css:
   #main {float:left;width:100%;}
   .content {margin:0 200px;height:100%;background:red;}
   #left{float:left;width:200px;margin-left:-100%;background:blue;}
   #right{float:left;width:200px;margin-left:-200px;background:green;}
margin的参考线有两类，一类是top,left;她们以外元素（包含块或者相连的元素）作为参考线，另一类是right,bottom她们以自身作为参考线；

margin-top为负值时：元素会向上移动使自己与参考线的距离减少；

margin-bottom为负值时，元素的margin下参考线会向上移动；呈现在布局上面就是此元素的下面的元素向上移动。

margin-left为负值时，元素会向左移动，使自己与参考线的距离减少。

margin-right:为负值时，元素的margin右参考线会向左移动。呈现在布局上面就是此元素的右面的元素向左移动。

  2、数组去重（求数组的并集）

let a = [1,2,3,4];
let b = [2,3,4,5];
let c = [3,4,6,7];
function f1(arr1,arr2,arr3){
  var arr=[],result=[],o={};
  arr=arr1.concat(arr2.concat(arr3));
  for(var i=0;i<arr.length;i++){
    if(i==0){
      o[arr[i]]=i;
      result.push(arr[i]);
    }else if(!o[arr[i]]){
      o[arr[i]]=arr[i];
      result.push(arr[i]);
    }
  }
  return result;
}

3、不使用数组实现队列（没回答出来）

4、实现斐波那契数列（开始用最常规的递归实现的，实现的也比较磕磕绊绊，还没实现出来，后来说递归不行，能不能用其他方法实现一下，就用了循环遍历的方法）

[1, 1, 2, 3, 5, 8, ....]
//递归方法解
 function fi(n){
  if(n==0||n==1){
    return 1;
  }
  return fi(n-1)+fi(n-2)
}
console.log(fi(5))
//循环方法解
function fi2(n){
  var prev,next,result=0;
  if(n==0||n==1){
    result=1;
  }else{
    prev=1;
    next=1;
    for(var i=2;i<=n;i++){
      result=prev+next;
      prev=next;
      next=result;
    }
  }
  return result;
}
console.log(fi2(6))

5、let var const的区别

6、箭头函数的指向（这里有个坑，注意变量未声明）

4、箭头函数
let obj = {
  a() { console.log(this) },
  b: () => { console.log(this) }
};

obj.a(); // obj
obj.b(); // window

7、js实现继承：https://blog.csdn.net/lncci/article/details/82055045

function Super() {}
function Sub() {}
//原型链式继承
var super=new Super();
sub.prototype=super;
sub.prototype.constructor=Sub;

//寄生组合式继承
var prototype=object.create(Super.prototype);

8、如何提高性能

1、减少http请求次数：精灵图。合理设置浏览器的缓存时间

2、使用cdn（内容分发网络）

3、减少对dom的操作

4、代码层的优化

9、有哪些应用层协议？http与https的区别。https是怎么加密的

应用层协议：http/https、FTP（文件传输协议）、DNS（域名解析协议）、DHCP（动态主机分配协议）、SMTP（简单邮件传输协议）、POP3（简单邮件下载协议）、Telnet（远程登录协议）

http:超文本传输协议、https：安全超文本传输协议

区别：

默认端口不同，http:80、https：443
http明文传输，https加密传输
https=http+加密+认证+完整性保护

https怎么加密的：简单来讲是在http通信接口部分使用了ssl或tls层代替。在进行http协议进行传输数据之前，tcp连接之后，会进行ssl握手，确定公钥私钥，之后的数据就使用公钥进行加密，私钥进行解密。

10、css加载和js加载是否会影响dom操作

页面生成的过程：解析html文档，生成dom树，遇见外链，下载资源，遇见内联样式，解析css，生成cssom树，dom树+cssom树生成render树，根据render树layout（布局），根据布局paint（绘制）到页面上。