面试题总结
面试题总结 __123
一、简述一下你对HTML语义化的理解？
1.用正确的标签做正确的事情。
2.html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
3.即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;
4.搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;
5.使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
二、HTML5、CSS3里面都新增了那些新特性？
1.HTML：
新的语义标签 ~ ~ 本地存储 ~ ~ 离线存储 ~ ~ Websocket
2.CSS:
2d，3d变换 ~ ~ Transition,animation ~ ~ 媒体查询 ~ ~ 新的单位（rem,vw，vh等）
三、css清除浮动的方式
1.最常用，最好的：
.clearfix:after {
content: ".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix { zoom:1; }
2.给父元素添加：
overflow:hidden;
3.在浮动的元素最后添加一个块元素：
clear：both；
四、transition和animation的区别
transition是过渡，animation是动画。
transition只能从一种状态过渡到另外一种状态，animation可以定制复杂动画，可以定义动画的区间等。
transition必须通过一些行为才能触发（js或者伪类来触发），animation的话不需要直接就可以触发。
五、inline-block间距解决问题：
给父元素添加：font-size=0；
六、简述Ajax实现流程及优缺点
Ajax实现流程：
1.创建实例化对象：
var xhr=new XMLHttpRequest();
2.向服务器发送请求：
open() //规定GET/POST请求的类型、URL 以及是否异步处理请求。
send() //将请求发送到服务器.
3.监听onreadystatechange 事件
xhr.onreadystatechange=function(){ //规定当服务器响应已做好被处理的准备时所执行的任务
if (xmlhttp.readyState==4 && xmlhttp.status==200){ //当 readyState 等于 4 且状态为 200 时，表示响应已就绪
console.log(xhr.responseText) //获得字符串形式的响应数据。
}
}
Ajax优点：
1.减轻服务器的负担,按需取数据,最大程度的减少冗余请求
2.局部刷新页面,减少用户心理和实际的等待时间,带来更好的用户体验
3.基于xml标准化,并被广泛支持,不需安装插件等,进一步促进页面和数据的分离
Ajax缺点：
1.AJAX大量的使用了javascript和ajax引擎,这些取决于浏览器的支持.在编写的时候考虑对浏览器的兼容性.
2.AJAX只是局部刷新,所以页面的后退按钮是没有用的.
3.对流媒体还有移动设备的支持不是太好等
七、Ajax中get与post请求方式的区别
1.与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
2.无法使用缓存文件（更新服务器上的文件或数据库）
3.向服务器发送大量数据（POST 没有数据量限制）
4.发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
5.传参不同，get参数拼接在url后面，post参数放在send里面，并且带有请求头信息
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
八、jsonp实现流程
动态创建script标签，src指向路径，向后端发送请求，返回回调函数的执行，以数据作为实参传入一段js脚本。
九、Ajax与jsonp区别
1.相同点：都是请求一个url
2.不同点：ajax的核心是通过创建XMLHttpRequest获取内容
jsonp的核心是动态创建script标签来调用服务器提供js脚本
十、json对象与字符串互转方法
JSON.parse() //将数据转换为javaScript对象
JSON.stringify() //将javaScript对象转换为字符串
十一、实现add函数，add(1,2)、add(1)(2)，皆可弹出3
function add(a,b){
if(b==undefined){
return function(c){
alert(a+c)
}
}else{
alert(a+b)
}
}
十二、实现add函数，add(1,3,4,5,....)，不论多少参数都能计算出参数之和
function add(){
var res=0;
for(var i=0;i<arguments.length;i++){
res+=arguments[i];
}
return res;
}
十三、实现一种数组去重算法
//第一种方法：
var arr2=[];
for(var i=0;i<arr.length;i++){
var flag=true;
for(var j=0;j<arr2.length;j++){
if(arr[i]==arr2[j]){
flag=false;
break;
}
}
if(flag){
arr2.push(arr[i]);
}
}
//第二种方法：
var arr=[1,2,9,3,3,3,4,4];
var arr1=new Set(arr);
var arr3=[...arr1];
console.log(arr3)
十四、实现密码输入框失去焦点弹出密码强度规则如下：<input id='ipt>，包含
数字、大写字母、小写字母任意一种强度为弱，两种为一般，三种为强
function password(val){
// 弱 只有数字、大写字母、小写字母其中一种
var weak = /^[A-Z]{7,20}$|^[a-z]{7,20}$|^[0-9]{7,20}$/;
if(weak.test(val)){
passwordStrength='匹配到只有数字、大写字母、小写字母其中一种';
console.log(passwordStrength+'强度：弱')
return passwordStrength;
}
// 中 有数字、大写字母、小写字母其中两种
var middle = /^(?!d+$)(?![a-z]+$)[da-z]{7,20}$|^(?!d+$)(?![A-Z]+$)[dA-Z]{7,20}$|^[a-zA-Z]{7,20}$/;
if(middle.test(val)){
passwordStrength='匹配到数字、大写字母、小写字母其中两种';
console.log(passwordStrength+'强度：中')
return passwordStrength;
}
// console.log(middle.test(InputTxt));
// 强 数字、大写字母、小写字母全部包含
var strong = /^(?=.*[a-z])(?=.*[A-Z])(?=.*d)[^]{7,20}$/;
if(strong.test(val)){
passwordStrength='匹配到数字、大写字母、小写字母全部包含';
console.log(passwordStrength+'强度：强')
return passwordStrength;
}
return null;
}
十五、简述事件委托优点和原理
优点：1. 减少事件注册，节省内存。 2.简化了dom节点更新时，相应事件的更新。
原理：利用冒泡的原理，把事件加到父级上，触发执行效果。
十六、写出事件冒泡、阻止浏览器默认行为兼容处理
事件冒泡
原理：内部元素的事件会先被触发，然后再触发外部元素；
function stopPropagation(e) {
e = e || window.event;
if(e.stopPropagation) { //Firefox/Chrome/Opera/Safari
e.stopPropagation();
} else {
e.cancelBubble = true; //ie
}
}
浏览器默认行为
function stopPropagation(e) {
e = e || window.event;
if(e.preventDefault) { //Firefox/Chrome/Opera/Safari
e.preventDefault();
} else {
e.returnValue = false; //ie
}
}
十七、写出获取页面滚动高度及设置页面滚动高度兼容写法
if(document.documentElement.scrollTop){
x=document.documentElement.scrollTop;
}else{
x=document.body.scrollTop;
}
十八、简述原型链概念
每一个对象都有_ proto_属性，向上一级寻找，指向创建它对象的prototype属性，直到找到null为止。
十九、函数题01
function fun(n,o){
console.log(o)
return{
fun:function(m){
return fun(m,n)
}
}
}
var a=fun(1);a.fun(2);a.fun(7);a.fun(8);
var b=fun(1).fun(3).fun(5).fun(4);
var c=fun(1).fun(1);c.fun(2);c.fun(3);
//答案
a: undefined 1 1 1
b: undefined 1 3 5
c: undefined 1 1 1
二十、简述一级DOM事件与二级DOM事件的区别
DOM一级事件：对于同一个dom节点而言，只能注册一个，后边注册的同种事件会覆盖之前注册的。
DOM二级事件：1.支持同一dom元素注册多个同种事件。 2.新增了捕获和冒泡的概念。
二十一、简述前端性能优化方式
1.减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。
2.前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数。
3.用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
4.当需要设置的样式很多时设置className而不是直接操作style。
5.少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
6.避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
7.图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。
8.避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢。
二十二、函数题02
var name='global';
var obj={
name:'local',
say:function(){
console.log(this.name);
}
}
var o=obj;
o.say();
var o2=obj.say;
o2();
//答案： local global
二十三、var arr=[1[2,3],[4,5,[6,7,8,[9,10]]]]数组展平
function fn(arr){
for(var i=0;i<arr.length;i++){
if(arr[i] instanceof Array){
fn(arr[i]);
}else{
console.log(arr[i])
}
}
}
fn(arr)；
二十四、jquery对象与DOM对象互转方式
jquery对象转为DOM对象：$().get(index) 方法
DOM对象转化为jquery对象：直接用 $() 包起来
二十五、解决get请求缓存问题的方法
在URL后面添加一个时间戳：var t = new Date().getTime();
二十六、js获取当前页面的url，并解析出路径中所携带的参数，如下：
www.baidu.com?word=javascript&browser=IE ==>{ word:'javascript', browser:'IE' }
答案解析：
function showWindowHref(){
var sHref = window.location.href;//获取当前路径
var args = sHref.split('?');
if(args[0] == sHref){
return "";
}
var arr = args[1].split('&');
var obj = {};
for(var i = 0;i< arr.length;i++){
var arg = arr[i].split('=');
obj[arg[0]] = arg[1];
}
return obj;
}
var href = showWindowHref();
console.log(href);
二十七、函数题03
function Foo() {
getName = function () { alert (1); }
return this;
}
Foo.getName = function () { alert (2);};
Foo.prototype.getName = function () { alert (3);};
var getName = function () { alert (4);};
function getName() { alert (5);}
//请写出以下输出结果：
Foo.getName();
getName();
Foo().getName();
getName();
new Foo.getName();
//答案：2 4 1 1 2
二十八、简述call、apply、bind的用法及区别
1.用法：
call：call(“引用对象”，”值1”,”值2”)；
apply：apply(“引用对象”，[”值1”,”值2”])；
bind：var ss=函数.bind(对象,arg1,arg2,....);
2.区别：
相同点： 第一个参数都是指定函数内部中this的指向
不同点： （1）都可以在函数调用时传递参数。call，bind方法直接传入，apply方法以数组形式传入。
（2）call，apply方法在调用之后立即执行函数，bind方法没有立即执行，需要将函数再执行一遍。有点闭包的味道。
（3）改变this对象的指向问题不仅有call，apply，bind方法，that变量来固定this的指向。
二十九、实现弹出一个字符串中出现次数最多的字符
//第一步：把字符以{x:"a",count:1}的形式插入数组
var arr=[]
for(var i=0;i<str.length;i++){
var flag=true;
for(var j=0;j<arr.length;j++){
if(str[i]==arr[j].x){
flag=false;
arr[j].count++;
break;
}
}
if(flag){
arr.push({
x:str[i],
count:1
})
}
}
//第二步：对数组以count值进行降序排列
var res=arr.sort(function(b,a){
if(a.count>b.count) return 1;
if(a.count<b.count) return -1;
return 0
})
console.log(res[0].x+"出现次数最多:"+res[0].count+"次")
//处理并列第一问题
var arr2=[];
for(var i=0;i<res.length;i++){
if(res[i].count==res[0].count){
arr2.push(res[i].x);
}
}
var s=arr2[0];
for(var i=1;i<arr2.length;i++){
s+="、"+arr2[i];
}
console.log(s+"出现次数最多:"+res[0].count);
三十、实现offsetTop找爸爸方法
function offset(el){
var ot=0;
var ol=0;
while(el){
ot+=el.offsetTop;
ol+=el.offsetLeft
el=el.offsetParent;
}
return {
left:ol,
top:ot
}
}
三十一、原生js实现获取和设置css方法
function setStyle(el,st){
var arr=["width","height","left","top","marginTop","marginLeft","fontSize"]
for(x in st){
for(var i=0;i<arr.length;i++){
if(arr[i]==x){
st[x]=st[x]+"px";
break;
}
}
el.style[x]=st[x];
}
}
setStyle(box,{
width:100,
height:200,
background:"blue",
marginTop:200
})
三十二、封装获取变量数据类型通用方法
function getType(type){
if(typeof type== "string"){
return "string"
}
if(typeof type== "number"){
return "Number"
}
if(typeof type== "boolean"){
return "Boolean"
}
if(type instanceof Array){
return "Array"
}
if(type instanceof Object){
return "Object"
}
}
三十三、简述同源策略的概念
域名，协议，端口相同
三十四、简述数组splice方法的几种用法
语法：array.splice(index,howmany,item1,.....,itemX)
index： 该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
howmany： 规定应该删除多少元素。必须是数字，但可以是 "0"。
item： 要添加到数组的新元素
三十五、简述js节点操作方法
1.元素节点的增删改查
创建节点/复制：
document.createElement() // 按照指定的标签名创建一个新的元素节点
clonedNode = Node.cloneNode(boolean) // 只有一个参数，传入一个布尔值，true表示复制该节点下的所有子节点；false表示只复制该节点
插入节点
parentNode.appendChild(childNode); // 将新节点追加到子节点列表的末尾
parentNode.insertBefore(newNode, targetNode);
移除节点：
parentNode.removeChild(childNode); // 移除目标节点
node.parentNode.removeChild(node); //在不清楚父节点的情况下使用
替换节点：
parentNode.replace(newNode, targetNode); //使用newNode替换targetNode
查找节点：
document.getElementByID() // 得到单个节点
document.getElementsByTagName() // 得到节点数组 NodeList
document.getElementsByName() // 得到节点数组 NodeList
document.getElementsByClassName() // 得到节点数组 NodeList
2.属性节点：
获取CSS样式：node.style.color // 可读可写
Style本身的属性和方法
node.style.cssText //获取node行内样式字符串
node.style.length //获取行内样式个数
node.style.item(0) //获取指定位置的样式
获取和修改元素样式
HTML5为元素提供了一个新的属性：classList 来实现对元素样式表的增删改查。操作如下：
node.classList.add(value); //为元素添加指定的类
node.classList.contains(value); // 判断元素是否含有指定的类，如果存在返回true
node.classList.remove(value); // 删除指定的类
node.classList.toggle(value); // 有就删除，没有就添加指定类
修改DOM特性的方法
Node.getAttribute('id') // 获取
Node.setAttribute('id') // 设置
Node.removeAttribute() // 移除
Node.attributes // 获取DOM全部特性
只读方法
getComputedStyle是window的方法。它能够获取当前元素所有最终使用的CSS属性值，但是是只读的。它有两个参数，第一个为传入的节点，第二个可以传入:hover, :blur等获取其伪类样式，如果没有则传入null。
三十六、简述cookie和webstorage的区别
共同点：都是保存在浏览器端，且同源的。区别： (1)cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。 (2)cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。 (3)存储大小限制不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。 (4)数据有效期不同 sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持； localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据； cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。 (5)作用域不同 sessionStorage不在不同的浏览器窗口*享，即使是同一个页面； localStorage 在所有同源窗口中都是共享的； cookie也是在所有同源窗口中都是共享的。 (6)Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。 (7)Web Storage 的 api 接口使用更方便。
三十七、谈一下对websocket的理解
（1）WebSocket是一种客户端与服务器即时通信的双项协议，基于TCP协议，使用HTTP协议的101状态码进行协议切换，使用的TCP端口是80，可以用于绕过大多数防火墙的限制。
（2）WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端直接向客户端推送数据而不需要客户端进行请求，在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就可以创建持久性的连接，并允许数据进行双向传送。（ajax轮询，浏览器需要不断的向服务器发出请求，会占用很多的带宽和服务器资源）
三十八、