Question

我有多个JavaScript文件，这些文件在页面加载之前已加载，这会影响页面速度。我希望我的JS文件可以在页面加载后加载，尽管这样可以提高页面速度。

我尝试使用async和defer，但是由于彼此之间的依赖性，这种方式对我来说不可行。我也尝试通过AJAX进行延迟加载，但这对我也不起作用（使用此链接https://w3bits.com/async-javascript）

@section Scripts {
  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=false&libraries=places"></script>
  <script src="/lib/bootstrap-datetimepicker/js/moment.js" type="text/javascript"></script>
  <script src="/lib/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js" type="text/javascript"></script> 
  <script src="/js/viewcomponent/windowsignup.js"></script>
  <script type='text/javascript' src='/js/viewcomponent/kundliregistrationwindow.js' async='async'></script>
}

我在页面上使用了多个JS文件，并且希望它们全部在页面加载后加载。有什么办法吗？

Answer 1

您可以在getScript内使用document.ready。

$(document).ready(function() {
    $.getScript("domainpath/lib/bootstrap-datetimepicker/js/moment.js");
});

js准备就绪后，您就可以提取您的dom。

Answer 2

您可以使用Jquery的$.getScript()函数，但是必须注意正确的加载顺序。会建议您在服务器端捆绑所有必需的文件，而只提供一个文件

Answer 3

当浏览器收到对HTML文件的请求时，DOM开始绘制。如果将脚本放在<head>标记中，则DOM将停止渲染，并且浏览器将开始执行<script> files。一种解决方案是将<script>文件放在<body>的末尾。另一个解决方案可能是在页面加载后像这样将脚本动态加载到页面中：

window.addEventListener('load', () => {
  let script = document.createElement('script');
  script.src = './my_lazy_loaded_script.js';
  document.body.appendChild(script);
});

如果您有多个相互依赖的文件，则可以使用async/await mechanism执行以下操作：

window.addEventListener('load', async () => {
    console.log('page loaded')
    try{
        await loadFileAsync('./my_first_lazy_load.js');
        await loadFileAsync('./my_second_lazy_load.js'); 
    } catch(err){
        console.log(err);
    } finally {
        console.log('Everything loaded')
    }
})

const loadFileAsync = (url) => {
    return new Promise((resolve, reject) => {
        if(url){
            let script = document.createElement('script');
            script.src = url;
            document.body.appendChild(script);
            resolve(true);
        } else {
            reject(false);
        }
    });
}

如果要在呈现DOM后立即加载脚本，可以将window.addEventListener('load',()=>{})替换为document.addEventListener('DOMContentLoaded', () => {})

Answer 4

通常使用Scripts节来控制脚本在文档中的呈现位置。浏览器的工作方式是从上到下解释HTML。如果遇到<script>标签，他们将暂停HTML渲染并首先解释JavaScript。对于外部JavaScript文件，这意味着它们将被首先包含和解释（如果未标记为defer或async）。

因此，通常的做法是在<body>标签的末尾添加JavaScript。这样，脚本将不会阻止首先呈现文档，但是它们还将执行得足够早以能够立即生效。另外，由于它们是在大多数<body>被解释之后执行的，因此它们可以直接访问DOM元素。因此，通常情况下，您无需先听另一个DOM事件即可对DOM进行操作。

例如，这可以正常工作：

<body>
    <div id="foo"></div>
    <script>
        var foo = document.getElementById('foo');
    </script>
</body>

但是，如果您在<script>之前（或<div>内部）有<head>，则脚本将无法简单地找到foo元素，因为还没有添加到DOM。

对于ASP.NET Core，这意味着您应确保将Scripts部分添加到布局文件内<body>标记的末尾。所以它应该像这样：

 <!-- (The rest of the layout) -->

 @RenderSection("Scripts", required: false)

 </body>
 </html>

您还可以在RenderSection调用之前之前添加脚本标签，以确保这些脚本在所有页面上均可用，但在其他脚本之前已加载。例如，如果您使用的是Bootstrap，而您想使用jQuery，则在所有页面上全局包含它可能很有意义。但是由于您在其他脚本之前拥有它，所以它可用于其他脚本。

就脚本之间的依赖关系而言，请确保按执行顺序包含脚本。因此，如果您的脚本B依赖于脚本A中的功能，请确保在B之前包含A。但是，如果不使用defer或async，只需包含它们就可以了。

页面加载后加载多个js文件

4 个答案: