HTML在浏览器里的渲染原理

我们打开的页面(Web页面)在各种不同的浏览器中运行，浏览器载入、渲染页面的速度直接影响着用户体验，简单地说下页面渲染，页面渲染就是浏览器将html代码根据CSS定义的规则显示在浏览器窗口中的这个过程。

   这里大致了解一下浏览器都是怎么干活的，首先贴出一段示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>标题</title>
    <link href="../css/css.css" rel="Stylesheet" type="text/css" />
</head>
<body>
    <div>
    </div>
    <img src="data:images/test.jpg" alt="示例图片" />
    <br />
    <p>
    </p>
</body>
<script type="text/javascript" src="js/js.js"></script>
</html>
我们现在要在浏览器中显示以上结构的HTML。

1.客户端浏览器开始从用户向服务器发出请求，服务器响应的将如上的HTML返回给请求的客户端浏览器中。

2.加载从<html>标签开始，并发现<head>标签内有个外部样式文件要加载

<link href="../css/css.css" rel="Stylesheet" type="text/css" />

3.这时客户端浏览器又向服务器发出一个请求加载css.css文件，服务器响应。

4.此时客户端浏览器继续加载html文件里<body>里的标签，在css.css文件加载完后，同时开始渲染页面。

5.客户端浏览器在<body>里的标签中发现一个<img>标签并且引用了服务器进而的一张名为test.jpg的图片.客户端浏览器又向服务器发出一次请求。而浏览器不会因为此时正在加载<img>标签里的图片而停止等待图片加载完，浏览器继续渲染还未完成的部分。

6.<img>标签里的图片加载完了，则要显示出来，同时图片会占有一定的面积，又会影响到后面的布局，浏览器不得不又回来重新渲染一次这部分。

7.总算把body里的标签加载及渲染完后，浏览器又发现了一段代码：

<script type="text/javascript" src="js/js.js"></script>
8.浏览器又立刻向服务器发出请求加载js.js文件，服务器响应。

9.浏览器又在js.js文件中发现了一段代码是让<div>标签隐藏的代码，此时浏览器又要重新去渲染被隐藏的<div>部分。

10.最后到浏览器发现了</html>为止。

   从上述简单的说了下浏览器加载HTML页面原理后，会明白很多时候页面打开慢的原因。页面中向服务器请求的次数多会影响到打开速度，重新渲染局部的次数量也会影响到页面打开的速度，当然这只是有时候页面打开速度慢一部分原因。

   对于这种来回渲染，内行叫为reflow，reflow几乎是无法避免的，我们不能因为怕会重新渲染而去丢掉一些页面效果。但是reflow是可以优化的，比如图片在css.css样式文件中就定义好图片的高度，这要会减少重新渲染的次数。另外还有一次词叫repaint，叫重绘，repaint如果只是改变如背景颜色或者文字的颜色，repaint的速度要比reflow的速度明显快的多。

web浏览器工作原理的更多相关文章

  1. web服务器工作原理

    Web服务器工作原理概述 转载自http://www.importnew.com/15020.html 很多时候我们都想知道,web容器或web服务器(比如Tomcat或者jboss)是怎样工作的?它 ...

  2. 【转载】Web应用工作原理

    问题描述:           Web应用工作原理   问题解决:          参考资料:http://blog.csdn.net/lcore/article/details/8964642   ...

  3. Web程序工作原理

    1.Web程序工作原理 (1)Web一词的含义 Network:[计算机]电脑网络,网 Web:[计算机]万维网(World Wide Web),互联网(Internet) Web程序,顾名思义,即工 ...

  4. Web网站工作原理解析

    Web的工作原理   Web采用的是客户机--服务器架构(Client--Server model),如下图所示,其中客户端(Client)可以通过网络连接访问另一台计算机的资源或服务,而提供资源或服 ...

  5. 《浏览器工作原理与实践》<06>渲染流程（下）：HTML、CSS和JavaScript，是如何变成页面的？

    在上篇文章中,我们介绍了渲染流水线中的 DOM 生成.样式计算和布局三个阶段,那今天我们接着讲解渲染流水线后面的阶段. 这里还是先简单回顾下上节前三个阶段的主要内容:在 HTML 页面内容被提交给渲染 ...

  6. 《浏览器工作原理与实践》<04>从输入URL到页面展示，这中间发生了什么？

    “在浏览器里,从输入 URL 到页面展示,这中间发生了什么? ”这是一道经典的面试题,能比较全面地考察应聘者知识的掌握程度,其中涉及到了网络.操作系统.Web 等一系列的知识. 在面试应聘者时也必问这 ...

  7. 《浏览器工作原理与实践》<03>HTTP请求流程：为什么很多站点第二次打开速度会很快？

    一个 TCP 连接过程包括了建立连接.传输数据和断开连接三个阶段. 而 HTTP 协议,正是建立在 TCP 连接基础之上的.HTTP 是一种允许浏览器向服务器获取资源的协议,是 Web 的基础,通常由 ...

  8. 《浏览器工作原理与实践》<02>TCP协议：如何保证页面文件能被完整送达浏览器？

    前言: 在衡量 Web 页面性能的时候有一个重要的指标叫“FP(First Paint)”,是指从页面加载到首次开始绘制的时长.这个指标直接影响了用户的跳出率,更快的页面响应意味着更多的 PV.更高的 ...

  9. 《浏览器工作原理与实践》<01>Chrome架构：仅仅打开了1个页面，为什么有4个进程？

    无论你是想要设计高性能 Web 应用,还是要优化现有的 Web 应用,你都需要了解浏览器中的网络流程.页面渲染过程,JavaScript 执行流程,以及 Web 安全理论,而这些功能是分散在浏览器的各 ...

随机推荐

  1. 【解决】如何导入导出SharePoint列表和文档库

    早期的SharePoint管理工具stsadm.exe只能导出/导入网站,但不能导出/导入列表和文档库.但在PowerShell增加了此命令,具体操作如下. I. 导出列表或文档库 Export-SP ...

  2. QBC分页查询

    1.第一种方式 public class DetailDaoImpl extends HibernateTemplate implements DetailDaoInterface { private ...

  3. eclipse导入JDK源码

    前言:这件事情的重要性不言而喻,对于学习和观摩优秀的代码非常的有用,我喜欢想看什么代码都能 Ctrl+鼠标一点 就能够看到,不过这个不常操作,在这里小记一笔,以备后用.(完全是傻瓜式的记录,就是怕自己 ...

  4. Aspose.Words 的使用 Aspose.Total_for_.NET

    最近在做有个业务需要Word做好模版,数据库取出业务数据在写入Word模版里面,然后生成PDF给客户端的业务人员 之前找了半天,没有找到用微软的Microsoft.Office.Interop.Wor ...

  5. WinServer2008r2 机器时间格式修改

    windows2008 这么高级的系统不可能改个系统的日期时间显示格式还要进注册表啊.于是有baidu,google了下终于发现了,原来还有不需要注册表的更简便方法.windows2008默认时间格式 ...

  6. Python之路【第十九篇】：爬虫

    Python之路[第十九篇]:爬虫   网络爬虫(又被称为网页蜘蛛,网络机器人,在FOAF社区中间,更经常的称为网页追逐者),是一种按照一定的规则,自动地抓取万维网信息的程序或者脚本.另外一些不常使用 ...

  7. IT在线笔试总结（一）

    综述:IT公司的技术类笔试,主要考察: (1)知识面的广度.主要考察一些业内通用性的知识,以及某一职务所必须具备的业务知识. (2)智力测试.主要考察记忆力,思维能力和学习新知识的能力. (3)技能测 ...

  8. python基础知识---变量

    一.变量是什么? python变量是对内存中一个数据结构的引用,用一个变量给另外一个变量赋值,那就有两个变量引用同一个数据结构(数字.字符串.列表.元组.字典.自定义对象等) 当一个数据结构的引用计数 ...

  9. MySQL_杭州北仓 12.3-12.7需求活动期间累计下单达到3天及以上的客户_20161212

    #C025_02杭州北仓 12.3-12.7需求活动期间累计下单达到3天及以上的客户明细 SELECT d.*,CASE WHEN 下单天次>=3 THEN "下单超过3天" ...

  10. TinyXML：一个优秀的C++ XML解析器

    //-------------------------------------------------------------------------------------------------- ...