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. ...
随机推荐
- ELF文件之八——使用链接脚本-2个函数-data-bss-temp-call-debug信息
gcc编译选项可以设置生成调试信息, debug信息格式有stabs,coff,xcoff,dwarf. 常用的有两种格式,stab和dwarf,stab较早,dwarf较新.两种格式介绍:https ...
- 外网访问oracle 很慢
一台oracle服务器 对外网开放服务,外网连接后查询速度很慢,内网查询非常快.应该是这个cisco的防火墙有问题,查了很久 没有找到原因. 临时解决方法,在内网再建一台 跳转服务器,外网查询数据库 ...
- 自己用C语言写NXP S32K116 serial bootloader
了解更多关于bootloader 的C语言实现,请加我QQ: 1273623966 (验证信息请填 bootloader),欢迎咨询或定制bootloader(在线升级程序). 每次我有了新的EVA ...
- generator 和 co模块
// 类数组的生成器 // 类数组的生成器 function fns() { let obj = {0:1,1:2,2:3,length: 3}, [Symbol.iterator]: functio ...
- StarUML之二、StarUML初识
为什么用StarUML UML建模工具比较常见的PowerDesigner ROSE StarUML starUML-开源免费(1-2百M),PowerDesigner-精细和一体化(6-7百M),R ...
- 03.JS运算符
前言: 学习一门编程语言的基本步骤 (01)了解背景知识 (02)搭建开发环境 (03)语法规范 (04)常量和变量 (05)数据类型 (06)数据类型转换 (07)运算符7.运算符 表达式:由运 ...
- VSTO开发指南(VB2013版) 第一章 Office对象模型
完美地将visual basic和office 办公软件结合起来.来自微软公司VSTO小组的权威专家所编著. 全书共712页,内容极其全面而深入,猛一看,厚地犹如庞然大物.看完离大神就不远了哦< ...
- LeetCode 面试题18. 删除链表的节点
题目链接:https://leetcode-cn.com/problems/shan-chu-lian-biao-de-jie-dian-lcof/ 给定单向链表的头指针和一个要删除的节点的值,定义一 ...
- python命令行工具的使用——argparse
argparse是一个常用的库函数,使用它的时候我们在命令行中不仅仅可以运行python文件,更可以零时调整参数,十分方便. 首先,如果你只是希望传一丢丢数据进去,那么只看下面两行就行了 import ...
- 【Git】git使用 - 冲突conflict的解决演示
冲突的解决 (如果git使用不熟练)建议在push不了时,pull之前.在本地创建一个新的分支并commit到local,以保证本地有commit记录,万一出什么问题,可以找回代码,以免代码丢失. ( ...