HTML中加载JS的几种写法区别

hkjdkl

已于 2023-08-11 16:59:15 修改

阅读量520

点赞数

分类专栏： javaScript 文章标签： javascript 前端开发语言

于 2023-08-11 16:40:22 首次发布

本文链接：https://blog.csdn.net/hkjdkl/article/details/132228051

版权

javaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在HTML中加载JS文件的方式：

有两种一种是同步加载，也称阻塞式。一种是异步加载。

不同点：同步加载显然是要在html的dom结构加载的过程中，按照顺序逐个加载元素，图片，文件等，中间有任何异常，都会影响后面的内容的加载。

异步加载：脚本会被延迟到整个页面都解析完毕再运行（相当于告诉浏览器立即下载，但延迟执行）

同步加载一：<script src="">

<html>
<head>

</head>
<body>
<script type="text/javascript" src="http://shtest-staticmelon.bbtv.cn/melon/cqyd_support_order.6d81cf1f3a47d74ab7e6.js"></script>
</body>
</html>

这个写法是静态的引入js。如果要动态呢？

同步加载+动态二：<script>函数</script>

<body>
<script>
autoProtocol();
// 该函数功能是，解析html页面请求地址的协议，html引入js时根据和该协议一致
// 默认是生成这个html页面时，给的值
function autoProtocol() {
                    var srcUrl = '${hotAreaJSEntry}';
                    var targetProtocol = window.location.protocol;
                    var sours = srcUrl.split("\://");
                    var targetUrl;
                    if (sours.length!=2) {
                        targetUrl = srcUrl;
                    } else {
                        targetUrl = targetProtocol+"//"+sours[1];
                    }
                    console.log("srcUrl="+srcUrl+"\ntargetProtocol="+targetProtocol+"\ntargetUrl="+targetUrl);
                    var newScript=document.createElement("script");
                    newScript.type="text/javascript";
                    newScript.src=targetUrl;
                   // 这里可以是body标签或者head标签
                    var head=document.getElementsByTagName("body")[0];
                    head.appendChild(newScript);
                }
</script>
</body>

js异步加载的四种方式

1、`<script>`标签的defer=“defer”属性

<script defer="defer" src="test1.js"></script>  //先执行
<script defer="defer" src="test2.js"></script>  //后执行

脚本会被延迟到整个页面都解析完毕再运行（相当于告诉浏览器立即下载，但延迟执行）
如果脚本不会改变文档的内容，可将defer属性加入到<script>标签中，以便加快处理文档的速度
会按出现顺序执行
只对外部脚本文件有效
兼容所有浏览器

`2、<script>`标签的`async="async"`属性

<script async="async" src="test1.js"></script>
<script async="async" src="test2.js"></script>

async是HTML5新增属性
需要Chrome、FireFox、IE9+浏览器支持
不会保证按出现的次序执行
只对外部脚本文件有效

3、$(document).ready()

<script>
$(document).ready(function() {
    alert("加载完成！");
});

 // 还有一种简写方式
$function{
 $"tabltr:nth-childeven".addClass"even";
//任何需要执行的js特效 
};
// 或者
 $().ready(function(){ alert("提示"); }); 
 // 或者

 $(function () { alert("提示"); }) 

</script>

需要引入jquery
兼容所有浏览器
仅只需要加载所有的DOM结构，浏览器把所有的HTML放入DOMtree之前就执行方法。包括在加载外部图片和资源之前。
可以出现多个ready()，依次执行

4、window.onload

<script>
functionn MyAutoRun(){//以下是您的函数的代码，请自行修改先！alert"函数自动执行哦！";}
window.Onload=MyAutoRun();//仅需要加这一句 SCRIPT

或者

window.onload = function (){}
</script>

onload事件会在整个页面加载完后才触发（注意是触发，不是执行）。
仅能又一个onload函数，多个只会是第一个可以，其他无效

5、body onload属性:

<html> <body οnlοad="add()"> </body> </html> <script> function add(){ // do something } </script>

被加载JS文件中的一些初始化方法的执行时机

本次我们的被引用JS中一个初始化方法，使用同步加载机制时，可以被执行

但是，使用onload加载js时，不会被执行。

这个JS的写法是

window.body.onload=function (){}

hkjdkl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML中加载JS的几种写法区别

有两种一种是同步加载，也称阻塞式。一种是异步加载。不同点：同步加载显然是要在html的dom结构加载的过程中，按照顺序逐个加载元素，图片，文件等，中间有任何异常，都会影响后面的内容的加载。异步加载：脚本会被延迟到整个页面都解析完毕再运行（相当于告诉浏览器立即下载，但延迟执行）
复制链接

扫一扫