本文最后更新于2022年7月9日,已超过 1 年没有更新,如果文章内容失效,请 反馈 给我们,谢谢!
如果网站中的JS中的文件比较多又特别大的时候会把整个网站都拖慢,特别是那些在网页头部就开始执行的JS文件效果更明显,那么有个设想利用div的id占用一个位置并且把JS输出到这个id中,并且把所有的js文件都放在网页部,这样在网页执行的时候开始就不会执行JS文件,等所有文章执行以后到达了网页底部时接触到JS才开始执行。
简单一点就是执行的过程是这样的:网页执行-执行到预留的id继续执行-执行到js文件把JS的值返回给预留的id-继续执行-结束
那么就有了下面这样的代码:
首先我们比如说在网页的头部需要执行一个JS文件我们把需要显示并执行的位置用以下代码表示:
<div id="<strong>ad</strong>">loading...</div>
说明:上面这个代码就表示你要放的JS代码
然后我们在页面底部或者其它地方加入以下代码:
<div id="span_ad"><script src="/ad.js"></script></div> //说明:上面代码的作用是把我们最终要加入网页的js文件传递到“ad”中; <script type="text/javascript"> document.getElementById("<strong>ad</strong>").innerHTML = document.getElementById("span_ad").innerHTML; //说明:上面代码的作用是把“span_ad”的值传给“ad” 对应上面的<div id="<strong>ad</strong>">loading...</div>
document.getElementById("span_ad").innerHTML = "";</script> //这里开始执行js代码并写入到html中。
现在再来试试网页的打开速度是不是快了很多,其实本质并不是能真正把网页的速度变得快,而是把执行起来比较慢比较拖后腿的而且没有必要在开始就执行的东西放到网页的最后执行,当你打开网页的时候浏览器早已经把网页最前面的代码执行完毕了。