有次面试被问到打开一个url浏览器至少发起几次http请求,刚开始有点懵,心想浏览器至少发生一次http请求啊这个有什么好问的?get不到面试官的care点!回头去网上查了一下资料才恍然大悟原来是要考察服务端渲染和客户端渲染的认识。那到底什么是客户端渲染什么是服务端渲染呢?下面让我细细道来。
服务端渲染
说白了就是服务端接收到客户端发来的html字符串时,然后使用模板引擎(ejs、jade等)将数据传到模板,最后返回一个数据+html的字符串给浏览器,浏览器自动解析成一个完成的html页面,很明显浏览器渲染过程只发生了一次网络请求,服务端渲染过程下面挂上张李鹏周老师的图:
客户端渲染
客户端向服务端发起请求,服务端不做任何处理,直接以原文件的形式返回给客户端,然后渲染html页面,当遇到ajax请求,有发起一次网络请求根据接口返回相应的数据,客户端结合模板引擎(art-template)和数据拼装最后以dom形式插入html页面,当然这种方式是比较老套的方式了,如当下用得火热的 spa 框架,Angular、React、Vue等。很明显浏览器渲染过程发生了两次网络请求,客户端渲染过程再次挂上张李鹏周老师的图:
服务端渲染和客户端渲染的优缺点
服务端渲染和客户端渲染抉择
那么我们到底什么时候用服务端渲染什么时候用客户端渲染呢?一般网站既不是纯异步也不是纯服务端渲染出来的例如京东的商品列表就采用的是服务端渲染,目的了为了 SEO 搜索引擎优化,而它的商品评论列表为了用户体验,而且也不需要 SEO 优化,所以采用是客户端渲染。
总结
若网站是纯服务端渲染,那么浏览该网站至少发起一次请求,否则浏览该网站至少发起两次请求
原文参考:/article/5a11155fb520d115154c8fa1