[置顶] 浅析前端渲染与后端渲染

时间:2022-12-22 21:09:03

前端渲染与后端渲染本质上可以理解为:浏览器渲染与服务器渲染

  备注:以下纯属本人个人的一些总结与看法,如有异同,欢迎大家指教;

渲染的本质:字符串的拼接,将数据渲染进固定格式的html代码中,形成最终的html显示在用户页面上。

对比:

         1.前端渲染(数据传回前端显示)----  

              优点:不占用服务器运算资源(解析模板)

                弊端:占用客户端运算资源,

         2.后端渲染(1.后端配置模板  2.数据渲染并返回) ----  吐/喷

              优点:模板统一在后端,前端省事,不占用客户端运算资源(解析模板)

                弊端:占用服务器运算资源,请求的数据量偏大,前端的交互样式更改需要联动修改

           3.jQuery的html,append等方法

              实现:直接插入DOM节点或者内容

                优点:前端可控,操作DOM结构比较方便

                弊端:各种字符串,DOM节点的拼接比较麻烦   

  

           最大区别:后端渲染&前端渲染区别:后端吐出拼好的hml页面    

特点:

          1.前端渲染:比较灵活,使用与DOM操作比较频繁或交互复杂的业务场景。不必反复请求,理论上更加符合前后端分离。                                      编码效率高。

          2.后端渲染:相对模块化,适用于片展示型的页面,利于SEO,因为后端已经渲染好了,所以加载体验相对较好,网速差时                                    表现较差。编码效率较低。


从后端渲染到前端渲染,发生了什么改变?

  *计算机任务的转移

         原本有服务器渲染的任务交给客户端,大量用户访问时,大大减轻了后端的压力。性能大大提高,因为服务器做的事情确实减           少了。而且随着客户端硬件的发展,也能处理好多数的渲染任务。

   *放弃前端权限

         将页面整个的UI逻辑交给客户端的话,一些有经验的用户可能会看到一些本不该看到的页面,违反了安全原则。所以后端不能            轻信从前端传来的数据,一定要做好过滤与验证。



结语

  前端渲染与后端渲染的选择,更多的是要看业务场景。