我们经常看到浏览器在加载某个页面时,部分内容先显示出来,又有些内容后显示。那么浏览器加载显示html究竟是按什么顺序进行的呢

其实浏览器加载显示html的顺序是按下面的顺序进行的:
1、IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的
2、在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都已经下载完)。
3、如果遇到语义解释性的标签嵌入文件(JS脚本,CSS样式),那么此时IE的下载过程会启用单独连接进行下载。
4、并且在下载后进行解析,解析过程中,停止页面所有往下元素的下载。
5、样式表在下载完成后,将和以前下载的所有样式表一起进行解析,解析完成后,将对此前所有元素(含以前已经渲染的)重新进行渲染。
6、JS、CSS中如有重定义,后定义函数将覆盖前定义函数。
如果你的网页比较大,希望部分内容先显示出来,粘住浏览者,那么你可以按照上面的规则合理的布局你的网页,达到预期的目的。

浏览器加载显示html页面内容的顺序的更多相关文章

  1. Python爬虫-05:Ajax加载的动态页面内容

    1. 获取AJAX加载动态页面的内容 1.1. Introduction 如果所爬取的网址是通过Ajax方式加载的,就直接抓包,拿他后面传输数据的文件 有些网页内容使用AJAX加载,只要记得,AJAX ...

  2. 一个页面从输入url到页面加载显示完成,中间都经历了什么

    第一种解释: 一般会经历以下几个过程: 1.首先,在浏览器地址栏中输入url 2.浏览器先查看浏览器缓存-系统缓存-路由器缓存,如果缓存中有,会直接在屏幕中显示页面内容.若没有,则跳到第三步操作. 3 ...

  3. 浏览器加载、渲染html的顺序和页面优化

    浏览器加载和渲染html的顺序 1. IE下载的顺序是从上到下,渲染(就是把请求的内容显示到浏览器屏幕上)的顺序也是从上到下,下载和渲染是同时进行的. 2. 在渲染到页面的某一部分时,其上面的所有部分 ...

  4. bootstrap模态框modal使用remote第二次加载显示相同内容解决办法

    bootstrap模态框modal使用remote动态加载内容,第二次加载显示相同内容解决办法 bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 ...

  5. bootstrap模态框modal使用remote动态加载内容,第二次加载显示相同内容解决办法

    bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 如果提供的是 URL,将利用 jQuery 的 load 方法从此 URL 地址加载要展示的内容 ...

  6. 一个页面从输入URL到加载显示完成,发生了什么?

    面试经典题--URL加载 一.涉及基本知识点: 1. 计算机网络 五层因特尔协议栈: 应用层(dns.http):DNS解析成IP并完成http请求发送: 传输层(tcp.udp):三次握手四次挥手模 ...

  7. webclient 比浏览器加载页面慢的一个问题

    测试中发现webclient 比浏览器加载页面慢的一个问题:原因WebClient 支持 gzip, deflate,但是未设置 解决方案: class WebClientEx : WebClient ...

  8. [ActionScript 3.0] AS3.0 动态加载显示内容

    可以将下列任何外部显示资源加载到 ActionScript 3.0 应用程序中: 在 ActionScript 3.0 中创作的 SWF 文件 — 此文件可以是 Sprite.MovieClip 或扩 ...

  9. angularJs-未加载完成的页面显示混乱ng-bind

    ng-bind 未初始化完成不加载数据,避免产生{{}}导致页面混乱 还是上边的例子,当前页面没有加载完成的时候,页面显示是不完整的会频繁的出现{{}}这样子的表达式语句,给用户的感觉很不和谐,所以使 ...

随机推荐

  1. [Bzoj5254][Fjwc2018]红绿灯(线段树)

    5254: [Fjwc2018]红绿灯 Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 31  Solved: 24[Submit][Status][D ...

  2. Chrome查看DNS状态提示:DNS pre-resolution and TCP pre-connection is disabled.

    chrome://dns 别试了,在这个功能在旧版可以通过关闭预读可以实现,但是新版的不行. 但是可以通过这种方式替代: chrome://net-internals/#dns 这个方式更直观,可以看 ...

  3. go语言学习之路五:Go语言内存分配机制make&new

    Go有两种分配内存的机制,规则很简单,下面来简单介绍一下.1.new函数New()函数可以给一个值类型的数据分配内存(不知道什么是值类型请前往切片那一部分),调用成功后返回一个初始化的内存块指针,同时 ...

  4. 重新认识一遍JavaScript

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. Python--学习过程

    基础篇 Python基础篇 Python的数据类型 作业总结

  6. c 链表之 快慢指针 查找循环节点(转)

    上面分析了 根据这张图 推倒出 数学公式. 刚接触 不能一下弄明白.下面结合上面文章的分析.仔细推倒一下 , 一般设置 快指针 速度是 慢指针的2倍.及 快指针每次遍历两个指针, 慢指针每次遍历1个指 ...

  7. dvm进程,linux进程,应用程序进程是否同一概念

    Android 运行环境主要指的虚拟机技术——Dalvik.Android中的所有Java程序都是运行在Dalvik VM上的.Android上的每个程序都有自己的线程,DVM只执行.dex的Dalv ...

  8. linux下ndk编译命令行程序及配置

    1.在http://developer.android.com/tools/sdk/ndk/index.html下载Android-ndk-r8e-linux-x86.tar.bz2,解压后把andr ...

  9. 解决Sql server分页时第二页以上查询结果不正常的问题

    有100个产品,其中最高价格的为200元,而200元的产品共有40个, 现在好了,对每页30进行分页: declare @PageSize int--30 declare @Page int decl ...

  10. sphinx的配置和管理

    网上配置文档众多,但是对着他们的文档来做老是出问题,于是花了点时间研究了一下,写成总结,方便以后查阅.也希望学习sphinx的朋友能少走弯路.Coreseek的安装请参考:http://blog.ch ...