添加setTimeout JavaScript/jQuery函数帮助页面加载更快

does adding setTimeout JavaScript/jQuery function help page load quicker

本文关键字：加载 帮助 函数 setTimeout JavaScript jQuery 添加      更新时间：2023-09-26

下面的JavaScript是否允许网页加载速度更快，而不是标准函数或$(window).load(function(){或$(document).ready()，如果没有，是否有一种方法允许页面加载然后运行JavaScript ?

setTimeout(function(){
// JavaScript OR jQuery to execute
}, 5000);

描述

$(document).ready()指定DOM满载时执行的函数

函数确保所有的html元素(DOM)被加载。所以使用setTimeout不是一个好主意，因为你无法知道浏览器是否在这个时候构建了DOM。

你可以把你的javascript放在你的文档的末尾，以确保浏览器已经建立了DOM，但这不是你应该这样做，在使用jQuery的情况下。

的更多信息

DOM表示文档对象模型

文档对象模型(DOM)是一种跨平台的、独立于语言的约定，用于表示HTML、XHTML和XML文档中的对象并与之交互。DOM的各个方面(比如它的"元素")可以在使用的编程语言的语法中处理和操作。DOM的公共接口是在它的API中指定的。

以下函数在jQuery中是相同的(重载)

$(function() 
{
  // DOM is loaded
});
$(document).ready(functions() {
  // DOM is loaded
});
// this is the best way if you want prevent collisions with other JavaScript librarys
jQuery(document).ready(function($) {
  // DOM is loaded
});
jQuery文档- .ready()

- Wikipedia - Document Object Model

首先，将任何对构建页面不重要的JavaScript放在HTML的最底部，在关闭</body>标记之前。这包括任何引用外部.js文件的脚本标记。

接下来，如果你正在使用jQuery(我希望你是)，然后插入你需要的任何JS逻辑到这个方法:

$(document)ready(function(){
     //do stuff
});

最后，对于老式JS，你想把这个添加到你的body标签:

onload="YourFunctionName()"

除非你正在用JS做一些大量的计算，否则不行。你的大部分"加载"时间都花在下载资源上，而不是在页面上绘制/渲染它们。如果您有任何发送其他httprequest (ajax)的代码，并且这些代码在页面完成加载之前被触发，那么您可能希望以某种方式使用onload方法。或者就像克莱夫说的那样，把它放在底部。

相关文章：