浏览器是如何进行界面渲染的？

  • 不同的渲染引擎的具体做法稍有差异，但是大体流程都是差不多的，下面以 chrome渲染引擎 的 渲染流程来说明：

  • 获取 HTML ⽂件并进⾏解析，生成一棵 DOM 树（DOM Tree）

  • 解析 HTML 的同时也会解析 CSS，⽣成样式规则（Style Rules）

  • 根据 DOM 树和样式规则，生成一棵渲染树（Render Tree）

  • 进行布局（Layout）(重排)，即为每个节点分配⼀个在屏幕上应显示的确切坐标位置

  • 进⾏绘制（Paint）(重绘)，遍历渲染树节点，调⽤ GPU(图形处理器) 将元素呈现出来

前端如何实现即时通讯？websocket

严格意义上: HTTP协议只能做到客户端请求服务器, 服务器做出响应, 做不到让服务器主动给客户端推送消息!
那么如果服务器数据更新了, 想要即时通知到客户端怎么办呢 ? (即时通信需求)
即时通信需求: 服务器数据一有更新, 希望推送给到浏览器
提问的回答重心:

  • 即时通信有哪些方案?
  • 为什么使用了其中某一个方案! websocket

基于Web的前端，存在以下几种可实现即时通讯的方式：

短轮询 (历史方案)
开个定时器, 每隔一段时间发请求 (实时性不强，影响性能)

Comet - ajax长轮询(历史方案)
发送一个请求, 服务器只要数据不更新, 就一直阻塞 (服务器压力过大)

SSE
(利用了http协议, 流数据的传输, 并不是严格意义的双向通信, 无法复用连接)

WebSocket (主流)
性能和效率都高!

说一下websocket

websocket是一种网络通信协议，是HTML5开始提供的一种在单个TCP连接上进行全双工通信的协议，这个对比着HTTP协议来说，HTTP协议是一种无状态的、无连接的、单向的应用层协议，通信请求只能由客户端发起，服务端对请求做出应答处理。
HTTP协议无法实现服务器主动向客户端发起消息，websocket连接允许客户端和服务器之间进行全双工通信，以便任一方都可以通过建立的连接将数据推送到另一端。websocket只需要建立一次连接，就可以一直保持连接状态

什么是轮询

轮询：隔一段时间进行一次查询或者询问

短轮询：

通过客户端定期轮询来询问服务端是否有新的信息产生，如果有则返回，没有就不响应， 缺点：也是显而易见，轮询间隔大了则信息不够实时，轮询间隔过小又会消耗过多的流量，增加服务器的负担。

长轮询：

是需要服务端进行更改来进行支持，客户端向服务端发送请求时，如果此时服务端没有新的信息产生，并不立刻返回，而是Hold住一段时间等有新的信息或者超时再返回，客户端收到服务器的应答后继续轮询。可以看到长轮询比短轮询可以减少大量无用的请求，并且客户端接收取新消息也会实时不少。减少http请求对性能的优化是很有利的，所以他是短轮询上的一个优化 缺点：终归来讲还是一个http请求，只是进行了变化而已，而且如果客户端不请求，服务端有数据的话，也会一直累积在那，不能实现实时的双向通信
此时的webSocket也就应需而生了