javascript加载与运行的时机_webjs点击进入页面的时机用哪个方法设置-优快云博客

本文深入探讨了网页中JavaScript加载和执行的性能问题，通过实例展示了如何优化网页性能，避免长时间的空白等待，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在看一本书《高性能javascript》，觉得很有感触，以前都没有注意这些，看了之后拿出来与大家分享一下

　　事实上，大多数浏览器使用单进程处理UI更新和javascript运行多个任务，而同时只能有一个任务被执行，这样javascript的加载和运行就被阻塞了。我们来看看下面一个简单的例子

<html>
<head>
<title>Script Example</title>
<-- Example of inefficient script positioning -->
<script type="text/javascript" src="file1.js"></script>
<script type="text/javascript" src="file2.js"></script>
<script type="text/javascript" src="file3.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>Hello world!</p>
</body>
</html>

这看上去没什么问题，很好，但仔细的朋友都知道，这肯定存在性能问题：在<head>加载了三个javascript文件，因为每个<script>标签都阻塞了页面的解析过程，直到加载并运行完javascript代码之后，页面处理才能继续。所以如果网速慢一点的话，用户在看到页面之前就会有一段时间看到的是空白页面。为更好明白，画出简单的图形来理解：

大家都看到在file2.js加载之前会有一段空白时间，这段时间为file1.js的运行时间。

　　幸运的是现在很多浏览器都支持了javascript的并行下载，但是还是有一个问题，即使可以并行下载，javascript运行时间也是在等待所有javascript文件加载完成之后才能运行。为了解决这个问题，我们可以以下方式来组织html页面这也只是其中的一种方法：

<html>
<head>
<title>Script Example</title>
<-- Example of inefficient script positioning -->
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>Hello world!</p>
<script type="text/javascript" src="file1.js"></script>
<script type="text/javascript" src="file2.js"></script>
<script type="text/javascript" src="file3.js"></script>
</body>
</html>

这样修改之后用户就没前面出现空白的页面。