2018我遇到的前端面试题
一年工作经验……
HTML篇：
1. doctype是什么？有哪些类型？
doctype用于声明文档类型；
HTML4的doctype有三种：过渡的（不严格）//严格的（不允许使用任何表现层的表示和属性）//框架的
2.input有哪些新类型？简要说明其用法。
email || url || number || range || Date || pickers (date, month, week, time, datetime, datetime-local) || search || color
==大多数浏览器不支持==
3.html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
新特性
canvas
video和audio标签
本地存储：localStorage和sessionStorage
语义化：article、footer、header、nav、section
表单控件新类型
地理定位Geolocation
移除的元素
big/center/tt/u/s/frame/frameset/noframes
解决兼容性
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
区分HTML4.0和HTML5
DOCTYPE声明\新增的结构元素\功能元素
4.bootstrap响应式的实现原理是什么？
百分比和媒体查询
5.多终端页面适配是怎样实现的？
1.使用淘宝的rem.js，基本原理是根据通过dpr设置缩放比，实现布局视口大小，然后通过js动态计算font-size
2.根据设计稿的大小，设置一个参考值计算font-size
CSS篇：
1.实现两列布局，左边自适应，右边固定宽度
网上有很多种方法，我只尝试了一种：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>removeProp demo</title>
<style>
*{margin:0; padding:0;}
html,body{height:100%;width:100%;overflow: hidden;}
div{height:100%;position:absolute;}
.box1{width:300px;background: pink;}
.box2{width:100%;background: #0f0;left:300px;}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
2.用css画一个三角形
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>triangle</title>
<style>
.box1{
width:0;
height:0;
border:50px solid rgba(0,0,0,0);
border-bottom-color:#f00;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
3.css实现字体大写
<html>
<head>
<style type="text/css">
p.uppercase {text-transform: uppercase};//大写
p.lowercase {text-transform: lowercase};//小写
p.capitalize {text-transform: capitalize};//首字母大写
</style>
</head>
<body>
<p class="uppercase">This is some text in a paragraph.</p>
<p class="lowercase">This is some text in a paragraph.</p>
<p class="capitalize">This is some text in a paragraph.</p>
</body>
</html>
4.display有哪些常用属性值，各是什么意思？
block:显示为块级元素（块级元素和行内元素的区别略）
inline-block || inline || none || flex || grid
5.position为absolute、relative、fixed的定点位置。
absolute：相对与除了static定位的父集元素;
relative：相对于自身原来的起点位置;
fixed：相对于可视窗口
6.用三种方法清除浮动
1.在父级末尾添加空div，并设css样式clear:both;
2.父级使用伪类after,具体如下：
el:after{
content:"";
height:0;
position:absolute;
clear:both;
display:block;
}
el{
zoom:1;//兼容IE
}
3.父级设置height
Javascript篇：
1.什么是事件捕获和冒泡？如何阻止事件冒泡？（js原生和jQuery两种）
2.js创建对象，至少用三种方式实现。
3.简述一下事件穿透，及解决办法。
4.用三种方式判断变量类型是否是数组
5.怎样实现对象的拷贝？（ES5）
var cloneObj = function (obj) {
var newObj = {};
if (obj instanceof Array) {
newObj = [];
}
for (var key in obj) {
var val = obj[key];
//newObj[key] = typeof val === 'object' ? arguments.callee(val) : val; //arguments.callee 在哪一个函数中运行，它就代表哪个函数, 一般用在匿名函数中。
newObj[key] = typeof val === 'object' ? cloneObj(val): val;
}
return newObj;
};
6.什么是闭包？闭包有何优缺点？
7.简述一下new一个构造函数的过程。
8.简述一下ajax请求过程
9.为什么会有跨域？怎么实现的？简述一下实现原理。
10.js的原始数据类型有哪些？
string , boolean , number , null , undefined
11.写一个函数，判断一个变量是否是字符串(一种数据类型)。
typeof str != "string" && str.constructor != String
12.以下代码有否正确？如不正确，请改正
f = function(){return true;}
g = function(){return false;}
(function(){
if(g()&&[]==![]){
f = function f(){return false;}
function g(){return true;} }
})();
console.log(f());//true or false?
13.typeof有哪几种结果？
string || number|| undefined || boolean || function|| object
14.箭头函数和普通函数有什么区别？
1.箭头函数没有绑定this指针，普通函数的this指向调用函数的对象（匿名函数的this都指向全局window对象）;
2.箭头函数没有构造器
15.请用三种方法实现数组去重
1.使用空对象，将数组元素作为对象key值，出现次数作为value值，循环数组
2.使用ES6的Set类型，[...new Set([1,2,3,2,3,1,4,5])];//[1,2,3,4,5];
3.普通的for循环，循环之前排序，会高效一点点
16.检测一个对象是否有prop属性，没有就抛出异常，有的话返回true，并删掉该属性
var o = {
age:10,
prop:"prop"
}
function hasProperty(pro,obj){
if(obj.hasOwnProperty(pro)){
delete obj.prop;
}else{
throw new Error("没有该属性");
}
}
hasProperty("prop",o)
console.log(o)
17.href和src有什么区别？
href是文档之间的跳转
src是资源的引用，将指定资源插入到src所在的位置
jQuery篇：
1.attr()和prop()的区别？
对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()
典型应用：用checkbox类型实现radio的功能，有兴趣的话可以实验一把
<body>
<div class="checkBox">
<input type="checkbox" />1
<input type="checkbox" />2
<input type="checkbox" />3
<input type="checkbox" />4
</div>
<script type="text/javascript">
$(":checkbox").click(function(){
if($(this).prop("checked")!=undefined) {
$(this).prop("checked",true).siblings().prop("checked",false);
}
})
</script>
2.on和bind有什么区别？js动态添加的DOM元素，用on还是bind绑定？
bind现在基本已经被弃用，不做讨论
on常用于事件委托，如：
$(el).on("click","subel1,subel2",function(){});
之后动态添加的el的同类型子元素自动被绑上此事件！！！
3.touch和click有何区别？
touch有延迟，等待是否双击事件
4.window.onload和jQuery的ready有什么区别？
略！
Vue篇：
1.简述一下Vue的生命周期及其特点
2.Vue的双向绑定原理是什么？
3.Vue的特点有哪些？和jQuery有何区别？
4.父子组件之间传递数据的方法
5.子组件之间如何共享数据
Vuex
6.一般用什么工具进行数据交互？
7.webpack原理是什么？
8.简述一下$nextTick的用法
浏览器篇：
1.有用过浏览器缓存吗？请介绍一下基本的缓存机制。
浏览器缓存有两种：强缓存和协商缓存，强缓存类型不会发送请求到服务器，协商缓存会发送请求到服务器，但不会请求新的响应数据；
js禁止缓存：设置请求头 // 在链接后手动添加随机数
2.cookie，sessionStorage，localStorage的区别是什么？
兼容性问题篇：
1.key up,key down,key press在不同浏览器下有何不同？
主要是浏览器兼容性问题
2.请介绍一下margin “塌陷”问题。
网络篇：
1.url请求所经历的过程有哪些？
判断请求类型，是否用缓存，是否是异步数据交互等几种情况，
详见https://blog.csdn.net/u014600626/article/details/78720763
2.从服务器端安全考虑，请求方式用get还是post？
get！！ 因为get方式是查询操作，而post可能会恶意修改数据
