Web开发中,JS是如何加载的?JS应该放在什么位置

       首先简单介绍一下浏览器构造页面的原理:

       当浏览器从服务器接收到了HTML文档,并把HTML在内存中转换成DOM树,在转换的过程中如果发现某个节点(node)上引用了CSS或者IMAGE,就会再发1个request去请求CSS或image,然后继续执行下面的转换,而不需要等待request的返回,当request返回后,只需要把返回的内容放入到DOM树中对应的位置就OK。但当引用了JS的时候,浏览器发送1个js request就会一直等待该request的返回。因为浏览器需要1个稳定的DOM树结构,而JS中很有可能有代码直接改变了DOM树结构,比如使用document.write 或 appendChild,甚至是直接使用的location.href进行跳转,浏览器为了防止出现JS修改DOM树,需要重新构建DOM树的情况,所以就会阻塞其他的下载和呈现。

       结论:所有浏览器在下载JS的时候,会阻止一切其他活动,比如其他资源的下载,内容的呈现等等。至到JS下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容。

       引用外部的JS会阻塞其后的资源下载和其后的内容呈现。

       嵌入JS(指直接写在HTML文档中的JS代码)会阻塞所有内容的呈现。

       注意:当CSS后面跟着嵌入的JS的时候,该CSS就会出现阻塞后面资源下载的情况。根本原因:因为浏览器会维持html中css和JS的顺序,样式表必须在嵌入的JS执行前先加载、解析完。而嵌入的JS会阻塞后面的资源加载,所以就会出现上面CSS阻塞下载的情况。

       嵌入JS应该放在什么位置:

       1、放在底部,虽然放在底部照样会阻塞所有呈现,但不会阻塞资源下载。

       2、如果嵌入JS放在head中,请把嵌入JS放在CSS前面

       3、使用defer

        defer的作用:告诉浏览器这段Script段包含了无需立即执行的代码,使得页面完全载入之后在执行这段JavaScript。并且,与SRC属性联合使用,它还可以使这些脚本在后台被执行,前台的内容则正常显示给用户。

        例如:<script defer="defer" src="JavaScript.js" type="text/javascript"/>或者defer="true"

        注意:不要在defer型脚本程序段中调用document.write命令,因为document.write将产生直接输入效果;不要在defer型脚本程序段中包含任何立即执行脚本要使用全局变量或者函数。

       defer相当于window.onload()={},就是等页面都加载完了在调用此JS。但是前者比后者更灵活。

       4、不要在嵌入的JS中调用运行时间较长的函数,如果一定要用,可以用setTimeout来调用。
详细出处参考:
http://www.jb51.net/article/23465.htm

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值