标准的web前端工程师需要知道 ◎浏览器（或者相应播放器）的渲染/重绘原理
 
　　这我得加把劲了。我还真的说的不是很清楚，我就G下，结果不是很多，找到了有一个，就记下来了。。。
 
　　以下部分来自handawei－javaeye的blog：
　　Web页面运行在各种各样的浏览器当中，浏览器载入、渲染页面的速度直接影响着用户体验
　　简单地说，页面渲染就是浏览器将html代码根据CSS定义的规则显示在浏览器窗口中的这个过程。先来大致了解一下浏览器都是怎么干活的：
　　1. 用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件；
　　2. 浏览器开始载入html代码，发现<head>标签内有一个<link>标签引用外部CSS文件；
　　3. 浏览器又发出CSS文件的请求，服务器返回这个CSS文件；
　　4. 浏览器继续载入html中<body>部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了；
　　5. 浏览器在代码中发现一个<img>标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码；
　　6. 服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码；
　　7. 浏览器发现了一个包含一行Javascript代码的<script>标签，赶快运行它；
　　8. Javascript脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个<div> （style.display=”none”）。杯具啊，突然就少了这么一个元素，浏览器不得不重新渲染这部分代码；
　　9. 终于等到了</html>的到来，浏览器泪流满面……
　　10. 等等，还没完，用户点了一下界面中的“换肤”按钮，Javascript让浏览器换了一下<link>标签的CSS路径；
　　11. 浏览器召集了在座的各位<div><span><ul><li>们，“大伙儿收拾收拾行李，咱得重新来过……”，浏览器向服务器请
　　求了新的CSS文件，重新渲染页面。
 
 
　　浏览器每天就这么来来回回跑着，要知道不同的人写出来的html和css代码质量参差不齐，说不定哪天跑着跑着就挂掉了。好在这个世界还有这么一群人——页面重构工程师，平时挺不起眼，也就帮视觉设计师们切切图啊改改字，其实背地里还是干了不少实事的。
 
说到页面为什么会慢？那是因为浏览器要花时间、花精力去渲染，尤其是当它发现某个部分发生了点变化影响了布局，需要倒回去重新渲染，内行称这个回退的过程叫reflow。

 
 
 
　　 reflow几乎是无法避免的。现在界面上流行的一些效果，比如树状目录的折叠、展开（实质上是元素的显示与隐藏）等，都将引起浏览器的 reflow。鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化，都会引起它内部、周围甚至整个页面的重新渲染。通常我们都无法预估浏览器到底会reflow哪一部分的代码，它们都彼此相互影响着。

 
 
　　 reflow问题是可以优化的，我们可以尽量减少不必要的reflow。比如开头的例子中的<img>图片载入问题，这其实就是一个可以避免的reflow——给图片设置宽度和高度就可以了。这样浏览器就知道了图片的占位面积，在载入图片前就预留好了位置。
 
另外，有个和reflow看上去差不多的术语：repaint，中文叫重绘。如果只是改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性，将只会引起浏览器repaint。repaint的速度明显快于reflow（在IE下需要换一下说法，reflow要比repaint 更缓慢）。下次将通过一系列的实验说明在Firefox、IE等浏览器下reflow的优化。
 
转载自：http://www.cnblogs.com/NetSos/archive/2010/11/29/1891194.html
原作者：hevily
本文转载自分针网
想学习更多IT知识可加群：272292492

分针网—每日分享：HTML解析原理的更多相关文章

  1. 分针网——每日分享： jquery选择器的用法

    jQuery选择器是jQuery库的一大特色,用这些选择器不但可以省去繁琐的JavaScript 书写方式,还可以节省时间和效率,正是有这些jQuery选择器,才让我们更容易的操作JavaScript ...

  2. 分针网—每日分享： 怎么轻松学习JavaScript

    js给初学者的印象总是那么的"杂而乱",相信很多初学者都在找轻松学习js的途径.   我试着总结自己学习多年js的经验,希望能给后来的学习者探索出一条"轻松学习js之路& ...

  3. 分针网—IT教育：使用CSS3制作导航条和毛玻璃效果

    导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的.本次分享的主题: ...

  4. 分针网—IT教育：调皮的JavaScript

    JavaScript是一门有趣的语言,不仅有趣而且调皮,不同的内核的浏览器在解析的时候表现会有些差异,今天主要是抛砖引玉,和大家一起讨论一些在实际开发中比较常见但同时可能并没有过于在意的JavaScr ...

  5. 分针网—IT教育： jquery选择器的用法

    jQuery选择器是jQuery库的一大特色,用这些选择器不但可以省去繁琐的JavaScript 书写方式,还可以节省时间和效率,正是有这些jQuery选择器,才让我们更容易的操作JavaScript ...

  6. 分针网—IT教育： Html / CSS常见问题的解决方案

    1. 解决Safari下input光标过大   2. 设置浮层   3. CSS绘制三角形   4. 清除浮动   1) 浮动元素父级添加样式   2) 父元素后添加伪元素     3) 同样可以使用 ...

  7. 分针网—IT教育：作为PHP开发人员容易忽视的几个重点

    无论是学习什么样的一个开发.ASP开发.java开发.当学习还不是很久的时候,一般都是不知道它们的精华是在哪里,而现在很多的php程序员也是不知道PHP的精华所在,为什么perl在当年在商界如此的出名 ...

  8. 500G JAVA视频网盘分享 (Jeecg社区)

    http://blog.csdn.net/zhangdaiscott/article/details/18220411    csdn 排名400多名 500 G JAVA视频网盘分享(Jeecg社区 ...

  9. 基于简单sql语句的sql解析原理及在大数据中的应用

    基于简单sql语句的sql解析原理及在大数据中的应用 李万鸿 老百姓呼吁打土豪分田地.共同富裕,总有一天会实现. 全面了解你所不知道的外星人和宇宙真想:http://pan.baidu.com/s/1 ...

随机推荐

  1. Java中的函数对象

    初次听说java中的函数对象可能,比较的陌生.可以类比着来理解一下,人们常说java中没有了指针,殊不知,java中的对象引用就是指针,有时候我们说一个对象往往指的就是这个对象的引用,也就是说基本上把 ...

  2. Grafana关键表结构分析

    Grafana默认使用SQLite存储数据表,默认数据库文件存储在/var/lib/grafana/grafana.db中,可以将文件拷贝到Widnows中,使用Navicat for SQLite进 ...

  3. AP模块发票过账标记为否检查方法

    根据发票编号,查找发票 : 发票过账标记,始终为否,创建会计科目提示如下: 

  4. dede织梦数据表字段解释

    提示:常用字段,可以在dede后台->系统->SQL命令行工具,执行sql语句来批量修改 dede_addonarticle   附加文章表   aid  int(11)  文章编号    ...

  5. 老李推荐：第8章6节《MonkeyRunner源码剖析》MonkeyRunner启动运行过程-启动Monkey 4

    在获得比对设备序列号后,findAttachedDevice就会跟提供的序列号进行比对,如果吻合就返回给调用者” 代码8-6-3 AdbBackend - waitForConnection”了.而A ...

  6. 在centOS7.2安装配置zabbix监控

    zabbix由两部分组成,zabbix-server与可选的zabbix-agent.zabbix-server可以通过SNMP,ZABBIX-AGENT,PING,端口监视等方法提供对远程服务器/网 ...

  7. 1.Redis 的安装

    一.Redis 介绍 Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API. 作为Key-value型数据库,Red ...

  8. 构造器和多态（Chapter8.3）

    构造器不具有多态性(它们是static方法,只不过该static声明是隐式的),但还是非常有必要理解构造器怎样通过多态在复杂的层次结构中运作,这一理解将有助于大家避免一些令人不快的困扰. 在main中 ...

  9. Redis基础学习(三)—Key操作

    一.key的相关操作 1.删除 del key1 key2 ... Keyn 作用: 删除1个或多个键. 返回值: 不存在的key忽略掉,返回真正删除的key的数量.   2.重命名 rename k ...

  10. JavaEE开发使用Maven管理的SpringMVC工程

    前几篇博客已经陆陆续续的聊了一些Spring的东西,今天博客我们就来聊一下SpringMVC.SpringMVC目前在JavaEE开发中可谓占据一席之地,用起来也是比较顺手的.低耦合,高内聚,利用一些 ...