zoukankan      html  css  js  c++  java
  • 传统的DOM渲染方式?

    传统的DOM渲染方式?
     DOM的渲染指的是对于浏览器中展现给用户的DOM文档的生成的过程。
    DOM渲染的演化过程,大致可以分为可以分为三个阶段:
     (1).纯后端渲染
      采用这样的渲染方式,就是每一个页面中,在Chrome中展开得到的DOM,和服务器返回的DOM是基本一致的(可以通过查看网页源代码来得到服务器返回的DOM)。当然,这里是“基本”一致,因为实际操作中,页面或多或少还是会带有一些js代码,并且在浏览器端中运行这些js代码来对DOM进行的渲染,不过这一部分js代码并不影响DOM的主体是由服务端返回的。纯后端的DOM渲染,DOM树的生成完全是在后端服务器中完成的,相当于后端服务器的程序会把各种的数据拼成一个DOM树,并转换成一个字节流作为HTTP Response的body返回给浏览器。
     (2).纯前端渲染
      纯前端渲染可以解决纯后端渲染中出现的各种体验问题。如下图所示,纯前端渲染把DOM生成的主题逻辑都放在了前端,这时后端只会返回一个框架的DOM结构,比如只带一个容器元素的的DOM,然后由js代码把页面的主题渲染到这个容器元素中。
       (3).服务端的js渲染结合前端渲染
      主要是把前两个阶段中,一些交给纯后端DOM渲染逻辑分离的不好,但是交给纯前端DOM渲染又会造成较高延迟的部分单独分离出来形成了一独立DOM渲染阶段,保留的代码中天然的展示层和数据层的分离,又把API请求的累计延迟减少了很多,从SEO角度来说渲染结果对搜索引擎也很友好。当然,这样的做法需要给整体的架构增加一个独立的单元,给开发和部署都带来了更高复杂性。
           DOM渲染的三种方式,虽然第三个阶段最适于提供最优的使用体验,但不一定实际开发中最佳的方式,在特定的场景下,可以根据场景的特性来选择最简单的方法来完成。比如在网络延迟很低的情况下(内部网络),就没有必要选取服务器端js渲染的方式,纯前端渲染就可以带来低延迟的使用体验。

  • 相关阅读:
    (总结)Nginx/LVS/HAProxy负载均衡软件的优缺点详解
    一个自动安装LNMP的简洁Shell脚本
    (总结)Nginx配置文件nginx.conf中文详解
    Linux 的启动流程
    Linux运维文档之nginx
    nginx索引目录配置
    nginx实现图片防盗链(referer指令)
    nginx记录分析网站响应慢的请求(ngx_http_log_request_speed)
    C# 使用WinRar命令压缩和解压缩
    localStorage存值取值以及存取JSON,以及基于html5 localStorage的购物车
  • 原文地址:https://www.cnblogs.com/wdp888/p/11238266.html
Copyright © 2011-2022 走看看