前端开发面试题整理以及解答思路

最近在网上看了各种各样的前端面试题，感觉大部分其实都知道一点，但要真正表述恐怕又不能说得很好，所以这里简单整理一下解答思路

一、HTML基础

对HTML5的理解

很大的一个问题，似乎每个人都能说上一点，但再深入就很看水平了，所以整理了HTML5的新特性，答题的时候应该抓住几个点入手：

1. 新标签
   多媒体的新标签： vedio,audio,embed
   语义化的新标签： article,header,footer,nav,section,figure
2. 内联svg
3. 拖放事件（drop和drag）
4. 支持地理定位：navigator.geolocation.getCurrentPosition(showPosition)
5. 表单的新属性：autocomplete, novalidate
6. web存储：localStorage,sessionStorage(关闭浏览器窗口后数据就会被删除)
7. WebSocket协议：在单个 TCP 连接上进行全双工通讯的协议

Web语义化的好处

1. 方便爬虫读取，有利于SEO
2. 增加代码可读性
3. 屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页
4. 丢失样式的时候还能保持结构
5. 手机等设备能以有意义的方式渲染网页(它们可能对CSS支持比较弱)

SEO

1. 建立sitemap.xml
2. 使用语义化的标签
3. meta的keyword和description属性
4. 尽量简洁url
5. 外链

页面加载过程

浏览器开启线程处理Http请求－>DNS解析域名到IP地址->进行HTTP会话，客户端发送请求报头->进入服务端（Apache,tomcat,node.js等）->根据请求进入后端应用，找到请求处理->处理回馈报头，对比最后修改时间判断是否读缓存->下载html文档－>建立文档树，加载CSS，JS文件－>开始渲染DOM,执行JS

二、CSS基础

三列布局：

主要思路是中间元素左右padding，左右元素设置浮动，中间元素清除浮动

CSS3动画

CSS3有两种方式设置动画：

animation:

animation-name: none  
animation-duration: 0s  
animation-timing-function: ease  
animation-delay: 0s  
animation-iteration-count: 1
animation-direction: normal
animation-fill-mode: none

利用keyframe写帧动画，再animation-name中指定并调用,animation再动画结束后是不改变属性值的

CSS3布局方案

关于flex布局：

.box {
     display: flex;
     flex-direction: 主轴方向
     flex-wrap: 如何换行
     justify-content： 主轴上的对齐方式
     align-item: 交叉轴上的对齐方式
}

.item {
    flex-grow: 放大比例
    flex-shrink: 缩小比例
    order: 顺序
}

tranistion:

transition-delay: 0s;
transition-duration: 0s;
transition-property: all;
transition-timing-function: ease;

两个不同状态的插值渐变过程

CSS选择器的优先级

内联样式 > id > (类, 伪类, 属性) > (标签, 伪元素)

一些比较特殊的选择器：

E ~ F：匹配任何在E元素之后的同级F元素, CSS3新增
E > F：子元素选择器，匹配所有E元素的子元素F
E + F: 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F
E:nth-child(n): 匹配其父元素的第n个子元素，CSS3新增
E:nth-last-child(n): 匹配其父元素的倒数第n个子元素，CSS3新增
E:nth-of-type(n): 匹配其父元素的第n个同标签子元素，CSS3新增
E:nth-last-of-type(n): 匹配其父元素的倒数第n个同标签子元素，CSS3新增

background-*相关属性

就记录比较冷门的一些：
background-origin： 规定 background-position 属性相对于什么位置来定位 （border-box|padding-box|content-box）
background-clip: 规定绘制区域（border-box|padding-box|content-box）
background-attachment: 背景图像能否随其余部分的滚动而移动（scroll|fixed|inherit）

关于BFC

BFC的形成,满足以下条件任意一个即可

• float 的值不为 none
• position 的值不为 static 或者 relative
• display 的值为 table-cell , table-caption , inline-block , flex , 或者 inline-flex 中的其中一个
• overflow 的值不为 visible

BFC的性质

在BFC中，每个盒子的左外边框紧挨着包含块的左边框

同一个BFC子元素外边距会折叠

BFC可以包含浮动

文档流

一旦给其中的某个DIV进行FLOAT属性或者absolute定位（不包括static/relative，这两个依然保持正常的文档流），则它完全脱离文档流，不占空间

层级关系的比较

1. 对于同级元素, 默认 (或 position:static) 情况下文档流后面的元素会覆盖前面的
2. 对于同级元素, position 不为 static 且 z-index 存在的情况下 z-index 大的元素会覆盖 z-index 小的元素, 即 z-index 越大优先级越高.

三、JS基础

关于提升

记住一句话即可：包括变量和函数在内的所有声明都会在任何代码被执行前首先被处理

基本数据类型

undefined, null, string, number, boolean

高阶函数

其实就是将函数作为参数或返回值的函数

JSONP的原理

利用script标签的src没有跨域性质的特点，动态创建script标签，指定src为服务端数据api，并传入一个callback作为参数，返回的是一段javascript代码，将数据传入callback中执行

原生ajax

xmlHttpRequest对象:

// 兼容ie的xhr对象创建方法     
function createxhr(){
    if(typeof XMLHttpRequest != "undefined") {

    } else if(typeof ActiveXObject != "undefined"){
        var i,len,version=["MSXML2.XMLHTTP.6.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP"];
        for(i=0,len=version.length;i<len;i++)            {
            try {
                new ActiveXObject(version[i]);
                arguments.callee.activeXString = version[i];
                break;
            }
            catch(ex) {
            }
        }

        return new ActiveXObject(arguments.callee.activeXString);
    } else {
        throw new Error("...")
    }
}

xhr = createxhr();
xhr.onreadystateChange = function() {
    if(xhr.readyState == 4) {
        if(xhr.status == 200 || xhr.status == 304) {
            ...
        } else {
            ...
        }
    }
}

xhr.open("get", url, false);
xhr.send(null);

事件模型

兼容ie的事件模型

var EventUtil = {
    addHandler: function(element, type, handler) {
        if(element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else if(element.attachEvent) {
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    },
    removeHandler: function(element, type, handler) {
        if(element.removeEventListener) {
            element.removeEventListener(type, handler, false);
        } else if(element.attachEvent) {
            element.detachEvent("on" + type, handler);
        } else {
            element["on" + type] = null;
        }
    },

    getTarget: function(e) {
        return e.target || e.srcElement;
    },

    getEvent: function(event) {
        return event.target || event.srcElement;
    },

    preventDefault: function(event) {
        if(event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }

    },

    stopPropagation: function(event) {
        if(event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    }

}

AMD规范和CMD规范

诞生的原因：

1. 实现JS的异步加载，避免网页停止渲染
2. 管理模块之间的依赖性，便于维护

AMD提倡的是一种预加载，也就是说回调函数执行前模块需要全部加载好
CMD提倡的是延迟执行，加载模块通过在回调函数中调用require，依赖可以就近书写

关于cookie和localstroage

如何设置cookie

document.cookie = "value=1";

浏览器的cookie都有哪些字段

Name,Value,Domain,Path,Expires,Size

如何设置localstorage

window.localStroage.a = 3;
localStorage.setItem("value", "2");
localStorage.getItem("value");