day05面试总结

一.虚拟DOM

虚拟dom就是一个普通的JS对象，是一个用来描述真实dom的JS对象，因为它不叫真实dom，所以叫它虚拟dom。

虚拟dom可以很好的跟踪当前dom状态，因为他会根据当前数据生成一个描述当前dom结构的虚拟dom，然后数据发送变化时，又会生成一个新的虚拟dom，而这两个虚拟dom恰恰保存了变化前后的状态。然后通过diff算法，计算出两个前后两个虚拟dom之间的差异，得出一个更新的最优方法（哪些发生改变，就更新哪些）。可以很明显的提升渲染效率以及用户体验。

二.HTTP和HTTPS的区别

1.HTTPS是HTTP协议的安全版本，HTTP协议的数据传输是明文的，是不安全的，HTTPS使用了SSL/TLS协议进行了加密处理，相对更安全。

2.HTTP 和 HTTPS 使用连接方式不同，默认端口也不一样，HTTP是80，HTTPS是443。

3.HTTPS 由于需要设计加密以及多次握手，性能方面不如 HTTP。

4.HTTPS需要SSL，SSL 证书需要钱，功能越强大的证书费用越高。

三.VUE的双向绑定原理

Vue3.0中的响应式采用了ES6中的Proxy方法，Proxy 对象用于定义基本操作的自定义行为。

proxy相当于在目标对象上设置了一层拦截，当外部想访问目标对象时，就会经过这个拦截，而这时proxy就可以对访问进行过滤或修改。当访问经过拦截时进行判断，该属性是否是目标对象的属性，如果是那么就将其值返回出来。然后就可以用proxy进行修改等操作。

四.HTTP状态码

HTTP是服务器返回给客户端的，常用来判断和分析当前web服务器的运行状况。

状态码200：
状态码200表示服务器响应成功，也就是服务器找到了客户端请求的内容，并且将内容返回给客户端。

状态码302：
状态码302代表临时跳转。例如：URL地址A可以向URL地址B上跳转，但这并不是永久性的，在经过一段时间后，URL地址A还可能向URL地址C上跳转。

状态码301 ：
状态码301和状态码302相似，不同的是状态码301往往代表的是永久性的重定向，值得注意的是，这种重定向跳转，从严格意义来讲不是服务器跳转，而是客户端跳转的。这个“跳”的动作是服务器是通过回传状态码301来下达给客户端的，让客户端完成跳转。

状态码304：
服务器通过返回状态码304可以告诉客户端请求资源成功，但是这个资源不是由服务器提供返回给客户端的，而是客户端本地浏览器缓存中就有的这个资源，因为可以从缓存中获取这个资源，从而节省传输的开销。

状态码403：
状态码403代表请求的服务器资源权限不够，也就是说，没有权限去访问服务器的资源，或者请求的IP地址被封掉了。

状态码404：
状态码404代表服务器上没有该资源，或者说服务器找不到客户端请求的资源，是最常见的请求错误码。

状态码500：
状态码500代表程序错误，也就是说请求的网页程序本身报错了。在服务器端的网页程序出错。由于现在的浏览器都会对状态码500做一定的处理，所以在一般情况下会返回一个定制的错误页面。
 

五.移动端适配原理

移动端页面设计一般分为: 

1.响应式布局

通过媒体查询技术实现不同屏幕都有良好的用户体验；一稿多端使用。

2.移动端布局

pc端和移动端的是相互的独立，pc端一套页面，移动端一套页面

3.移动端布局主要以像素分辨率、视口、相对单位，选择单位换算单位进行适配。

其中最重要的就是选择单位和单位换算：

1. VW和VH

vw(Viewport Width)和vh(Viewport  Height)是前端开发中的一个动态单位，是一个相对于网页视口的单位
系统会将视口的高度和宽度分为100份，1vw就占用视口宽度的百分之一，1vh就占用视口高度的百分之一
vw、vh与百分比不同的是，百分比永远都是以父元素作为参考，而vw和vh永远都是以视口作为参考

2.REM

rem就是root em，和em一样是前端开发中的一个动态单位

只参考html标签的文字大小，如果html标签没有设置，使用浏览器默认的字体大小(默认是16px,即 1rem=16px)

rem和em的区别在于，rem是一个相对于根元素(html元素)字体大小的单位，除了根元素以外，其他祖先元素的字体大小不会影响rem的尺寸
 

单位抉择：

em，rem是font-size的大小，一般用于文字适配，其中em适合局部适配，rem适合用于整个页面的文字适配

vw和vh是参考视口的宽高绝对的，一般用于设置大盒子的尺寸

vw和vh都是通过视口决定，通过min-width和min-height来限制大小。

移动端布局采用的方式rem进行布局。
 

rem+媒体查询：

根据不同的屏幕，换算出每种字体的比例

• 盒子的尺寸是以rem为单位

• 需要利用媒体查询来设置当屏幕的大小不同时，html标签采用不同font-size

• 像具体的内容处理跟以前一样

• 以rem代替px，百分比可以保留