关于引入 js 文件

一、说说 script 标签的几个常用属性

async 表示立即下载该 js 文件，但不妨碍页面中的其他操作（只对外部 js 文件有效）
defer 表示该 js 文件可以延迟到整个页面被解析并显示之后再执行（只对外部 js 文件有效）
src 指定要引入的 js 文件路径
type 是 language 的替代属性，表示当前脚本的类型，如 text/javascript | text/babel

二、引入 js 文件

正常引入

<script src="./js/routerList.js"></script>

省略结束标签（不符合 HTML 规范，也得不到 IE 浏览器的正确解析）

<script src="./js/routerList.js" />

注意：带有 src 属性的 script 标签里面不应该有代码，如果有，则会被忽略

三、解决跨域问题，如 jsonp 就是利用这一点

<script src="https://www.xxx.com/xxx/xxx.js"></script>

四、script 标签的位置

按照惯例放在 head 里面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/demo1.js"></script><script src="./js/demo2.js"></script><script src="./js/demo3.js"></script>
</head>
<body>...
</body>
</html>

那按照文档解析的顺序只能将这些 js 文件，加载、解析并执行完了之后，才去呈现 body 里面的内容（延迟，导致页面一片空白）

正确的做法是

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>...<script src="./js/demo1.js"></script><script src="./js/demo2.js"></script><script src="./js/demo3.js"></script>
</body>
</html>

这样，等页面全部加载完成再去加载 js 文件，页面显示空白的时间缩短了，用户体验也很好

延迟脚本 defer – 等待页面都加载完成之后再去加载 js 文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script defer="defer" src="./js/demo1.js"></script><script defer="defer" src="./js/demo2.js"></script><script defer="defer" src="./js/demo3.js"></script>
</head>
<body>...
</body>
</html>

异步脚本 async

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script async src="./js/demo1.js"></script><script async src="./js/demo2.js"></script><script async src="./js/demo3.js"></script>
</head>
<body>...
</body>
</html>

告诉浏览器立即下载 js 文件，defer 是等待页面加载完成之后再加载、执行，async 是先下载，等页面加载完成之后（load 事件之后），再执行

noscript– 看看浏览器支不支持 js

<noscript>如果你的浏览器不支持 javascript 我就会在页面出现</noscript>

—— 《javascript 高级程序设计》

关于引入 js 文件相关推荐

运行时动态引入JS文件
运行时动态引入JS文件(尚在开发环境) 1.添加方法 requireJSFiles export function requireJSFiles (target, pathArr) {return n ...
单独使用elementui_Vue在单独引入js文件中使用ElementUI的组件
Vue在单独引入js文件中使用ElementUI的组件问题场景: 我想在vue中的js文件中使用elementUI中的组件,因为我在main.js中引入了element包和它的css,并挂载到了全局 ...
JSP页面中引入js文件
1)引入的js文件出错, 检查方法:将Js的内容写在当前的页面的<script> </script>之间,看是否能够正常运行,如果不能,请核查代码 2) 如果引入的代码在当 ...
Uniapp引入json文件和引入Js文件
1.引入JSON 文件使用require // 引入json文件 let dnf = require('@/data/person.json') json文件 {"code": ...
html引入js文件
html引入js文件在开发中我们常常会用到全局变量,通过修改public里面的js文件去修改变量,问题是我们怎么在html中引入这个文件,使文件在整个项目中起作用尼? 代码 <script s ...
JSP页面如何引入JS文件
JSP页面如何引用js文件?_世俗的大尾巴也熊的博客-CSDN博客_jsp页面引入js文件 jsp中导入js文件_hhah1122的博客-CSDN博客_jsp引入js
Vue动态引入JS文件
引入前请先: npm install jquery 正式代码: //动态引入JS文件 function loadJavaScript(src, callback) {let script_list=$ ...
自己编写jQuery动态引入js文件插件 (jquery.import.dynamic.script)
这个插件主要是结合jquery或者xhr异步请求来使用的,它可以把已经引入过的js文件记录在浏览器内存中,当下次再引入相同的文件就忽略该文件的引入. 当你用$.load("dir/my-pa ...
ts文件引入js文件_如何编写一个d.ts文件的步骤详解
前言本文主要讲怎么写一个typescript的描述文件(以d.ts结尾的文件名,比如xxx.d.ts). 最近开始从js转ts了.但是要用到一些描述文件(d.ts),常用的比如jquery等都可以通 ...

关于引入 js 文件

关于引入 js 文件相关推荐

最新文章

热门文章