浏览器加载显示html页面内容的顺序
我们经常看到浏览器在加载某个页面时,部分内容先显示出来,又有些内容后显示。那么浏览器加载显示html究竟是按什么顺序进行的呢
其实浏览器加载显示html的顺序是按下面的顺序进行的:
1、IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的。
2、在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都已经下载完)。
3、如果遇到语义解释性的标签嵌入文件(JS脚本,CSS样式),那么此时IE的下载过程会启用单独连接进行下载。
4、并且在下载后进行解析,解析过程中,停止页面所有往下元素的下载。
5、样式表在下载完成后,将和以前下载的所有样式表一起进行解析,解析完成后,将对此前所有元素(含以前已经渲染的)重新进行渲染。
6、JS、CSS中如有重定义,后定义函数将覆盖前定义函数。
如果你的网页比较大,希望部分内容先显示出来,粘住浏览者,那么你可以按照上面的规则合理的布局你的网页,达到预期的目的。
浏览器加载显示html页面内容的顺序的更多相关文章
- Python爬虫-05:Ajax加载的动态页面内容
1. 获取AJAX加载动态页面的内容 1.1. Introduction 如果所爬取的网址是通过Ajax方式加载的,就直接抓包,拿他后面传输数据的文件 有些网页内容使用AJAX加载,只要记得,AJAX ...
- 一个页面从输入url到页面加载显示完成,中间都经历了什么
第一种解释: 一般会经历以下几个过程: 1.首先,在浏览器地址栏中输入url 2.浏览器先查看浏览器缓存-系统缓存-路由器缓存,如果缓存中有,会直接在屏幕中显示页面内容.若没有,则跳到第三步操作. 3 ...
- 浏览器加载、渲染html的顺序和页面优化
浏览器加载和渲染html的顺序 1. IE下载的顺序是从上到下,渲染(就是把请求的内容显示到浏览器屏幕上)的顺序也是从上到下,下载和渲染是同时进行的. 2. 在渲染到页面的某一部分时,其上面的所有部分 ...
- bootstrap模态框modal使用remote第二次加载显示相同内容解决办法
bootstrap模态框modal使用remote动态加载内容,第二次加载显示相同内容解决办法 bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 ...
- bootstrap模态框modal使用remote动态加载内容,第二次加载显示相同内容解决办法
bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 如果提供的是 URL,将利用 jQuery 的 load 方法从此 URL 地址加载要展示的内容 ...
- 一个页面从输入URL到加载显示完成,发生了什么?
面试经典题--URL加载 一.涉及基本知识点: 1. 计算机网络 五层因特尔协议栈: 应用层(dns.http):DNS解析成IP并完成http请求发送: 传输层(tcp.udp):三次握手四次挥手模 ...
- webclient 比浏览器加载页面慢的一个问题
测试中发现webclient 比浏览器加载页面慢的一个问题:原因WebClient 支持 gzip, deflate,但是未设置 解决方案: class WebClientEx : WebClient ...
- [ActionScript 3.0] AS3.0 动态加载显示内容
可以将下列任何外部显示资源加载到 ActionScript 3.0 应用程序中: 在 ActionScript 3.0 中创作的 SWF 文件 — 此文件可以是 Sprite.MovieClip 或扩 ...
- angularJs-未加载完成的页面显示混乱ng-bind
ng-bind 未初始化完成不加载数据,避免产生{{}}导致页面混乱 还是上边的例子,当前页面没有加载完成的时候,页面显示是不完整的会频繁的出现{{}}这样子的表达式语句,给用户的感觉很不和谐,所以使 ...
随机推荐
- RabbitMQ 简介以及使用场景
目录 一. RabbitMQ 简介 二. RabbitMQ 使用场景 1. 解耦(为面向服务的架构(SOA)提供基本的最终一致性实现) 2. 异步提升效率 3. 流量削峰 三. 引入消息队列的优缺点 ...
- setImageEdgeInsets 和 setImage配合使用达到button区域大并可调节其上图片显示区域大小的效果
[self.indicator setImage:[UIImage imageNamed:@"01_login_moreicon@2x.png"] forState:UIContr ...
- 【flyway】开源的数据库版本管理工具【migration】
开源的数据库版本管理工具[migration] 记录
- Mac电脑解压文件unrar用密码问题解决
下载了一个rar文件,有密码的,你懂的. 但是在mac上面,用unrar解压,只能解出空文件:用izip解压,直接停在那里不动. 只好上网搜索.找到了办法. 用brew 安装了命令行版本的 unrar ...
- svm、logistic regression对比
相同点:都是线性分类算法 不同点: 1.损失函数不同 LR:基于“给定x和参数,y服从二项分布”的假设,由极大似然估计推导 SVM: hinge loss + L2 regularization的标准 ...
- JQUERY多选框,单选框,检查选中的值
var str=""; $(":checkbox:checked").each(function(){ if($(this).attr("checke ...
- async & await 的前世今生(Updated)----代码demo
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- 【手势交互】4. Kinect for XBox
"You are the Controller",Kinect for Xbox的广告词.明白说明了Kinect体感的交互方式.作为一款集成了诸多先进视觉技术的自然交互设备,Kin ...
- 让Quality Center走下神坛--测试管理工具大PK(转)
让Quality Center走下神坛--测试管理工具QC/ALM 和 RQM.Jira.TP.SCTM大PK 在写完了<让QTP走下神坛>之后,现在来谈谈测试管理工具,献给所有正在或打算 ...
- HDU 2669 Romantic(扩展欧几里德)
题目链接:pid=2669">http://acm.hdu.edu.cn/showproblem.php?pid=2669 Problem Description The Sky is ...