Fork me on GitHub

前端性能优化与原理实践之【服务器端渲染】

前端性能优化之服务器端渲染!

一、客户端渲染

客户端渲染模式下,服务端会把渲染需要的静态文件发送给客户端,客户端加载过来之后,自己在浏览器里跑一遍 JS,根据 JS 的运行结果,生成相应的 DOM。

PS:页面上呈现的内容,你在 html 源文件里里找不到

二、服务器端渲染

当用户第一次请求页面时,由服务器把需要的组件或页面渲染成 HTML 字符串,然后把它返回给客户端。客户端拿到手的,是可以直接渲染然后呈现给用户的 HTML 内容,不需要为了生成 DOM 内容自己再去跑一遍 JS 代码。

PS:页面上呈现的内容,我们在 html 源文件里也能找到

三、服务器渲染的性能优化

服务器端渲染只不过是分担了客户端的压力给服务器一部分,同时加大了服务器的压力。

服务器端渲染主要针对两个方向:

  • 加快首屏渲染
  • 有利于 SEO 优化。

四、服务器端渲染的应用场景

服务端渲染本质上是本该浏览器做的事情,分担给服务器去做。这样当资源抵达浏览器时,它呈现的速度就快了。对于小公司来说,我们把这么多台浏览器的渲染压力集中起来,分散给相比之下数量并不多的服务器,服务器肯定是承受不住的。

优化首屏渲染和 SEO 优化首先采取其他优化的方法,其他方法用完之后效果不明显的话,再采取服务器端渲染,毕竟需要申请多台服务器进行服务器渲染。