JAVA高级面试进阶训练营视频教程

admin · 发表于 2021-5-12 05:06:04

解决HTML加载时，外部js文件引用较多，影响页面打开速度问题

通常HTML文件在浏览器中加载时，浏览器都会按照<script>元素在页面中出现的先后顺序，对它们依次加载，一旦加载的js文件数量过多，就会导致页面展示延迟。那么，在开发的过程中，改怎么解决呢？

首先，我们看一看传统中js加载的做法，所有的<script>元素都应该放在页面的<head>元素中，例如：

<!DOCTYPE html>
<html>
<head>
<title>HTML js应用 </title>
<meta http-equiv="Content-type" content="text/html; charset=GBK"> </meta>
<script type="text/javascript" src="example1.js"> </script>
<script type="text/javascript" src="example2.js"> </script>
</head>
<body>
<div>
<h1>好好学习，天天向上 </h1>
</div>
</body>
</html>

这种做法的目的就是把所用的外部文件（包括CSS文件和js文件）的引用都放在相同的地方。可是，在文档的<head>元素中包含所有JavaScript文件，意味着必须等到全部JavaScript代码都被下载、解析和执行完成以后，才能开始呈现页面的内容。而对于需要很多JavaScript文件的页面来说，无疑会出现页面展示延迟现象。下面我给出3种解决方案：

方案一、改变标签的位置

我们把<script>元素引用放在<body>元素中，如下例所示：

<!DOCTYPE html>
<html>
<head>
<title>HTML js应用 </title>
<meta http-equiv="Content-type" content="text/html; charset=GBK"> </meta>
</head>
<body>
<div>
<h1>好好学习，天天向上 </h1>
</div>
<script type="text/javascript" src="example1.js"> </script>
<script type="text/javascript" src="example2.js"> </script>
</body>
</html>

这样，在解析包含的JavaScript代码之前，页面的内容将完全展示在浏览器中。而用户也会因为浏览器窗口显示空白页面的时间缩短而感到打开的速度加快了。

方案二、在<script>元素中加延迟脚本

HTML4.01为<script>标签定义了defer属性。这个属性的用途是表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面解析完成后再运行。因此，在<script>元素中设置defer属性，相当于告诉浏览器立即下载，但延迟执行。下面看代码实现：

<!DOCTYPE html>
<html>
<head>
<title>HTML js应用 </title>
<meta http-equiv="Content-type" content="text/html; charset=GBK"> </meta>
<script type="text/javascript" defer="defer" src="example1.js"> </script>
<script type="text/javascript" defer="defer" src="example2.js"> </script>
</head>
<body>
<div>
<h1>好好学习，天天向上 </h1>
</div>
</body>
</html>

在这个例子中，虽然我们把<script>元素放在了文档的<head>元素中，但其包含的脚本将延迟到浏览器遇到</html>标签后再执行。HTML5规范要求脚本按照它们出现的先后顺序执行加载。

方案三、在<script>元素中加异步脚本

HTML5为<script>元素定义了async属性，这个属性与defer属性类似，都用于改变处理脚本的行为。async与defer类似，只适用于外部脚本文件，并告诉浏览器立即下载文件。但与defer不同的是，标记为async的脚本并不保证按照指定它们的先后顺序执行。如下例：

<!DOCTYPE html>
<html>
<head>
<title>HTML js应用 </title>
<meta http-equiv="Content-type" content="text/html; charset=GBK"> </meta>
<script type="text/javascript" async src="example1.js"> </script>
<script type="text/javascript" async src="example2.js"> </script>
</head>
<body>
<div>
<h1>好好学习，天天向上 </h1>
</div>
</body>
</html>

在XHTML文档中，要把async属性设置为async="async"。

		自动登录	找回密码
密码			立即注册

JAVA高级面试进阶训练营视频教程	Java架构师系统进阶VIP课程	分布式高可用全栈开发微服务教程	Go语言视频零基础入门到精通	Java架构师3期(课件+源码)
Java开发全终端实战租房项目视频教程	SpringBoot2.X入门到高级使用教程	大数据培训第六期全套视频教程	深度学习（CNN RNN GAN）算法原理	Java亿级流量电商系统视频教程
互联网架构师视频教程	年薪50万Spark2.0从入门到精通	年薪50万！人工智能学习路线教程	年薪50万大数据入门到精通学习路线	年薪50万机器学习入门到精通教程
仿小米商城类app和小程序视频教程	深度学习数据分析基础到实战	最新黑马javaEE2.1就业课程	从 0到JVM实战高手教程	MySQL入门到精通教程

JAVA高级面试进阶训练营视频教程

Java架构师系统进阶VIP课程

解决HTML加载时，外部js文件引用较多，影响页面打开速度问题

解决HTML加载时，外部js文件引用较多，影响页面打开速度问题

方案一、改变标签的位置

方案二、在<script>元素中加延迟脚本

方案三、在<script>元素中加异步脚本