关键词：
前后端分离中前端DOM渲染页面
一、技术概述
html 仅仅作为静态文件，客户端端在请求时，服务端将数据返回给客户端，再通过本地的js代码读取返回的数据再使用DOM将这些数据渲染到html中，保留的代码中天然的展示层和数据层的分离；在我们校园帮帮网的项目中用于在页面加载时接受后端问题列表数据然后现实在页面上。
二、技术详情
渲染流程
1、浏览器解析html源码，然后创建一个DOM树。
在DOM树中，每一个HTML标签都有一个对应的节点(元素节点),并且每一个文本也都有一个对应的节点(文本节点)。DOM树的根节点就是documentElement，对应的是html标签。
2、浏览器解析CSS代码，计算出最终的样式数据。
对CSS代码中非法的语法它会直接忽略掉。解析CSS的时候会按照如下顺序来定义优先级：浏览器默认设置，用户设置，外联样式，内联样式，html中的style(嵌在标签中的行间样式)。
3、创建完DOM树并得到最终的样式数据之后，构建一个渲染树。
渲染树和DOM树有点像，但是有区别。DOM树完全和html标签一一对应，而渲染树会忽略不需要渲染的元素(head、display:none的元素)。渲染树中每一个节点都存储着对应的CSS属性。
4、当渲染树创建完成之后，浏览器就可以根据渲染树直接把页面绘制到屏幕上。
渲染树和Dom树的关系
渲染对象和Dom元素相对应，但这种对应关系不是一对一的，不可见的Dom元素不会被插入渲染树，例如head元素。另外，display属性为none的元素也不会在渲染树中出现（visibility属性为hidden的元素将出现在渲染树中）。
还有一些Dom元素对应几个可见对象，它们一般是一些具有复杂结构的元素，无法用一个矩形来描述。例如，select元素有三个渲染对象——一个显示区域、一个下拉列表及一个按钮。同样，当文本因为宽度不够而折行时，新行将作为额外的渲染元素被添加。另一个多个渲染对象的例子是不规范的html，根据css规范，一个行内元素只能仅包含行内元素或仅包含块状元素，在存在混合内容时，将会创建匿名的块状渲染对象包裹住行内元素。
一些渲染对象和所对应的Dom节点不在树上相同的位置，例如，浮动和绝对定位的元素在文本流之外，在两棵树上的位置不同，渲染树上标识出真实的结构，并用一个占位结构标识出它们原来的位置。
示例代码
//页面加载时启动页面
$(document).ready(function(e) {
//获取当前登录用户
var userVO = localStorage.getExpire("userVO");
if(userVO == null){
//登录过期
alert("登录过期，请重新登录");
window.location.href = "login.html";
}
//获取临时板块
getBlock();
//首页按时间排序
changeQuestionPage(page, path);
questTextBoxErrorInit();
});
三、技术使用中遇到的问题和解决过程
在一开始不知道ready() 函数不能和
同时使用，在一个页面中两个都写了没发现找了很久的bug...还有就是不知到怎么判断DOM有没有加载完毕，学习了一个document.readyState状态来查看是否加载完毕了。
四、总结
之前组内一直在想分页要如何实现，决定使用jQuery后又在考虑要怎么让前端把数据展示在页面上，后来学习到了ready()函数和上学期web课程中的DOM，然后突然就发现原来DOM是这么有用啊...上学期web课的时候还一直搞不懂这个比php好用在哪...
五、参考博客
前后端分离及react的一些研究
...对英才网企业线前端不断的完善过程中，我们尝试进行了前后端分离，引入Node环境、以及在使用React的过程中，自行开发DOM渲染框架，解决React兼容低版本IE的问题，在这个过程中，我们有了一些经验和体会，希望本文对您有所... 查看详情
前后端分离及不分离
前后端不分离 在前后端不分离的应用模式中，前端页面看到的效果是由后端控制，由后端渲染页面或重定向，后端需要控制前端的展示，前端与后端的耦合度很，这种应用模式比较适合纯网页应用，但是当后端对接APP时，APP... 查看详情
前后端分离与前后端不分离
前后端不分离 在前后端不分离的应用模式中，前端页面看到的效果都是由后端控制的，由后端渲染页面或重定向，也就是后端需要控制前端的展示，前端与后端的耦合度很高。 这种应用模式比较适合纯网页应用，但是当... 查看详情
关于前后端分离与不分离
什么是前后端分离？ 在前后端分离的应用模式中，后端只需要返回前端所需的数据，不用渲染HTML页面与效果。页面的展示与效果所需的数据，数据的加载方式，主要由前端决定。 核心思想是前端html页面通过ajax调用... 查看详情
//……关于前后端分离与不分离
什么是前后端分离？ 在前后端分离的应用模式中，后端只需要返回前端所需的数据，不用渲染HTML页面与效果。页面的展示与效果所需的数据，数据的加载方式，主要由前端决定。 核心思想是前端html页面通过ajax调用后端... 查看详情
前后端分离与不分离
前后端不分离 在前后端不分离的应用模式中，前端页面看到的效果都是由后端控制，由后端渲染页面或重定向，也就是后端需要控制前端的展示，前端与后端的耦合度很高。 这种应用模式比较适合纯网... 查看详情
前后端分离
开发模式在Web开发模式中，有两种开发模式前后端不分离前后端分离前后端分离优势在前后端不分离模式中，前端页面看到的效果都是由后端控制，由后端渲染页面或重定向，也就是后端需要控制前端的展示，前端与后端的耦合... 查看详情
前后端分离与不分离
前后端不分离 在前后端不分离的应用模式中，前端页面看到的效果都是由后端控制，由后端渲染页面或重定向，也就是后端需要控制前端的展示，前端与后端的耦合度很高。 这种应用... 查看详情
前后端分离与前后端不分离的区别
前后端不分离 在前后端不分离的应用模式中，前端页面看到的效果都是由后端控制，由后端渲染页面或重定向，也就是后端需要控制前端的展示，前端与后端的耦合度很高。 这种应用模式比较适合... 查看详情
怪咖------前后端分离与不分离的区别------
前后端分离，首先所有的程序以数据为基础的，没有数据的程序没有实际意义，程序的本质就是对程序的增删改查，其实前后端分离就是把数据操作和显示分离出来。前端专注做数据显示，通过文字，图片或者图标等方... 查看详情
对drf的初步认识
web应用模式1.前后端不分离 在前后端不分离的应用模式中，前端页面看到的效果都是由后端控制，由后端渲染页面或重定向，也就是后端需要控制前端的展示，前端与后端的耦合度很高。 这种应用模式比较适合纯网页应... 查看详情
前后端分离与不分离,一点点理解
1>为什么要前后端分离?现有开发模式的使用场景前后端职责不清开发效率的问题对前端发挥的局限2>前后端分离会带来什么变化? 1.彻底解放前端 制作页面的时候,不需要后台配置服务器环境,可以自己配置路由,前... 查看详情
5_前后端分离
前后端分离属于软件架构的一种。其核心思想是把前端项目（Node.js实现的）和后端项目独立部署到不同的服务器上，前端项目在通过Ajax请求服务器端项目Restful接口实现数据交互。使用前后端分离架构的项目在项目组中往往配备... 查看详情
5_前后端分离
前后端分离属于软件架构的一种。其核心思想是把前端项目（Node.js实现的）和后端项目独立部署到不同的服务器上，前端项目在通过Ajax请求服务器端项目Restful接口实现数据交互。使用前后端分离架构的项目在项目组中往往配备... 查看详情
什么是前后端分离与前后端不分离
我起初认为前后端分离是，在软件开发过程中前后端分工就叫做前后端分离，其实是前端所有用到的数据都是后端通过异步接口的方式提供的，前端只管页面的展示及效果。 前端和后端不分离的时候，前端的页面也... 查看详情
前后端分离与不分离的区别总结
参考技术A前后端不分离： 在前后端不分离的情况下，前端页面看到的效果都是有后端控制的，由后端渲染页面或重定向，也就是后端需要控制前端的展示，前端与后端的耦合度很高。这种模式比较适合纯文本... 查看详情
前后端分离的简谈
...在前端html中嵌入后台代码2.提高工作效率，分工更加明确前后端分离的工作流程可以使前端只关注前端的事，后台只关心后台的活，两者开发可以同时进行，在后台还没有时间提供接口的时候，前端可以先将数据写死或者调用本... 查看详情
前后端分离方案以及技术选型
参考技术A作者：关开发一.什么是前后端分离？理解前后端分离大概可以从3个方面理解：1.交互形式2.代码组织形式3.开发模式与流程1.1交互形式前后端不分离后端将数据和页面组装、渲染好了之后，向浏览器输出最终的html；浏... 查看详情