重操JS旧业第一弹:Script与JS加载
不管js被包装成什么样子,最终交给浏览器执行的js都是原生的,都离不开原生js的原理。
Script标签纸html中用来加载js的标签,我们知道js可以是来自外部,本地,或者内部一段代码,在这里只讨论来自外部的加载,对于一个随时进行网络数据交换的浏览器而言,网络请求必然是异步执行的,自然的js文件一般来说异步执行比较好,不容易造成UI卡顿,但是Script标签默认加载js是同步,阻塞式的,也就是说默认情况下浏览器按照从上至下,从左自右的方式解释执行脚本,对于同步请求js文件会造成js文件下载完成才真正渲染UI,这点道理非常容易理解。提高Web用户体验?
1 异步下载js文件,这里可以在script标签内部使用async,表示异步下载该文件:<script src="xxx.js" async>
2 延迟加载,这里使用defer关键字,表示整个文档html元素加载完成才开始下载js文件,但这并不意味着一定在文档load事件之前或者之后发生,<script src="xxx.js" defer>,如果有多个这样的js延迟加载他们的
顺序也不确定,所以一般来说defer使用得较少
3 ui加载完成开始加载js,这里很简单,直接将<script src="xxx.js">放到文档末尾就可以了
script也有loaded事件该事件表示js文件加载完成后触发,自然的我们可以监听这个事件做一些初始化工作
知识点:同步,异步
重操JS旧业第一弹:Script与JS加载的更多相关文章
- <script>标签的加载解析执行
转自原文 <script>标签的加载解析执行 看了很多网上的文章,都是大同小异.总结一下.内部原理还没有搞清楚,有机会再学习. 一.<script>标签的加载解析执行顺序 ht ...
- JS脚本文件的位置对页面加载性能影响以及无阻塞脚本(javascript)模式
JS的阻塞特性:当<script>出现的时候,页面必须等待脚本文件的加载.解析.执行完毕后才能继续进行页面的渲染.不管脚本文件是以内联形式还是外部引入的形式出现在<script> ...
- js如何使浏览器允许脚本异步加载
js如何使浏览器允许脚本异步加载 如果脚本体积很大,下载和执行的时间就会很长,因此造成浏览器堵塞,用户会感觉到浏览器“卡死”了,没有任何响应.这显然是很不好的体验,所以浏览器允许脚本异步加载,下面就是 ...
- PPK谈JS笔记第一弹
以下内容是读书笔记,再一次温习JS好书:PPK谈JS window.load=initializePageaddEventSimple('window','load',function(){}) lo ...
- js——<script>标签的加载顺序
用了很久的JavaScript,今天突然就碰见了将一个js文件放在<head></head>与<body></body>标签中,一个不可以执行,一个可以 ...
- ECMA Script 6_模块加载方案 ES6 Module 模块语法_import_export
1. 模块加载方案 commonJS 背景: 历史上,JavaScript 一直没有模块(module)体系, 无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来. 其他语言都有这项功能: ...
- 原生JS实现AJAX、JSONP及DOM加载完成事件,并提供对应方法
JS原生AJAX ajax:一种请求数据的方式,不需要刷新整个页面: ajax的技术核心是 XMLHttpRequest 对象: ajax 请求过程:创建 XMLHttpRequest 对象.连接服务 ...
- 原生JS实现AJAX、JSONP及DOM加载完成事件
一.JS原生Ajax ajax:一种请求数据的方式,不需要刷新整个页面:ajax的技术核心是 XMLHttpRequest 对象:ajax 请求过程:创建 XMLHttpRequest 对象.连接服务 ...
- C#用ckplayer.js播放 MP4格式视频实现 边加载边播放
MVC设计模式下 在View页面里面使用ckplayer.js 加载视频 ,在MP4格式视频上传之后 我发现某些视频可以边加载边播放 但是有一些又不行,找了下原因是因为视频的元数据信息在第一帧的时候就 ...
随机推荐
- POJ 2208 Pyramids 欧拉四面体
给出边长,直接就可以求出体积咯 关于欧拉四面体公式的推导及证明过程 2010-08-16 14:18 1,建议x,y,z直角坐标系.设A.B.C少拿点的坐标分别为(a1,b1,c1),(a2,b2,c ...
- QuartusII 中采用门级原语
QuartusII 中采用门级原语 默认的是前面第一个 为output 后面所有信号为输入 图中的工程实现的是 一个二选一多路选择器
- Android 四种启动模式 已看晕
http://blog.csdn.net/zdw890412/article/details/7386314 //有点乱 http://www.cnblogs.com/fanchangfa/arch ...
- leetcode第一刷_Maximal Rectangle
这个题比刚才那个更难. 假设没做过上一个,这个简直是无情. 先想一个笨笨的解法,如何确定一个矩形呢?找一个左上角,然后每行的看能延伸到什么位置.注意随着行数的添加,列数是仅仅能变短,不能变长. 想一下 ...
- 腾讯QQ:异地登陆也被封号,你们是怎么决策的???
此文我想放到首页,让很多其它的人看到,更期待有人能解释一下.希望管理员给开绿灯. 今天真是费解,我的手机号是青岛的.可是我在武汉工作,因为是3G的卡,全国没有漫游,打电话也没多少钱,所以就没换号. 谁 ...
- Android 属性动画 源码解析 深入了解其内部实现
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/42056859,本文出自:[张鸿洋的博客] 我参加了博客之星评选,如果你喜欢我的博 ...
- linux指令(目录类操作指令)
pwd 显示当前所在的工作目录 cd 目标目录 例如cd /boot/grub 从当前目录切换到某个目录 cd 切换到根目录 cd.. 切换到当前目录的上层目录 ls 显示当前目录下的内容 ...
- CentOS6.5+php5.3听云安装过程
听云安装过程请参考听云安装指导页面:http://doc.tingyun.com/help/html/doc/server_novice.html 根据自己的服务器系统和语言包下载对应的 安装包 安装 ...
- 一、Python-----之变量
1.变量存在的意义就是在程序中存储一些临时的数据.2.程序运行的时候回调用变量的临时数据. 变量起名规则: 变量名只能是字符.数字或下划线的任意组合 变量名的第一个字符不能是数字 以下关键字不能声明为 ...
- initialize和init区别
Objective-C很有趣的一个地方是,它非常非常像C.实际上,它就是C语言加上一些其他扩展和一个运行时间(runtime). 有了这个在每个Objective-C程序中都会起作用的附加运行时间,给 ...