不管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. eclipse the user operation is waiting for building workspace" to complete

    "the user operation is waiting for building workspace" to complete", 解决办法: 1.选择菜单栏的“P ...

  2. redis(三)redis+Keepalived主从热备秒级切换

    一 简介 安装使用centos 5.10 Master 192.168.235.135 Slave 192.168.235.152 Vip 192.168.235.200 编译环境 yum -y in ...

  3. 多模块Maven项目怎样使用javadoc插件生成文档

    需求 近期要对一个项目结构例如以下的Maven项目生成JavaDoc文档. Project                         |-- pom.xml                   ...

  4. SRM 577 Div II Level Two: EllysRoomAssignmentsDiv2

    题目来源: http://community.topcoder.com/tc?module=ProblemDetail&rd=15497&pm=12521 这个问题要注意的就是只需要直 ...

  5. 关于C++异常机制的笔记(SEH, try-catch)

    昨天晚上加班解决了一个问题,是由于无法正确的捕获到异常导致的.刚开始用try-catch,但是没法捕获到异常:后面改成SEH异常才解决.因此今天将这个问题重新梳理了一遍,关于try-catch, SE ...

  6. 巧用MySQL InnoDB引擎锁机制解决死锁问题(转)

    该文会通过一个实际例子中的死锁问题的解决过程,进一步解释innodb的行锁机制 最近,在项目开发过程中,碰到了数据库死锁问题,在解决问题的过程中,笔者对MySQL InnoDB引擎锁机制的理解逐步加深 ...

  7. mysql数据库修改数据库编码,字段编码与表编码(转) good

    最近看了一下KIGG框架,发现在用EF + MYSQL数据库时,数据出现了乱码,用工具(Navicat )查看一下表category的结构发现 KIGG 数据库的默认情况是用latin1编码的(DEF ...

  8. Mockito简介(转)

    Mockito 是目前 java 单测中使用比较流行的 mock 工具.其他还有 EasyMock,JMock,MockCreator,Mockrunner,MockMaker 及 PowerMock ...

  9. html5游戏开发--"动静"结合用地图块拼成大地图 & 初探lufyl

    一.前言   本次教程将向大家讲解如何用html5将小地图块拼成大地图,以及如何用现有的高级html5游戏开发库件lufylegend.js开发游戏.   首先让我们来了解了解如何用html5实现动画 ...

  10. android代码控制seekbar的样式

    package com.zte; import android.app.Activity; import android.graphics.Color; import android.graphics ...