面试问题记录 2019.3.22(中国铁道科学研究院)

问题:http的七层协议 握手几次

问题:es6

问题:浏览器是怎么渲染的

问题:mvvm 以及vue的了解 vue的双向绑定

问题:ajax 的请求头怎么知道是传输的是图片,ajax的优缺点

问题:异步请求和多次同步请求

问题:弹性盒理解

问题:怎么阻止用户打开新的页面

问题:前端存储有哪些


http的七层 应用层、表示层、会话层、传输层、网络层、数据链路层、物理层。图片理解:

三次握手:

    (1)第一次握手:Client将标志位SYN置为1,随机产生一个值seq=J,并将该数据包发送给Server,Client进入SYN_SENT状态,等待Server确认。
        (2)第二次握手:Server收到数据包后由标志位SYN=1知道Client请求建立连接,Server将标志位SYN和ACK都置为1,ack=J+1,随机产生一个值seq=K,并将该数据包发送给Client以确认连接请求,Server进入SYN_RCVD状态。
        (3)第三次握手:Client收到确认后,检查ack是否为J+1,ACK是否为1,如果正确则将标志位ACK置为1,ack=K+1,并将该数据包发送给Server,Server检查ack是否为K+1,ACK是否为1,如果正确则连接建立成功,Client和Server进入ESTABLISHED状态,完成三次握手,随后Client与Server之间可以开始传输数据了

四次握手,终止TCP连接,就是指断开一个TCP连接时,需要客户端和服务端总共发送4个包以确认连接的断开。在socket编程中,这一过程由客户端或服务端任一方执行close来触发

为什么建立连接是三次握手,而关闭连接却是四次挥手呢?
        这是因为服务端在LISTEN状态下,收到建立连接请求的SYN报文后,把ACK和SYN放在一个报文里发送给客户端。而关闭连接时,当收到对方的FIN报文时,仅仅表示对方不再发送数据了但是还能接收数据,己方也未必全部数据都发送给对方了,所以己方可以立即close,也可以发送一些数据给对方后,再发送FIN报文给对方来表示同意现在关闭连接,因此,己方ACK和FIN一般都会分开发送。


ES6的新语法:

let、const、展开符、结构赋值、字符串新增的方法(codePiontAt())、模版字符串、数组的from() copyWithin() includes()、箭头函数、symbol、proxy、generator函数、Promise对象、async、Class、export import


1.  浏览器会将HTML解析成一个DOM树,DOM 树的构建过程是一个深度遍历过程:当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。 
2. 将CSS解析成 CSS Rule Tree 。 
3. 根据DOM树和CSSOM来构造 Rendering Tree。注意:Rendering Tree 渲染树并不等同于 DOM 树,因为一些像 Header 或 display:none 的东西就没必要放在渲染树中了。

4.有了Render Tree,浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。下一步操作称之为Layout,顾名思义就是计算出每个节点在屏幕中的位置。 
5.再下一步就是绘制,即遍历render树,并使用UI后端层绘制每个节点。


MVVM 由 Model,View,ViewModel 三部分构成,Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑;View 代表UI 组件,它负责将数据模型转化成UI 展现出来,ViewModel 是一个同步View 和 Model的对象,保证视图和数据的一致性,这种轻量级的架构让前端开发更加高效、便捷。

在MVVM架构下,View 和 Model 之间并没有直接的联系,而是通过ViewModel进行交互,Model 和 ViewModel 之间的交互是双向的, 因此View 数据的变化会同步到Model中,而Model 数据的变化也会立即反应到View 上。

ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来,而View 和 Model 之间的同步工作完全是自动的,无需人为干涉,因此开发者只需关注业务逻辑,不需要手动操作DOM, 不需要关注数据状态的同步问题,复杂的数据状态维护完全由 MVVM 来统一管理

vue的理解:

Vue.js 可以说是MVVM 架构的最佳实践,专注于 MVVM 中的 ViewModel,不仅做到了数据双向绑定,而且也是一款相对比较轻量级的JS 库,API 简洁,很容易上手。

Vue.js 是采用 Object.defineProperty(属性拦截器) 的 getter 和 setter,并结合观察者模式来实现数据绑定的。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时,Vue 将遍历它的属性,用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter,但是在内部它们让 Vue 追踪依赖,在属性被访问和修改时通知变化。

 

Observer 数据监听器,能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者,内部采用Object.defineProperty的getter和setter来实现。
Compile 指令解析器,它的作用对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数。
Watcher 订阅者, 作为连接 Observer 和 Compile 的桥梁,能够订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数。
Dep 消息订阅器,内部维护了一个数组,用来收集订阅者(Watcher),数据变动触发notify 函数,再调用订阅者的 update 方法。

当执行 new Vue() 时,Vue 就进入了初始化阶段,一方面Vue 会遍历 data 选项中的属性,并用 Object.defineProperty 将它们转为 getter/setter,实现数据变化监听功能;另一方面,Vue 的指令编译器Compile 对元素节点的指令进行扫描和解析,初始化视图,并订阅Watcher 来更新视图, 此时Wather 会将自己添加到消息订阅器中(Dep),初始化完毕。
当数据发生变化时,Observer 中的 setter 方法被触发,setter 会立即调用Dep.notify(),Dep 开始遍历所有的订阅者,并调用订阅者的 update 方法,订阅者收到通知后对视图进行相应的更新。


ajax的请求头新增一个自定义的参数用来判断传递的是什么类型,

AJAX的优点:

  改善的用户体验--AJAX允许网页持续更新,但只需要和服务 器交互很少的数据。这样,就能在不必整个更新网页的情况下更新网页的一部分,增加浏览器性能,用户体验更好。

  减少带宽的使用并增加速度- AJAX使用客户端脚本来和web服务器通讯,用Javascript来交互数据。使用AJAX能减少网路负载和带宽使用并且只获得你所需的数据。

  增强兼容性- AJAX和ASP.NET,J2EE,PHP或者其他任何语言兼容。它几乎支持所有流行的浏览器比如IE5及以上版本,Firefox1.0及以上版本,Safari1.2及以上版本,Opera7.6及以上版本,还有RockMelt。

  支持异步处理-请求能被有效的处理,动态内容加载被提升到一个更高的层次,性能也得到了增强。

   更容易导航-AJAX应用能被用来简化用户在网页间的过渡,而不需要使用传统的前进后退键 

AJAX的缺点:

  浏览器不兼容-因为各个浏览器对js的支持性不同。ie 和 chrome 的兼容就最为常见,不过微软已经想谷歌妥协了。

    不安全性-网页可能很难调试,增加网页的代码量,你的网页更可能遇上严峻的安全威胁。

  增加Web服务器的负载-如果你增加一个自动更新的功能,它每隔几秒向服务发起请求,那么就会增加服务器的负载


同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式。

用户填写所有信息后,提交给服务器,等待服务器的回应(检验数据),是一次性的。信息错误又要重新填写!

异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的通讯方式。

当用户填写完一条信息后,该信息会自动向服务器提交,然后服务器响应客户端,在此过程中,用户依然在填写表格的信息,即向服务器请求多次,节省了用户的时间,提高了用户的体验

具体问题具体分析,没有一定的偏向那一种。


弹性盒子布局与多列布局只能用于手机端,因为IE9以上才支持。 弹性盒子本质:盒子里面的项目(设置了flex比分)会被拉伸来填充空间(自适应),或者压缩来防止溢出。项目默认行内排列。当容器宽度太小时,即使项目设置了width也会被压缩。

比较新的布局方式:旨在提供一个更加有效的方式来布置,对齐和分布在容器之间的各项内容,即使它们的大小是未知或者动态变化的。
弹性布局的主要思想是让容器有能力来改变项目的宽度和高度,以填满可用空间(主要是为了容纳所有类型的显示设备和屏幕尺寸)的能力。

  • 应用恰当的弹性布局对用户十分友好。页面中所有元素可以随着用户的偏好缩放。
  • 对于同时喜欢流动和定宽布局的设计师来说,弹性布局是完美的,因为前两种布局的优点在弹性布局中都能找到。

怎么阻止用户打开新的页面。目前我没有想到什么办法。面试官问的是,当用户在进行答题的时候怎么阻止用户打开新的页面。打开新的标签页,这个怎么阻止,如果用户想去搜索答案新打开一个浏览器不就行吗。难不成这我也要阻止?我只能是控制用户点击当前页面打开新的窗口时我能阻止。

 本地存储localstorage、sessionstorage,cookies、application cache离线缓存,这个需要配置文件。扩展其他的前端存储方式(不常用)web SQL database(貌似已经取消掉了)
 
以上内容都来自网络,整理。

  增加Web服务器的负载-如果你增加一个自动更新的功能,它每隔几秒向服务发起请求,那么就会增加服务器的负载


同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式。

用户填写所有信息后,提交给服务器,等待服务器的回应(检验数据),是一次性的。信息错误又要重新填写!

异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的通讯方式。

当用户填写完一条信息后,该信息会自动向服务器提交,然后服务器响应客户端,在此过程中,用户依然在填写表格的信息,即向服务器请求多次,节省了用户的时间,提高了用户的体验

具体问题具体分析,没有一定的偏向那一种。


弹性盒子布局与多列布局只能用于手机端,因为IE9以上才支持。 弹性盒子本质:盒子里面的项目(设置了flex比分)会被拉伸来填充空间(自适应),或者压缩来防止溢出。项目默认行内排列。当容器宽度太小时,即使项目设置了width也会被压缩。

比较新的布局方式:旨在提供一个更加有效的方式来布置,对齐和分布在容器之间的各项内容,即使它们的大小是未知或者动态变化的。
弹性布局的主要思想是让容器有能力来改变项目的宽度和高度,以填满可用空间(主要是为了容纳所有类型的显示设备和屏幕尺寸)的能力。

  • 应用恰当的弹性布局对用户十分友好。页面中所有元素可以随着用户的偏好缩放。
  • 对于同时喜欢流动和定宽布局的设计师来说,弹性布局是完美的,因为前两种布局的优点在弹性布局中都能找到。

猜你喜欢

转载自www.cnblogs.com/MrHaoRoot/p/10579799.html