前后端分离中前端DOM渲染页面

前后端分离中前端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好用在哪...

五、参考博客

javascript原生判断DOM是否加载完毕执行方法