一.虚拟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,百分比可以保留