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翻译过来就是层叠样式表,它主是把网页表现与内容分离的一种样式设计语言.这种语言能优化我们编程,把东西简化和优化写法,而且不同 ...
随机推荐
- Mysql 临时变量的 定义 和 赋值 Set 和 Into 赋值; Swith Mysql版本 Case When的用法
一:临时变量的定义和赋值 DECLARE spot SMALLINT; -- 分隔符的位置 DECLARE tempId VARCHAR(64); -- 循环 需要用到的临时的Cid DECLARE ...
- Deferred的那些知识
在移动开发中的各种中,我们一定会遇到异步回调的问题,比如: 1:Css3执行动画完毕, 回调 2:Jquery Animate动画的执行完毕, 回调 3:Ajax的执行(并行.串行),回调 等等 ...
- mac里vmware fusion桥接设置
1 桥接模式网络连接:选择以太网 2 在虚拟机操作系统里设置好ip,手动设置,将虚拟机当成一台存在的物理机设置 3 在宿主MAC偏好设置-网络-以太网-高级-硬件, 配置:自动改为 手工, 速度:选择 ...
- 使用java解析和制作二维码
项目结构 文件源码 QR.zip 第一步:导入zxing的两个架包 core.jar和javase.jar 第二步:使用工具类 MatrixToImageWriter.java package uti ...
- HTTP请求中浏览器缓存
本文导读:浏览器缓存机制,其实主要就是HTTP协议定义的缓存机制.客户端缓存是否需要是可以在服务端代码上控制的.那就是响应头.响应头告诉缓存器不要保留缓存,缓存器就不会缓存相应内容:如果请求信息是需要 ...
- hdu 5407 CRB and Candies（组合数+最小公倍数+素数表+逆元）2015 Multi-University Training Contest 10
题意: 输入n,求c(n,0)到c(n,n)的所有组合数的最小公倍数. 输入: 首行输入整数t,表示共有t组测试样例. 每组测试样例包含一个正整数n(1<=n<=1e6). 输出: 输出结 ...
- WebView介绍
本文主要对WebView进行介绍,包括webView 4个可以定制的点.设置WebView back键响应.控制网页的链接仍在webView中跳转.显示页面加载进度.处理https请求.利用addJa ...
- 《Python 学习手册4th》 第十四章 迭代器和解析
''' 时间: 9月5日 - 9月30日 要求: 1. 书本内容总结归纳,整理在博客园笔记上传 2. 完成所有课后习题 注:“#” 后加的是备注内容 (每天看42页内容,可以保证月底看完此书) “重点 ...
- IOS-day01_OC中类的创建以及使用
OC中定义类 // 设计一个车类 @implementation Car : NSObject // 这个大括号里面写所有的属性 { @public int wheels ;//轮子个数 double ...
- 《浅析各类DDoS攻击放大技术》
原文链接:http://www.freebuf.com/articles/network/76021.html FreeBuf曾报道过,BT种子协议家族漏洞可用作反射分布式拒绝服务攻击(DRDoS a ...