JS外链式在html头部引入无效的问题

为何外部引入的script需要放在body的末尾?

原因:
浏览器是单线程的,如果放在头部,浏览器会先加载script文件并执行,此时会形成一个阻塞,影响后续的dom文件的加载和执行。

缺点:

  1. 加载 script 时造成页面阻塞,影响页面的呈现速度,会造成非常差的用户体验,
  2. 当script文件中对dom节点进行操作时dom并未加载出来,此时就会出现代码报错,在加载完dom之后不会继续回到头部执行script代码,并且对dom进行操作的效果就显示不出来,

避免措施:

  1. 直接将外部引入的script标签放在body的末尾,这样就可以先加载dom后加载js文件并执行了
  2. 在外部引入的js文件中写一个函数window.onload,该意为当页面加载完之后再加载并执行该函数
window.onload=function(){
   //  函数
}      
  1. 在外部引入的js文件中写一个函数$(document).ready(),该意为当文档加载完后运行的函数
$(document).ready(functhion(){
   //  函数
})
  1. 在外部引入的js文件中写一个函数,然后再html文件的body标签中添加onload事件
function funAbc(){
  //  函数
}

<body onload=funAbc></body>

注意:
虽然说将外部引入的js引用放在body末尾处,不过也是有顺序的,需要将一些依赖文件放在前边
例如jquery文件需要放在前边,这样后边函数中使用$才不会报错。


作者:Rainbow1995
来源:CSDN
原文:https://blog.csdn.net/Rainbow1995/article/details/79622223
版权声明:本文为博主原创文章,转载请附上博文链接!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容