前端设计中关于外部js文件加载的速度优化

在一般情况下，许多人都是将<script>写在了<head>标签中，而许多浏览器都是使用单一的线程来加载js文件的，从上往下，从左往右。

若是加载过程出错，那么网页就会阻塞，就像许多网站用Google的CDN库，而我们在墙内访问一样。页面不会出来，一直加载这个js文件，直到浏览器放弃加载为止！

 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JsLoad.Default" %>
 2
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4 <html xmlns="http://www.w3.org/1999/xhtml">
 5 <head id="head">
 6     <title></title>
 7     <link href="Styles/Site.css" rel="stylesheet" type="text/css" />
 8     <script src="jquery/jquery-1.4.1.js" type="text/javascript"></script>
 9     <script src="js/hello.js" type="text/javascript"></script>
10     <script src="js/world.js" type="text/javascript"></script>
11 </head>
12 <body>
13     <img src="1.jpg" width="200" height="300" />
14 </body>
15 </html>

在上面的例子中，分别加载了hello.js 和 word.js 以及jQuery。

从这张图中可以看出，三个js文件还有一个css样式表是同时加载的，这是在chrome浏览器下测试的，现代浏览器IE、Firefox还有chrome中都实现了并行的js加载，这节约了不少时间，同时，可以看见之后的图片是在js文件加载完毕之后触发的，这样，就阻塞了页面的加载速度。

开始优化

这里，将js文件放置于body前面，这样就可以解决页面空白问题。

现在可以看到js文件已经可以和页面元素基本上同时加载了。但是也还是能够看到，请求时间略微的向后延迟了一点儿。

说道这里，js文件在加载的时候都是发起了get请求的，凡是发起了请求，都是需要请求头的，所以这里耗费了不少时间。

想到这里，就有几种解决思路了！

1、合并js文件，减少请求次数

2、利用第三方的工具来减少请求次数，如PHP的Minify。

淘宝就用了方法二：

上图看出一个src 分别用逗号隔开了三个js文件的路径，这里就用第三方工具将其本来有的三次请求，减少到了一次请求。

好叻，说到这里，仔细看看chrome中的加载时间，发现加载时间比起最初的加载时间已经减少了不少了。

我们进一步优化！

上面的几种方法，不管是将<script>写在页尾、或者降低请求次数，页面始终还是“阻塞模式”，也就是说锁死了浏览器，现在的页面越来越复杂，交互越来越多，js文件相应的也越来越多，提高加载速度是必然的需求。

那么，相对的，我们寻找一种“无阻塞模式”，也就是在页面加载完成之后再加载交互的js文件，这里可以选择使用windows.οnlοad=function(){}的方式来加载文件。

这里实现无序的追加加载：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JsLoad.Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="head">
<title></title>
<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<img src="1.jpg" width="200" height="300" />
<script src="jquery/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function () {
$("#head").append("<script src='js/hello.js' type='text/javascript'><\/script>")
$("#head").append("<script src='js/world.js' type='text/javascript'><\/script>");
}
</script>
</body>
</html>

好叻，到了这里，看上图，可以发现js文件 hello.js、world.js 两个文件都是文档加载完成之后再加载的。

这样计算的话，页面的加载时间又将减去不少了。

然后再撸一个有序的：

 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JsLoad.Default" %>
 2
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4 <html xmlns="http://www.w3.org/1999/xhtml">
 5 <head id="head">
 6     <title></title>
 7     <link href="Styles/Site.css" rel="stylesheet" type="text/css" />
 8 </head>
 9 <body>
10     <img src="1.jpg" width="200" height="300" />
11     <script type="text/javascript">
12         function loadScript(url, callback) {
13             var script = document.createElement("script");
14             script.type = "text/javascript";
15
16             //IE
17             if (script.readyState) {
18                 script.onreadystatechange = function () {
19                     if (script.readyState == "loaded" || script.readyState == "complete") {
20                         script.onreadystatechange = null;
21                         callback();
22                     }
23                 }
24             } else {
25                 //非IE
26                 script.onload = function () {
27                     callback();
28                 }
29             }
30             script.src = url;
31             document.getElementById("head").appendChild(script);
32         }
33         //第一步加载jquery类库
34         loadScript("jquery/jquery-1.4.1.js", function () {
35             //第二步加载hello.js
36             loadScript("js/hello.js", function () {
37                 //第三步加载world.js
38                 loadScript("js/world.js", function () {
39
40                 });
41             });
42         });
43     </script>
44 </body>
45 </html>

这样就可以实现队列加载了，这种方式，腾讯网就是这么实现的了！

前端设计中关于外部js文件加载的速度优化相关推荐

Angular7中引用外部JS文件
Angular7中引用外部JS文件,步骤如下: 1. 将引入的js文件放到项目的src/assets下 2. 在angular.json文件中找到scripts项并配置js文件的相对路径 3. 在sr ...
jsp中引入外部js文件发生中文乱码
jsp中引入外部js文件发生中文乱码前言排查解决问题前言我在写作业时发现自己的作业出现中文乱码排查我先检查了一番根据F12找到了span标签的id,在编译器中进行搜索找到找到了语句的所 ...
解决页面上JS文件加载过慢问题
解决页面上JS文件加载过慢问题参考文章: (1)解决页面上JS文件加载过慢问题 (2)https://www.cnblogs.com/zying3/p/10278102.html (3)https: ...
关于Springboot项目页面中css,js文件加载失败的问题
记录一个刚开始接触Springboot时踩到的小坑.问题如下: 正在写一个登录功能,页面套用了bootstrap的模板,用浏览器打开页面有样式,但是整个项目跑起来的时候跳转的页面就会丢失样式,浏览器控 ...
html、css、js文件加载顺序及执行情况
html,css,js加载执行情况: HTML页面加载和解析流程 1. 用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件. 2. 浏览器开始载入h ...
怎么判断一个JS文件加载完成？
在正常的加载过程中,js的加载都是同步的,也就是说在加载过程中,浏览器会阻塞接下来的内容的加载.这时候我们就要用到动态加载,动态加载是异步的,如果我们在后边要用到这个动态加载的js文件里的东西,就要保 ...
js文件加载显示状态码206，导致页面一直显示加载中
一.问题现象: 用户反馈平台一直显示加载中,无法登录平台,因没有其他用户反馈,且我方验证时可以打开平台,采用了如下方式均未解决问题: 1.换浏览器使用 2.清除浏览器缓存 3.咨询服务部署方是否对用户 ...
VUE 项目中引入外部js文件（CND引入）
以VUE项目中引入echarts文件为例: 第一步在VUE项目中找到index.html文件引入 :<script src="https://cdnjs.cloudflare.com ...
JS测试CND js文件加载速度
实际文件大小也会有些差异统一使用的是jquery 3.1.0 未压缩版本这段代码执行的结果和chrome的控制台基本差在10ms以内方便测试本地网络以及方便修改逻辑批量测试压力测试 &l ...

前端设计中关于外部js文件加载的速度优化

前端设计中关于外部js文件加载的速度优化相关推荐

最新文章

热门文章