不管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加载的更多相关文章

  1. <script>标签的加载解析执行

    转自原文 <script>标签的加载解析执行 看了很多网上的文章,都是大同小异.总结一下.内部原理还没有搞清楚,有机会再学习. 一.<script>标签的加载解析执行顺序 ht ...

  2. JS脚本文件的位置对页面加载性能影响以及无阻塞脚本（javascript）模式

    JS的阻塞特性:当<script>出现的时候,页面必须等待脚本文件的加载.解析.执行完毕后才能继续进行页面的渲染.不管脚本文件是以内联形式还是外部引入的形式出现在<script> ...

  3. js如何使浏览器允许脚本异步加载

    js如何使浏览器允许脚本异步加载 如果脚本体积很大,下载和执行的时间就会很长,因此造成浏览器堵塞,用户会感觉到浏览器“卡死”了,没有任何响应.这显然是很不好的体验,所以浏览器允许脚本异步加载,下面就是 ...

  4. PPK谈JS笔记第一弹

    以下内容是读书笔记,再一次温习JS好书:PPK谈JS window.load＝initializePageaddEventSimple('window','load',function(){}) lo ...

  5. js——<script>标签的加载顺序

    用了很久的JavaScript,今天突然就碰见了将一个js文件放在<head></head>与<body></body>标签中,一个不可以执行,一个可以 ...

  6. ECMA Script 6_模块加载方案 ES6 Module 模块语法_import_export

    1. 模块加载方案 commonJS 背景: 历史上,JavaScript 一直没有模块(module)体系, 无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来. 其他语言都有这项功能: ...

  7. 原生JS实现AJAX、JSONP及DOM加载完成事件，并提供对应方法

    JS原生AJAX ajax:一种请求数据的方式,不需要刷新整个页面: ajax的技术核心是 XMLHttpRequest 对象: ajax 请求过程:创建 XMLHttpRequest 对象.连接服务 ...

  8. 原生JS实现AJAX、JSONP及DOM加载完成事件

    一.JS原生Ajax ajax:一种请求数据的方式,不需要刷新整个页面:ajax的技术核心是 XMLHttpRequest 对象:ajax 请求过程:创建 XMLHttpRequest 对象.连接服务 ...

  9. C#用ckplayer.js播放 MP4格式视频实现 边加载边播放

    MVC设计模式下 在View页面里面使用ckplayer.js 加载视频 ,在MP4格式视频上传之后 我发现某些视频可以边加载边播放 但是有一些又不行,找了下原因是因为视频的元数据信息在第一帧的时候就 ...

随机推荐

  1. 仿爱乐透android客户端界面实现（附工程源码）

    最近研究了爱乐透android客户端的界面,感觉它的界面布局在一般开发中具有代表性.难点在于复杂的布局实现. 界面实现主要采用了以下方式: 注意:版本支持:android2.2以上,低版本要改动源码哦 ...

  2. Android ListView两种长按弹出菜单方式

    转自:http://www.cnblogs.com/yejiurui/p/3247527.html package com.wyl.download_demo; import java.util.Ar ...

  3. IOS7修改Navigation Bar上的返回按钮文本颜色,箭头颜色以及导航栏按钮的颜色

    解决方法 1: 自从IOS7后UINavigationBar的一些属性的行为发生了变化.你可以在下图看到: 现在,如果你要修改它们的颜色,用下面的代码: 1 2 3 4 self.navigation ...

  4. 处理IIS报“由于 Web 服务器上的“ISAPI 和 CGI 限制”列表设置，无法提供您请求的页面”

    “由于 Web 服务器上的“ISAPI 和 CGI 限制”列表设置,无法提供您请求的页面” 详细错误:HTTP 错误 404.2 - Not Found. 由于 Web 服务器上的“ISAPI 和 C ...

  5. 上海投行需要一大群JAVA,C++,C#,UNIX.走过路过不要错过！过完年想换工作看过来初级资深都有 - V2EX

    上海投行需要一大群JAVA,C++,C#,UNIX.走过路过不要错过!过完年想换工作看过来初级资深都有 - V2EX 上海投行需要一大群JAVA,C++,C#,UNIX.走过路过不要错过!过完年想换工 ...

  6. windows下以指定用户访问SMB服务器进行读写

    需求:最近要开发某系统前端界面,但是该系统是部署在linux服务器上,前端是用php开发,实时调试运行需要linux下系统环境支持, 每次修改都需要手动传到服务器上,尤其是debug阶段,每修改一点就 ...

  7. Selenium Grid跨浏览器－兼容性测试

    Selenium Grid跨浏览器-兼容性测试 这里有两台机子,打算这样演示: 一台机子启动一个作为主点节的hub 和 一个作为次节点的hub(系统windows 浏览器为ie) ip为:192.16 ...

  8. python pyfits

    原链接:http://blog.sina.com.cn/s/blog_a046022d0101a48h.html,全文复制以备出错.   导入pyfits模块:import pyfits        ...

  9. Jquery学习笔记：通过层次关系获取jquery对象

    前面一篇文章,我们介绍了如何通过web标签的id , css样式值来获取jquery对象. 但这只是基本方法,不能满足所有场景的需求. 本文介绍通过dom元素之间的层次关系获取元素.具体是将各种标识符 ...

  10. set global read_only=0; 关闭只读,可以读写 set global read_only=1; 开始只读模式

    mysql> set global read_only=0; Query OK, 0 rows affected (0.00 sec) mysql> show variables like ...