mi家前端面经

时间 2019-12-11

标签端面繁體版

原文原文链接

已经很久没想写面经了……菜鸟面到生无可恋。javascript

1.用CSS实现下面圆形css

答案：html

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        .circle{
            height: 0px;
            width: 0px;
            border-radius :50%;
            border-left:50px solid transparent;
            border-right: 50px solid transparent;
            border-top: 50px solid transparent;
            border-bottom: 50px solid transparent;
            border-left-color: #000;
            border-right-color: #000;
            border-top-color:red;
            border-bottom-color:red;
        }
        .circle1{
            height: 0px;
            width: 0px;
            border-radius :50%;
            border:50px solid;
            border-color:black red black red;
        }
    </style>
</head>
<body>
    <div class="circle"></div>
</body>
</html>

上面circle和circle1两个class皆能够。vue

2.堆排序，手动画图实现堆排序。如何建堆，如何排序。java

3.实际上是leetcode上面的一道原题：https://leetcode.com/problems/container-with-most-water/description/react

先用最笨的办法O(n²)解，也就是循环遍历求每两根之间的盛水量，再求出最大值。webpack

再就是用两根指针索引，双指针，first和last，时间复杂度为O(N)。git

这道题网上解法不少，可自行查看。github

4.html的盒子模型web

IE的盒子模型，标准盒子模型，box-sizing的用法。

5.float元素塌陷的缘由和解决办法，顺便问到了BFC盒子的触发方式。

缘由：当元素设置浮动后，会自动脱离文档流

解决办法：

一、给父元素也添加float。这样让父元素与子元素一块儿脱离文档流浮动起来，保证子元素在父元素内，这样父元素就能自适应子元素的高度，可是此方法有一弊端，必定会影响父元素以后的元素排列，甚至影响布局。
二、给父元素一个固定高度，此方法适用于子元素高度已知而且固定的状况。
三、添加一个块级元素，并给此元素设置clear:both;清除浮动。在很早以前用的就是这种解决办法，新建一个空的div，为这个div设置clear：both；这样无疑是增长了无心义的标签，一个大型页面中，这种标签太可能是很差的。
四、给父元素添加 overflow：hidden；
五、经过伪类::after清除浮动

BFC盒子的触发方式：

根元素或包含根元素的元素
浮动元素（元素的 float 不是 none）
绝对定位元素（元素的 position 为 absolute 或 fixed）
行内块元素（元素的 display 为 inline-block）
表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
匿名表格单元格元素（元素的 display为 table、``table-row、 table-row-group、``table-header-group、``table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
overflow 值不为 visible 的块元素
display 值为 [flow-root](https://drafts.csswg.org/css-display/#valdef-display-flow-root) 的元素
contain 值为 layout、content或 strict 的元素
弹性元素（display为 flex 或 inline-flex元素的直接子元素）
网格元素（display为 grid 或 inline-grid 元素的直接子元素）
多列容器（元素的 column-count 或 column-width 不为 auto，包括 ``column-count 为 1）
column-span 为 all 的元素始终会建立一个新的BFC，即便该元素没有包裹在一个多列容器中（标准变动，Chrome bug）

6.margin塌陷问题

在垂直方向（水平方向没这问题），上面元素的margin-bottom和下面的margin-top，在文档流中，只会取其中较大的一个实行，而不是上面的margin-bottom+下面的margin-top。

解决办法：触发BFC盒子、

7.js的原型链和构造器，连线

我已经懵了，有小伙伴连好了，能够私信我一下。

8.Object.assign的特性和用法

浅拷贝

9.https的加密方式，对称加密和不对称加密

10.线程和进程的异同点，如何加锁。

11.TCP协议的特色，三次握手四次挥手，拥塞控制，重传之类的。

12.看代码，说输出结果和缘由

<script>
    window.onload=function(){
        function test(flag){
            if(flag){
                return function getValue(){
                    console.log('a');
                }
            }
            else{
                return function getValue(){
                    console.log('b');
                }
            }
            return getValue;
        }
        var c=test(true);
        c();// a
    }
</script>

这段考的是函数提高的问题，一共定义了俩getValue，那个生效了？由于flag===true，因此没有执行到else，因此第一个getValue生效。

对于重复定义，变量的重复声明是无用的，不会覆盖以前同一做用域声明的变量，但函数的重复声明会覆盖前面的声明的同名函数或同名变量。

//变量的重复声明无用
var a = 1;
var a;
console.log(a);//1

//覆盖同名变量
var a;
function a(){
    console.log(1);
}
a();//1

//覆盖同名函数
a();//2
function a(){
    console.log(1);
}
function a(){
    console.log(2);
}

13.看代码，说输出结果和缘由

window.onload=function(){
        var a=11;
        function test(){
            var a=1;
            var obj={
                a:10,
                b:2,
                fn:function(){
                    console.log(this.a+this.b);
                }
            };
            obj.fn();//12
        }
        test();
    }

当obj.fn（）被执行的时候，此时的this指向的是 obj 这个对象，由于fn函数是经过obj这个对象直接调用的。

14.看代码，说输出结果和缘由

var a=11;
function test(){
     var a=1;
      setTimeout(function(){
           console.log(this.a);//11
      },0);
}
test();

在通常状况下，this对象时在运行时基于函数的执行环境绑定的：在全局函数中，this等于window，而当函数被做为某个对象的方法调用时，this等于那个对象。可是，匿名函数的执行环境具备全局性，所以它的this对象一般指向windows.

15.看代码，说输出结果和缘由

var a=11;
function test(){
    console.log(a);//undefined
    var a=1;
}
test();

函数test有本身的做用域，而且做用域内声明了变量a，根据变量提高的规则，在该做用域内未定义以前就是undefined。

16. 1+undefined=NaN

17.git经常使用步骤

git clone / git pull / git fetch

git checkout -b branchname

git add ./ git commit -m""/ git push

git merge / git rebase / git squash

18.jsonp 跨域

function getScript(url,callback){  
    var script = document.createElement("script");  
    script.type="text/javascript";  
    if(script.readyState){  
        script.onreadystatechange = function(){  
            if(script.readyState=="loaded"||script.readyState=="complete"){  
                script.onreadystatechange=null;  
                callback();  
            }  
        }  
    }else{  
        script.onload = function(){  
        callback();  
    }  
    }  
    script.src = url;  
    document.getElementsByTagName("head")[0].appendChild(script);  
}

什么是同源策略，怎么比较两端的同源策略？两端指的是那两端？

还有那些html标签默认跨域：script、img、link、iframe

http://www.javashuo.com/article/p-ajvnwvwz-dz.html

19.script是阻塞式加载？非阻塞式加载？

这也涉及了页面渲染过程，各部分资源加载过程。

20.vue的生命周期

见：https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA

data定义在那个阶段？

解：当一个 Vue 实例被建立时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的全部的属性。

watch发生在哪一个阶段？create阶段通常作什么事情？mounted阶段作什么事情？

active动态阶段会发生什么？

window.onload发生在vue的那个周期？

怎么将vue的生命周期同普通html页面加载周期对应起来。

vue的深刻响应式原理？

解：https://cn.vuejs.org/v2/guide/reactivity.html 主要仍是用了Object.defineProperty 的数据属性和访问其属性，跟踪依赖，在属性被访问和修改时通知变化。受现代 JavaScript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除。因为 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，因此属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。

21.在vue中，template、html、render均可以做为模板，有什么区别？

见：html：https://cn.vuejs.org/v2/api/#el

template：https://cn.vuejs.org/v2/api/#template

render：https://cn.vuejs.org/v2/api/#render

22.vue页面和普通html页面有什么须要注意的事项？

<div class="test">
        <li>123</li>
        <li>123</li>
        <li>123</li>
</div>

上面这种状况中的li元素在两种页面中都会渲染吗？

23.隐式转换

var a={};
var b={};
var c=[];
var d=[];
console.log(a==b);// false
console.log(c==d);// false
console.log(a==true);// false
console.log(b==true);// false
console.log(b==0);// false
console.log(a==0);// false
console.log(b==null);// false
console.log(a==null);// false
console.log(a=='1');// false
console.log(b=='1');// false

上面每一步比较，都发生了隐式转换，转换了什么？比较的是什么？结果是什么？为何？

其实引用类型比较的是该对象的地址，每一个变量都开辟了一块属于本身的地址，因此 a!=b

具体见mdn:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Equality_comparisons_and_sameness

https://dorey.github.io/JavaScript-Equality-Table/

24.如何得到某个id为“test”的元素的CSS属性值？

<!DOCTYPE html>
<html>
<head>
    <style>
    #test{
        width :100px;
        height:100px;
    }</style>
</head>
<body>
    <div id="test" style="background-color:red">
    </div>
<script>
var dom = document.getElementById("test");
console.log(dom.style.backgroundColor);// red
console.log(dom.style.width);// 什么都没输出

var computedStyle = document.defaultView.getComputedStyle(dom, null); 
console.log(computedStyle.width);// 100px
console.log(computedStyle.backgroundColor);// rgb(255, 0, 0)
</script>
</body>
</html>

因此dom.style这个方法只能JS只能获取写在html标签中的写在style属性中的值（style=”…”），而没法获取定义在<style type="text/css">里面的属性。也就是说只能得到内联样式值。

而getComputedStyle能够获取全部样式值。

还有IE的currentStyle，你们能够了解一下。

25.webpack的用处

转码解码，压缩，tree shaking等……

26.计算下面俩div a和 b是否相交？若是相交，交集的面积多大？js实现

最简单的方式就是计算二者style的top 和 left，而后计算。

或者找到两个div的中心点，判断是否隔离？相交？嵌套？

其余方法寻找中，可评论告知。

两面，一共差很少就面了这几个问题，两个小时+……