文章目录
- 一、浏览器与页面渲染
- 1、浏览器组成部分
- 2、渲染到底是什么？
- 页面渲染的过程
- 渲染树
- 二、渲染模式
- 1、IE 盒子模型
- 2、标准盒子模型
- 3、IE6以前的浏览器兼容性
- 4、IE6开始的浏览器兼容性
- 5、渲染模式
- 怪异/混杂模式
- 标准模式
一、浏览器与页面渲染
1、浏览器组成部分
- 用户界面：用户看到的浏览器的样子
- 浏览器引擎：让浏览器运行的程序接口集合，主要是查询和操作渲染引擎
- 渲染引擎：解析HTML、CSS，将解析的结构渲染到页面的程序
- 网络：进行网络请求的程序
- UI后端：绘制组合选择框及对话框等基本组件的程序
- JS解释器：解释执行JS代码的程序
- 数据存储：浏览器存储相关的程序cookie、storage
2、渲染到底是什么？
- 渲染：用一个特定的软件将模型（一个程序）转换为用户能看得到的图像的过程
- 渲染引擎：内部具备一套绘制图像方法集合，渲染引擎可以让特定的方法执行把HTML、CSS代码解析成图像显示在浏览器窗口中
页面渲染的过程
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-K7ynw8RA-1657960351867)(https://obohe.com/i/2022/07/16/nr54rk.png)]
渲染树
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QM00VjLh-1657960351870)(https://obohe.com/i/2022/07/16/nr4x9k.png)]
二、渲染模式
1、IE 盒子模型
- width = border-left + padding-left
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LWr1iE88-1657960351871)(https://obohe.com/i/2022/07/16/nqkdaj.png)]
2、标准盒子模型
- width = content（不算border跟padding）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CgNg1jUy-1657960351871)(https://obohe.com/i/2022/07/16/nr5hh7.png)]
3、IE6以前的浏览器兼容性
- 百分比高度被准确使用，受外部盒子高度影响（现在浏览器是以内容高度来判断的）
- 内联元素设置宽高影响尺寸，他是生效的
- table单元格的图片的vertial-align默认值为bottom（一般来说我们是baseline）
- 某些字体样式不继承body的设置，特别是font-size
- overflow: hidden在某些情况下不生效
4、IE6开始的浏览器兼容性
问题：在各浏览器都有自己的渲染标准的背景下，造成了网页开发设计的发展迟缓，甚至阻碍了整个互联网技术的发展
** 解决方案：标准渲染模式的诞生（W3C标准解析渲染） **
问题：之前建设的网站不支持标准模式
** 解决方案：保留以前解析渲染的标准（混杂/怪异模式 -> 浏览器向后兼容） **
5、渲染模式
怪异/混杂模式
- 不写DOCTYPE：怪异、混杂模式
document.compatMode // BackCompat 向后兼容标准模式
- 写DOCTYPE：
<!DOCTYPE html>标准模式
document.compatMode // CSS1Compat- 三种标准模式：
- HTML5声明文档模式：
<!DOCTYPE html> - 4.01：
<!DOCTYPE HTML ..........strict.dtd"> - XHTML的：
<!DOCTYPE html ....XHTML...strict.dtd">
- DTD：文档类型定义
Document Type Definition - 种类：严格版本
Strict、过渡版本Transitional、框架版本Frameset
- Strict DTD: 文档结构与表现形式实现了更高的分离，页面的外观用CSS控制
- Transitional DTD: 包含了HTML4.01版本的全部标记，从HTML的使用过渡到XHTML
- Frameset DTD: 使用以框架的形式将网页分位多个文档
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
