HTML解析原理

  标准的web前端工程师需要知道 ◎浏览器(或者相应播放器)的渲染/重绘原理 

  这我得加把劲了。我还真的说的不是很清楚,我就G下,结果不是很多,找到了有一个,就记下来了。。。

  以下部分来自handawei-javaeye的blog:


  Web页面运行在各种各样的浏览器当中,浏览器载入、渲染页面的速度直接影响着用户体验

  简单地说,页面渲染就是浏览器将html代码根据CSS定义的规则显示在浏览器窗口中的这个过程。先来大致了解一下浏览器都是怎么干活的:

  1. 用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件;

  2. 浏览器开始载入html代码,发现
标签内有一个
标签引用外部CSS文件;

  3. 浏览器又发出CSS文件的请求,服务器返回这个CSS文件;

  4. 浏览器继续载入html中

部分的代码,并且CSS文件已经拿到手了,可以开始渲染页面了;

  5.
浏览器在代码中发现一个标签引用了一张图片,向服务器发出请求。此时浏览器不会等到图片下载完,而是继续渲染后面的代码;

  6.
服务器返回图片文件,由于图片占用了一定面积,影响了后面段落的排布,因此浏览器需要回过头来重新渲染这部分代码;

  7. 浏览器发现了一个包含一行Javascript代码的

HTML解析原理概括(转载)的更多相关文章

  1. netty对http协议解析原理解析(转载)

    本文主要介绍netty对http协议解析原理,着重讲解keep-alive,gzip,truncked等机制,详细描述了netty如何实现对http解析的高性能. 1 http协议 1.1 描述 标示 ...

  2. jQuery 2.0.3 源码分析Sizzle引擎解析原理

    jQuery 2.0.3 源码分析Sizzle引擎 - 解析原理 声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 先来回答博友的提问: 如何解析 div > p + ...

  3. xml之DOM方式解析,DOM4J工具解析原理

    DOM解析原理: DOM解析原理:xml解析器一次性把整个xml文档加载进内存,然后在内存中构建一颗Document的对象树,通过Document对象,得到树上的节点对象,通过节点对象访问(操作)到x ...

  4. Atitit.sql ast 表达式 语法树 语法 解析原理与实现 java php c#.net js python

    Atitit.sql ast 表达式 语法树 语法 解析原理与实现 java php c#.net js python 1.1. Sql语法树 ast 如下图锁死1 2. SQL语句解析的思路和过程3 ...

  5. [转]netty对http协议解析原理

    本文主要介绍netty对http协议解析原理,着重讲解keep-alive,gzip,truncked等机制,详细描述了netty如何实现对http解析的高性能. 1 http协议 1.1 描述 标示 ...

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

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

  7. SAX解析原理示意

    SAX解析原理示意

  8. DOM解析原理示意

    DOM解析原理示意  

  9. netty对http协议解析原理解析

    本文主要介绍netty对http协议解析原理,着重讲解keep-alive,gzip,truncked等机制,详细描述了netty如何实现对http解析的高性能. 1 http协议 1.1 描述 标示 ...

随机推荐

  1. 4.写一个控制台应用程序,接收一个长度大于3的字符串,完成下列功能: 1)输出字符串的长度。 2)输出字符串中第一个出现字母a的位置。 3)在字符串的第3个字符后面插入子串“hello”,输出新字符串。 4)将字符串“hello”替换为“me”,输出新字符串。 5)以字符“m”为分隔符,将字符串分离,并输出分离后的字符串。 */

    namespace test4 {/* 4.写一个控制台应用程序,接收一个长度大于3的字符串,完成下列功能: 1)输出字符串的长度. 2)输出字符串中第一个出现字母a的位置. 3)在字符串的第3个字符 ...

  2. 这是个巧妙的表达式: a ˆ= b ˆ= a ˆ= b 它不需要临时变量就可 以交换 a 和 b 的值。

    这不具有可移植性.它试图在序列点之间两次修改变量 a, 而这是无定义的. 例如,有人报告如下代码: int a = 123, b = 7654; a ^= b ^= a ^= b; 在 SCO 优化 ...

  3. LinkQueue(链队列)

    关于Node.h,请参考LinkStack #include"Node.h" template<typename ElemType> class LinkQueue { ...

  4. Linux下ftp的安装配置

    1.查看ftp包是否可用yum list | grep vsftpd 2.安装ftpyum install vsftpd 3.启动systemctl start vsftpd 4.开机启动chkcon ...

  5. 说说最近的项目情况吧(OLCS Part1)

    这几天一直在做从04年项目的老代码移植到用portlet spring mvc框架的系统中,由于对业务逻辑的不清楚,代码没有认真的研究,导致各种问题.希望自己长点心吧♥

  6. VIM的字符编码设置

    vim 编码方式的设置和所有的流行文本编辑器一样,Vim 可以很好的编辑各种字符编码的文件,这当然包括UCS-2.UTF-8 等流行的 Unicode 编码方式.然而不幸的是,和很多来自 Linux ...

  7. Alpha版与Beta版

    简单说说这两个词的意思,以后会稍加更多的补充. Alpha版意在对少数主要客户和市场进行数量有限的分发,用于演示目的的早期构造.其无意在实际环境中使用.使用Alpha版的所有人员必须了解确切内容和质量 ...

  8. hashlib,configparser,logging模块

    一.常用模块二 hashlib模块 hashlib提供了常见的摘要算法,如md5和sha1等等. 那么什么是摘要算法呢?摘要算法又称为哈希算法.散列算法.它通过一个函数,把任意长度的数据转换为一个长度 ...

  9. %appdata%目录下配置文件修改

    %appdata%目录下配置文件修改 1.假设%appdata%\leez Program目录下有Cache子目录和配置文件Config.ini内容为: [Version] Version=1.0.0 ...

  10. mysql_view

    概述: 视图即是虚拟表,也称为派生表,因为它们的内容都派生自其它表的查询结果.虽然视图看起来感觉和基本表一样,但是它们不是基本表.基本表的内容是持久的,而视图的内容是在使用过程中动态产生的.--摘自& ...