脚本可以放在html页面的head里面，也可以放在body里面。
把脚本放在body中，当浏览器遇见<script>标签时， 浏览器不知道脚本会插入文本还是html标签，因此浏览器会停止分析html页面而去执行脚本。当使用src的方式添加脚本时，浏览器也会做同样的动作。在脚本处理的时候，页面呈现和用户交互将被完全阻止。脚本下载和执行阻塞了其他资源的下载，比如呈现页面使用的图片。（虽然很多浏览器实现了脚本并行下载的技术，但是这个问题依然没有解决）
脚本的位置
鉴于上面的理由，脚本应该始终放在页面的底部，即</body>前面。
一个简单的示例:
复制代码 代码如下:
<html>
<head>
<title>Script Example</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>Hello world!</p>
<script type="text/javascript" src="/UploadFiles/2021-04-02/file1.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/file2.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/file3.js"></body>
</html>
合并脚本
因为脚本下载阻塞了页面呈现，因而应该减少页面<script>标签的使用，不管脚本是内联的还是外部的。在处理外部脚本的时候情况比较特殊，浏览器下载一个100kb的脚本的时间将远远小于4个25kb的脚本，因为建立一个请求要消耗大量的时间。所以页面应该尽量的减少外部脚本的引用。
非阻塞的脚本
秘诀在于当页面loading完成之后再来加载脚本，也就是在window对象的onload事件触发之前 。下面是实现的几种方式：
1.使用defer
复制代码 代码如下:
<html>
<head>
<title>Script Defer Example</title>
</head>
<body>
<script defer>
alert("defer");
</script>
<script>
alert("script");
</script>
<script>
window.onload = function(){
alert("load");
};
</script>
</body>
</html>
页面弹出框出现的顺序： script/defer/load,这个技术的缺点是IE4+和FF3.5+才支持。
非阻塞的脚本（续）
2. 动态脚本元素
要知道<script>和普通的html标签并没有本质的区别，所以可以利用标准的DOM方法动态的添加脚本文件引用。方法如下：
复制代码 代码如下:
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "file1.js";
document.getElementsByTagName("head")[0].appendChild(script);
当这个标签一旦加入到html中，脚本文件就开始下载。这种方法的一个特点就是，文件下载和执行并不阻塞html页面其它部分的处理。通常将这样的脚本放在<head>中较之<body>更加安全，尤其是文件包含的代码需要在页面的load事件中执行。如果body的内容还没有被完全的加载，IE还会弹出“禁止操作”的错误。
当脚本文件下载完成之后，脚本立即执行（FF、Opera会等待前一个以同样方式添加的脚本执行）。当脚本自执行时，这没什么问题。但是如果脚本包含页面中其它脚本使用的interfaces，你需要确认脚本已经加载完成并且可用。幸好，当获得script标签的src的值之后，Firefox, Opera, Chrome, and Safari 3+ 会触发一个load事件。
复制代码 代码如下:
var script = document.createElement("script")
script.type = "text/javascript";
//Firefox, Opera, Chrome, Safari 3+
script.onload = function(){
alert("Script loaded!");
};
script.src = "file1.js";
document.getElementsByTagName("head")[0].appendChild(script);
IE则提供了另外一种解决方案--readystatechange事件。根据下载
脚本文件所处的状态，readyState 的值有以下几种：
"uninitialized"
默认状态
"loading"
开始下载
"loaded"
下载完成
"interactive"
下载完成，但是并非全部可用
"complete"
所有数据可用
IE的实现方式：
复制代码 代码如下:
var script = document.createElement("script")
script.type = "text/javascript";
script.onreadystatechange = function(){
if (script.readyState == "loaded" || script.readyState == "complete"){
script.onreadystatechange = null;
alert("Script loaded.");
}
};
script.src = "file1.js";
document.getElementsByTagName("head")[0].appendChild(script);
下面是综合以后的通用方法：
复制代码 代码如下:
function loadScript(url, callback){
var script = document.createElement("script")
script.type = "text/javascript";
if (script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" || script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else { //Others
script.onload = function(){
callback();
};
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}
The loadScript() function is used as follows:
loadScript("file1.js", function(){
alert("File is loaded!");
});
现在你可以按这种动态方式加载脚本了，但是你仍然需要考虑这些文件的下载顺序。主流浏览器中只有FF和Opera保证脚本的执行顺序和你指定的下载顺序一致，其他浏览器将按照脚本文件从服务器返回的顺序来执行。虽然如此，我们仍然有替代的解决方案：
复制代码 代码如下:
loadScript("file1.js", function(){
loadScript("file2.js", function(){
loadScript("file3.js", function(){
alert("All files are loaded!");
});
});
});
这样我们就能保证脚本文件的下载顺序严格的按照file1-file2-file3的方式进行。
注明：以上内容来自：<High Performance JavaScript>by Nicholas C. Zakas
把脚本放在body中，当浏览器遇见<script>标签时， 浏览器不知道脚本会插入文本还是html标签，因此浏览器会停止分析html页面而去执行脚本。当使用src的方式添加脚本时，浏览器也会做同样的动作。在脚本处理的时候，页面呈现和用户交互将被完全阻止。脚本下载和执行阻塞了其他资源的下载，比如呈现页面使用的图片。（虽然很多浏览器实现了脚本并行下载的技术，但是这个问题依然没有解决）
脚本的位置
鉴于上面的理由，脚本应该始终放在页面的底部，即</body>前面。
一个简单的示例:
复制代码 代码如下:
<html>
<head>
<title>Script Example</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>Hello world!</p>
<script type="text/javascript" src="/UploadFiles/2021-04-02/file1.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/file2.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/file3.js"></body>
</html>
合并脚本
因为脚本下载阻塞了页面呈现，因而应该减少页面<script>标签的使用，不管脚本是内联的还是外部的。在处理外部脚本的时候情况比较特殊，浏览器下载一个100kb的脚本的时间将远远小于4个25kb的脚本，因为建立一个请求要消耗大量的时间。所以页面应该尽量的减少外部脚本的引用。
非阻塞的脚本
秘诀在于当页面loading完成之后再来加载脚本，也就是在window对象的onload事件触发之前 。下面是实现的几种方式：
1.使用defer
复制代码 代码如下:
<html>
<head>
<title>Script Defer Example</title>
</head>
<body>
<script defer>
alert("defer");
</script>
<script>
alert("script");
</script>
<script>
window.onload = function(){
alert("load");
};
</script>
</body>
</html>
页面弹出框出现的顺序： script/defer/load,这个技术的缺点是IE4+和FF3.5+才支持。
非阻塞的脚本（续）
2. 动态脚本元素
要知道<script>和普通的html标签并没有本质的区别，所以可以利用标准的DOM方法动态的添加脚本文件引用。方法如下：
复制代码 代码如下:
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "file1.js";
document.getElementsByTagName("head")[0].appendChild(script);
当这个标签一旦加入到html中，脚本文件就开始下载。这种方法的一个特点就是，文件下载和执行并不阻塞html页面其它部分的处理。通常将这样的脚本放在<head>中较之<body>更加安全，尤其是文件包含的代码需要在页面的load事件中执行。如果body的内容还没有被完全的加载，IE还会弹出“禁止操作”的错误。
当脚本文件下载完成之后，脚本立即执行（FF、Opera会等待前一个以同样方式添加的脚本执行）。当脚本自执行时，这没什么问题。但是如果脚本包含页面中其它脚本使用的interfaces，你需要确认脚本已经加载完成并且可用。幸好，当获得script标签的src的值之后，Firefox, Opera, Chrome, and Safari 3+ 会触发一个load事件。
复制代码 代码如下:
var script = document.createElement("script")
script.type = "text/javascript";
//Firefox, Opera, Chrome, Safari 3+
script.onload = function(){
alert("Script loaded!");
};
script.src = "file1.js";
document.getElementsByTagName("head")[0].appendChild(script);
IE则提供了另外一种解决方案--readystatechange事件。根据下载
脚本文件所处的状态，readyState 的值有以下几种：
"uninitialized"
默认状态
"loading"
开始下载
"loaded"
下载完成
"interactive"
下载完成，但是并非全部可用
"complete"
所有数据可用
IE的实现方式：
复制代码 代码如下:
var script = document.createElement("script")
script.type = "text/javascript";
script.onreadystatechange = function(){
if (script.readyState == "loaded" || script.readyState == "complete"){
script.onreadystatechange = null;
alert("Script loaded.");
}
};
script.src = "file1.js";
document.getElementsByTagName("head")[0].appendChild(script);
下面是综合以后的通用方法：
复制代码 代码如下:
function loadScript(url, callback){
var script = document.createElement("script")
script.type = "text/javascript";
if (script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" || script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else { //Others
script.onload = function(){
callback();
};
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}
The loadScript() function is used as follows:
loadScript("file1.js", function(){
alert("File is loaded!");
});
现在你可以按这种动态方式加载脚本了，但是你仍然需要考虑这些文件的下载顺序。主流浏览器中只有FF和Opera保证脚本的执行顺序和你指定的下载顺序一致，其他浏览器将按照脚本文件从服务器返回的顺序来执行。虽然如此，我们仍然有替代的解决方案：
复制代码 代码如下:
loadScript("file1.js", function(){
loadScript("file2.js", function(){
loadScript("file3.js", function(){
alert("All files are loaded!");
});
});
});
这样我们就能保证脚本文件的下载顺序严格的按照file1-file2-file3的方式进行。
注明：以上内容来自：<High Performance JavaScript>by Nicholas C. Zakas
标签：
高性能,JavaScript
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“编写高性能的JavaScript 脚本的加载与执行”评论...
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/16
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
RTX 5090要首发 性能要翻倍！三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。