一、渲染引擎
(1)浏览器组成部分
- 用户界面:用户看到的浏览器的样子
- 浏览器引擎:让浏览器运行的程序接口集合,主要是查询和操作渲染引擎
- 渲染引擎:解析HTML/CSS,将解析的结果渲染到页面的程序
- 网路:进行网络请求的程序
- UI后端:绘制组合选择框及对话框等基本组件的程序
- JS解释器:解释执行JS代码的程序
- 数据存储:浏览器存储相关的程序 cookie/storage
(2)浏览器的组成部分
(3)渲染的概念
渲染
用一个特定的软件将模型(一个程序)转化为用户能看到的图像的过程
渲染引擎
内部具备一套绘制图像方法集合,渲染引擎可以让特定的方法执行把HTML/CSS代码解析成图像显示在浏览器窗口中
(4)页面渲染过程
二、声明HTML
(1)声明HTML
- DOCTYPE(大小写不敏感)
- 写DOCTYPE:标准模式
- 不写DOCTYPE:怪异/混杂模式
- console.log(document.compatMod); 查看是哪种模式
- CSS1Compat(标准模式)与BackCompat(怪异模式)
三、渲染模式
(1)IE6以前的浏览器兼容性
- 百分比高度被准 确 应用
- 内联元素设置宽高影响尺寸
- table单元格中的图片的vertial-align默认值为bottom
- 某些元素的字体样式不继承body的设置,特别是font-size
- overflow:hidden在某些情况下不生效
(2)IE6开始的浏览器兼容性
问1:在各浏览器都有自己的渲染标准的背景下,造成了网页开发设计的发展迟缓,甚至阻碍了整个互联网技术的发展。
【解决方案】标准渲染模式(标准模式)的诞生(W3C标准解析渲染)
问2:之前建设的网站不支持标准模式
【解决方案】保留以前解析渲染的标准(混杂/怪异模式 -> 浏览器向后兼容)
(3)三种渲染模式
HTML5
<!DOCTYPE html>
HTML4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
(4)文档类型定义
- DTD:文档类型定义(Document Type Definition),它是一个标准
- 种类:严格版本(Strict)、过渡版本(Transitional)、框架版本(Frameset)
- Strict DTD:文档结构与表现形式实现了更高的分离,页面的外观采用CSS来控制
- Transitional DTD:包含了HTML4.01版本的全部标记,从HTML的使用过度到XHTML
- Frameset DTD:使用
<frameset>
以框架的形式将网页分为多个文档
标准
标准就是在进行解析的时候,可能不会有标签特性,或者给你解析成其他东西,或者不给你解析,或者直接容错进行兼容性样式设置(不是所有的兼容都会摒弃老的标准)