Rumah  >  Artikel  >  hujung hadapan web  >  js加载之使用DOM方法动态加载Javascript文件

js加载之使用DOM方法动态加载Javascript文件

高洛峰
高洛峰asal
2017-02-06 09:28:291265semak imbas

传统上,加载Javascript文件都是使用3f1c4e4b6b16bbbd69b2ee476dc4f83a标签。 
就像下面这样: 
e6c9f2d7a8d202c4ce4348f85f6483782cacc6d41bbb37262a98f745aa00fbf0

3f1c4e4b6b16bbbd69b2ee476dc4f83a标签很方便,只要加入网页,浏览器就会读取并运行。但是,它存在一些严重的缺陷。 
  (1)严格的读取顺序。由于浏览器按照3f1c4e4b6b16bbbd69b2ee476dc4f83a在网页中出现的顺序,读取Javascript文件,然后立即运行,导致在多个文件互相依赖的情况下,依赖性最小的文件必须放在最前面,依赖性最大的文件必须放在最后面,否则代码会报错。 
  (2)性能问题。浏览器采用"同步模式"加载3f1c4e4b6b16bbbd69b2ee476dc4f83a标签,也就是说,页面会"堵塞"(blocking),等待javascript文件加载完成,然后再运行后面的HTML代码。当存在多个3f1c4e4b6b16bbbd69b2ee476dc4f83a标签时,浏览器无法同时读取,必须读取完一个再去读取另一个,造成读取时间大大延长,页面响应缓慢。 
为了解决这些问题,可以使用DOM方法,动态加载Javascript文件。 

  function loadScript(url){ 
    var script = document.createElement("script"); 
    script.type = "text/javascript"; 
    script.src = url; 
    document.body.appendChild(script); 
  }

这样做的原理是,浏览器即时创造出一个3f1c4e4b6b16bbbd69b2ee476dc4f83a标签,然后"异步"读取Javascript文件。这样不会造成页面堵塞,但会造成另外一个问题:这样加载的Javascript文件,不在原始的DOM结构之中,因此在DOM-ready(DOMContentLoaded)事件和window.onload事件中指定的回调函数对它无效。

更多js加载之使用DOM方法动态加载Javascript文件相关文章请关注PHP中文网!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn