1、简单了解浏览器是如何渲染页面和加载页面 

          浏览器就是通过HTTP 协议与服务器进行通信,取到数据之后进行渲染的过程,如图:

  

这图是园友的看着挺符合我思路就直接拿来用了,从服务器端返回的是HTML代码,浏览器渲染、加载也是从这里开始;

浏览器有不同的厂商,所以内部肯定会有不同的处理方式,所以这里只是记录一些简单的,况且本篇文章属于基础范畴;

1、浏览器下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的。     
2、在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都已经下载完)。    
3、如果遇到语义解释性的标签嵌入文件(JS脚本,CSS样式),下载过程会启用单独连接进行下载。     
4、并且在下载后进行解析,解析过程中,停止页面所有往下元素的下载。    
5、样式表在下载完成后,将和以前下载的所有样式表一起进行解析,解析完成后,将对此前所有元素(含以前已经渲染的)重新进行渲染。

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)的更多相关文章

  1. javascript基础03

    javascript基础03 1. 算术运算符 后增量/后减量运算符 ++ ,-- 比较运算符 ( >, <, >=, <=, ==, !=,===,!== ) 逻辑运算符( ...

  2. CSS 基础总结

    CSS基础 Doctype 声明位于文档中的最前面,处于 标签之前.告知浏览器的解析器,用什么文档类型 规范来解析这个文档. 在标准模式中,浏览器根据规范呈现页面: 在混杂模式中,页面以一种比较宽松的 ...

  3. CSS 基础知识点 样式 选择器 伪类

    CSS 基础知识点汇集 版权声明:这篇博客是别人写的,大神博客地址 : https://www.cnblogs.com/Mtime/p/5184685.html 1.CSS 简介 CSS 指层叠样式表 ...

  4. 前端开发:css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  5. CSS基础总结

    CSS基础总结链接地址:http://segmentfault.com/a/1190000002773955

  6. javaSE基础03

    javaSE基础03 生活中常见的进制:十进制(0-9).星期(七进制(0-6)).时间(十二进制(0-11)).二十四进制(0-23) 进制之间的转换: 十进制转为二进制: 将十进制除以2,直到商为 ...

  7. CSS基础篇之了解CSS和它的基本属性

    CSS是什么? CSS英文全名是Cascading Style Sheets翻译过来就是层叠样式表,它主是把网页表现与内容分离的一种样式设计语言.这种语言能优化我们编程,把东西简化和优化写法,而且不同 ...

  8. HTML5 -入门 (---css样式-------------(css基础与css选择器)---------------------—)

    ---恢复内容开始--- 一css基础入门与css选择器 CSS英文全拼:cascading style sheet 层叠样式表. 在html中使用:要在head中写style标签,所有样式放在sty ...

  9. css 基础---选择器

    1.css基础 selector {property: value} eg: h1 {color:red; font-size:14px;} p { text-align: center; color ...

随机推荐

  1. PHP 分页函数

    如果如下:

  2. URAL 1057. Amount of Degrees(数位DP)

    题目链接 我看错题了...都是泪啊,不存在3*4^2这种情况...系数必须为1... #include <cstdio> #include <cstring> #include ...

  3. 在Eclipse设置打开项目或文件目录

      Run-->External Tools-->Open External Tools Dialog... new 一个 program location 里面填 :C:\WINDOWS ...

  4. [dp]Codeforces30C Shooting Gallery

    题目链接 题意: 给n个点 每个点的坐标 x y 出现的时间t 射中的概率 从i点到j点的时间为它们的距离. 求射中个数的最大期望 很水的dp  坑点就是要用LL #include <cstdi ...

  5. 1965: [Ahoi2005]SHUFFLE 洗牌

    1965: [Ahoi2005]SHUFFLE 洗牌 Time Limit: 3 Sec  Memory Limit: 64 MBSubmit: 408  Solved: 240[Submit][St ...

  6. 深入理解Java常用类-----StringBuilder

    上篇文章我们介绍过String这个常用类,知道了该类的内部其实是用的一个char数组表示一个字符串对象的,只是该字符数组被final修饰,一旦初始化就不能修改,但是对于经常做字符串修改操作的情况下,S ...

  7. Rendering Problems Failed to load platform rendering library 为何打开布局页面时手机预览页面显示不出来?

    看到图片右上角的 android图标没有?把它改为低版本的就可以了,如我的是21就可以了.原因我想是因为sdk版本更新了不兼容导致的吧.

  8. JdbcTemplate的使用

    NamedParameterJdbcTemplate中包含了一个JdbcTemplate,NamedParameterJdbcTemplate中的很多方法实际上还是交由JdbcTemplate去完成. ...

  9. Learn flask in the hard way:配置环境的安装

    开发用的是win10的环境. 首先确保安装了python环境,个人比较适应python2.x的代码方式,所以安装的是python2.7.10. 另外IDE还是我最喜欢的pycharm. 然后开始安装F ...

  10. 【Java】【线程】

    /* 栗子 通过Runnable接口实现简历线程实例 */ class Dog implements Runnable{ //重写run函数 public void run(){ int times ...