script标签引入脚本的引入位置与效果
用script标签引入脚本的引入位置大致有两种情况:
1,在head中引入;
2,在body末尾引入;
浏览器由上到下解析代码,正常情况下,先解析head中的代码,在解析body中的代码;放在head中的好处是统一管理、方便维护,但是,要知道解析js代码也就是遇到script标签会阻塞加载,如果js代码文件较大,页面会出现一个明显的空白期,造成用户体验不好(事实上js会被缓存,所以这种情况造成的影响很小),一般通用类的调用可以放在head中(其中需要操作dom的可以ready后操作);而对于内部引用(在script标签中写js代码)一般会放在body中;在head中的js会在调用的时候执行,在body中的js会在页面加载时候执行。
理论上来说js标签放在html文档的任何位置都可以,规范起见,推荐放到body结束标签的末尾,包含到body标签内:
<body>
<!-- 这里是其他的HTML标签 -->
<script> // 这里是代码 </script>
</body>
这样处理的好处是无需担心因页面未完成加载,造成DOM节点获取不到,使脚本报错的问题,而且能避免因脚本运行缓慢造成页面卡死的问题。另外,Yahoo的前端优化指南里就有这一条。
参考
链接:https://www.jianshu.com/p/0c3af5731e2a
https://blog.csdn.net/tianrangdejiehuo/article/details/51818673
script标签引入脚本的引入位置与效果的更多相关文章
- [转]Script标签和脚本执行顺序
Script标签和脚本执行顺序 这里详细聊聊和script标签相关的脚本执行顺序. Script标签的默认行为 几个首要特性: script标签(不带defer或async属性)的会阻止文档渲染.相关 ...
- script标签所应放的位置
一般放置的位置:<head>标签内,<body>标签内,<body>标签后(建议放在body标签后,利于页面的优化,优化页面结构加载的速度) 1.<head& ...
- js中的script标签
在页面中用script标签引入javascript文件(<script type="text/javascript" src="js文件地址">&l ...
- script标签加载顺序(defer & async)
script 拥有的属性 async:可选,表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本.只对外部脚本文件有效. charset:可选.表示通过 src 属性指 ...
- <script>标签中的 defer 与 async区别
在html里,使用<script>标签对脚本进行外部或内部引用,<script>标签包含了两个特殊的属性:defer与async,他们的区别如下: 1.若<script& ...
- 前端之script标签注意事项
在一对script 标签中一旦有错误,其后续的代码都不会执行 一对script标签有问题,不会影响其他script标签代码的执行 当一对script标签的作用是引入外部的js文件的时候,就不要在其内部 ...
- 移除script标签引起的兼容性问题
一.应用场景: 有时候我们需要动态创建script标签实现脚本的按需加载,我们会为script标签绑定onload或者onreadystatechange事件,用于检测动态脚本是否加载并执行完毕,在事 ...
- JavaScript <script>标签的位置、延迟脚本(defer属性)与 异步脚本(async属性)
一.<script>标签的位置 传统的做法是将<script>元素放在<head>元素中,例如: <!DOCTYPE html><html > ...
- js 引入外部文件之 script 标签
在我的理解看来,html 就是一个单纯的管显示问题,js就是单纯的管动作问题,css就是单纯的管布局问题,这三个构成了一个网页 在HTML中,经常会用到引入js 文件. 引入js的方法很简单: 1. ...
随机推荐
- VFP CursorAdapter 起步一(作者:Doug Hennig 译者:fbilo)
CursorAdapter 类是 VFP 8 中最重要的新功能之一,因为它提供了一种简单易用.接口统一的访问远程数据源方式.在这个月的文章里,Dung Hennig 将向你展示 CursorAdapt ...
- VFP 的 SPT 起跳 -- 陈纯(BOE数据网络工作室)
细节描述 Visual FoxPro 的 SPT 技术快速入门 说在前面熟悉 Fox 的朋友都知道,在 VFP 里我们可以使用远程视图 (Remote View) 和 SPT(SQL Pass Thr ...
- struts2动态调用+Servlet过滤器+struts2拦截器
周末真的是懒到心慌...... 本文是在完整s2sh项目基础上添加的,不太了解s2sh项目构建的朋友可以先参考一下这几篇文章: eclipse环境下基于tomcat-7.0.82构建struts2项目 ...
- Git安装与配置,以及pycharm提交代码到github
1.下载git,安装 下载好后直接下一步到底,安装成功(选择组件页面,可以勾选上控制台窗口字体选项,如下图) 2.配置Git信息 1.打开窗口中,输入:git --version 查看已安装的git版 ...
- Foxmail for windows 客户端设置和 IMAP、POP3/SMTP 的设置
Foxmail支持微信扫码.手机验证码.账号密码三种方式新建腾讯企业邮箱. 注意:目前仅foxmail 7.2.11版本支持微信扫码和手机验证码新建腾讯企业邮箱,可以foxmail官网https:// ...
- com.google.gson json字符串的序列化与反序列化
经常做协议的时候用到json,个人习惯是定义协议文档,很少在这中场景中定义类,使用对象. 这里使用一个人物有名字,性别,有一个物品列表做个简单示例记录. 序列化 JsonObject jo=new J ...
- Android_向用户发送短信
一段代码,用的时候copy就行 记得在manifest里声明send-sms和read-sms权限 public class SendMsgActivity extends AppCompatActi ...
- 【React Native】集成声网Agora语音通讯
前言: 公司的产品是一款基于社交的内容聊天软件,需要集成语音通讯功能,在写iOS原生项目时,用到的就是Agora SDK,现在写React Native也直接采用了Agora的库. 集成iOS.And ...
- JS笔记之第一天
JavaScript:简称JS JS的原名不是JavaScript,而是LiveScript JS分为三个部分 1.ECMAScript 标准→JS的基本的语法 2.DOM——Document Ob ...
- mac本地安装全局包报错npm WARN checkPermissions
安装本地全局包时,本地报错 npm WARN checkPermissions Missing write access to /Users/xxx/.nvm/versions/node/v11.10 ...