js加载全解析

前端开发用哪个浏览器
火狐浏览器前端开发调试
前端开发必须的浏览器
1. js的加载
1.1 js不能并行下载和解析(阻塞下载)
1.2 当引用了js的时候,浏览器发送1个js request就会一直等待该request的返回。因为浏览器需要1个稳定的DOM树结构,而js中很有可能有代码直接改变了DOM树结构,比如使用 document.write 或
appendChild,甚至是直接使用的location.href进行跳转,浏览器为了防止出现JS修改DOM树,需要重新构建DOM树的情况,所以 就会阻塞其他的下载和呈现. 1.3
每个脚本定义的全局变量和函数,都可以被后面执行的脚本所调用。
注意:变量的调用,必须是前面已经声明,否则获取的变量值是undefined.
1.4同一段脚本,函数定义可以出现在函数调用的后面,但是如果是分别在两段代码,且函数调用在第一段代码中,则会报函数未定义错误
原来:放在不同的script 脚本段中,是不同的哦!大家注意哦
1.5 #####document.write()会把输出写入到脚本文档所在的位置,浏览器解析完documemt.write()所在文档内容后,继续解析document.write()输出的内容,
然后在继续解析html文档。
在Firefox和Opera中的弹出值的顺序是:1、2、我是1、3
在IE中弹出值的顺序是:2、1、3,同时浏览器报错:tmpStr未定义
原因可能是IE在document.write时,并未等待加载SRC中的Javascript代码完毕后,才执行下一行,所以导致2先弹出,
并且执行到document.write(’document.write(“我是” + tmpStr)’)调用tmpStr时,tmpStr并未定义,从而报错。
解决这个问题,可以利用html解析是解析完一个html标签,再执行下一个的原理,把代码拆分来实现:
<script type=”text/javascript” document.write(‘<script type=”text/javascript” src=”test.js”><//script>’);
</script>
<script type=”text/javascript”>
    document.write(‘<script type=”text/javascript”>’);
    document.write(‘alert(2);’)
    document.write(‘alert(“我是” + tmpStr);’);
    document.write(‘<//script>’);
</script>
<script type=”text/javascript” alert(3); </script> 这样IE下和其他浏览器输出值的顺序都是一直的了:1、2、我是1、3
总结:IE下,用Document.Write方法引用js文件时,js文件会出现尚未加载就直接调用的情况,因此建议将引用的JS文件单独放在一个script块中。以确保引用的js文件完全加载后,再继续执行后面的Document.Write内容
2.实际应用–页面加载完后执行的jquery模式事件. 2.1$(document).ready(function () { //方法体 }); 区别: $(window).load(function()
            {**}); $(document).ready(function () { });
        不一定要等所有的js和图片加载完毕,就可以执行一些方法,不过有些时候,必须要等所有的元素都加载完毕,才可以执行一些方法的时候,比如说,部分图片或者什么其他方面还没有加载好,这个时候,点击某些按钮,会导致出现意外的情况,这个时候,就需要用到: $(window).load(function () { }); 比如在游戏开发中资源就加载完全后才开始游戏 **. 2.2 用$(window).load(function () {…})而不用body.onload()的几个理由 < font color = “#000″ > <font face=”Arial”> $(window).load(function() {
            alert(“hello,我是jquery!”);
            });
$(window).load(function() {
                alert(“hello,我也是jquery”);
            });</font></font>
             < font color = “#000″ > <font face=”Arial”> <script type=”text/javascript”>
                (function() {
                    alert(“DOM还没加载哦!”);
})(jquery)
                </script>
</font>
</font> js 模式事件:
window.onload=function(){};
3. js 的加载对网站优化的影响
最近研究网站首页的优化,发现加载顺序确实有很多说道,对网页的加载速度,用户体验的好坏有较大的影响。
参考文章 :
[http://www.cnblogs.com/smjack/archive/2008/08/20/1272370.html](http://www.cnblogs.com/smjack/archive/2008/08/20/1272370.html)
两者的主要区别 :
window.onload:
当一个文档完全下载到浏览器中时,才会触发window.onload事件。这意味着页面上的全部元素对js而言都是可以操作的,也就是说页面上的所有元素加载完毕才会执行。这种情况对编写功能性代码非常有利,因为无需考虑加载的次序。、
$(document).ready{ }:
会在DOM完全就绪并可以使用时调用。虽然这也意味着所有元素对脚本而言都是可以访问的,但是,并不意味着所有关联的文件都已经下载完毕。换句话说,当HMTL下载完成并解析为DOM树之后,代码就会执行。
前端开发火狐浏览器兼容性
前端开发测试浏览器ie
前端开发在uc浏览器有的问题
» 本文来自:前端开发者 » 《js加载全解析》
» 本文链接地址:https://www.rokub.com/6529.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!