DOM渲染的过程大致分为三个阶段:

  后端渲染

  前端渲染

  独立DOM渲染(前后端相结合渲染)

1、后端渲染:DOM树的生成完全是在后端服务器中完成的,后端服务器的程序会把需要的数据拼合成一个类似于前端DOM节点组成的DOM树,并转化成字节流作为HTTP Response的body返回浏览器

2、前端渲染:前端渲染把DOM生成的主体逻辑都放在前端,后端之后返回一个框架的DOM结构,然后由js代码把页面的主题渲染到框架中。可以解决后端渲染中出现的各种体验问题。

3、主要是把前两个阶段中,一些交给纯后端DOM渲染逻辑分离的不好,但是交给纯前端DOM渲染又会造成较高延迟的部分单独分离出来形成了一独立DOM渲染阶段,保留的代码中天然的展示层和数据层的分离,又把API请求的累计延迟减少了很多,从SEO角度来说渲染结果对搜索引擎也很友好。当然,这样的做法需要给整体的架构增加一个独立的单元,给开发和部署都带来了更高复杂性。

浏览器会解析三个东西:
(1)一个是HTML/SVG/XHTML,事实上,Webkit有三个C++的类对应这三类文档。解析这三种文件会产生一个DOM Tree。
CSS,解析CSS会产生CSS规则树。
Javascript,脚本,主要是通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree.
 (2)解析完成后,浏览器引擎会通过DOM Tree 和 CSS Rule Tree 来构造 Rendering Tree。注意:
Rendering Tree 渲染树并不等同于DOM树,因为一些像Header或display:none的东西就没必要放在渲染树中了。
CSS 的 Rule Tree主要是为了完成匹配并把CSS Rule附加上Rendering Tree上的每个Element。也就是DOM结点。也就是所谓的Frame。
然后,计算每个Frame(也就是每个Element)的位置,这又叫layout和reflow过程。
 (3)最后通过调用操作系统Native GUI的API绘制。

最新文章

  1. 再谈 X-UA-Compatible 兼容模式
  2. Selenium定位二 --多个元素定位方法 和层级定位方法
  3. 【javascript基础】2、函数
  4. 使用grunt打包前端代码
  5. org.springframework.dao.TransientDataAccessResourceException: PreparedStatementCallback.....Parameter index out of range (1 > number of parameters, which is 0).;
  6. P/Invoke .NET调用win32API
  7. CP,SCP 命令(包括windows与linux用xshell互传)
  8. svn cleanup failed问题解决
  9. 学习总结 HTML简单应用
  10. 关于web请求中 获取真实IP
  11. RPGJS 进阶分析之 如何使用RMXP导出的数据
  12. 执行testng appium用例失败,自动截图
  13. 【Nginx】启动过程
  14. Jsoup 抓取和数据页 认识HTTP头
  15. Navicat连接不上MySQL
  16. thinkphp3.2自定义常量
  17. iOS 6.0中UIViewController被弃用的一些方法
  18. bzoj 4569: [Scoi2016]萌萌哒
  19. bat获取系统时间修改系统密码
  20. 冲刺每日报告--Day1

热门文章

  1. 0620 ALT选择竖排 虚函数的优缺点 浅拷贝深拷贝 操作系统
  2. pycharm的第一次使用(其实并不是第一次)
  3. 使用tensorboard报错 ImportError: No module named past.builtins
  4. Linux 中 sqlite3 基本操作
  5. linux指令【参考鸟哥的Linux私房菜】
  6. 修改Tomcat的端口号方法
  7. CSIC_716_20191205【TCP-解决粘包问题、UDP模板】
  8. css reset初始化样式
  9. 【JZOJ3293】【BZOJ4416】【luoguP3989】阶乘字符串
  10. 高危预警| SQL数据库成主要攻击对象,或引发新一轮大规模勒索