CSS基础(03)
1、简单了解浏览器是如何渲染页面和加载页面
浏览器就是通过HTTP 协议与服务器进行通信，取到数据之后进行渲染的过程，如图：
这图是园友的看着挺符合我思路就直接拿来用了，从服务器端返回的是HTML代码，浏览器渲染、加载也是从这里开始；
浏览器有不同的厂商，所以内部肯定会有不同的处理方式，所以这里只是记录一些简单的，况且本篇文章属于基础范畴；
1.1 渲染过程大概如下：
1、浏览器解析html源码，然后创建一个 DOM树（无样式）。在DOM树中，每一个HTML标签都有一个对应的节点，并且每一个文本也都会有一个对应的文本节点，DOM树的根节点就是 documentElement，对应的是html标签。
2、浏览器解析CSS代码，计算出最终的样式数据。对CSS代码中非法的语法她会直接忽略掉(可以通过调试发现)，解析CSS的时候会按照如下顺序来定义优先级：浏览器默认设置<外链样式<内联样式<html中的style<improtant。
3、构建出DOM树，并且计算出样式数据后，下一步就是构建一个渲染树（rendering tree）。渲染树和DOM树有点像，但是是有区别的。DOM树完全和html标签一一对应，但是渲染树会忽略掉不需要渲染的元素，比如head、display:none的元素等。而且一大段文本中的每一个行在渲染树中都是独立的一个节点，渲染树中的每一个节点都存储有对应的css样式。
4、一旦渲染树创建好了，浏览器就可以根据渲染树直接把页面绘制到屏幕上。
备注：也许渲染树是与DOM树同时构建的；
1.2一个渲染过程的例子
例如有下面这样一段HTML代码：
<html>
<head>
<title>Beautiful page</title>
</head>
<body>
<p>
Once upon a time there was
a looong paragraph...
</p>
<div style="display: none">
Secret message
</div>
<div><img src="..." /></div>
...
</body>
</html>
那么DOM树是完全和HTML标签一一对应的，如下所示：
documentElement (html)
head
title
body
p
[text node]
div
[text node]
div
img
...
而渲染树就不同了，她只有哪些需要绘制出来的元素，所以head 以及被隐藏的div都不会出现在渲染树中。
root (RenderView)
body
p
line 1
line 2
line 3
...
div
img
...
1.3 重绘和重排（repaints and reflows）
每个页面至少在初始化的时候会有一次重排操作。任何对渲染树的修改都有可能会导致下面两种操作：
页面重排
就是渲染树的一部分必须要更新,并且节点的尺寸发生了变化,这就会触发重排操作。
页面重绘
部分节点需要更新，但是没有改变他的集合形状，比如改变了背景颜色，这就会触发重绘。
什么情况下会触发重绘或重排
加或删除DOM节点
设置 display: none;（重排并重绘） 或者 visibility: hidden（只有重排）
移动页面中的元素
增加或者修改样式
改变窗口大小，滚动页面等
2、浏览器解析Css(Css 关键字查询)
浏览器CSS匹配不是从左到右进行查找，而是从右到左进行查找。比如 DIV#divBox p span.red{color:red;}，浏览器的查找顺序如下：先查找 html 中所有 class=’red’ 的 span 元素，找到后，再查找其父辈元素中是否有p元素，再判断p的父元素中是否有 id 为 divBox 的 div 元素，如果都存在，则 CSS 匹配上。浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。Firefox 称这种查找方式为 keyselector(关键字查询)，所谓的关键字就是样式规则中最后(最右边)的规则，上面的 key 就是 span.red。
3、总结
1、要进一步了解的话需要看HTTP以及浏览器是如何工作的；
2、为什么要先有Dom树而不是直接渲染到界面，我想可能跟缓存、以及安全机制等有关（通过DOM 树来检查是否能生成一个树）；
3、Dom数是与HTML对应，渲染树数Dom的可视化树；
推荐书籍：高性能javascript
参考 http://www.jianshu.com/p/e141d1543143
CSS基础(03)的更多相关文章
- css基础03
就近原则执行粉色.而不是全覆盖,只有样式冲突的地方才会覆盖. 会执行粉色和12px.后来者居上 高度宽度内外边距这些不会继承. 子元素会继承行高, 1.5是行高是字体大小的1.5倍的意思. 有了!im ...
- javascript基础03
javascript基础03 1. 算术运算符 后增量/后减量运算符 ++ ,-- 比较运算符 ( >, <, >=, <=, ==, !=,===,!== ) 逻辑运算符( ...
- CSS 基础总结
CSS基础 Doctype 声明位于文档中的最前面,处于 标签之前.告知浏览器的解析器,用什么文档类型 规范来解析这个文档. 在标准模式中,浏览器根据规范呈现页面: 在混杂模式中,页面以一种比较宽松的 ...
- CSS 基础知识点 样式 选择器 伪类
CSS 基础知识点汇集 版权声明:这篇博客是别人写的,大神博客地址 : https://www.cnblogs.com/Mtime/p/5184685.html 1.CSS 简介 CSS 指层叠样式表 ...
- CSS基础知识筑基
01.CSS 简介 CSS 指层叠样式表 (Cascading Style Sheets),对HTML网页内容进行统一外观样式设计和管理,给网页进行各种装饰,让她变得美观,是HTML的化妆师.(Cas ...
- 前端开发：css基础知识之盒模型以及浮动布局。
前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西? 为什么这个浮动没有效果? 这个问题楼主已经回答了n遍.今天则是把 ...
- CSS基础总结
CSS基础总结链接地址:http://segmentfault.com/a/1190000002773955
- javaSE基础03
javaSE基础03 生活中常见的进制:十进制(0-9).星期(七进制(0-6)).时间(十二进制(0-11)).二十四进制(0-23) 进制之间的转换: 十进制转为二进制: 将十进制除以2,直到商为 ...
- CSS基础篇之了解CSS和它的基本属性
CSS是什么? CSS英文全名是Cascading Style Sheets翻译过来就是层叠样式表,它主是把网页表现与内容分离的一种样式设计语言.这种语言能优化我们编程,把东西简化和优化写法,而且不同 ...
随机推荐
- Windows SDK 实现不规则窗口介绍
不规则窗口在程序界面设计中能提供非常好的用户体验,以下是我程序运行时的效果图: 以下是代码,注意需要修改一些简单的位置,如资源ID,项目的头文件等,这些是根据你创建的win32程序的项目名改变的,我的 ...
- EF DataBase First生成model的验证
如何避免在EF自动生成的model中的DataAnnotation被覆盖掉 相信很多人刚接触EF+MVC的时候,DataBase First模式生成model类中加验证信息的时候,会在重新生成mode ...
- 转：MVC2表单验证失败后，直接返回View，已填写的内容就会清空，可以这样做；MVC2输出文本;MVC2输出PDF文件
ViewData.ModelState.AddModelError("FormValidator", message); foreach (string field in Requ ...
- 【转】JAVA之动态代理
转自:像少年啦飞驰 代理设计模式 定义:为其他对象提供一种代理以控制对这个对象的访问. 代理模式的结构如下图所示. 动态代理使用 java动态代理机制以巧妙的方式实现了代理模式的设计理念. 代理模式示 ...
- ES PES TS
1.流媒体系统结构 ES:elemental stream 基本数据流: PES:packet elemental stream分组的基本数据流: 然后把PES打包成PS ,TS流,PS:progra ...
- Android 生成含签名文件的apk安装包
做android开发时,必然需要打包生成apk文件,这样才能部署.作为一个完善的apk,必然少不了签名文件,否则下次系统无法进行更新. 一.签名文件的制作及打包生成APK文件 签名文件比较流行的制作方 ...
- POJ 3977 Subset
Subset Time Limit: 30000MS Memory Limit: 65536K Total Submissions: 3161 Accepted: 564 Descriptio ...
- delphi7 开发布局
delphi7界面布局(就是各种框框,代码管理器之类的东东)好了的,为什么以打开个新项目或者下次进入开发界面是环境的布局全部变了,如何才能锁定窗口布局? 在菜单栏最右边,有一个按钮save curre ...
- 软件测试技术（二）——使用等价类划分的方法进行的UI测试
测试的目标程序 程序代码 import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.File; impo ...
- ASP.NET将word文档转换成pdf的代码
一.添加引用 using Microsoft.Office.Interop.Word; 二.转换方法 1.方法 C# 代码 /// <summary> /// 把Word文件转换成pdf文 ...