博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
mi家前端面经
阅读量:6189 次
发布时间:2019-06-21

本文共 5031 字,大约阅读时间需要 16 分钟。

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

1.用CSS实现下面圆形

答案:

        

上面circle和circle1两个class皆可以。

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

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

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

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

这道题网上解法很多,可自行查看。

4.html的盒子模型

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

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

原因:当元素设置浮动后,会自动脱离文档流

解决办法:

1、给父元素也添加float。这样让父元素与子元素一起脱离文档流浮动起来,保证子元素在父元素内,这样父元素就能自适应子元素的高度,但是此方法有一弊端,一定会影响父元素之后的元素排列,甚至影响布局。 

2、给父元素一个固定高度,此方法适用于子元素高度已知并且固定的情况。 
3、添加一个块级元素,并给此元素设置clear:both;清除浮动。在很早之前用的就是这种解决办法,新建一个空的div,为这个div设置clear:both;这样无疑是增加了无意义的标签,一个大型页面中,这种标签太多是不好的。 
4、给父元素添加 overflow:hidden;
5、通过伪类::after清除浮动

BFC盒子的触发方式:

  • 根元素或包含根元素的元素
  • 浮动元素(元素的 不是 none
  • 绝对定位元素(元素的 为 absolutefixed
  • 行内块元素(元素的 为 inline-block
  • 表格单元格(元素的 为 table-cell,HTML表格单元格默认为该值)
  • 表格标题(元素的 为 table-caption,HTML表格标题默认为该值)
  • 匿名表格单元格元素(元素的 为 table、``table-rowtable-row-group、``table-header-group、``table-footer-group(分别是HTML table、row、tbody、thead、tfoot的默认属性)或 inline-table
  • 值不为 visible 的块元素
  • 值为 [flow-root](https://drafts.csswg.org/css-display/#valdef-display-flow-root) 的元素
  • 值为 layoutcontentstrict 的元素
  • 弹性元素(为 flexinline-flex元素的直接子元素)
  • 网格元素(为 gridinline-grid 元素的直接子元素)
  • 多列容器(元素的 或 不为 auto,包括 ``column-count1
  • column-spanall 的元素始终会创建一个新的BFC,即使该元素没有包裹在一个多列容器中(,)

6.margin塌陷问题

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

解决办法:触发BFC盒子、

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

 我已经懵了,有小伙伴连好了,可以私信我一下。

8.Object.assign的特性和用法

浅拷贝

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

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

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

12.看代码,说输出结果和原因

这段考的是函数提升的问题,一共定义了俩getValue,那个生效了?因为flag===true,所以没有执行到else,所以第一个getValue生效。

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

//变量的重复声明无用var a = 1;var a;console.log(a);//1//覆盖同名变量var a;function a(){    console.log(1);}a();//1//覆盖同名函数a();//2function a(){    console.log(1);}function a(){    console.log(2);}

13.看代码,说输出结果和原因

window.οnlοad=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

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

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

20.vue的生命周期

见:

data定义在那个阶段?

解:当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。

watch发生在哪个阶段?create阶段一般做什么事情?mounted阶段做什么事情?

active动态阶段会发生什么?

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

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

vue的深入响应式原理?

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

21.在vue中,template、html、render都可以作为模板,有什么区别?

见:html:

template:

render:

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

  • 123
  • 123
  • 123
  • 上面这种情况中的li元素在两种页面中都会渲染吗?

    23.隐式转换

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

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

    其实引用类型比较的是该对象的地址,每个变量都开辟了一块属于自己的地址,所以 a!=b

    具体见mdn:

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

            

    所以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的中心点,判断是否隔离?相交?嵌套?

    其他方法寻找中,可评论告知。 

     

    两面,一共差不多就面了这几个问题,两个小时+……

    转载于:https://www.cnblogs.com/catherinezyr/p/9642804.html

    你可能感兴趣的文章
    Jenkins
    查看>>
    我的友情链接
    查看>>
    SQL Server insert的触发器
    查看>>
    一周第三次课(10月18日)
    查看>>
    Hbase shell 常用命令
    查看>>
    FZU 2151 OOXX Game
    查看>>
    SET FOREIGN_KEY_CHECKS = 0
    查看>>
    .Hbase批量导入数据应用
    查看>>
    读优&&输优
    查看>>
    机器学习: 最大似然估计 (MLE) 最大后验概率(MAP)
    查看>>
    [Google Guava] 2.3-强大的集合工具类:java.util.Collections中未包含的集合工具
    查看>>
    组合数学 - 母函数的运用 + 模板 --- hdu : 2082
    查看>>
    四则运算题目生成程序(基于控制台)
    查看>>
    int.Parse(),int.TryParse(),Convert.ToInt32(), (int)转换为数字类型方法简介
    查看>>
    【开源一个小工具】一键将网页内容推送到Kindle
    查看>>
    常用图像处理相关图像数据库
    查看>>
    spark实战@wordcount-处理目录下的多个文件
    查看>>
    VMware Vsphere 虚拟化
    查看>>
    mysql之 CentOS系统针对mysql参数优化
    查看>>
    sencha touch 2中list控件分组排序
    查看>>