JS 之 script标签
1.script标签
1.js代码的解析(包括下载js文件)会阻塞页面加载
2.当js文件放在头部,页面必须等所有js代码都被下载,解析和执行完成后才开始呈现页面内容(遇到body标签才呈现),对于那些需要很多js文件的页面来说,会有很大的延迟,浏览器页面空白时间, 所以尽量把全部js文件引用放在body标签内的最底部,先呈现内容,用户体验更好
2.defer延迟脚本
script标签加上defer属性,浏览器会异步地下载该文件,不会影响后续dom的渲染,如果有多个defer的script标签,则会按顺序执行所有的script;defer脚本会在文档渲染完毕后,DomContentLoad前执行
Dom文档加载步骤:
(1)解析html结构
(2)加载外部脚本和样式表文件
(3)解析并执行脚本代码
(4)构造HTML DOM模型 //DOMContentLoaded执行点
(5)加载图片等外部文件
(6)页面加载完毕 //load
3.async异步脚本
告诉浏览器异步下载async属性文件,async不保证脚本的执行顺序,先加载完先执行
4.嵌入代码与外部文件
外部文件优点:
(1)可维护性:不必触及html标记,专心编辑js
(2)可缓存: 引用同一个外部文件可被浏览器缓存,只需下载一次
(3)适应未来
JS 之 script标签的更多相关文章
- JS之script标签
1.script标签的位置 script标签可以在head标签中,也可以在body标签中 2.async属性 async的目的是不让页面等待js文件的下载和执行,从而异步加载页面中的其他内容.只支持外 ...
- 在html代码中js的script标签建议放在那里?
今天编写了一个简单的js代码,F12有错误,然后发现是<script>放的位置有问题.之前在我的印象当中,说的是这个标签放在哪里都可以,然而...并不是这样的,例如我现在练习的这个代码,写 ...
- JS删除script标签
可以试试以下方法 var deleteJs = document.getElementById('xxx'); var otherJs = document.getElementsByTagName( ...
- GZip压缩的js文件IE6下面不能包含<script>标签
IE6下面,GZip压缩的js文件,如果js中包含<script>标签,一遇到这样的标签,后面的内容居然都截断了,狂晕! 花了我一个晚上来找原因.. 需要将字符串'<script&g ...
- js中的script标签
在页面中用script标签引入javascript文件(<script type="text/javascript" src="js文件地址">&l ...
- 为什么不能在 body 标签的前面的 script 标签中定义 JS 全局变量?
<!DOCTYPE html> <!-- 为什么不能在 body 标签的前面的 script 标签中定义 JS 全局变量? 在全局环境下的代码就是在页面加载阶段从上到下一边加载一边执 ...
- js 手动插入meta标签和script标签
// 插入 meta 标签 var oMeta = document.createElement('meta'); oMeta.content = 'width=device-width, initi ...
- 在JS文件中,不需要<script>标签
在JS文件中,不需要<script>标签\
- js 引入外部文件之 script 标签
在我的理解看来,html 就是一个单纯的管显示问题,js就是单纯的管动作问题,css就是单纯的管布局问题,这三个构成了一个网页 在HTML中,经常会用到引入js 文件. 引入js的方法很简单: 1. ...
随机推荐
- javascript数组(五)
一.创建数组.数组操作 数组是指的有序集合.每个值叫做元素,每个元素,每个元素在数组中都有梳子位置编号,也就是索引.JS中数组是弱类型的,数组中可以含有不同类型的元素.数组元素甚至可以是对象或其它数组 ...
- [bzoj3522][bzoj4543][POI2014]HOTEL
题解: 比较难的一道题目 首先考虑暴力dp 我们会发现构成这种形状只有三种情况 1.三个点的lca相同 2.两个点lca相同,第三个点是lca的祖先 3.两个点lca相同,第三个点是lca祖先的子树中 ...
- 3998: [TJOI2015]弦论
题解: 每个点的size值就是这个从根-它出现的次数 如果相同只算一次就全部赋值为1就可以了 代码: #include <bits/stdc++.h> #define ll long lo ...
- mysql字符集问题汇总
1.设置mysql字符集:在my.ini中添加以下设置,没有my.ini可以将my_default.ini改成他.character-set-server=utf8[client]loose-defa ...
- JMeter上传案例2
今天自己的QQ群里有个朋友一直在问JMeter图片上传的问题 原始通过JMeter抓包如下: 参考: http://blog.csdn.net/huashao0602/article/details/ ...
- Python 携程
一.协程 1.又称微线程,纤程.英文名Coroutine.一句话说明什么是协程:协程是一种用户态的轻量级线程(相当于操作系统不知道它的存在,是用户控制的). 2.协程拥有自己的寄存器上下文和栈(代码的 ...
- Java基础总结01:JDK与JRE概述
1)JRE(Java Runtime Environment,Java运行时环境) 包括Java虚拟机(JVM Java Virtual Machine)和Java程序所需的核心类库等,如果想要运行一 ...
- 关系网络数据可视化:2. Python数据预处理
将数据中导演与演员的关系整理出来,得到导演与演员的关系数据,并统计合作次数 import numpy as np import pandas as pd import matplotlib.pyplo ...
- 008 在大数据中,关于native包的编译步骤
一.问题的由来: 二.解决问题的方法(所有的操作在root下完成): 1.前期需要的环境,下面的已经在伪分布式中配置好,不再重复 配置好jdk 配置好hadoop 2.上传还需要包 apache-ma ...
- 整合django和bootstrap框架
环境: python版本:2.7.8 django版本:1.7.1 bootstrap版本:3.3.0 首先github上面有两个开源的项目用来整合django和bootstrap. https:// ...