浏览器的组成部分
![](https://img.haomeiwen.com/i16660341/e9cd2e9990a5f710.png)
页面渲染的过程
![](https://img.haomeiwen.com/i16660341/16fef44cc8f8ffdf.png)
- 其中DOM代表的是JS中生成的DOM,或对DOM的操作
renderTree的构建过程
![](https://img.haomeiwen.com/i16660341/0159414f975a18a9.png)
- 根据html结构生成domTree 通过cssom形成样式tree
- domtree和样式tree有机结合后,生成rendertree
浏览器渲染模式的种类
-
以下为HTML的声明,告知浏览器使用哪种模式进行渲染
<!DOCTYPE html>
- 如果使用<!DOCTYPE html>代表HTML5的标准模式
- 如果未写任何声明,则代表怪异模式。
- 怪异模式下,ie6的盒子模型的宽高会受border、padding影响、行内元素可以设置宽高。其他浏览器怪异模式已和标准模式一致。
console.log(document.compatMode);
CSS1Compat: 标准模式
BackCompat: 怪异模式
DTD含义
![](https://img.haomeiwen.com/i16660341/b3c03f4854c47cad.png)
- 其中XHTML是要求标签必须闭合,标签名要小写等。
- DTD是一共规范,但页面如果没有遵守规范也不会报错。
- 现代所有的网站都要求使用html5的声明方式。
网友评论