mi家前端面经
已经好久没想写面经了……菜鸟面到生无可恋。
1.用CSS实现下面圆形
答案：
<!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皆可以。
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盒子的触发方式：
- 根元素或包含根元素的元素
- 浮动元素（元素的
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);// //覆盖同名变量
var a;
function a(){
console.log(1);
}
a();// //覆盖同名函数
a();//
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);//
},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
https://blog.csdn.net/ligang2585116/article/details/73072868
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的中心点，判断是否隔离？相交？嵌套？
其他方法寻找中，可评论告知。
两面，一共差不多就面了这几个问题，两个小时+……
mi家前端面经的更多相关文章
- 2019前端面试题汇总（主要为Vue）
摘要: 经典面试题. 原文:2019前端面试题汇总(主要为Vue) 作者:前端小酱 Fundebug经授权转载,版权归原作者所有. 毕业之后就在一直合肥小公司工作,没有老司机.没有技术氛围,在技术的道 ...
- 前端周报：前端面试题及答案总结；JavaScript参数传递的深入理解
1.2017前端面试题及答案总结 |掘金技术征文 "金三银四,金九银十",用来形容求职最好的几个月.但是随着行业的饱和,初中级前端er就业形势不容乐观. 行业状态不可控,我们能做的 ...
- 前端面霸系列(1):doctype 、Quirks Mode & Standards Mode 、document.compatMode
近几日,气压猛降,雾霾铺天盖地,眼看一场腥风血雨就要在前端江湖爆发,这场战争不仅是百度.腾讯.阿狸.搜狐网易新浪等江湖豪门抢夺人才的大战,也是诸位江湖人士重新洗牌的好时机.每年10月,江湖的波动胜过华 ...
- 前端面试题2016--HTML
本文由我收集总结了一些前端面试题,初学者阅后也要用心钻研其中的原理,重要知识需要系统学习.透彻学习,形成自己的知识链.万不可投机取巧,临时抱佛脚只求面试侥幸混过关是错误的!也是不可能的!不可能的!不可 ...
- 前端面试题 之 JavaScript
昨天我们一起分享了关于html和css的面试题<前端面试题之Html和CSS>,今天我们来分享关于javascript有关的面试题.我面试的时候最害怕面试官问我js了,因为我真心不擅长这个 ...
- 【web前端面试题整理02】前端面试题第二弹袭来，接招！
前言 今天本来准备先了解下node.js的,但是,看看我们一个小时前与一个小时后的差距: 既然如此,我们继续来搜集我们的前端面试题大业吧!!! 特别感谢玉面小肥鱼提供哟,@玉面小飞鱼 题目一览 Jav ...
- 各大互联网公司前端面试题（js）
对于巩固复习js更是大有裨益. 初级Javascript: 1.JavaScript是一门什么样的语言,它有哪些特点? 没有标准答案. 2.JavaScript的数据类型都有什么? 基本数据类型 ...
- 前端面试题（html篇）
前端面试题(html篇)
- 2016最全的web前端面试题及答案整理
面试web前端开发,不管是笔试还是面试,都会涉及到各种专业技术问题,今天小编整理了一些常见的web前端面试题及答案,希望对大家有所帮助. 1.常用那几种浏览器测试?有哪些内核(Layout Engin ...
随机推荐
- jmeter的几种参数化使用方法
场景:在进行jmeter的接口自动化测试脚本的编写中需要使用参数化,现将接触到的几种参数化方法整理如下: 第一种: 使用“用户自定义变量”的配置元件来进行变量定义 填入变量.值.和备注就可以在后续的接 ...
- 来自C++之父的建议
You don’t have to know every detail of C++ to write good programs; Focus on programming techniques, ...
- C++入门程序作业2
程序在Dev-C++5.5.3版本运行 结构体的使用 给结构体赋值,打印出结构体中学生姓名,分数,平均分 #include <iostream>#include <cassert&g ...
- OGNL表达式的一个坑！
我在写Spring整合JDBC框架的时候用了properties文件去设置JDBC的参数.但是发现了一个问题先付上代码 properties文件的代码 db.driverClass=com.mysql ...
- Tiny6410 裸机开发--裸机点亮LED
环境搭建 由于我不喜欢使用虚拟机,双系统无法同时烧程序.最近才折腾好Windows10下编译和下载程序,使用的是韦东山做的easy open jtag,资料十分齐全,之前使用jlink搭建环境碰到了一 ...
- Python_在Ubuntu中搭建科学计算环境
本文针对 Ubuntu 下搭建 Python 科学计算的环境,罗列了关键词和部分链接,最后附上了自己的一点分享. 1.升级 关键词: python ubuntu 升级 推荐: ubuntu16.04下 ...
- JdbcTemplate 配置多数据源(完全照抄,完整)
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://mave ...
- wps 邮件 通讯小灵通 长沙杭州
记得在天涯上看过一个热贴,关于贵族与世家的,文中提到号称当今贵族的六大世家,什么“汝南周氏”.“吴兴沈氏”之类,更有甚者,为了比拼,追本溯源,把孔子他老人家也抬了出来,号称孔夫子的多少多少代传人,当时 ...
- 日志打入kafka改造历程-我们到底能走多远系列49
方案 日志收集的方案有很多,包括各种日志过滤清洗,分析,统计,而且看起来都很高大上.本文只描述一个打入kafka的功能. 流程:app->kafka->logstash->es-&g ...
- [LeetCode&Python] Problem 70. Climbing Stairs
You are climbing a stair case. It takes n steps to reach to the top. Each time you can either climb ...