zoukankan      html  css  js  c++  java
  • 浏览器渲染页面过程

    一、浏览器加载和渲染html的顺序

    1、IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的。
    2、在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都已经下载完)
    3、如果遇到语义解释性的标签嵌入文件(JS脚本,CSS样式),那么此时IE的下载过程会启用单独连接进行下载。
    4、并且在下载后进行解析,解析过程中,停止页面所有往下元素的下载。阻塞加载
    5、样式表在下载完成后,将和以前下载的所有样式表一起进行解析,解析完成后,将对此前所有元素(含以前已经渲染的)重新进行渲染。
    6、JS、CSS中如有重定义,后定义函数将覆盖前定义函数

    二、JS的加载

    1、浏览器对于Javascript的运行有两大特性:1)载入后马上执行,2)执行时会阻塞页面后续的内容(包括页面的渲染、其它资源的下载)。于是,如果有多个js文件被引入,那么对于浏览器来说,这些js文件被被串行地载入,并依次执行。因为javascript可能会来操作HTML文档的DOM树,所以,浏览器一般都不会像并行下载css文件并行下载js文件,因为这是js文件的特殊性造成的。所以,如果你的javascript想操作后面的DOM元素,基本上来说,浏览器都会报错说对象找不到。因为Javascript执行时,后面的HTML被阻塞住了,DOM树时还没有后面的DOM结点。所以程序也就报错了。

    2、当所有样式表都下载完成以后页面才开始一起解析css文件开始渲染文件。

    3、因为浏览器的加载是从上到下一行一行的加载的,所以如果页面同事定义了两个相同命名的js函数,后面的函数会覆盖前面的函数。

    三、HTML页面加载和解析流程

    1.用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件; 
    2.浏览器开始载入html代码,发现<head>标签内有一个<link>标签引用外部CSS文件; 
    3.浏览器又发出CSS文件的请求,服务器返回这个CSS文件; 
    4.浏览器继续载入html中<body>部分的代码,并且CSS文件已经拿到手了,可以开始渲染页面了; 
    5.浏览器在代码中发现一个<img>标签引用了一张图片,向服务器发出请求。此时浏览器不会等到图片下载完,而是继续渲染后面的代码; 
    6.服务器返回图片文件,由于图片占用了一定面积,影响了后面段落的排布,因此浏览器需要回过头来重新渲染这部分代码; 
    7.浏览器发现了一个包含一行Javascript代码的<script>标签,赶快运行它; 
    8.Javascript脚本执行了这条语句,它命令浏览器隐藏掉代码中的某个<div> (style.display=”none”)。杯具啊,突然就少了这么一个元素,浏览器不得不重新渲染这部分代码; 
    9.终于等到了</html>的到来,浏览器泪流满面…… 
    10.等等,还没完,用户点了一下界面中的“换肤”按钮,Javascript让浏览器换了一下<link>标签的CSS路径; 
    11.浏览器召集了在座的各位<div><span><ul><li>们,“大伙儿收拾收拾行李,咱得重新来过……”,浏览器向服务器请求了新的CSS文件,重新渲染页面。 

    四、 DOMContentLoaded事件

    DOMContentLoaded事件在许多Webkit浏览器以及IE9上都可以使用。
    DOMContentLoaded事件本身不会等待CSS文件、图片、iframe加载完成。
    触发时机:加载完页面,解析完所有标签(不包括执行CSS和JS),并如规范中所说的设置interactive和执行每个静态的script标签中的JS,然后触发。而JS的执行,需要等待位于它前面的CSS加载(如果是外联的话)、执行完成,因为JS可能会依赖位于它前面的CSS计算出来的样式。
     
    现代浏览器会并发的预加载CSS, JS,也就是一开始就并发的请求这些资源,但是,执行CSS和JS的顺序还是按原来的依赖顺序(JS的执行要等待位于其前面的CSS和JS加载、执行完)。先加载完成的资源,如果其依赖还没加载、执行完,就只能等着。
    img是否需要解码、绘图(paint)出来,确实需要等CSS加载、执行完才能知道。也就是说,CSS会阻塞img的展现!那么JS呢?
    在有JS而没有CSS的页面中,img居然能够在收到数据后就立刻开始解码、绘图(paint),也就是说,JS并没有阻塞img的展现!这跟我们以前理解的JS会阻塞img资源的传统观念不太一样,看来Chrome对img的加载和展现做了新的优化。
    执行顺序简单归纳为:
    立即执行函数 =》domReady  =》 onload

    五、js执行时机

    head里的 <script>标签会阻塞后续资源的载入以及整个页面的生成 。所以很多网站把javascript放在网页的最后面,或者动用了window.onload或是docmuemt ready之类事件。
    实现等待DOM被完全加载后才调用JS文件
    1) 将所有的JS文件都放在</HTML>后面后再进行调用
    2 )将JS代码放在标签里面
    Javascript并非完全的按顺序解释执行,而是在解释之前会对Javascript进行一次“预编译”,在预编译的过程中,会把定义式的函数优先执行,也会把所有var变量创建,默认值为undefined,以提高程序的执行效率。当JavaScript引擎解析脚本时,它会在预编译期对所有声明的变量和函数进行处理。

    1. 在执行前会进行类似“预编译”的操作:首先会创建一个当前执行环境下的活动对象,并将那些用var申明的变量设置为活动对象的属性,但是此时这些变量的赋值都是undefined,并将那些以function定义的函数也添加为活动对象的属性,而且它们的值正是函数的定义。

    2. 在解释执行阶段,遇到变量需要解析时,会首先从当前执行环境的活动对象中查找,如果没有找到而且该执行环境的拥有者有prototype属性时则会从prototype链中查找,否则将会按照作用域链查找。遇到var a = ...这样的语句时会给相应的变量进行赋值(注意:变量的赋值是在解释执行阶段完成的,如果在这之前使用变量,它的值会是undefined) 所以,就会出现当JavaScript解释器执行下面脚本时不会报错
    f();  // 调用函数,正确执行
    function f(){ 
       alert(1);
    }
      
    f();// 调用函数,返回语法错误
    var f = function(){
       alert(1);
    }

    上面示例中定义的函数仅作为值赋值给变量f,所以在预编译期,JavaScript解释器只能够为声明变量f进行处理,而对于变量f的值,只能等到执行期时按顺序进行赋值,自然就会出现语法错误,提示找不到对象f。

    JavaScript解释器在执行脚本时,是按块来执行的。通俗地说,就是浏览器在解析HTML文档流时,如果遇到一个<script>标签,则JavaScript解释器会等到这个代码块都加载完后,先对代码块进行预编译,然后再执行。执行完毕后,浏览器会继续解析下面的HTML文档流,同时JavaScript解释器也准备好处理下一个代码块。由于JavaScript是按块执行的,所以如果在一个JavaScript块中调用后面块中声明的变量或函数就会提示语法错误。虽然说,JavaScript是按块执行的,但是不同块都属于同一个全局作用域,也就是说,块之间的变量和函数是可以共享的。

    备注:document.write()会把输出写入到脚本文档所在的位置,浏览器解析完documemt.write()所在文档内容后,继续解析document.write()输出的内容,然后在继续解析HTML文档。
    <script type="text/javascript">//<![CDATA[   
      document.write('<script type="text/javascript" src="test.js"><//script>');
      document.write('<script type="text/javascript">');   
      document.write('alert(2);')   
      document.write('alert("我是" + tmpStr);');   
      document.write('<//script>');    //]]>
    </script> 
    IE下,用Document.Write方法引用js文件时,js文件会出现尚未加载就直接调用的情况,因此建议将引用的JS文件单独放在一个script块中。以确保引用的js文件完全加载后,再继续执行后面的Document.Write内容。在js里出现同名函数后,你在web页面里调用改js函数后,总是调用页面中最后一个加载的函数。

    六、jQuery DomReardy事件

    在Jquery里面,我们可以看到两种写法:$(function(){}) 和$(document).ready(function(){})
    这两个方法的效果都是一样的,都是在dom文档树加载完之后执行一个函数(注意,这里面的文档树加载完不代表全部文件加载完)。
    而window.onload是在dom文档树加载完和所有文件加载完之后执行一个函数。也就是说$(document).ready要比window.onload先执行。

    那么Jquery里面$(document).ready函数的实现:

    document.ready = function (callback) {
      //兼容FF,Google
      if (document.addEventListener) {
         document.addEventListener('DOMContentLoaded', function () {
              document.removeEventListener('DOMContentLoaded', arguments.callee, false);
                    callback();
              }, false)
           }
       //兼容IE
       else if (document.attachEvent) {
           document.attachEvent('onreadytstatechange', function () {
               if (document.readyState == "complete") {
                  document.detachEvent("onreadystatechange", arguments.callee);
                         callback();
                  }
               })
           }
      else if (document.lastChild == document.body) {
              callback();
           }
      }
    
      window.onload = function () {
          alert('onload');
    }; document.ready(function () { alert(
    'ready'); });

    七、 DOM(文档对象模型 Document Object Model)

    参考:

    http://www.kuqin.com/shuoit/20140303/338367.html

    http://www.cnblogs.com/zhangziqiu/archive/2011/06/27/DOMReady.html

    w3c HTML5规范:https://www.w3.org/TR/html5/syntax.html#the-end

    DOMContentLoaded: https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

  • 相关阅读:
    IE9的css hack
    ie6 插入图片img png24 阴影
    clear:both; overflow:hidden
    ie6 背景图片 png24 阴影
    html 页面定位
    IE无法显示PNG
    行内元素 & 块元素
    div+css布局时的浏览器兼容问题
    删除源代码的管理信息(VSS)
    string path;
  • 原文地址:https://www.cnblogs.com/chenlogin/p/5221562.html
Copyright © 2011-2022 走看看