引入其他服务的JS、和 本地的JS文件,script的属性

==============
使用其他服务器引入JS文件,
1,减轻服务器压力
2,速度快
3,可以缓存

cdnjs库,更新比较快
https://cdnjs.com/

cdn库 引入JS文件如:jquery
bootcdn : https://www.bootcdn.cn/

百度静态资源公共库,有时候打不开。

使用CDN引入JS文件的优点:
1,直接在搜索框输入:jquery

2,点击选择需要的版本,复制地址即可。

3,把该地址放到引入标签中的src中 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/
libs/jquery/3.4.1/jquery.min.js"></script>

使用CDN引入JS文件的缺点:
1,如果被引入JS文件的服务器不稳定,那么就会引入失败,导致页面无法正常显示。
解决方案如下:
-------
<!-- 在使用CDN引入时,因服务器不稳定导致无法JS文件引入失败,则引入本地服务器的JS文件即可: -->
</body>
<!-- 这里使用CDN引入jquery.js文件,仅用发布时使用,开发时比较慢 -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>
/*
开发时使用本地效率比较高
判断如果上面的cdn引入的jquery.js文件没有成功(如:服务器不稳定导致)
则引入本地的jquery.js文件。
此外,结尾的的script标签使用反斜杠进行转义: / */
window.jQuery || document.write('<script src = "js/index.js"></script>')

//也可以使用字符串拼接
// window.jQuery || document.write('<script src = "js/index.js"><' + '/script>')
</script>
</html>
============
====================================
script属性
defer:加载完脚本后并不执行,而是等整个页面加载完成之后再执行
<script defer url=''></script>

ansyc:加载完成脚本后立即执行,不用等整个页面都加载完,属于异步执行
<script async url=''></script>

-------------------

<script type="text/javascript">
document.write("我爱你"+"<br/>");
</script>
<script type="text/javascript" src="text.js"></script>

------------

text.js的内容

document.write("这是引入外部的js文件");

------------

显示:
我爱你
这是引入外部的js文件
============

defer 延迟,推迟 目前只支持ie浏览器,google chrome 不支持。

async 异步 非同步,即是多线程。加载页面的同时也加载外部引入的文件。如:js css 等文件。

<script defer="defer" type="text/javascript" src="text1.js"></script>

defer="defer" 加载完所有文档后,再加载该引入的文件。目前只支持IE浏览器,兼容性不好。

所以想要后面加载,那么就把该句代码放在</body>之前。

<script async="async" type="text/javascript" src="text2.js"></script>

async="async" 加载网页文档时,加载到该句代码时,和网页结构同时开始一起加载外部引入文件。

该属性支持所有主流浏览器。

---------------------------------

A:<script> 标签用于定义客户端脚本;

B:<style> 标签用于为 HTML 文档定义样式信息;

C:<meta> 标签的属性定义了与文档相关联的名称/值对;

D:<title> 元素可定义文档的标题;

A:src规定外部脚本文件的 URL;

B:async属性规定对脚本进行异步加载,实现JavaScript双线程加载;

C:type指示脚本的 MIME 类型;

D:defer规定是否对脚本执行进行延迟,直到页面加载为止;

原文地址:https://www.cnblogs.com/Knowledge-is-infinite/p/11341974.html