不管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. Python 第十二篇:HTML基础

    一:基础知识: HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可 ...

  2. pyfits过滤数据更新文件。

    import pyfits as pf import numpy as np import matplotlib.pyplot as plt hdulist = pf.open("LE_ev ...

  3. jquery.zclip—复制剪贴板(兼容各大浏览器)

    开始前说两句 WEB开发中,要让用户复制页面中的一段代码.URL地址等信息,为了避免用户拖动鼠标再进行右键复制操作而可能出现的差错,我们可以直接在页面中放置一个复制按钮,只需要轻轻一点这个复制按钮,内 ...

  4. TCP三次握手和四次挥手具体解释

    三次握手:建立TCP须要三次握手才干建立, 先Client端发送连接请求报文,Server段接受连接后回复ACK报文,并为这次连接分配资源.Client端接收到ACK报文后也向Server段发生ACK ...

  5. 配置免安装版JAVA1.7的环境变量

    我用的是免安装版JAVA1.7,假设想获取JDK能够联系问我要. 1.開始配置环境变量,右击[我的电脑]---[属性]-----[高级]---[环境变量],如图: 2.选择[新建系统变量]--弹出&q ...

  6. AES SHA-1 SM3 MD5

    AES是美国国家标准技术研究所NIST旨在代替DES的21世纪的加密标准. 输入:128bit 的消息分组 输出:128bit 的密文分组 密钥长度及圈数 128 10 192 12 256 14 消 ...

  7. PHP - 发送短信

    1.购买服务 我购买的是在百度进行推广的API服务.按照要求进行购买就好,之后获取自己的apikey. 2.将提供的代码修改后集成到项目中: <?php /** * * * 发送短信 * * * ...

  8. SQLyog 注册码

    用户名: 随意填写 秘钥: ccbfc13e-c31d-42ce-8939-3c7e63ed5417a56ea5da-f30b-4fb1-8a05-95f346a9b20ba0fe8645-3916- ...

  9. 判断程序是否在VMWare内运行

    现在有许多用户都喜欢用虚拟机来测试他们的软件,以避免对真实机器环境造成损害.但是在虚拟机中,有些功能是受限,甚至不可能完成的,因此,需要在程序中判断虚拟机的环境,如果程序在虚拟机内运行,则就要把虚拟机 ...

  10. Spring Thread Pool 线程池的应用

    Spring and Java Thread example 扫扫关注"茶爸爸"微信公众号 坚持最初的执着,从不曾有半点懈怠,为优秀而努力,为证明自己而活. Download it ...