前端面试题整理

因为 Html5 不是基于SGML的，所以不需要写dtd声明，但是需要写doctype来规范浏览器的行为

header,footer,nav,article,section等

区别，cookie 是用于和服务端通信，其他两个则不会
cookie 有大小限制相对于其他两个
localStorage 数据永远存储，除非你主动删除
sessionStorage 数据在浏览器关闭之前一直存在

行内元素：span,b,em,a,img
块元素： p,div,h1,ul,ol,dt
空元素： img,input

canvas 绘制后是一个dom  放大 会失真，
svg 是由多个dom节点组成，可以由js操作

link 是 xthml 标签，除了可以加载css 还可以加载其他事务，import 只能用于加载css
link 方式得样式 优先级高于import

分为 渲染引擎 和 js 引擎
渲染引擎负责取的网页内容，整理讯息，以及计算网页得显示方式。
js引擎负责 执行JavaScript 实现网页动态效果

用正确得标签做正确得事，就是在网络加载错误，css么有加载得情况下，也能让网页所表达得意思被用户知道

在浏览器得html头部加上manifest 属性，如果是第一次访问浏览器会根据manifest 得内容进行下载存储离线内容，如果已经访问过则从离线存储中进行加载，然后在比对服务器 如果有新内容在更新离线存储

首先 从DNS解析域名 获取ip地址，根据ip地址 找到服务器，服务器根据地址请求 返回页面相关数据，浏览器获取到数据进行页面加载渲染页面

100：信息状态码
200：成功状态码
300：重定向
400：客户端错误
500：服务器错误

标准：content  +  padding border margin
IE：content padding border  +  margin

子元素：
display: table-cell;
vertical-align: middle;
子元素必须为行内元素
还可以用定位得方法
display：flex
transfrom 等

前者dom 会从dom 树中消失  后者不会
前者会造成页面回流，后者会触发重绘

外层元素padding代替
内层元素透明边框 border:1px solid transparent;
内层元素绝对定位 postion:absolute:
外层元素 overflow:hidden;
内层元素 加float:left;或display:inline-block;
内层元素padding:1px;

1.定位：
position：absolute;
left:50%;
top:50%:
margin-left:-元素宽度；
margin-top:-元素高度
2、transform:translate(-50%，-50%)
3、display：flex

text-shadow
border-radius
text-decoration
box-shadow
transform
animation
等

利用border 将border得三边设置透明
例如：
width:0;
height:0;
border-width:20px;
border-style:solid;
border-color:transparent transparent transparent red

content-box 默认盒子模型
border-box  怪异盒子模型，设置 border padding 会计算在总宽度之内 例如  200 * 200  设置 padding: 10; border:1px; 则实际盒子可使用大小未179*179
box-sizing 继承父元素

继承：font系列 color cursor
不继承：width,height,padding,margin,border,background

1. display:none;
2. opacity:0;
3. visibility:hidden;
4. position:absolute;left:-999999;
5. transfrom:scale(0)
6. height:0

rgba 作用于元素自身，子元素不会继承
opacity 作用于自身和子元素，包括文字

em 相对于 其父元素字体大小变化
rem 相对于html字体大小
px 固定大小

决定了元素如何对其内容进行定位，以及与其他元素得关系和相互作用
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible

boolean,string,number,undefined,null

数据封装类对象：object,null,boolean,number,string
其他对象: function,arguments,math,date,regexp,error

强制转换类型 String（），Number（），Boolean（）
隐式转换通常发生在运算符加减乘除，等于，还有小于，大于等。。
例如：
console.log(10-'20')//-10 number
console.log(10-'one') //NaN not a number
console.log(10-'101a') //NaN
console.log(10*'20') //200 number

原型：每个对象都会在其内部初始化一个属性，这个属性就是prototype 就是该对象得原型
原型链：当我们访问一个对象得属性时，如果这个对象内部不存在这个属性，那我们就去prototype 中找这个属性，这个prototype又会有自己得prototype，这样一直找下去 就是我们所说得原型链关系
特点： JavaScript 对象是通过引用来传递得，当修改原型时，与之相关得对象也会继承这一改变。

tyoeof
instancdof

Object.keys()

1.event.stopPropagation()方法
2.event.preventDefault()方法
3.return false  ；

利用 on 进行绑定，绑定到不会变化得body 或者 需要操作得 不会变动得那一层父元素上

可以在body 上绑定事件，进行点击得时候判单 如果不是点击得下拉菜单则将菜单关闭
$('body').on("click",function(e){
var target  = $(e.target);    
if(target.closest("#phone,#first").length == 0){
        $("#phone").hide();
        $("#phone").attr("value","divm");
    };
    e.stopPropagation();
})

将计算得数值 乘以 10 倍在计算

1. pop 删除数组最后一个元素
2. push 往数组最后一个插入数据
3. shift 删除数组第一个元素
4. unshift 往数组第一个插入元素
5. concat 连接两个数组
6. join 把所有元素放入一个字符串
7. sort 对数组进行排序
8. reverse 将数组倒序返回
9. slice 从数组返回选定数组
10. splice 删除元素并往数组添加新元素

1. 浅拷贝  相当于复制了一个路径地址，共用得还是一个内存地址，改变复制得元素，源元素也会改变
2.深拷贝 彻底复制，两个内存地址 ，两个相互独立
如何深拷贝
splice
jq extend
递归
JSON.stringify(obj),
JSON.parse(_obj);

因为浏览器得同源规则，使得  不同域名，端口，协议，ip 得页面受这个限制
解决方法：
1. JSONP
2. CORS
3. 通过porxy 代码 由服务器来进行转发

前者在页面所有元素都加载之后才会执行，
后者在页面dom 加载后就执行

指向调用它的那个对象
如果有new关键字，this指向new出来得实例对象
在事件中，this 指向触发这个事件得对象

1. 都是调用一个对象的一个方法，用另一个对象替换当前对象
2. apply 最多只能接受两个参数 后一个参数为数组，call 则可以接受多个
3. 实现继承或者转换对象指针

1. html5 async：脚本可用就执行  defer: 页面加载完成后才执行
2. iframe
3. ajax eval
4. 动态生成script 插入

hasOwnProperty

可以用 
1. substring（start,end）// 若有参数为负数则变未0，两个参数选择小得为起始位置，截取得长度为较大和较小之间得差
2. substr(start,length)
3. slice(start,end)  // 截取得长度第二个参数减去第一个得差  第一个参数大于第二个 返回空

函数防抖： 比如说校验手机号码，输入一个校验一次 就比较频繁，可以设置 200毫秒后在校验
事件节流： 比如说有一个操作很频繁得事件，例如滚动监听，我们可以给他一个 阈值，一次 只能执行一次。

可以通过  JSON.stringify  来实现
$.fn.stringifyArray = function(array){
return JSON.stringify(array)
}
$.fn.parseArray = function(array){
    retrun JSON.parse(array)
}
$("").stringifyArray(array) 调用

前者  是用于 为jq添加类方法 需要jq类来调用
后者 可以用来编写 jq 扩展方法，以便于其他地方jq实例可以调用

为了避免声明了一些全局变量而污染，把代码放在一个“沙箱执行”，jQuery具体的实现，都被包含在了一个立即执行函数构造的闭包里面，然后在暴露出命名空间（可以为API，函数，对象）

class 得选择性能相对于 id  开销会更大，因为需要遍历所有元素
频繁操作dom  可以先缓存起来 比如：
var $li = $("#ul li")

执行动画之前，先将其stop

post 本身就禁用缓存
get 可以在url 加上随机数 或者 时间戳

加密： encodeURIComponent
解密： decodeURIComponent

window.history.forward(1)

可以用 ：is 来调用  避免使用 v-if 来判断使用

vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的

1. 全局 ruter.beforeEach(to,from,next) 跳转前进行拦截判断
2. 组件内钩子
3. 单独路由独享组件

只能通过mutation来进行state的更新，
getter 缓存state的值，用于多路径复用
action提交的是一个mutation

在地址中加入#已欺骗浏览器，地址的改变由于正在进行页内导航
 使用h5 的 window.history 功能，使用 URL 的 hash 来模拟一个完整的 URL

1. 全局使用 vuex
2. 父子组件之间 props emit
3. 非父子组件之间 on  emit

getter 用来获取值
setter 用来赋值触发 upadte 更新

1、vue响应式原理就是对你数据的变化，vue会有一个响应，去完成某件事。
2、vue的响应式原理就是基于vue知道了数据发生了变化，那么vue是如何知道数据发生了变化呢？
3、数据劫持 vue.js 采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter,getter，在数据变动时发布消息给订阅者，触发相应的监听回调

将组件保留在缓存中，可以保留组件状态，避免重新渲染

将页面已存在得dom元素作为vue实例得挂载目标

有利于页面加载渲染和seo

Array.isArray();
instanceof