一年半前端工作经验试水杭州:我是如何拿下网易、阿里和滴滴 offer 的 (3)

React的render函数返回的是一个DOM描述,结果仅仅是轻量级的js对象,reactjs在调用setState的时候会更新DOM,而且是先更新virtual dom,然后和实际dom比较,最后更新dom。React厉害的地方不是说他比真实的dom速度快,而是你不敢数据怎么变化,我都以最小的代价来更新视图。方法就是我在内存当中使用新的数据来构建一个virtual dom,然后和旧DOM进行比较,找出差异,然后更新到DOM节点上。当我们修改dom上的一个节点对应的state,react会立即将他标记为“脏状态”,在事件循环的最后才重新渲染所有的脏节点。在实际的代码中,会对新旧两棵树进行一次深度优先遍历,这样每一个节点都会有一个唯一的标记,没遍历到一个节点,就把该节点和新的树进行比较,如果有差异就记录到一个对象中,最后把差异应用到真正的DOM树上。算法实现步骤为:用js对象模拟DOM树,比较两颗虚拟DOM的差异,把差异应用到真正的DOM树上,DOM DIFF采用的是增量更新的方式,类似于打补丁。React需要为节点添加key来保证算法的效率。Key属性可以帮助react定位到正确的节点进行比较。从而大幅度减少DOM操作,提高性能。

MVC和MVVM了解么?可以大致说一下双向绑定的实现方式么?

Modal层代表数据模型,可以再modal层定义修改和操作数据的逻辑,view代表UI层,负责将数据转换成UI展现出来,viewModal是同步view和modal的对象。用户操作view层,view数据变化会同步到modal上,modal数据变化会立即反应到view中,viewModal通过实现双向绑定来将view和modal连接到一起。而双向绑定,我们可以从脏检查到标记更新来回答。

前端路由的实现方式
从react当中我们可以说说react router的使用和原理,以及h5中的historyAPI,pushState和replaceState来回答。

a组件是b组件的父组件,b组件是c组件的父组件,如何让渲染后的b和c在同级
通过react16中不返回容器组件可以实现,也可以通过“曲线救国”的方式来实现。

react SSR了解么
react ssr有很多种实现方式,但是原理不变,目的就是为了减少首屏白屏时间以及有好的SEO。对于实现方式我们可以从next.js以及webpack-isomorphic-tools来说实现。

浏览器相关

http三次握手后拿到HTML是如何进行加载的?

考核的主要是浏览器加载页面的机制。大概可以从浏览器拿到HTML,自上而下开始解析,大致分为解析DOM,解析CSSOM,构建渲染树,布局阶段以及绘制阶段来说明。其实尽可能的详细说明,比如构建DOM的时候分别通过Bytes、characters、tokens、Nodes最终到DOM等。回答也可以扩展repaint和reflow等浏览器优化。

简述浏览器优化

一年半前端工作经验试水杭州:我是如何拿下网易、阿里和滴滴 offer 的

200 From cache和200 OK有什么区别?

顾名思义是form cache是强缓存,不会和服务器通信,而200OK即为服务器处理结果正确。以此可以从浏览器缓存、输入url回车、刷新页面以及强制刷新等方面展开缓存方面的讲解。

http2.0新特性了解吗

1、2采用二进制而非文本格式,二进制协议解析起来更高效。
2、采用多路复用,即为同一个tcp连接上可以建立多个http连接,那样的话,我们雪碧图就没有必要了。
3、使用报文头压缩,降低了开销。
4.可以让服务器主动向浏览器推送消息,支持服务端推送,也就是服务端可以对客户端有多个响应。

post和get有什么区别?

1 、GET把参数包含在URL中,POST通过request body传递参数。
2、GET在浏览器回退时是无害的,而POST会再次提交请求。 GET产生的URL地址可以被Bookmark,而POST不可以。 GET请求会被浏览器主动cache,而POST不会,除非手动设置。 GET请求只能进行url编码,而POST支持多种编码方式。 GET请求参数会被完整保留在浏览器历史记录里,而POST中的参数不会被保留。 GET请求在URL中传送的参数是有长度限制的,而POST么有。 对参数的数据类型,GET只接受ASCII字符,而POST没有限制。 GET比POST更不安全,因为参数直接暴露在URL上,所以不能用来传递敏感信息。 GET参数通过URL传递,POST放在Request body中。
3、GET和POST是什么?HTTP协议中的两种发送请求的方法。
4、HTTP是什么?HTTP是基于TCP/IP的关于数据如何在万维网中如何通信的协议。5、HTTP的底层是TCP/IP。所以GET和POST的底层也是TCP/IP,也就是说,GET/POST都是TCP链接。GET和POST能做的事情是一样一样的。你要给GET加上request body,给POST带上url参数,技术上是完全行的通的。
6、在我大万维网世界中,还有另一个重要的角色:运输公司。不同的浏览器(发起http请求)和服务器(接受http请求)就是不同的运输公司。 虽然理论上,你可以在车顶上无限的堆货物(url中无限加参数)。但是运输公司可不傻,装货和卸货也是有很大成本的,他们会限制单次运输量来控制风险,数据量太大对浏览器和服务器都是很大负担。业界不成文的规定是,(大多数)浏览器通常都会限制url长度在2K个字节,而(大多数)服务器最多处理64K大小的url。超过的部分,恕不处理。如果你用GET服务,在request body偷偷藏了数据,不同服务器的处理方式也是不同的,有些服务器会帮你卸货,读出数据,有些服务器直接忽略,所以,虽然GET可以带request body,也不能保证一定能被接收到哦。
7、GET产生一个TCP数据包;POST产生两个TCP数据包。
8、对于GET方式的请求,浏览器会把http header和data一并发送出去,服务器响应200(返回数据);而对于POST,浏览器先发送header,服务器响应100 continue,浏览器再发送data,服务器响应200 ok(返回数据)。也就是说,GET只需要汽车跑一趟就把货送到了,而POST得跑两趟,第一趟,先去和服务器打个招呼“嗨,我等下要送一批货来,你们打开门迎接我”,然后再回头把货送过去。因为POST需要两步,时间上消耗的要多一点,看起来GET比POST更有效。因此Yahoo团队有推荐用GET替换POST来优化网站性能。但这是一个坑!跳入需谨慎。为什么?1. GET与POST都有自己的语义,不能随便混用。2. 据研究,在网络环境好的情况下,发一次包的时间和发两次包的时间差别基本可以无视。而在网络环境差的情况下,两次包的TCP在验证数据包完整性上,有非常大的优点。3. 并不是所有浏览器都会在POST中发送两次包,Firefox就只发送一次。

构建工具

了解过webpack编译过程吗?

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zzzpjg.html