如何让js调用不影响页面的加载速度?

在WEB页面最常用的语言除了HTML、样式表外就是javascript了,但您知道怎么使用javascript才能不影响页面的加载速度吗?本文就来解决这个疑问,我们先来看看通常js的加载方式:
 
<script src="xxxx.js"></script>

我们这样改一下:
<script type="text/javascript">
document.write("<scr"+"ipt src=/"xxx.js/"></sc"+"ript>")
</script>

以下举例说明:

比如下面是某站长统计代码,以前尽管是把它放在页面的最底部,但还是拖累页面加载进度。

<script src="http://s69.cnzz.com/stat.php?id=265381&web_id=265381&show=pic" language="JavaScript" charset="gb2312"></script>

我们可以把它换成这样的方式来加载(任然放在页面最底部):



<script type="text/javascript">
document.write("<scr"+"ipt src=/"xxx.js/"></sc"+"ript>")
</script>


的方式,还可实现按需按条件的来加载你要的JS 文件:

<script type="text/javascript">
if ( "心情好" ) {document.write("<scr"+"ipt src=/"xxx.js/"></sc"+"ript>")}
</script>

这样要是"心情不好",就自然不会载入你不想要的JS文件了。


<script type="text/javascript">
document.write("<scr"+"ipt src=/"=http://s69.cnzz.com/stat.php?id=265381&web_id=265381&show=pic/" language=/"JavaScript/" charset=/"gb2312/"></sc"+"ript>")
</script>


这样速度快多了。


个人理解原因是:直接包含js解析器会当做文件来加载处理,(会优先下载js文件然后再解析html代码),而用document.write,js文件被当成html代码来解析,(同步加载html文档和js代码)不会影响到整个文档加载。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
### 回答1: 如果 JavaScript 中说 `$` 不存在,通常是因为代码中没有正确引入 jQuery 库。请确保在 HTML 文件中正确引入 jQuery 库,可以使用以下代码: ```html <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> ``` 如果已经引入了 jQuery 库,但仍然出现 `$` 不存在的错误,请检查 jQuery 库文件路径是否正确,或者尝试使用 `jQuery` 替换 `$` 来避免命名冲突。 ### 回答2: 如果在使用JavaScript代码时遇到"$不存在"的情况,可以尝试以下几种解决方法: 1. 确认是否正确加载了jQuery库:在使用"$"前,需要确保已正确加载了jQuery库。可以检查HTML页面中是否正确引入了jQuery库的文件,或者确认该文件是否已成功加载。 2. 检查是否使用了其他JavaScript库:如果在同一个页面中同时使用了多个JavaScript库,并且这些库也使用了"$"作为变量名,可能会导致冲突。此时需要将jQuery库的$符号与其他库的符号进行冲突解决,可以使用jQuery.noConflict()方法来解决。 3. 使用"jQuery"代替"$"符号:如果确保已正确加载了jQuery库,但仍然无法使用"$"符号,可以尝试使用"jQuery"来替代"$"符号。jQuery库依然会被正确调用,只是用法略有不同,比如将"$"符号改为"jQuery"。 4. 确认代码在DOM加载完成后执行:在某些情况下,如果JavaScript代码在DOM加载完成前执行,可能会导致"$"符号无法找到。为了解决这个问题,可以将代码包裹在$(document).ready()中,确保代码在DOM加载完成后再执行。 总结:当JavaScript代码中出现"$不存在"的情况时,首先需要确认是否正确加载了jQuery库。如果已加载了jQuery库,在多库冲突的情况下可以使用jQuery.noConflict()方法解决,或者用"jQuery"代替"$"符号。同时,需要确保代码在DOM加载完成后执行。 ### 回答3: 如果JS代码中出现$不存在的情况,可以尝试以下几种解决方法: 一、检查是否引入了jQuery库:$是jQuery的一个简化形式,如果未引入jQuery库,则会报$不存在的错误。确认代码中是否有正确引入jQuery库的语句,例如: ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> ``` 二、确保在代码中使用$之前,jQuery已完全加载:有时浏览器的加载速度慢或网络问题可能导致代码在jQuery加载之前执行,可在代码中使用DOMContentLoaded事件,确保在文档完全加载后再执行代码,例如: ```javascript document.addEventListener("DOMContentLoaded", function() { // 在这里使用$ }); ``` 三、查看是否与其他JavaScript库冲突:如果在同一页面中使用了其他JavaScript库,可能会导致$被占用。可以尝试使用jQuery.noConflict()方法释放$的控制权,并用其他变量替代,例如: ```javascript var jq = $.noConflict(); // 使用jq代替$ ``` 四、使用全写形式替代$:将代码中的$全部替换为jQuery,确保代码能正确执行,例如: ```javascript jQuery(document).ready(function() { // 在这里使用jQuery代替$ }); ``` 五、确保代码位于正确位置:有时候代码放置的位置不正确,可能导致$不存在的错误。确保代码位于页面加载完毕后执行,或者在DOM元素加载完毕后执行。 总之,要解决$不存在的问题,首先要检查是否引入了jQuery库,然后确认代码的执行时机和位置,还可以考虑与其他库的冲突以及使用全写形式替代$等方法。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ligengdipan

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值