前端面试题目
1 JS解释器
解释执行JS代码
JavaScript是解释型语言，跟编译型语言不同的是他只有在代码执行时才会翻译代码，而不会提前。每次执行代码时都会进行解释，所以性能不如编译型语言。
js解释器，词法分析、语法分析、解释执行器、语句解释器、表达式规约器、与浏览器交互等。
2 状态码
2XX请求完成
200: 请求完成201已创建新资源create
202已接收请求但尚未处理Accepted 多用以异步操作
3XX重定向，客户端需要进一步操作才能完成请求
4XX bad request
401当前请求需要用户验证
402预留状态吗
403已收到请求，服务器拒绝执行
404 Not Found
405 method not allowed
414 request-uri Too Long
5XX | 6XX 服务器错误
500 Internal Server Error 服务器内部错误，
502 Bad Gateway 作为网关或代理工作的服务器尝试请求时，从上游服务器接收到无效的响应。
503 由于临时的服务器维护或过载，服务器当前无法处理请求。这个状况是临时的，并在一段时间后恢复。应该在响应中包含一个Retry-After头用以标明这个延迟时间。如果没有给出延迟时间，那么客户端应以处理500的响应方式处理它
504 Gateway Timeout未能及时从服务器收到响应。
600 Unparseable Request Headers 没有返回相应头部，只返回内容实体
3 跨域解决
同源策略的目的是为了保护用户信息的安全，防止恶意的网站窃取数据。
同源必须要同时满足三个条件，既网络协议相同（http、https）、域名相同、端口相同。非同源的情况下，Cookie、LocalStorage、和IndexDB是无法读取的，DOM也无法获得，AJAX请求不能发送。
Cookie和iframe
Cookie是服务器写入浏览器的一小段信息，只允许同源的网页共享，但是两个网页一级域名相同，只是二级域名不同，浏览器允许通过设置document.domain来共享Cookie,
网页A、B同时设置
document.domian="xxx.com"
//网页A
document.cookie = "test1=hello";
网页B
document.cookie //test1=hello
这种方式只适用于Cookie和iframe窗口。
LocalStorage和IndexDB无法通过这种方式规避同源策略，规避它们的同源策略可以使用PostMessage API。
PostMessage API
跨文档通讯API是HTML5引入的全新API
该API为window对象新加了一个postMessage方法，允许跨窗口通讯，不论这两个窗口是否同源。
//父窗口aaa.com 向子窗口bbb.com发送消息
//父窗口发送消息
var popup = window.open("http://bbb.com",'title');
popup.postMessage("hellow world",'http://bbb.com');
//子窗口通过监听message事件获取数据
window.addEventListener('message', function(e) {
console.log(e.data);
},false);
其他方式
iframe可以通过监听window.onhashchange事件来监听location的hash值来共享父子窗口信息。
还可以利用window.name属性来传递数据
Ajax规避同源策略的三种方式
1、jsonp
利用<script>标签向服务器请求json数据，这种做法不受同源策略的限制，是一种比较常用的做法，简单适用，对服务器改造小。
<script>标签请求不受同源策略限制。发送的请求为GET请求。
2、cors
在服务器端设置请求头，允许来自其他域的访问。
res.addHeader("Access-Control-Allow-Origin", 'https://www.google.com');
res.addHeader('Access-Control-Allow-Methods', 'POST, GET');
res.addHeader('Access-Control-Allow-Headers', 'X-Requested-With');
res.addHeader('Access-Control-Allow-Headers', 'Content-Type');
3、代理
每次的跨域请求都有本域的后台代理访问后再将数据转交给前台，这种方式无论访问什么类型的资源都可以实现跨域访问。
4、WebSocket
浏览器同源政策及其规避方法
4 ajax原理 步骤
ajax的核心只有javascript，xmlhttprequest，dom
var xmlHttp;
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}else{
//IE
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.open("get","http://www.cnblogs.com/xdotnet/",true);
//xmlHttp.setRequestHeader("header","value"); //设置头信息
xmlHttp.onreadystatechage = function(){
alert(1);
switch(xmlHttp.readyState){
case 0 :
console.log("请求尚未初始化");
break;
case 1 :
console.log("请求待发送");
break;
case 2 :
console.log("请求已发送，尚未得到响应");
break;
case 3 :
console.log("请求开始响应，收到部分数据");
break;
case 4 :
console.log("请求响应完成，得到全部响应数据");
if(xmlHttp.readyState == 4 && xmlHttp.status ==200){
console.log("请求成功，已完成 状态码200");
}
break;
}
}
xmlHttp.send();
5对象继承（几种方式的优缺点）
原型链继承
实例间的继承
call和apply
6事件模型
事件冒泡（最早由IE实现）
事件捕获
event.stopPropagation();阻止事件冒泡
event.preventDefault();阻止冒泡是默认行为
7数据类型判断
typeOf("");
js的基本类型 number Boolean string object Function null undefined
8数据本地存储（cookie localstorge区别）
cookie是服务器写入浏览器的小段数据，每次向服务器发送请求时都会携带。cookie数据不能过大，最大容量限制为4k,可以给数据设置有效时间，默认在浏览器关闭时失效。原生的Cookie接口并不友好，需要程序员自己封装
//设置cookie
function setCookie(c_name,value,expiredays){
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}
//读取cookie
function getCookie(c_name){
if (document.cookie.length>0){
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1){
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1){
c_end=document.cookie.length
}
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
}
localStorage
存储的数据更多，可以最多存储5M数据，数据保存后除非被清除否则一直存在。接口使用方便，程序员也可以进一步封装。
10web安全（https加密过程,证书用途、xss几种形式,防范手段,过滤哪些字符?）
https加密过程
XSS攻击及防御
XSS的攻击形式主要分两种，一种是临时性的攻击，一种是存储式攻击。
临时性的攻击主要是传播带有恶意代码的链接，访问者会遭到代码注入攻击。
存储式的攻击是攻击者利用网站漏洞将恶意代码存储到网站服务器上，所有访问该内容的人群都会受到攻击。
防范手段
1.不相信用户输入，对用户的输入进行合法性验证和过滤。
2.不能进行严格过滤的情况下，要对特定的标签字符进行转义（html encode）
webpack工具和node了解哪些?node各个模块的底层原理?
webpack
主要功能：模板打包
入门 Webpack，看这篇就够了
nodeJS
defer async顺序,模块依赖(AMD,CMD差别)
javascript中的defer和async学习+javascript执行顺序
async和defer的脚本都不会阻塞页面渲染
对于inline的script无效（不是从服务器加载的script）
有脚本的onload回调
不能使用document.write(); document.write就会重新利用document.open打开新的文档流并写入，此时原来的文档流会被清空，已渲染好的页面就会被清除，浏览器将重新构建DOM并渲染新的页面
async: 会在脚本加载完后立即执行，并且一定会在window.onload()事件触发之前执行完成
defer：会在按照脚本在HTML文档中出现的顺序依次执行，并在dom加载完成后，document的DOMContentLoaded事件触发之前完成。
AMD规范与CMD规范的区别
AMD依赖前置
CMD依赖就近
闭包
闭包：定义在函数内部用来访问函数内部变量的函数。
闭包用来在函数外边访问函数内部变量，使用闭包写法会使闭包的父函数不会被垃圾回收期回收，应该谨慎使用，否则容易造成内存泄露，影响脚本执行效率。
- 盒模型 box-sizing
/* CSS3的box元素属性之一 */
box-sizing: content-box|border-box|inherit;
/*
content-box: 元素所设定的高度和宽度应用到元素的内容框，在元素的高度和宽度之外绘制元素的padding和border
border-box|:为元素所设定的高度宽度决定了元素的边框盒，元素的边框和内边距是在元素已知的高宽下进行绘制。通过已知的高度和宽度减去边框和内边距才能得到元素内容的高宽。
inherit：规定应从父元素继承box-sizing的值
*/
- 三种隐藏方式差别:visibility:hidden,display:none,opacity:0 （1、显示方面 2、时间绑定 3、动画差异）
visibility: hidden| visible
/*
hidden:用于隐藏元素，但是会保留元素的位置，
visible:表示正常显示
不会影响页面的布局。
页面元素隐藏时，不会再接收到已绑定的事件和其他事件，所以不能通过js再令其显示出来。
*/
display: block| inline| none
/*
block:元素显示为块元素
inline:元素显示为行内元素
none:不显示元素（可以恢复显示）
将元素隐藏，其他元素会占据元素位置，会改变页面布局，还可以监听到元素的事件
*/
opacity: value| inherit
/*
value: 可设置从0-1的任意值，从完全透明到完全不透明
inherit：规定从父元素继承opacity的值
并不会改变页面的布局，元素隐藏后可以接收到事件（如click事件）
*/
- css实现自适应正方形
.box{
width: 50%;
padding-top: 50%;
background-color: black;
}
.box{
width: 50%;
height:50vw;
background-color: blue;
}
<div class="box"></div>
- 左边固定 右边自适应布局
<style>
body {
width: 300px;
position: relative;
}
.aside {
width: 100px;
height: 150px;
float: left;
background: #f66;
}
.main {
overflow: hidden; /*触发元素的bfc布局，*/
height: 200px;
background: #fcc;
}
/*
当左边栏有已知的固定宽度时，可以直接设置右边元素的margin值来达到目的。
*/
</style>
<body>
<div class="aside"></div>
<div class="main"></div>
</body>
- 居中问题
水平居中
text-align: center /*设置在父元素上，会对子元素起作用,table和浮动的元素不会生效*/
width:100px;margin:0 auto; /*块状元素设置水平居中*/
垂直居中
line-height: 10px; /*内容文本垂直居中，当line-height和父元素高度一致时内容的显示效果为垂直居中*/
水平垂直居中
/*在不知元素高宽的情况下，可以使用translate进行水平垂直居中*/
.absoluteCenter{
position:absolute;
background-color:yellow;
width:200px;
height:200px;
top:50%;
left:50%;
transform: translate(-50%,-50%) /*百分比为元素自身高宽的百分比，所以可以在不知自身高宽的情况下实现居中*/
-ms-transform: translate(-50%,-50%); /* IE9 */
-webkit-transform: translate(-50%,-50%); /* webkit */
-moz-transform: translate(-50%,-50%); /*火狐*/
}
/*已知元素高宽，绝对定位的方式*/
.parent{
position: relative;
width:100%;
height:600px;
}
.absoluteCenter{
position:absolute;
background-color:yellow;
width:200px;
height:200px;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-100px;
}
<div class='parent'>
<div class='absoluteCenter'></div>
</div>
BFC
/*
根元素、
float属性不为none的元素、
position为absolute或fixed的元素、
display为inline-block | table-cell | table-caption | flex | inline-flex的元素、
overflow不为visible的元素都会生成BFC
BFC的用途
1实现自适应的两栏布局
2清除内部浮动（防止内部浮动元素造成的父容器高度塌陷）
3防止margin重叠
*/
- SSR（服务端渲染）适用什么场景?SPA首屏空白原因?
服务端渲染适用于对用户体验有较高要求的页面，服务器端渲染可以将一些计算交给后台完成，对客户端计算能力要求较少，浏览器只需要渲染服务器端返回的html文档。
白屏原因：因为首次加载数据过多，浏览器无法快速渲染完成。
DOCTYPE & dtd 兼容模式* 标准模式
Doctype用来声明文档类型，告知浏览器用什么文档标准解析这个文档，Doctype不存在或者错误会导致浏览器以兼容模式呈现文档。
标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。
在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
em & rem
em :根据父元素确定大小
rem：根据ROO元素确定大小
左右布局
link import
import: 只能加载css，载入时会在页面加载完成后加载
link:是XHTML标签，link载入css时会在页面载入的同时加载。
transform
-translate 移动
-scale 缩放base
-skew 扭曲，按照水平线和垂直线旋转
-rotate 旋转，顺时针给定角度，可以为负
transition: 允许CSS属性值在一定的时间区间内平滑的过渡，
Animation 使用@keyframes定义动画规则来完成动画
前端构建过程原理,具体流程
float 工作原理，清除浮动的技巧
span包含12px大小英文'abc',问span高度? baseline怎么理解?
如何做前后端分离
函数不定参（重点考察call apply bind）
数据双向绑定
ES6 class原理
重绘和回流的理解
querySelectAll和ByClassName所获取元素的区别?如何绑定事件?
vue2css方面
9点透（Tap事件,Touch）
使用touch事件
如果有就阻止被遮盖元素的默认事件
vue 全家桶 css3 MongoDB优缺点 http2.0
左右布局 4种方式 bfc 2定位 3flex 闪烁，background-face
基本类型，5中基本类型 bind appy call js 事件
事件流
转载于:https://www.jianshu.com/p/319f47ebbe77
上一篇： 用ps将熊猫变成成一只熊
下一篇： Window resizeBy() 方法