文章目录

  • 一、浏览器与页面渲染
  • 1、浏览器组成部分
  • 2、渲染到底是什么？
  • 页面渲染的过程
  • 渲染树
  • 二、渲染模式
  • 1、IE 盒子模型
  • 2、标准盒子模型
  • 3、IE6以前的浏览器兼容性
  • 4、IE6开始的浏览器兼容性
  • 5、渲染模式
  • 怪异/混杂模式
  • 标准模式

一、浏览器与页面渲染

1、浏览器组成部分

  1. 用户界面：用户看到的浏览器的样子
  2. 浏览器引擎：让浏览器运行的程序接口集合，主要是查询和操作渲染引擎
  3. 渲染引擎：解析HTML、CSS，将解析的结构渲染到页面的程序
  4. 网络：进行网络请求的程序
  5. UI后端：绘制组合选择框及对话框等基本组件的程序
  6. JS解释器：解释执行JS代码的程序
  7. 数据存储：浏览器存储相关的程序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以前的浏览器兼容性

  1. 百分比高度被准确使用，受外部盒子高度影响（现在浏览器是以内容高度来判断的）
  2. 内联元素设置宽高影响尺寸，他是生效的
  3. table单元格的图片的vertial-align默认值为bottom（一般来说我们是baseline）
  4. 某些字体样式不继承body的设置，特别是font-size
  5. overflow: hidden在某些情况下不生效

4、IE6开始的浏览器兼容性

问题：在各浏览器都有自己的渲染标准的背景下，造成了网页开发设计的发展迟缓，甚至阻碍了整个互联网技术的发展

** 解决方案：标准渲染模式的诞生（W3C标准解析渲染） **

问题：之前建设的网站不支持标准模式

** 解决方案：保留以前解析渲染的标准（混杂/怪异模式 -> 浏览器向后兼容） **

5、渲染模式

怪异/混杂模式

  • 不写DOCTYPE：怪异、混杂模式
document.compatMode // BackCompat 向后兼容

标准模式

  • 写DOCTYPE： <!DOCTYPE html>标准模式
document.compatMode // CSS1Compat
  • 三种标准模式：
  1. HTML5声明文档模式：<!DOCTYPE html>
  2. 4.01：<!DOCTYPE HTML ..........strict.dtd">
  3. XHTML的：<!DOCTYPE html ....XHTML...strict.dtd">
  • DTD：文档类型定义Document Type Definition
  • 种类：严格版本Strict、过渡版本Transitional、框架版本Frameset
  • Strict DTD: 文档结构与表现形式实现了更高的分离，页面的外观用CSS控制
  • Transitional DTD: 包含了HTML4.01版本的全部标记，从HTML的使用过渡到XHTML
  • Frameset DTD: 使用以框架的形式将网页分位多个文档