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翻译过来就是层叠样式表,它主是把网页表现与内容分离的一种样式设计语言.这种语言能优化我们编程,把东西简化和优化写法,而且不同 ...
随机推荐
- 教你如何将 Sublime 3 打造成 Python/Django IDE开发利器
Sublime Text 是一款非常强大的文本编辑器, 下面我们介绍如何将 Sublime Text 3 打造成一款 Python/Django 开发利器: 1. 安装 Sublime Text 3 ...
- Sourcetree add Submodule
LMXMN041:ximalaya will.wei$ git submodule add https://github.com/willbin/WeLib02.git Submodule Cloni ...
- hdu 3496 Watch The Movie
题意:题目给定N部电影,每部电影有时长和价值,要求看M部电影,并且时间控制在L以内,转化为背包问题,让我们在N件物品中找正好M件物品塞进容量L的包中,求最大的价值.// dp[i][j] 表示在容量为 ...
- Oracle 隔离级别
From 11gR2: http://download.oracle.com/docs/cd/E11882_01/server.112/e16508/consist.htm#CNCPT621 一. A ...
- SQL优化34条
我们要做到不但会写SQL,还要做到写出性能优良的SQL,以下为笔者学习.摘录.并汇总部分资料与大家分享! (1) 选择最有效率的表名顺序(只在基于规则的优化器中有效): ORACLE 的解析 ...
- 也说Autofac在MVC的简单实践：破解在Controller构造函数中的实例化 - winhu
相信大家对Autofac并不陌生,很多人都在使用.本文只是介绍一下本人在使用时的一点想法总结. 在使用一个框架时,肯定要去它的官网查阅一下.autofac的官网给出了一些经典的使用案例.如注册容器: ...
- 【原创】用python实现shell的tail操作
在工作过程中发现监控实时刷新文件时,不是那么的任性. 故结合shell中的tail,做了一个类似tail的python脚本. 详情如下: #!/usr/bin/env python #coding=u ...
- Web服务器（Apache）虚拟主机的配置
一.定义 所谓虚拟主机是指在一台服务器里运行几个网站,提供WEB.FTP.Mail等服务. 二.虚拟主机的实现方法有三种: 基于IP的方法,基于主机名的方法和基于端口的法官法. ...
- Python多线程和Python的锁
Python多线程 Python中实现多线程有两种方式,一种基于_thread模块(在Python2.x版本中为thread模块,没有下划线)的start_new_thread()函数,另一种基于th ...
- .net mvc HtmlHelper扩展使用
如果是你是从webform开始接触.net,你应该记得webform开发中,存在自定义控件这东西,它使得我们开发起来十分方便,如今mvc大势所趋,其实在mvc开发时,也存在自定义控件这么个东西,那就是 ...