DAY21刷面试题

GET和POST的区别

可缓存/不可缓存
get请求是幂等的，用于对服务器资源不会产生影响的场景（请求一个网页的资源），get请求的数据是可以缓存的；
post请求不幂等，用于对服务器资源会产生影响的情景，查询对数据有副作用（注册用户这一类），是不可缓存的。
传参
get传参，参数在url中
post传参，参数在请求体中
安全性
get较为不安全；
post较为安全；
准确的说两者都不安全，都是明文传输的，在路过公网的时候都会被访问到，不管是url还是header还是body，都会被访问到，要想做到安全，就需要使用https。
参数长度
get参数长度有限，是比较小的；
post传参长度不受限制。
发送数据
post传参发送两个请求包，一个是请求头一个是请求体，请求头发送后服务器进行验证，验证通过就会给客户端发送一个100-continue的状态码，然后就会发送请求体。
字符编码
get在url上传输的时候只允许ASCII编码。

浏览器和服务器对GET方法中URK长度限制的范围

IE浏览器URL最大限制为2083个字符
Firefox浏览器URL最大限制为65536个字符
Safari浏览器URL最大限制为80000个字符
Opera浏览器URL最大限制为190000个字符
Google浏览器URL最大限制为8182个字符

主流的服务器对get方法中url的长度限制范围：

• Apache (Server)：能接受最大url长度为8192个字符。
• Microsoft Internet Information Server(IIS)：能接受最大url的长度为16384个字符。

所以说浏览器URL最长不能超过2083个字符才能在所有浏览器和服务器正常工作。

常见的HTTP请求方式

• GET：向服务器获取数据
• POST：将实体提交到指定的资源，通常会造成服务器资源修改
• PUT：上传文件，更新数据
• DELETE：删除服务器上的对象
• HEAD：获取报文首部，与GET对比，不返回报文主体部分
• OPTIONS：询问支持的请求方法，用来跨域请求
• CONNECT：要求在与代理服务器通信时建立隧道，使用隧道进行TCP通信
• TRACE：显示服务器收到的请求，主要用于测试或者诊断

DNS协议

DNS是域名系统系统的缩写，提供的是一种主机名到IP地址的转换服务，是一个由分层的DNS服务器组成的分布式数据库，定义了主机如何查询到这个分布式数据库的方式的应用层协议。能够使人更方便的访问互联网，而不用去记住能够被机器直接读取的IP数串。

DNS服务器解析域名的过程

• 首先在浏览器的缓存中查找对应的IP地址，查到直接返回，查不到下一步
• 将请求发送给本地DNS服务器，在本地域名服务器缓存中查询，查到返回，查不到下一步
• 本地DNS服务器想根域名服务器发送请求，根域名服务器会返回一个所查询的顶级域名服务器地址
• 本地DNS服务器向顶级域名服务器发送请求，接受请求的服务器查询自己的缓存，如果有记录，就返回查询结果，如果没有就返回相关的下一级的权威域名服务器的地址
• 本地DNS服务器向权威域名服务器发送请求，域名服务器返回对应的结果

• 本地DNS服务器将返回结果保存在缓存中，便于下次使用
• 本地DNS服务器将返回结果返回给浏览器

常见的浏览器内核

（1） IE 浏览器内核：Trident 内核，也是俗称的 IE 内核；

（2） Chrome 浏览器内核：统称为 Chromium 内核或 Chrome 内核，以前是 Webkit 内核，现在是 Blink内核；

（3） Firefox 浏览器内核：Gecko 内核，俗称 Firefox 内核；

（4） Safari 浏览器内核：Webkit 内核；

（5） Opera 浏览器内核：最初是自己的 Presto 内核，后来加入谷歌大军，从 Webkit 又到了 Blink 内核；

（6） 360浏览器、猎豹浏览器内核：IE + Chrome 双内核；

（7） 搜狗、遨游、QQ 浏览器内核：Trident（兼容模式）+ Webkit（高速模式）；

（8） 百度浏览器、世界之窗内核：IE 内核；

（9） 2345浏览器内核：好像以前是 IE 内核，现在也是 IE + Chrome 双内核了；

（10）UC 浏览器内核：这个众口不一，UC 说是他们自己研发的 U3 内核，但好像还是基于 Webkit 和 Trident ，还有说是基于火狐内核。

v-router路由的hash模式和history模式的区别

1）hash模式
hash魔兽是开发中默认的模式，他的URL带着一个#，www.zj.com/#/vue，他的hash值就是#/vue
hash值会出现在URL里面，但是不会出现在http请求中，对后端没有影响。所以改变hash值，不会重新加载页面。这种模式的llq支持度很好，低版本IE浏览器也支持。
hash路由被称为是前段路由，已经是spa的标配。
原理
hash模式的主要原理就是onhashchange()事件

window.onhashchange = function(event){
	console.log(event.oldURL, event.newURL);
	let hash = location.hash.slice(1);
}

在页面的hash值发生变化时，无需向后盾发起请求，window就可以监听事件的变化，并按规则加载相应代码。hash值变化对应的url都会被浏览器记录下来，这样浏览器就能实现页面的前进和后退；虽然没有请求后端服务器，但是页面的hash值和对应的URL关联起来了。

2）histroy模式
histroy模式的URL中没有#，使用的是传统的路由分发模式；用户在输入一个url时，服务器会接收这个请求，并解析这个url，然后做出相应的逻辑处理。
当使用history模式时，URL就像这样：abc.com/user/id相比hash模式更加好看。但是，history模式需要后台配置支持。如果后台没有正确配置，访问时会返回404。
切换历史状态： 包括forward()、back()、go()三个方法，对应浏览器的前进，后退，跳转操作。

如果想要切换到histroy模式，就要进行以下配置（后端也要进行配置）：

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

vue子组件和父组件执行顺序

加载渲染过程
1、父组件beforeCreate
2、父组件created
3、父组件beforeMount
4、子组件 beforeCreate
5、子组件created
6、子组件beforeMount
7、子组件mounted
8、父组件mounted

更新过程
1、父组件beforeUpdate
2、子组件beforeUpdate
3、子组件updated
4、父组件updated

销毁过程
1、父组件beforeDestroy
2、子组件beforeDestroy
3、子组件destroyed
4、父组件destroyed

对SSR的理解

SSR就是服务端渲染，就是将vue在客户端把标签渲染成HTML工作放在服务端完成，然后再把HTML直接返回给客户端。

SSR的优势：

• 更好的SEO
• 首屏加载速度更快

SSR的缺点：

• 开发条件会受到限制，服务器端渲染只支持beforeCreate和created两个钩子
• 当需要一些外部扩展库时需要特殊处理，服务单渲染应用程序也需要处于Node.js的运行环境
• 更多的服务端负载

vue的性能优化有哪些

1）编码阶段

• 尽量减少data中的数据，data中的数据会增加getter和setter，会收集对应的watcher
• v-if和v-for不能连用
• 如果需要使用v-for给每项元素绑定事件时使用事件代理
• spa页面采用keep-alive缓存组件
• 更多情况下使用v-if代替v-show
• key保证唯一
• 使用路由懒加载、异步组件
• 防抖、节流
• 第三方模块按需导入
• 长列表滚动到可视区域动态加载
• 图片懒加载

2）SEO优化

• 预渲染
• 服务端渲染SSR

3）打包优化

• 压缩代码
• 多线程打包happypack
• 使用cdn加载第三方模块
• Tree Shacking

4）用户体验

link和@import的区别

两者都是外部引用CSS的方式

• link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事物；@import属于CSS范畴，只能加载CSS
• link引用CSS的时候，在页面载入时同时加载；@import是在CSS2.1提出的，低版本浏览器不兼容不支持
• link支持使用JS控制DOM去改变样式；@import不支持

display：none和visibility：hindden的区别

1）在渲染树中

• display：none 会让元素完全从渲染树中消失。渲染时不会占据任何空间
• visibility：hidden 不会让元素从渲染树中消失，渲染的元素还会占据相应的空间，只是内容不可见

2）是否是继承属性

• display：none 是非继承属性，子孙节点会随着父节点从渲染树消失，通过修改子孙节点的属性也无法显示
• visibility：hidden 是继承属性，子孙节点消失是由于继承了hidden，通过设置visibility：visible可以让子孙节点显示

3）修改常规文档中元素的display会造成文档的重排，但是修改visibility属性只会造成本元素的重绘

4）如果使用读屏器，设置display：none的内容不会被读取，设置为visibility：hidden的内容会被读取

伪元素和伪类的作用和区别

• 伪元素：在内容元素的前后插入额外的元素或者样式，但是这些元素实际上并不会在文档中生成。只在外部显示可见，但不会在文档的源代码中找到他们。

p::before {content:"第一章：";}
p::after {content:"Hot!";}
p::first-line {background:red;}
p::first-letter {font-size:30px;}

• 伪类：将特殊的效果添加到特定的选择器上，他是已有元素上添加类别的，不会产生新的元素。

a:hover {color: #FF00FF}
p:first-child {color: red}

• 总结：伪类是通过在元素选择器上加入伪类改变元素状态，而伪元素是通过对元素的操作进行对元素的改变。

margin和padding的使用场景

• 需要在border外侧添加空白，且空白处不需要背景（色）时，使用margin
• 需要在border内存添加空白，且空白处需要背景（色）时，使用padding