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. akoj-1272-字母统计

    字母统计 Time Limit:1000MS  Memory Limit:65536K Total Submit:72 Accepted:48 Description 现在给你一个由小写字母组成字符串 ...

  2. linux下安装log4cplus

    wget http://sourceforge.net/projects/log4cplus/files/log4cplus-stable/1.1.2/log4cplus-x.x.x.tar.gz t ...

  3. HDU字符串基础题(1020,1039,1062,1088,1161,1200,2017)

    并不是很精简,随便改改A过了就没有再简化了. 1020. Problem Description Given a string containing only 'A' - 'Z', we could ...

  4. Luogu P1001 A+B Problem

    题目描述 输入两个整数a,b,输出它们的和(|a|,|b|<=10^9). 注意 1.pascal使用integer会爆掉哦! 2.有负数哦! 3.c/c++的main函数必须是int类型,而且 ...

  5. linux忘记密码/修改密码

    方法一:用set password命令 首先,登陆mysql ? 1 mysql -u root -p 然后执行set password命令 ? 1 set password for root@loc ...

  6. 深入了解IAT原理

    ---------------------------编辑时突然死机自动保存也没有用真的痛苦回头补上------------------ 输入表中的这些间接跳转是无法正常运行的,因为在正常情况,操作系 ...

  7. coder该何去何从

    无论是什么语言的学习,都不是一帆风顺的,如今随着编程大军的壮大,工作越来越难找,各位coder已经把中心偏移到了学历上面,导致技术水平的参差不齐,以及虚假学历的泛滥,这样的恶性循环下,不知前路在何方?

  8. 诡异错误一: ValueError: embedded null character

    使用如下语句读取名为0_xx.txt 文件时,遇到错误  ValueError: embedded null character if __name__ == '__main__': fr = ope ...

  9. 【环境搭建】使用Jekyll搭建Github博客

    前言 昨天花了差不多一天的时间,使用Jekyll搭建起了一套Github博客,感觉不错,也特将搭建过程记录下来,方便有需要的朋友自行搭建. 搭建步骤 本环境是在Linux环境下搭建完成的 安装前建议使 ...

  10. 【Java学习笔记之二十一】抽象类在Java继承中的用法小结

    一.抽象类的基本概念 普通类是一个完善的功能类,可以直接产生实例化对象,并且在普通类中可以包含有构造方法.普通方法.static方法.常量和变量等内容.而抽象类是指在普通类的结构里面增加抽象方法的组成 ...