面试二三事

块元素：宽高边距可控、独占一行
行内元素：默认同行 宽高由内容决定
可互相转化：display:inline display:block display:inline-block

 src href区别：相同都可以加载外部文件
href用在link和a上 src用在js img等标签上
当浏览器遇到href会进行下载资源并且不会停止对当前文档的处理
当浏览器解析到src 会暂停其他资源的下载和处理，直到将该资源加载或执行完毕

存储大小：
cookie存储数据不能超过4k
sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
有效时间：
localStorage存储持久数据，浏览器关闭后数据不丢失除非主动删除数据
sessionStorage数据在当前浏览器窗口关闭后自动删除
cookie设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

如何理解h5结构语义化
用正确的标签做正确的事
段落用p标签 标题用h系列标签 边栏用aside标签 主要内容用mian标签 导航用nav标签
h5新特性：
用于媒介回放的video和audio元素
本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失
sessionStorage的数据在浏览器关闭后自动删除
语义化更好的元素内容，比如article、footer、header、nav、main.
表单控件，calendar(日历)、date、email、url、search
新的技术webworker(子线程)、websocket、Geolocation
移除的元素：basefont、big、center、font、s、strike、tt、u
对可用性产生负面影响的元素:frame,frameset,noframes
ie6/ie7/ie8通过document.createElement方法产生的标签  成熟的框架 html5shim
如何区分html5:DOCTYPE声明\新增的结构元素\功能元素

浏览器渲染机制一般分为几个步骤
1.处理HTML并构建DOM树
处理CSS并构建CSSOM树
将DOM和CSSOM合并成一个渲染树
根据渲染树来布局 计算每个节点的位置
调用CPU绘制，合成图层，显示在屏幕上

重绘(Repaint)和回流(Reflow)
重绘是当节点需要更改外观而不会影响布局的，比如改变color就称为重绘
回流是布局或者几何属性需要改变就称为回流(需要激素按它们在设备视口(viewport)内的确切位置和大小)
回流必定会发生重绘，重绘不一定会引发回流。回流所需的成本比重绘高得多，改变深层次的节点很可能导致父节点的一系列回流
减少回流和重绘
批量修改Dom 对于复杂动画效果，使用绝对定位让其脱离文档流
css3硬件加速(GPU加速)transform,opactity,filters这些动画不会引起回流重绘

data设置 获取
传统：GetArrtibute()获取data-xx setAttribute()设置data-xx
html5新方法：dataset.xx

position:sticky;css3新增属性 粘性定位可以被认为是相对定位和固定定位的混合，粘性定位的元素依赖于用户的滚动

(当前设备宽度/设计稿宽度)*100 
document.documentElement.style.fontsize = document.documentElement.clientWidth/375*100+"px"

js内置对象：

object array boolean number string symbol 
如何最小化重绘和回流
需要对元素进行复杂的操作时 可以先隐藏 操作完成后再显示
需要创建多个节点时，使用documentFragment创建完后一次性加入document
缓存layout的值
尽量避免table布局

作用域链：全局函数无法查看局部函数的内部细节，但局部函数可以查看其上层的函数细节，直至全局细节
如果当前作用域没有找到属性或方法，会向上层作用域[[Scoped]]查找，直至全局函数，这种形式就是作用域链

数据请求
1.xhr
var xhr = new XMLHttpRequest();
xhr.open('get',"www.aaaa.com",true);//true,异步
xhr.send();
xhr.onreadystatechange = function(){
//readstate 4
//status 200-300
//200成功 (可能强缓存策略,cache-control,exirped)
//301 302 redirect
//304 从缓存读取数据。(协商缓存策略，etag)
//404 not found
//500服务器错误
}
xhr 可以取消？
xhr.abort();//终止请求

2.fetch
fetch("url",
{method:"post",body:"",credencial:'include'})
.then(res=>res.json())
.then(res=>{console.log(res)})
//兼容性问题
//发出的请求，默认不是带cookie.credencial:'include'

3.jsonp(解决跨域)
动态创建script src指向没有跨域限制，onload
后台返回格式一定是，test('["111","222","333"]');
前端定义好test这个方法，通过形参就拿到数据了
jsonp可以做get请求，无法做post请求
jsonp不能取消

跨域和同源策略
所谓的同源策略其实是浏览器的一种机制，只允许在同源，也就是同协议、同域名、同端口的情况下才能进行数据交互。
1.jsonp，主要依赖的是script标签不受同源策略影响，src指向某一个接口的地址，同步需要传递callback回调函数名字，这样当接口调用成功后，本地创建的全局回调函数就会执行，并且接收到数据。不使用img标签的原因是img无法执行js语句
2.CORS,依赖服务端对前端的请求头信息进行放行，不做限制
Access-Control-Allow-Origin配置成*
3.代理访问，前端访问不存在跨域问题的代理服务器
 

面向对象
1.构造函数
function Test(name,age){
this.name = name;
this.age = age;
this.getName =function(){
return this.name;}
}
//Test();
var obj = new Test("liyang",100);
var obj2 = new Test("xiaoming",18);
2.原型
Test.prototype.getName = function(){}
//缺点是？原型容易被覆盖
Array.prototype.concat = ...
3.继承
function Test2(){
Test.apply(this,[name,age]]);
this.location = location;
} 
var obj = new Test2();
Test2.protype = Test.prototype;
Test2.prototype.constructor = Test2;
4.原型链
任何一个实例，通过原型链找到它上面的原型，该原型对象中的方法和属性，可以被所有的原型实例共享。
在原型上一级一级对比直到找到；

闭包：
 函数内部返回一个函数，而这个函数被外界所使用，导致函数以及外部函数都无法被释放，这样构成了闭包。垃圾回收机制无法被回收。
防抖：及时清理上一个定时器
节流：高频率触发变成低频率触发
http数据没有加密 端口：80
https传输过程加密安全性更好 端口：443 
https认证：客户端在发送SSL握手信息给服务端要求链接
服务端给客户端发证书
客户端检查证书 判断证书是否值得信任  有问题将是否继续的选择权交给客户端  客户端选择继续 就继续
服务端要求客户端发送证书 并且检查是否通过验证 失败则关闭链接 成功得到客户密钥 双方身份认证接受 双方确保彼此身份可靠。

跨域一般是后台处理 反向代理 jsonp（第三方接口）

事件循环 所有同步任务在主线上执行，形成一个执行栈

宏任务：ui渲染 script全部代码 setTimeout
微任务：process.nextTick(node独有)、promise

200成功
307内部重定向
403禁止访问
404找不到与URI相匹配的资源
500最常见的服务器端错误（可能是传过去的格式有问题）
503服务器暂时无法处理请求

一个页面从输入到页面加载显示完成，整个过程发生了什么
1.浏览器查找域名对应的IP地址(DNS查询：浏览器缓存，系统缓存，路由器缓存，ISP DNS缓存 根域名服务器)
2.浏览器向Web服务器发送一个HTTP请求(TCP三次握手)
3.服务器301重定向
4.浏览器跟踪重定向地址，请求另一个带www的网址
5.服务器处理请求
6.服务器返回一个HTTP相应(报头中把Content-type设置为'text/html')
7.浏览器DOM树构建
8.浏览器发送请求获取镶嵌在HTML中的资源（图片、视频、JS等）
9.浏览器显示完成页面
10.浏览器发送异步请求

es6新增的方法
1.let const 解构赋值 模板字符串 箭头函数
2.symbol map set三种常用的数据类型
3.箭头函数 没有自己的this this指向外部的this
4.promise解决了异步逻辑嵌套及回调地狱问题。定义了异步逻辑的三种状态pending rejected fullfilled搭配then,catch,all,race等方法以及async await语法糖，大量简化了异步操作
异步处理方案：回调函数 promise generator生成器  async await
5.reflect定义了一套标准化的数据操作的方式
6.proxy重新定义了数据劫持的能力
7.新增了class类的概念

单向数据流 组件之间的数据传递
双向数据绑定：数据发生改变时，视图也发生变化 当视图发生变化时 数据也发生变化

obj.defineProperty有什么缺点
无法监听es6的set map变化
无法监听class类型的数据
属性的新加或者删除也无法监听
数组元素的增加和删除也无法监听

jq专注视图层 直接操作dom vue专注数据层 通过数据的双向绑定 最终表现在dom层面 减少了dom操作

vue怎么定义全局css style标签上不加scoped的属性会默认为全局样式

vuex是vue.js的状态管理库 有五个核心属性：

state :定义了应用程序的状态 就是我们要管理的数据

getters:用于获取state中的状态 类似vue组件计算属性

mutations：用于修改state中的属性 是唯一可以修改state的地方

actions:用于异步操作和提交mutations,在actions中可以进行任何异步操作 最后再提交到mutations中同步修改state

modules：用于将store分割成模块  每个模块都拥有自己的state、mutation、action、getters和子模块 以便提高应用程序的可维护性

安装 vuex:npm install vuex --save

在main.js中 导入 Vuex，并使用Vue.use()方法注册vuex

路由守卫：（前置）

router.beforeEach((to,from,next) =>{第一个参数 包含的内容是切换后的路由对象，也就是跳转后的路由对象  第二个参数from，包含的内容是切换前的路由对象也就是跳转前的路由对象 第三个参数next是否往下执行，执行的话 如果不写就不跳转路由，操作将会终止})

（后置）：

router.afterEach((to,from) =>{第一个参数 to包含的内容是切换后的路由对象，就是跳转后的路由对象，第二个参数from 包含的内容是切换前的路由对象，也就是跳转前的路由对象})