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. Spring+SpringMVC+MyBatis+easyUI整合进阶篇(二)RESTful API实战笔记(接口设计及Java后端实现)

    写在前面的话 原计划这部分代码的更新也是上传到ssm-demo仓库中,因为如下原因并没有这么做: 有些使用了该项目的朋友建议重新创建一个仓库,因为原来仓库中的项目太多,结构多少有些乱糟糟的. 而且这次 ...

  2. 安徽省2016“京胜杯”程序设计大赛_C_箭无虚发

    箭无虚发 Time Limit: 1000 MS Memory Limit: 65536 KB Total Submissions: 128 Accepted: 21 Description      ...

  3. js的基础要点

    javascript作为一种脚本语言可以放在html页面中任何位置,但是浏览器解释html时是按先后顺序的,所以前面的script就先被执行.比如进行页面显示初始化的js必须放在head里面,因为初始 ...

  4. python_求相邻数

    什么是相邻数? 比如5,相邻数为4和6,和5相差1的数,连续相差为1的一组数 需求: 遍历inputList 所有数字,取出所有数字,判断是否有相邻数, 不相邻数字 和 相邻数字 都以 “数组”形式 ...

  5. 【社交系统ThinkSNS+研发日记三】基于 Laravel Route 的 ThinkSNS+ Component

    [社交系统ThinkSNS+研发日记系列] 一.<ThinkSNS+ 基于 Laravel master 分支,从 1 到 0,再到 0.1> 二.<基于 Laravel 开发 Th ...

  6. python------函数嵌套及作用域链

    1.三元运算if条件成立的结果 if 条件 else 条件不成立的结果例如: a=20 b=10 c=a if a>b else b print(c) 2.命名空间 全局命名空间:创建的存储&q ...

  7. SpringMVC中文件的上传(上传到服务器)和下载问题(一)

    一.今天我们所说的是基于SpringMVC的关于文件的上传和下载的问题的解决.(这里所说的上传和下载都是上传到服务器与从服务器上下载文件).这里的文件包括我们常用的各种文件.如:文本文件(.txt), ...

  8. Linux(Fedora) 安装 Oracle XE Database

    Fedora 安装 Oracle XE Database Fedora 20Oracle XeOracle VM VirtualBoxFedora 安装oracle 数据库 环境: Oracle VM ...

  9. linux 网络编程

    linux网络编程中主要分为服务器和客户端两部分,而网络编程中又分为TCP和UDP两种.TCP(传输控制协议)和UDP(用户数据报协议是网络体系结构TCP/IP模型中传输层一层中的两个不同的通信协议. ...

  10. WebDriver多浏览器测试

    selenium2 基于对象的测试,在selenium2中一共支持以下浏览器: Firefox(FirefoxDriver) IE(InternetExplorerDriver) Chrome(Chr ...