浏览器加载渲染HTML、DOM、CSS、 JAVASCRIPT、IMAGE、FLASH、IFRAME、SRC属性等资源的顺序总结
- 解析HTML结构。
- 加载外部脚本和样式表文件。
- 解析并执行脚本代码。
- 构造HTML DOM模型。
- 加载图片等外部文件。
- 页面加载完毕。
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Title</title>
<style type="text/css">
body
{
font-sie: 12px;
}
</style>
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
<script src="js.js" type="text/javascript"></script>
</head>
<body>
<div>
<script type="text/javascript">
function f1() { }
</script>
<img src="1.gif" />
</div>
<script type="text/javascript">
function f2() { }
</script>
</body>
</html>
上面代码的加载解析顺序为：？
html → head → title → #text(网页标题) → style → 加载样式 → 解析样式 → link → 加载外部样式表文件 → 解析外部样式表 → script → 加载外部脚本文件 → 解析外部脚本文件 → 执行外部脚本→body → div → script → 加载脚本 → 解析脚本 → 执行脚本 → img → script → 加载脚本 → 解析脚本 → 执行脚本 → 加载外部图像文件 → 页面初始化完毕
jquery的Dom Ready方法在加载图片等其他信息前就可以操作Dom了,先于window.onload事件触发前执行。
2、<script>标签很方便，只要加入网页，浏览器就会读取并运行。但是，它存在两个严重的缺陷。
(i)严格的读取顺序(js各段代码的依赖性问题)
(ii)性能问题
浏览器采用"同步模式"加载<script>标签，也就是说，页面会"堵塞"（blocking），等待javascript文件加载完成，然后再运行后面的HTML代码。当存在多个<script>标签时，浏览器无法同时读取，必须读取完一个再去读取另一个，造成读取时间大大延长，页面响应缓慢。 为了解决这些问题，可以使用DOM方法，动态加载Javascript文件。代码如下：
function loadScript(url){
var script = document.createElement("script");
script.type = "text/javascript";
script.src = url;
document.body.appendChild(script);
}
这样做的原理是，浏览器即时创造出一个<script>标签，然后"异步"读取Javascript文件。这样不会造成页面堵塞，但会造成另外一个问题：这样加载的Javascript文件，不在原始的DOM结构之中，因此在DOM-ready（DOMContentLoaded）事件和window.onload事件中指定的回调函数对它无效。
3、 缩短页面load时间方法
例如，要加载三个外部js文件jquery.js 、world.js、hello.js可以使用下面的方法，相比于在head头部引入三个<script>或者在body里面最后引入大大缩短可load的时间
<!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 id="head">
<title></title>
<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<img src="1.jpg" width="200" height="300" />
<script type="text/javascript">
function loadScript(url, callback) {
var script = document.createElement("script");
script.type = "text/javascript"; //IE
if (script.readyState) {
script.onreadystatechange = function () {
if (script.readyState == "loaded" || script.readyState == "complete") {
script.onreadystatechange = null;
callback();
}
}
} else {
//非IE
script.onload = function () {
callback();
}
}
script.src = url;
document.getElementById("head").appendChild(script);
}
//第一步加载jquery类库
loadScript("jquery/jquery-1.4.1.js", function () {
//第二步加载hello.js
loadScript("js/hello.js", function () {
//第三步加载world.js
loadScript("js/world.js", function () { });
});
});
</script>
</body>
</html>
4、当执行引擎遇到”<script>“的时候，此时页面的下载和渲染都必须等待<script>执行完毕。
5、image、flash等资源加载顺序
图片，flash的加载顺序和它们的出现顺序是一致的，即使在嵌套的Div里面加载的顺序也是他们出现的顺序
6、背景图片的加载顺序
浏览器会在把所有样式，包括外联的css文件都下载解析完成之后才开始渲染样式，而且会自动忽略会被覆盖的样式表。
那么这给我们的一个重要启示是：在一个单纯由Html和Css组成的页面中，背景图片总是最后加载的，假若我们想要使用较小的背景图片作为占位符，用于在加载较大的图片或者Flash文件时给用户以提示，大部分时候恐怕是达不到效果的，因为背景图片有时甚至会在大图片或Flash文件加载完成之后才会被加载。当然，这里一个重要的先决条件就是“单纯由Html和Css组成的页面”，因为JavaScript会对页面元素的加载产生极大影响（见7）
7、JavaScript会对页面元素的加载产生极大影响
参考：http://www.cnblogs.com/dkarthas/archive/2010/07/04/1770989.html
8、关于现代浏览器的三个注意点：
- 定律一：资源是否下载依赖 JS 执行结果。
- 定律二：JS 执行依赖 CSS 最新渲染。
- 定律三：现代浏览器存在 prefetch 优化（并行下载）。
结论：head里出现外联js，无论如何放，css文件都不能和body里的请求并行
head里的内联js只要在所有外联css前面，css文件可以和body里的请求并行
head里的内联js只要在任一外联css后面，css文件就不能和body里的请求并行
浏览器加载渲染HTML、DOM、CSS、 JAVASCRIPT、IMAGE、FLASH、IFRAME、SRC属性等资源的顺序总结的更多相关文章
- 浏览器加载不上css，样式走丢
来自:http://www.cnblogs.com/crizygo/p/5466444.html 问题描述:使用eclipse修改样式文件,浏览器的页面一时显示一时不显示,最后直接没有加载最新的css ...
- 浏览器加载和渲染html的顺序-css渲染效率的探究
1.浏览器加载和渲染html的顺序1.IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的.2.在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都 ...
- 浏览器加载和渲染html的顺序（html/css/js）
最近在学习前端的技术,把html.js.css的基础知识看了看.感觉越看越觉得前端并不比后端容易,技术含量还是相当大的.今天突然想弄明白浏览器到底是怎么加载和渲染html的?html中的DOM.js文 ...
- 浏览器加载和渲染html的顺序-css渲染效率的探究（转载）
1.浏览器加载和渲染html的顺序1.IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的.2.在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都 ...
- 浏览器加载跟渲染html的顺序-css渲染效率的探究
1.浏览器加载和渲染html的顺序1.IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的.2.在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都 ...
- 浏览器加载和渲染HTML的过程（标准定义的过程以及现代浏览器的优化）
先看一下标准定义的浏览器渲染过程(网上找的): 浏览器打开网页的过程 用户第一次访问网址,浏览器向服务器发出请求,服务器返回html文件: 浏览器开始载入html代码,发现 head 标签内有一个 l ...
- 浏览器加载和渲染html的顺序
前阵子,在组内给大家做了一次关于“浏览器加载和渲染HTML的顺序”的分享,这里再总结一下吧. AD:干货来了,不要等!WOT2015 北京站演讲PPT开放下载! 1.浏览器加载和渲染html的顺序 浏 ...
- Javascript图片预加载详解 分类： JavaScript HTML+CSS 2015-05-29 11:01 768人阅读 评论(0) 收藏
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- 【转载】浏览器加载和渲染html的顺序
1.浏览器加载和渲染html的顺序 1.IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的.2.在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素 ...
随机推荐
- 深入理解JavaScript定时机制
容易欺骗别人感情的JavaScript定时器 JavaScript的setTimeout与setInterval是两个很容易欺骗别人感情的方法,因为我们开始常常以为调用了就会按既定的方式执行, 我想不 ...
- pandas学习系列（一）：时间序列
最近参加了天池的一个机场航空人流量预测大赛,需要用时间序列来预测,因此开始使用python的pandas库 发现pandas库功能的确很强大,因此在这记录我的pandas学习之路. # -*- cod ...
- bzoj 3408 热浪 最短路
一道最短路的模板题,就当练习一下SPFA和dijkstra了 SPFA #include<bits/stdc++.h> using namespace std; struct edge{ ...
- zabbix4.0 使用nginx前端安装
注:环境需求:centos7 1.安装阿里云yum源: rpm -ivh https://mirrors.aliyun.com/zabbix/zabbix/4.1/rhel/7/x86_64/zabb ...
- h5调用底层接口的一些知识
之前接触过这方面的知识,一直想写一些关于代码的文字,但考虑到浪费时间,又不具备大神的实力,也不想去把别人的代码照搬过来,所以一直都是空白着的,今天敲代码的时候,有了一个比较好的想法,第一,定位在学习这 ...
- openssl之BIO系列之6---BIO的IO操作函数
BIO的IO操作函数 ---依据openssl doc/crypto/bio/bio_read.pod翻译和自己的理解写成 (作者:DragonKing Mail:wzhah ...
- “Vbox安装CentOS系统”之低级错误一例：版本号的选择
日 期:2014年7月18日 错误描写叙述:虚拟机系统版本号选择错误,导致无法引导进入光盘安装 错误重演: 因为混淆了centos和rehat的版本号概念.错把centos作为一种新的版 ...
- JSunpack-n模拟WireShark拦截文件传输
前言: 在前面的实验里我们进行了JSunpack-n的安装及其简单使用.JSunpack-n还有另外一些功能须要进行測试试验,由于本人也是刚接触这些东西.本文就当中一个"功能点"进 ...
- Win8.1应用开发之文件操作
在操作文件之前,先相应用的应用功能声明进行设定.用户通过C#(非UI)对win8.1上的文件进行訪问,仅仅能局限于图片,音乐,视频和文档四个目录. 而通过文件选取器则能訪问到整个系统的文件. (一)应 ...
- Windows安装两个mysql数据库步骤
因为新旧项目数据库版本号差距太大.编码格式不同.引擎也不同,所以仅仅好装两个数据库. 本次安装两个mysql数据库.版本号各自是4.0.18,5.5.36.都是可运行文件直接安装. 本机上之前已经安装 ...