脚本/链接标签与 AJAX 加载

Script/Links tags vs AJAX loading

本文关键字：AJAX 加载 标签 链接 脚本      更新时间：2023-09-26

我想加载脚本标签和链接标签。我可以这样做如下

 <script src="sample.js" type="text/javascript"></script>
 <link type="text/css" href="sample.css" rel="stylesheet"></link>

（或）

 $.ajax({
    url: 'sample.js',
    dataType: 'script',
    success: function(data) {},
    error: function(data) {}
 });

但我想知道哪一种是最好/安全的方式[一般来说]。

我认为我们可以通过 ajax 加载轻松处理错误，否则我们必须检查 onLoad 函数以查找脚本是否成功加载并查找链接是否成功加载，我们需要遍历document.styleSheets。

有什么建议吗？

我主要关心的是找出脚本和链接是否成功加载并安全，这是为了测试，所以我不喜欢太多代码来做到这一点。

至于javascript文件：
Javascript具有阻塞性质。如果要在页面上逐个加载多个外部js文件，请考虑每个文件都将加载并执行。如果在执行某些 javascript 文件时发生一些错误，您可以在开发人员控制台中观察到它。不幸的是，JavaScript下载仍然阻止下载其他资源。

结论：将<link>标签放在<script>标签之前。建议将所有<script>标签放置在靠近底部的位置 尽可能<body>标记


至于css文件：检查某些样式表是否成功加载是一件大事。以下是使用 JQuery 检查现有的（未加载的）css 文件：

if (!$("link[href='sample.css']").length){
    console.log('error while downloading sample.css');
    $('<link href="sample.css" rel="stylesheet">').appendTo("head");
}

要检查某些css文件是否已完全加载，您可能会在纯 Javascript 中使用currentStyle或window.getComputedStyle方法，并搜索一些具有已知类或标识符的元素（这些元素正好存在于您的 css 文件中）

相关文章：