码迷,mamicode.com
首页 > 编程语言 > 详细

浏览器加载渲染HTML、DOM、CSS、 JAVASCRIPT、IMAGE、FLASH、IFRAME、SRC属性等资源的顺序总结

时间:2016-03-30 12:55:54      阅读:194      评论:0      收藏:0      [点我收藏+]

标签:

页面响应加载的顺序:
 
1、域名解析->加载html->加载js和css->加载图片等其他信息
  DOM详细的步骤如下:
  1. 解析HTML结构。
  2. 加载外部脚本和样式表文件。
  3. 解析并执行脚本代码。
  4. 构造HTML DOM模型。
  5. 加载图片等外部文件。
  6. 页面加载完毕。
<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属性等资源的顺序总结

标签:

原文地址:http://www.cnblogs.com/refe/p/5336437.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!